/* Tinbox Focus Mode */
/* ── Tinbox: full-viewport triage layout ── */

body.tinbox-page {
    overflow: hidden;
}

body.tinbox-page .app-layout {
    height: 100vh;
}

body.tinbox-page .app-main {
    height: calc(100vh - 56px);
    min-height: 0;
}

body.tinbox-page .app-content {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ── Tinbox: content container (banners prepend here, above the panes) ── */

.tinbox-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.tinbox-content > .setup-banner,
.tinbox-content > .setup-review-card,
.tinbox-content > .reauth-banner {
    margin: 0.5rem 1rem 0;
    flex: none;
}

.setup-banner-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    cursor: pointer;
}

.setup-banner-link:hover,
.setup-banner-link:focus-visible {
    color: var(--text-main);
}

/* ── Gallery White two-pane grid: 340px queue + reader ── */

.tinbox-panes {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

.tinbox-content.mode-list .tinbox-panes {
    grid-template-columns: minmax(0, 1fr);
}

.tinbox-content.mode-list .reader-pane {
    display: none;
}

.queue-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    gap: 0.75rem;
    padding: 1.1rem 0.9rem 0;
    background: var(--bg-body);
    border-right: 1px solid var(--line);
}

/* Desktop focus rail. Mobile keeps using the independent queue-sheet control. */
.queue-rail,
.queue-rail-hide {
    display: none;
}

.queue-head-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

@media (min-width: 769px) {
    .tinbox-content.mode-focus.queue-rail-collapsed .tinbox-panes {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .tinbox-content.mode-focus.queue-rail-collapsed .queue-pane {
        display: none;
    }

    .tinbox-content.mode-focus.queue-rail-collapsed .queue-rail {
        display: block;
        min-width: 0;
        min-height: 0;
        background: var(--bg-2);
        border-right: 1px solid var(--line);
    }

    .queue-rail-show {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        min-height: 0;
        gap: 0.85rem;
        margin: 0;
        padding: 0.65rem 0;
        border: 0;
        border-radius: 0;
        background: var(--bg-2);
        color: var(--text-muted);
        cursor: pointer;
    }

    .queue-rail-show:hover,
    .queue-rail-show:focus-visible,
    .queue-rail-hide:hover,
    .queue-rail-hide:focus-visible {
        background: var(--bg-2);
        color: var(--text-main);
    }

    .queue-rail-show:focus-visible,
    .queue-rail-hide:focus-visible {
        outline: none;
        box-shadow: var(--shadow-glow);
    }

    .queue-rail-chevron {
        color: inherit;
        font-size: 1.25rem;
        line-height: 1;
    }

    .queue-rail-label {
        writing-mode: vertical-rl;
        color: inherit;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .tinbox-content.mode-focus:not(.queue-rail-collapsed) .queue-rail-hide {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        color: var(--text-muted);
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
        flex: none;
    }
}

/* Mobile focus collapse bar — hidden on desktop; shown only ≤768px + mode-focus. */
.queue-collapse-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-2);
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-align: left;
    flex: none;
}

.queue-collapse-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

.queue-collapse-toggle:focus-visible {
    background: var(--bg-card-hover);
    color: var(--text-main);
    box-shadow: var(--shadow-glow);
}

/* All-view inbox load failure(s) — keep the collapsed bar attention-grabbing. */
.queue-collapse-toggle.error {
    color: var(--danger-color);
}

.queue-collapse-toggle.error:hover,
.queue-collapse-toggle.error:focus-visible {
    color: var(--danger-color);
}

.queue-collapse-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Passthrough wrapper so desktop layout is unchanged; mobile focus uses it as a sheet. */
.queue-sheet {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    gap: 0.75rem;
}

.tinbox-content.mode-list .queue-pane {
    border-right: none;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    background: transparent;
}

.queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    flex: none;
    flex-wrap: nowrap;
    padding: 0 0.25rem;
    min-width: 0;
}

.queue-head-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    margin-left: auto;
}

.tinbox-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tinbox-icon-btn svg {
    width: 17px;
    height: 17px;
    display: block;
}

.tinbox-unsent-open {
    position: relative;
}

.tinbox-icon-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 1px solid var(--bg-card);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    #tinbox-refresh.is-refreshing svg {
        animation: tinbox-refresh-spin 1s linear infinite;
    }
}

@keyframes tinbox-refresh-spin {
    to { transform: rotate(360deg); }
}

.tinbox-icon-btn:hover {
    color: var(--text-main);
    background: var(--bg-card-hover);
}

.tinbox-icon-btn:focus-visible {
    color: var(--text-main);
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-glow);
}

.queue-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0.2px;
    color: var(--text-main);
}

.reader-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 1.1rem 1.5rem 0;
    position: relative;
}

/* ── Tinbox: queue tabs (quiet hairline segments) ── */

.tinbox-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

body.tinbox-page .tinbox-pill {
    min-width: 0;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.55rem 0.45rem 0.65rem;
    transition: color var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    text-align: left;
    color: var(--text-faint);
    position: relative;
    cursor: pointer;
}

body.tinbox-page .tinbox-pill .metric-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.tinbox-page .tinbox-pill .metric-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── Tinbox: stage & card ── */

.tinbox-stage {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
}

@keyframes tinbox-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tinbox-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 1.5rem 1.75rem;
    transition: opacity var(--transition-fast);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tinbox-card-in 0.25s ease-out;
    box-shadow: none;
    position: relative;
}

.tinbox-card.is-loading {
    opacity: 0.5;
    pointer-events: none;
    animation: none;
}

.tinbox-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tinbox-queue-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
}

.tinbox-card h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.35;
    font-family: var(--font-subject, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif);
    color: var(--text-main);
}

.tinbox-card .preview-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.tinbox-snippet {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.tinbox-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
}

/* Quiet inline status text — not filled capsules. */
.tinbox-labels .card-label {
    display: inline;
    align-items: center;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.01em;
}

.tinbox-card-top,
.tinbox-card h3,
.tinbox-card .preview-meta,
.tinbox-snippet,
.tinbox-labels,
.tinbox-headline,
.tinbox-subline {
    flex-shrink: 0;
}

/* ── Compact 2-line mail-card header (mail page only) ──
   The email body is the hero; the header collapses to subject + status (line 1)
   and sender + chips (line 2). Onboarding keeps the classic stacked card.
   Spec: docs/superpowers/specs/2026-06-20-tinbox-compact-header-design.md */
#tinbox-card {
    padding: 1rem 1.25rem;
}

.tinbox-headline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.tinbox-headline h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Whole-header minimize: the ONE visible minimize control in the reader
   (owner ask, 2026-08-19). Pinned to the upper-right corner of the title row
   (margin-left: auto — the subject/status pair stays shrink-to-fit on the
   left), drawn as an unmistakable outlined pill with a chevron icon. The
   collapse class persists on the card across opens. */
.reader-head-toggle {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    appearance: none;
    background: var(--bg-card);
    border: 1px solid var(--rule, var(--border-focus));
    border-radius: var(--radius-pill);
    padding: 0.34rem 0.75rem;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-main);
    cursor: pointer;
}
.reader-head-toggle:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-card);
}
.reader-head-toggle:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}
.reader-head-toggle-icon {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
/* Minimized ("Show"): the chevron points down, toward the hidden header. */
.reader-head-toggle[aria-expanded="false"] .reader-head-toggle-icon {
    transform: rotate(180deg);
}
/* Minimized reader head: the fold collapses via an animated grid-rows
   transition (1fr -> 0fr) instead of display:none, so a scroll-triggered
   minimize reads as motion, never a teleport. Visibility flips only after
   the fold has closed, taking the collapsed content out of the tab and
   accessibility order without cutting the animation short. */
.reader-fold {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 300ms ease;
}

.reader-fold-inner {
    min-height: 0;
    overflow: hidden;
    visibility: visible;
    transition: visibility 0s;
}

.tinbox-card.reader-head-minimized .reader-fold {
    grid-template-rows: 0fr;
}

.tinbox-card.reader-head-minimized .reader-fold-inner {
    visibility: hidden;
    transition: visibility 0s 300ms;
}

/* Message-change resets snap without motion. */
.reader-fold.reader-fold-instant,
.reader-fold.reader-fold-instant > .reader-fold-inner {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .reader-fold,
    .reader-fold-inner {
        transition: none !important;
    }
}

#tinbox-status-tag {
    margin: 0;
    flex: 0 0 auto;
}

.tinbox-subline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.tinbox-identity-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
    flex: 0 0 auto;
}
.tinbox-more-wrap {
    position: relative;
}
.tinbox-more-wrap.hidden,
.tinbox-more-wrap[hidden],
.tinbox-more-menu.hidden,
.tinbox-more-menu[hidden] {
    display: none !important;
}
.tinbox-more-toggle {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.tinbox-more-menu {
    position: absolute;
    z-index: 4;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 10rem;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.tinbox-more-menu .sender-research-chip {
    width: 100%;
    justify-content: flex-start;
    padding: 0.4rem 0.5rem;
    border: 0;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Quiet recipients line under From (spec 2026-07-25 §3). From stays
   permanently visible above; this never replaces it. */
.tinbox-recipients {
    flex-shrink: 0;
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.tinbox-recipients.hidden,
.tinbox-recipients[hidden] {
    display: none !important;
}
.tinbox-recipients-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
}
.tinbox-recipients-summary-text {
    color: var(--text-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tinbox-recipients-toggle {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-faint, var(--text-muted));
    cursor: pointer;
    white-space: nowrap;
}
.tinbox-recipients-toggle.hidden,
.tinbox-recipients-toggle[hidden] {
    display: none !important;
}
.tinbox-recipients-toggle:hover {
    color: var(--text-main);
}
.tinbox-recipients-chevron {
    font-size: 0.65em;
    margin-left: 0.15rem;
}
.tinbox-recipients-details {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.tinbox-recipients-details.hidden,
.tinbox-recipients-details[hidden] {
    display: none !important;
}
.tinbox-recipients-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tinbox-recipients-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-faint, var(--text-muted));
    min-width: 3.5rem;
}
.tinbox-recipients-value {
    flex: 1 1 12rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

/* ANTI-PHISHING: the real sending address must stay fully visible — wrap,
   never truncate. Do not add white-space:nowrap / text-overflow here. */
.tinbox-sender {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tinbox-identity-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.tinbox-identity-name {
    font-weight: 650;
}
.tinbox-identity-address,
.tinbox-identity-age {
    color: var(--text-muted);
    font-weight: 400;
}
.tinbox-identity-age::before {
    content: "·";
    margin-right: 0.45rem;
}
.tinbox-state-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    min-height: 1.35rem;
    margin-top: 0.25rem;
}
.tinbox-state-line.hidden,
.tinbox-state-line[hidden] {
    display: none !important;
}
.tinbox-sender .tinbox-meta-text {
    font-weight: 400;
    color: var(--text-muted);
}

.tinbox-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.tinbox-body {
    margin-top: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* One-page reader (2026-08-20, owner decision): on /mail the CARD is the only
   scroller — title, catch-up/Thread Spine, and the full message body scroll
   as one continuous page (the email iframe is content-height and never an
   independent scroller, so nothing nests). The composer dock, feedback panel,
   and action bar are card siblings and stay docked. /search keeps its
   pane-level scroller (.search-reader-pane), so this is scoped to /mail's
   .reader-pane and must never apply there. */
.reader-pane .tinbox-card {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* The auto-minimize fold compensates scroll per animation frame itself;
       native scroll anchoring would adjust on top of it (double correction =
       visible stutter during the collapse). */
    overflow-anchor: none;
}

.reader-pane .tinbox-body {
    flex: 0 0 auto;
    overflow-y: visible;
}

/* Quoted-history toggle: sits under the (trimmed) message like Gmail's "…".
   Component style — unscoped so the /search reader gets it too. */
.quoted-history-toggle {
    appearance: none;
    align-self: flex-start;
    margin: 0.6rem 0 0.4rem;
    padding: 0.15rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
}
.quoted-history-toggle:hover {
    color: var(--text-main);
}
.quoted-history-toggle:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}

/* Email body is always a lit paper sheet — light document in BOTH themes. */
.tinbox-body .viewer-html-frame {
    width: 100%;
    border: none;
    /* Edge to edge, so it reads as the page rather than a card sitting on one.
       A drop shadow on a full-width sheet reads as a stuck panel, so the sheet
       is separated from the chrome above it by a single hairline instead. */
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex: 1;
    min-height: 200px;
}

.tinbox-body .viewer-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.tinbox-body .viewer-plain-only {
    flex: 1;
}

.tinbox-body .viewer-plain-only pre,
.tinbox-body .plain-text-toggle pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.65;
    color: #333330;
    background: #ffffff;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.tinbox-body .plain-text-toggle {
    padding: 0.4rem 0.6rem;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--line);
}

.tinbox-body .plain-text-toggle summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.tinbox-body-loading {
    color: var(--text-muted);
    font-size: 0.84rem;
    margin: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* In-flight reader body: spinner + label + wall-toned skeleton lines (same
   grammar as .thread-digest-skeleton) so "still loading" is unmistakable. */
.tinbox-body-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.25rem 1rem 1rem;
}
.tinbox-body-skeleton .tinbox-body-loading {
    padding: 0.75rem 0 0.25rem;
}
.tinbox-body-skel-line {
    height: 0.7rem;
    border-radius: 2px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

/* ── Tinbox: loading animation ── */

.tinbox-loader {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    animation: tinbox-fadein 0.4s ease-out;
}

@keyframes tinbox-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.imp-scene {
    display: none;
}

html[data-imp-variant="1"] .imp-scene-1,
html[data-imp-variant="4"] .imp-scene-4,
html[data-imp-variant="5"] .imp-scene-5,
html[data-imp-variant="6"] .imp-scene-6,
html[data-imp-variant="10"] .imp-scene-10,
html:not([data-imp-variant]) .imp-scene-1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Variant 1: refined sorting scene */
.tinbox-loader-scene {
  position: relative;
  width: 140px;
  height: 100px;
  --imp-loop: 2.8s;
  --imp-accent: 17, 17, 17;
  --imp-bright: 99, 99, 94;
}

[data-theme="dark"] .tinbox-loader-scene {
  --imp-accent: 242, 242, 240;
  --imp-bright: 164, 164, 158;
}

.tinbox-contact-wash,
.tinbox-envelope-shell,
.tinbox-envelope-flap,
.tinbox-envelope-seam,
.tinbox-imp,
.tinbox-imp-horn.left,
.tinbox-imp-horn.right,
.tinbox-imp-eye,
.tinbox-imp-eye::after,
.tinbox-mail {
  animation-duration: var(--imp-loop);
  animation-iteration-count: infinite;
}

.tinbox-contact-wash {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 118px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--imp-accent), 0.13) 0%,
    rgba(var(--imp-accent), 0.05) 45%,
    transparent 72%
  );
  animation-name: tinbox-contact-wash-settle;
}

@keyframes tinbox-contact-wash-settle {
  0%, 100% {
    opacity: 0.62;
    transform: translateX(-50%) scale(0.95, 0.9);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  6%, 64% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0.02, 0.72, 0.24);
  }
  79% {
    opacity: 1;
    transform: translateX(-50%) scale(1.07, 0.76);
    animation-timing-function: cubic-bezier(0.18, 0.82, 0.24, 1);
  }
  86% {
    opacity: 0.76;
    transform: translateX(-50%) scale(0.98, 1.05);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  93% {
    opacity: 0.63;
    transform: translateX(-50%) scale(0.955, 0.905);
    animation-timing-function: ease-out;
  }
}

.tinbox-plinth {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 128px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--imp-accent), 0.22) 20%,
    rgba(var(--imp-accent), 0.22) 80%,
    transparent 100%
  );
}

/* Envelope */
.tinbox-envelope-shell {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 108px;
  height: 82px;
  transform-origin: 50% 100%;
  perspective: 400px;
  transform-style: preserve-3d;
  animation-name: tinbox-envelope-shell-settle;
}

@keyframes tinbox-envelope-shell-settle {
  0%, 100% {
    transform: translateX(-50%) translateY(1px) scaleX(1.008) scaleY(0.992);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  6%, 65% {
    transform: translateX(-50%) translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0.02, 0.72, 0.24);
  }
  79% {
    transform: translateX(-50%) translateY(3px) scaleX(1.028) scaleY(0.962);
    animation-timing-function: cubic-bezier(0.18, 0.82, 0.24, 1);
  }
  86% {
    transform: translateX(-50%) translateY(-1px) scaleX(0.995) scaleY(1.012);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  93% {
    transform: translateX(-50%) translateY(1px) scaleX(1.012) scaleY(0.987);
    animation-timing-function: ease-out;
  }
}

.tinbox-envelope-back {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46px;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-2);
}

.tinbox-envelope-flap {
  position: absolute;
  left: 0;
  bottom: 46px;
  width: 108px;
  height: 36px;
  z-index: 2;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-card-3);
  animation-name: tinbox-envelope-flap-open;
}

@keyframes tinbox-envelope-flap-open {
  0%, 2.5%, 100% {
    opacity: 0.22;
    transform: rotateX(84deg) scaleY(0.96);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  6% {
    opacity: 0.55;
    transform: rotateX(60deg) scaleY(0.99);
    animation-timing-function: cubic-bezier(0.3, 0, 0.22, 1);
  }
  11% {
    opacity: 0.92;
    transform: rotateX(23deg) scaleY(1);
    animation-timing-function: cubic-bezier(0.34, 0, 0.28, 1);
  }
  15%, 64% {
    opacity: 1;
    transform: rotateX(12deg) scaleY(1);
    animation-timing-function: cubic-bezier(0.5, 0.02, 0.7, 0.28);
  }
  71% {
    opacity: 0.86;
    transform: rotateX(34deg) scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.24, 1);
  }
  80% {
    opacity: 0.22;
    transform: rotateX(84deg) scaleY(0.96);
  }
}

.tinbox-pile {
  position: absolute;
  bottom: 38px;
  width: 27px;
  height: 18px;
  z-index: 3;
}

.tinbox-pile.left { left: 2px; }
.tinbox-pile.right { right: 2px; }

.tinbox-pile span {
  position: absolute;
  bottom: 0;
  transform-origin: 50% 100%;
  border: 1px solid rgba(var(--imp-accent), 0.24);
  border-bottom: 0;
  border-radius: 1px 1px 0 0;
}

.tinbox-pile span:first-child {
  left: 0;
  width: 20px;
  height: 18px;
  transform: rotate(-4deg);
  background: var(--bg-card);
}

.tinbox-pile span:nth-child(2) {
  left: 6px;
  width: 20px;
  height: 13px;
  transform: rotate(2.5deg);
  background: var(--bg-card-3);
}

.tinbox-pile.right span:first-child {
  right: 0;
  left: auto;
  transform: rotate(4deg);
}

.tinbox-pile.right span:nth-child(2) {
  right: 6px;
  left: auto;
  transform: rotate(-2.5deg);
}

.tinbox-envelope-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46px;
  z-index: 5;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.tinbox-envelope-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      to bottom right,
      transparent calc(50% - 0.5px),
      rgba(var(--imp-bright), 0.09) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom left,
      transparent calc(50% - 0.5px),
      rgba(var(--imp-bright), 0.09) 50%,
      transparent calc(50% + 0.5px)
    );
  pointer-events: none;
}

.tinbox-envelope-body::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 10px;
  width: 24px;
  height: 7px;
  background:
    linear-gradient(
      rgba(var(--imp-bright), 0.28),
      rgba(var(--imp-bright), 0.28)
    ) 0 0 / 17px 1px no-repeat,
    linear-gradient(
      rgba(var(--imp-bright), 0.2),
      rgba(var(--imp-bright), 0.2)
    ) 0 6px / 24px 1px no-repeat;
  pointer-events: none;
}

.tinbox-envelope-seam {
  position: absolute;
  left: 50%;
  bottom: 46px;
  width: 84px;
  height: 1px;
  z-index: 8;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--imp-bright), 0.32) 18%,
    rgba(var(--imp-bright), 0.78) 50%,
    rgba(var(--imp-bright), 0.32) 82%,
    transparent 100%
  );
  animation-name: tinbox-envelope-seam-glint;
  animation-timing-function: ease-in-out;
}

@keyframes tinbox-envelope-seam-glint {
  0%, 100% {
    opacity: 0.22;
    transform: translateX(-50%) scaleY(1);
  }
  15%, 35% {
    opacity: 0.55;
    transform: translateX(-50%) scaleY(1);
  }
  38% {
    opacity: 1;
    transform: translateX(-50%) scaleY(2.5);
  }
  42%, 58% {
    opacity: 0.55;
    transform: translateX(-50%) scaleY(1);
  }
  61% {
    opacity: 1;
    transform: translateX(-50%) scaleY(2.5);
  }
  65%, 68% {
    opacity: 0.6;
    transform: translateX(-50%) scaleY(1);
  }
  80% {
    opacity: 0.36;
    transform: translateX(-50%) scaleY(1);
  }
  92% {
    opacity: 0.22;
    transform: translateX(-50%) scaleY(1);
  }
}

/* Imp */
.tinbox-imp {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 76px;
  height: 58px;
  z-index: 4;
  transform: translate(-50%, 15px);
  transform-origin: 50% 85%;
  animation-name: tinbox-imp-peek;
}

@keyframes tinbox-imp-peek {
  0%, 5%, 100% {
    transform: translate(-50%, 15px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.14, 0.86, 0.24, 1);
  }
  9% {
    transform: translate(-50%, 3px) rotate(-1deg);
    animation-timing-function: cubic-bezier(0.16, 0.82, 0.26, 1);
  }
  14% {
    transform: translate(-50%, -14px) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.42, 0.02, 0.3, 1);
  }
  18%, 25% {
    transform: translate(-50%, -10px) rotate(-7deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.34, 1);
  }
  29%, 32% {
    transform: translate(-50%, -11.5px) rotate(-8.5deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  37% {
    transform: translate(-50%, -9.5px) rotate(-2deg);
    animation-timing-function: cubic-bezier(0.36, 0, 0.32, 1);
  }
  41%, 48% {
    transform: translate(-50%, -10px) rotate(7deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.34, 1);
  }
  52%, 55% {
    transform: translate(-50%, -11.5px) rotate(8.5deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  60% {
    transform: translate(-50%, -9px) rotate(1deg);
    animation-timing-function: cubic-bezier(0.32, 0, 0.5, 1);
  }
  64% {
    transform: translate(-50%, -9px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1);
  }
  68% {
    transform: translate(-50%, -13px) rotate(-1deg);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.72, 0.16);
  }
  78%, 93% {
    transform: translate(-50%, 15px) rotate(0deg);
    animation-timing-function: cubic-bezier(0.14, 0.86, 0.24, 1);
  }
  95.5%, 98% {
    transform: translate(-50%, 11px) rotate(-6deg);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.72, 0.16);
  }
}

.tinbox-imp-horns {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tinbox-imp-horn {
  position: absolute;
  top: 2px;
  width: 17px;
  height: 16px;
  transform-origin: 50% 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(var(--imp-accent), 0.94);
}

.tinbox-imp-horn.left {
  left: 14px;
  transform: rotate(-17deg);
  animation-name: tinbox-imp-horn-left;
}

.tinbox-imp-horn.right {
  right: 14px;
  transform: rotate(17deg);
  animation-name: tinbox-imp-horn-right;
}

@keyframes tinbox-imp-horn-left {
  0%, 19% {
    transform: rotate(-17deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  24%, 32% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  36%, 100% { transform: rotate(-17deg); }
}

@keyframes tinbox-imp-horn-right {
  0% {
    transform: rotate(17deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
  }
  2.5% {
    transform: rotate(1deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1);
  }
  4.5% {
    transform: rotate(21deg);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  7%, 42% {
    transform: rotate(17deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  47%, 55% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  59%, 100% { transform: rotate(17deg); }
}

.tinbox-imp-face {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 56px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(var(--imp-accent), 0.94);
  box-shadow: var(--shadow-sm);
}

.tinbox-imp-eye {
  position: absolute;
  top: 14px;
  width: 12px;
  height: 7px;
  transform-origin: center;
  border-radius: 4px;
  background: var(--bg);
  animation-name: tinbox-imp-eye-blink;
}

.tinbox-imp-eye.left { left: 9px; }

.tinbox-imp-eye.right {
  right: 9px;
  animation-name: tinbox-imp-eye-blink-sly;
}

.tinbox-imp-eye::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 6px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--imp-accent), 1);
  animation-name: tinbox-imp-pupil-look;
}

@keyframes tinbox-imp-eye-blink {
  0%, 63%, 66.5%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  64.6% {
    opacity: 0.8;
    transform: scaleY(0.16);
  }
}

@keyframes tinbox-imp-eye-blink-sly {
  0%, 63% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  64.6% {
    opacity: 0.8;
    transform: scaleY(0.16) translateY(0);
  }
  66.5%, 93% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    animation-timing-function: cubic-bezier(0.14, 0.86, 0.24, 1);
  }
  95.5%, 98% {
    opacity: 1;
    transform: scaleY(1) translateY(-17px);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.72, 0.16);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

@keyframes tinbox-imp-pupil-look {
  0%, 12% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.1, 0, 0, 1);
  }
  15%, 33% {
    transform: translateX(-3.5px);
    animation-timing-function: cubic-bezier(0.1, 0, 0, 1);
  }
  36%, 37% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.1, 0, 0, 1);
  }
  38%, 56% {
    transform: translateX(3.5px);
    animation-timing-function: cubic-bezier(0.16, 0, 0, 1);
  }
  60%, 100% { transform: translateX(0); }
}

/* Cards */
.tinbox-mail-stage {
  position: absolute;
  top: 0;
  left: -12px;
  width: 132px;
  height: 36px;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.tinbox-mail {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 20px;
  height: 13px;
  margin-left: -10px;
  border: 1px solid rgba(var(--imp-accent), 0.26);
  border-radius: 2px;
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(var(--imp-accent), 0.14);
  will-change: transform;
}

.tinbox-mail::before,
.tinbox-mail::after {
  content: "";
  position: absolute;
  left: 3px;
  height: 1px;
  background: rgba(var(--imp-accent), 0.42);
}

.tinbox-mail::before {
  top: 4px;
  width: 7px;
}

.tinbox-mail::after {
  top: 7px;
  width: 12px;
  opacity: 0.6;
}

.tinbox-mail.one { animation-name: tinbox-mail-file-left; }
.tinbox-mail.two { animation-name: tinbox-mail-file-right; }

@keyframes tinbox-mail-file-left {
  0%, 19% {
    transform: translate(-48px, 40px) rotate(-8deg) scale(1);
    animation-timing-function: cubic-bezier(0.16, 0.72, 0.3, 1);
  }
  23% {
    transform: translate(-48px, 21px) rotate(-13deg) scale(1);
    animation-timing-function: cubic-bezier(0.26, 0.5, 0.34, 1);
  }
  27% {
    transform: translate(-48px, 4px) rotate(-4deg) scale(1.04);
    animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
  }
  29%, 32% {
    transform: translate(-48px, 2px) rotate(0deg) scale(1.06);
    animation-timing-function: cubic-bezier(0.5, 0, 0.74, 0.2);
  }
  35% {
    transform: translate(-48px, 9px) rotate(8deg) scale(1);
    animation-timing-function: cubic-bezier(0.56, 0.04, 0.8, 0.3);
  }
  39% {
    transform: translate(-48px, 40px) rotate(13deg) scale(1);
    animation-timing-function: linear;
  }
  43%, 100% {
    transform: translate(-48px, 40px) rotate(-8deg) scale(1);
  }
}

@keyframes tinbox-mail-file-right {
  0%, 42% {
    transform: translate(48px, 40px) rotate(8deg) scale(1);
    animation-timing-function: cubic-bezier(0.16, 0.72, 0.3, 1);
  }
  46% {
    transform: translate(48px, 21px) rotate(13deg) scale(1);
    animation-timing-function: cubic-bezier(0.26, 0.5, 0.34, 1);
  }
  50% {
    transform: translate(48px, 4px) rotate(4deg) scale(1.04);
    animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
  }
  52%, 55% {
    transform: translate(48px, 2px) rotate(0deg) scale(1.06);
    animation-timing-function: cubic-bezier(0.5, 0, 0.74, 0.2);
  }
  58% {
    transform: translate(48px, 9px) rotate(-8deg) scale(1);
    animation-timing-function: cubic-bezier(0.56, 0.04, 0.8, 0.3);
  }
  62% {
    transform: translate(48px, 40px) rotate(-13deg) scale(1);
    animation-timing-function: linear;
  }
  66%, 100% {
    transform: translate(48px, 40px) rotate(8deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .imp-scene-1,
  .imp-scene-1 *,
  .imp-scene-1 *::before,
  .imp-scene-1 *::after {
    animation: none !important;
  }

  .tinbox-contact-wash {
    opacity: 0.8;
    transform: translateX(-50%);
  }

  .tinbox-envelope-shell { transform: translateX(-50%); }

  .tinbox-envelope-flap {
    opacity: 1;
    transform: rotateX(12deg);
  }

  .tinbox-envelope-seam { opacity: 0.85; }
  .tinbox-imp { transform: translate(-50%, -11.5px) rotate(-8.5deg); }
  .tinbox-imp-horn.left { transform: rotate(0deg); }
  .tinbox-imp-horn.right { transform: rotate(17deg); }
  .tinbox-imp-eye { transform: scaleY(1); }
  .tinbox-imp-eye::after { transform: translateX(-3.5px); }
  .tinbox-mail { will-change: auto; }

  .tinbox-mail.one {
    transform: translate(-48px, 2px) rotate(0deg) scale(1.06);
  }

  .tinbox-mail.two {
    transform: translate(48px, 40px) rotate(8deg) scale(1);
  }
}

/* Variant 4: Read Line */
.o3-scene {
  position: relative;
  width: 140px;
  height: 114px;
  --o3-ink: 17, 17, 17;
  --o3-soft: 99, 99, 94;
  --o3-loop: 5.4s;
}
[data-theme="dark"] .o3-scene {
  --o3-ink: 242, 242, 240;
  --o3-soft: 164, 164, 158;
}

/* ── the waiting stack, drawn as paper edges ── */
.o3-stack span {
  position: absolute;
  left: 50%;
  height: 1px;
  background: rgba(var(--o3-soft), 0.30);
}
.o3-stack span:nth-child(1) { top: 94px; width: 78px; margin-left: -28px; }
.o3-stack span:nth-child(2) { top: 98px; width: 66px; margin-left: -22px; opacity: 0.6; }
.o3-stack span:nth-child(3) { top: 102px; width: 54px; margin-left: -16px; opacity: 0.35; }

/* ── the letters ── */
.o3-sheet {
  position: absolute;
  left: 50%; top: 22px;
  width: 86px; height: 68px;
  margin-left: -32px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  z-index: 1;
  animation: o3-sheet var(--o3-loop) cubic-bezier(0.35, 0.02, 0.2, 1) infinite;
  will-change: transform, opacity;
}
.o3-sheet.s2, .o3-sheet.s2 .o3-curtain, .o3-sheet.s2 .o3-curtain::before {
  animation-delay: -2.7s;
}
@keyframes o3-sheet {
  0%, 40%  { transform: translateY(18px) scale(0.985); opacity: 0.5; z-index: 1; }
  50%      { transform: translateY(0) scale(1);        opacity: 1;   z-index: 3; }
  78%      { transform: translateY(0) scale(1);        opacity: 1;   z-index: 3; }
  85%      { transform: translateY(-4px) scale(1);     opacity: 1;   z-index: 3; }
  94%      { transform: translateY(-24px) scale(0.985); opacity: 0;  z-index: 3; }
  95%      { transform: translateY(18px) scale(0.985); opacity: 0;   z-index: 1; }
  100%     { transform: translateY(18px) scale(0.985); opacity: 0.5; z-index: 1; }
}

/* ── ruled "text", drawn twice: inked underneath, faint on top ── */
.o3-lines {
  position: absolute;
  inset: 0;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.o3-lines i {
  display: block;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 6px;
  background: currentColor;
}
.o3-lines i:nth-child(1) { width: 40%; height: 2.5px; margin-bottom: 9px; }
.o3-lines i:nth-child(2) { width: 100%; }
.o3-lines i:nth-child(3) { width: 92%; }
.o3-lines i:nth-child(4) { width: 100%; }
.o3-lines i:nth-child(5) { width: 66%; }
.o3-ink   { color: rgba(var(--o3-ink), 0.46); z-index: 1; }
.o3-faint { color: rgba(var(--o3-ink), 0.13); z-index: 3; }

/* ── the curtain: same colour as the paper, so it "un-reads" what it covers ── */
.o3-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg-card);
  animation: o3-scan var(--o3-loop) cubic-bezier(0.5, 0.02, 0.42, 1) infinite;
  will-change: transform;
}
@keyframes o3-scan {
  0%, 52%   { transform: translateY(0); }
  80%       { transform: translateY(100%); }
  93%       { transform: translateY(100%); }
  94%, 100% { transform: translateY(0); }
}
/* the leading edge — the seam glint, repurposed */
.o3-curtain::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(var(--o3-soft), 0.25) 12%,
      rgba(var(--o3-ink), 0.55) 50%,
      rgba(var(--o3-soft), 0.25) 88%,
      transparent 100%);
  animation: o3-glint var(--o3-loop) linear infinite;
}
@keyframes o3-glint {
  0%, 51%   { opacity: 0; }
  55%       { opacity: 1; }
  76%       { opacity: 1; }
  80%, 100% { opacity: 0; }
}
/* a whisper of light on the just-read line */
.o3-curtain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px;
  height: 8px;
  background: linear-gradient(to top, rgba(var(--o3-ink), 0.05), transparent);
}

/* ── the imp, reading down the margin ── */
.o3-imp {
  position: absolute;
  left: 12px; top: 18px;
  width: 24px; height: 26px;
  z-index: 5;
  animation: o3-follow 2.7s cubic-bezier(0.42, 0.02, 0.32, 1) infinite;
  will-change: transform;
}
@keyframes o3-follow {
  0%, 4%    { transform: translate(0, 0); }
  60%       { transform: translate(0, 35px); }
  68%       { transform: translate(0, 35px); }
  84%       { transform: translate(-5px, 15px); }
  96%, 100% { transform: translate(0, 0); }
}
.o3-horn {
  position: absolute;
  top: 0;
  width: 9px; height: 9px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(var(--o3-ink), 0.42);
}
.o3-horn.o3-l { left: 1px;  transform: rotate(-18deg); }
.o3-horn.o3-r { right: 1px; transform: rotate(18deg); }
.o3-head {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  animation: o3-nod 2.7s ease-in-out infinite;
}
/* the "got it" nod, right as the last line is read */
@keyframes o3-nod {
  0%, 58%   { transform: rotate(0deg); }
  64%       { transform: rotate(6deg); }
  72%, 100% { transform: rotate(0deg); }
}
.o3-eyes {
  position: absolute;
  left: 0; right: 0; top: 6px;
  display: flex;
  justify-content: center;
  gap: 7px;
  animation: o3-sweep 0.78s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
/* left-to-right, then a quick carriage return */
@keyframes o3-sweep {
  0%        { transform: translateX(-1.8px); }
  72%       { transform: translateX(1.8px); }
  86%, 100% { transform: translateX(-1.8px); }
}
.o3-eye {
  width: 6px; height: 2.5px;
  border-radius: 2px;
  background: rgba(var(--o3-soft), 0.92);
  animation: o3-blink 5.9s ease-in-out infinite;
}
@keyframes o3-blink {
  0%, 42%, 45%, 100% { transform: scaleY(1); }
  43.5%              { transform: scaleY(0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .o3-sheet, .o3-curtain, .o3-curtain::before,
  .o3-imp, .o3-head, .o3-eyes, .o3-eye {
    animation: none !important;
  }
  .o3-sheet.s1 { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
  .o3-sheet.s2 { transform: translateY(18px) scale(0.985); opacity: 0.5; z-index: 1; }
  .o3-sheet.s1 .o3-curtain { transform: translateY(54%); }
  .o3-sheet.s1 .o3-curtain::before { opacity: 1; }
  .o3-sheet.s2 .o3-curtain { transform: translateY(0); }
  .o3-sheet.s2 .o3-curtain::before { opacity: 0; }
  .o3-imp  { transform: translate(0, 19px); }
  .o3-eyes { transform: translateX(-1.8px); }
}

/* Variant 5: Split Decision */
.g3-scene {
  position: relative;
  width: 204px;
  height: 118px;
  --g3-loop: 4s;
  --imp-accent: 17, 17, 17;
  --imp-bright: 99, 99, 94;
}
[data-theme="dark"] .g3-scene {
  --imp-accent: 242, 242, 240;
  --imp-bright: 164, 164, 158;
}

.g3-desk {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 18px;
  height: 1px;
  background: var(--line-strong);
  z-index: 1;
}

.g3-desk::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 1px;
  height: 7px;
  background: linear-gradient(to bottom, var(--line), transparent);
  opacity: 0.5;
}

.g3-pile {
  position: absolute;
  bottom: 20px;
  width: 32px;
  height: 26px;
  z-index: 2;
  transform-origin: 50% 100%;
}
.g3-pile.g3-left  { left: 16px;  animation: g3-catch-l var(--g3-loop) cubic-bezier(0.3, 0.8, 0.2, 1) infinite; }
.g3-pile.g3-right { right: 16px; animation: g3-catch-r var(--g3-loop) cubic-bezier(0.3, 0.8, 0.2, 1) infinite; }

@keyframes g3-catch-l {
  0%, 40%, 100% { transform: scale(1, 1) translateY(0); }
  44%           { transform: scale(1.05, 0.86) translateY(2px); }
  50%           { transform: scale(0.99, 1.04) translateY(-1px); }
  56%           { transform: scale(1, 1) translateY(0); }
}

@keyframes g3-catch-r {
  0%, 82%, 100% { transform: scale(1, 1) translateY(0); }
  86%           { transform: scale(1.05, 0.86) translateY(2px); }
  92%           { transform: scale(0.99, 1.04) translateY(-1px); }
  98%           { transform: scale(1, 1) translateY(0); }
}

.g3-sheet {
  position: absolute;
  width: 28px;
  height: 17px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.g3-sheet::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: var(--bg-card-3);
}
.g3-left .g3-a  { left: 0;  bottom: 6px; transform: rotate(-8deg); }
.g3-left .g3-b  { left: 2px; bottom: 3px; transform: rotate(4deg); }
.g3-left .g3-c  { left: 1px; bottom: 0;   transform: rotate(-2deg); }
.g3-right .g3-a { left: 2px; bottom: 3px; transform: rotate(7deg); }
.g3-right .g3-b { left: 0;  bottom: 0;   transform: rotate(-3deg); }

.g3-imp {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 56px;
  height: 44px;
  transform: translateX(-50%);
  z-index: 3;
  animation: g3-shove var(--g3-loop) cubic-bezier(0.22, 0.8, 0.2, 1) infinite;
}

@keyframes g3-shove {
  0%, 36%   { transform: translateX(-50%) translateY(0); }
  42%       { transform: translateX(calc(-50% - 10px)) translateY(1px); }
  48%, 78%  { transform: translateX(-50%) translateY(0); }
  84%       { transform: translateX(calc(-50% + 10px)) translateY(1px); }
  90%, 100% { transform: translateX(-50%) translateY(0); }
}

.g3-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 44px;
  transform-origin: 50% 100%;
  animation: g3-head var(--g3-loop) cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

@keyframes g3-head {
  0%, 6%    { transform: rotate(0deg); }
  10%, 16%  { transform: rotate(-10deg); }
  20%, 26%  { transform: rotate(10deg); }
  30%, 36%  { transform: rotate(-8deg); }
  42%       { transform: rotate(-12deg); }
  50%, 56%  { transform: rotate(0deg); }
  60%, 66%  { transform: rotate(10deg); }
  70%, 74%  { transform: rotate(-8deg); }
  76%, 80%  { transform: rotate(11deg); }
  86%       { transform: rotate(12deg); }
  94%, 100% { transform: rotate(0deg); }
}

.g3-horn {
  position: absolute;
  top: 2px;
  width: 13px;
  height: 12px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(var(--imp-accent), 0.55);
  border: 1px solid rgba(var(--imp-bright), 0.35);
}
.g3-horn.g3-left  { left: 10px;  transform: rotate(-20deg); }
.g3-horn.g3-right { right: 10px; transform: rotate(20deg); }

.g3-face {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 2px;
  /* --bg-card-3 keeps the face a step apart from the --bg-card letter held
     in front of it, so the two don't merge into one blob in dark theme. */
  background: var(--bg-card-3);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.g3-face::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 20px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(var(--imp-bright), 0.22);
  animation: g3-brow var(--g3-loop) ease-in-out infinite;
}

@keyframes g3-brow {
  0%, 28%, 100% { transform: translateX(-50%) translateY(0); }
  30%, 38%      { transform: translateX(-50%) translateY(2px); }
  56%, 72%      { transform: translateX(-50%) translateY(0); }
  74%, 80%      { transform: translateX(-50%) translateY(3px); }
}

.g3-gaze {
  position: absolute;
  inset: 0;
  animation: g3-look var(--g3-loop) cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

@keyframes g3-look {
  0%, 6%    { transform: translate(0, 1px); }
  10%, 16%  { transform: translate(-4px, 0); }
  20%, 26%  { transform: translate(4px, 0); }
  30%, 38%  { transform: translate(-3px, 1px); }
  44%, 50%  { transform: translate(0, -2px); }
  54%, 58%  { transform: translate(0, 1px); }
  60%, 66%  { transform: translate(4px, 0); }
  70%, 74%  { transform: translate(-4px, 0); }
  76%, 82%  { transform: translate(4px, 1px); }
  90%, 94%  { transform: translate(0, -2px); }
  98%, 100% { transform: translate(0, 1px); }
}

.g3-eye {
  position: absolute;
  top: 14px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--imp-bright), 0.94);
  transform-origin: center;
  animation: g3-blink var(--g3-loop) ease-in-out infinite;
}
.g3-eye.g3-left  { left: 11px; }
.g3-eye.g3-right { right: 11px; }

.g3-eye::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  border: 1px solid rgba(var(--imp-bright), 0.42);
}

@keyframes g3-blink {
  0%, 36%, 38%, 52%, 54%, 80%, 82%, 100% { transform: scaleY(1); opacity: 1; }
  37%, 53%, 81%                          { transform: scaleY(0.18); opacity: 0.7; }
}

.g3-mail {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 26px;
  height: 16px;
  margin-left: -13px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  z-index: 4;
  animation: g3-sort var(--g3-loop) cubic-bezier(0.22, 0.78, 0.18, 1) infinite;
}

.g3-mail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: var(--bg-card-3);
  border-bottom: 1px solid var(--line);
}

.g3-mail::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px; bottom: 4px;
  height: 1px;
  background: var(--line);
}

@keyframes g3-sort {
  0%, 28%   { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
  32%       { transform: translate(0, -2px) rotate(2deg); opacity: 1; }
  36%       { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
  42%       { transform: translate(-58px, 1px) rotate(-12deg); opacity: 1; }
  46%       { transform: translate(-68px, 1px) rotate(-8deg); opacity: 1; }
  49%       { transform: translate(-68px, 1px) rotate(-8deg); opacity: 0; }
  50%       { transform: translate(0, -28px) rotate(6deg); opacity: 0; }
  56%       { transform: translate(0, -8px) rotate(-2deg); opacity: 1; }
  62%, 70%  { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
  74%       { transform: translate(0, -2px) rotate(3deg); opacity: 1; }
  80%       { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
  86%       { transform: translate(58px, 1px) rotate(12deg); opacity: 1; }
  90%       { transform: translate(68px, 1px) rotate(8deg); opacity: 1; }
  93%       { transform: translate(68px, 1px) rotate(8deg); opacity: 0; }
  94%       { transform: translate(0, -28px) rotate(6deg); opacity: 0; }
  100%      { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .g3-pile, .g3-imp, .g3-head, .g3-face::before, .g3-gaze,
  .g3-eye, .g3-mail {
    animation: none !important;
  }
  .g3-imp  { transform: translateX(-50%); }
  .g3-head { transform: rotate(-8deg); }
  .g3-gaze { transform: translate(-3px, 1px); }
  .g3-mail { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
  .g3-pile.g3-left,
  .g3-pile.g3-right { transform: none; }
}

/* Variant 6: Almost */
.g2-scene {
  position: relative;
  width: 168px;
  height: 112px;
  --g2-loop: 4.4s;
  --imp-accent: 17, 17, 17;
  --imp-bright: 99, 99, 94;
}
[data-theme="dark"] .g2-scene {
  --imp-accent: 242, 242, 240;
  --imp-bright: 164, 164, 158;
}

.g2-shell {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 108px;
  height: 78px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  perspective: 420px;
  transform-style: preserve-3d;
  animation: g2-gulp var(--g2-loop) cubic-bezier(0.3, 0.7, 0.2, 1) infinite;
}

@keyframes g2-gulp {
  0%, 66%, 100% { transform: translateX(-50%) scale(1, 1); }
  70%           { transform: translateX(-50%) scale(1.07, 0.86); }
  76%           { transform: translateX(-50%) scale(0.97, 1.05); }
  84%           { transform: translateX(-50%) scale(1, 1); }
}

.g2-back {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  border-radius: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  z-index: 1;
}

.g2-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  z-index: 4;
}

.g2-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(var(--imp-bright), 0.13) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom left,  transparent calc(50% - 0.5px), rgba(var(--imp-bright), 0.13) 50%, transparent calc(50% + 0.5px));
  pointer-events: none;
}

.g2-flap {
  position: absolute;
  left: 0;
  bottom: 48px;
  width: 108px;
  height: 30px;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  background: var(--bg-card-3);
  border-bottom: 1px solid var(--line);
  z-index: 5;
  animation: g2-flap var(--g2-loop) cubic-bezier(0.32, 0.02, 0.2, 1) infinite;
}

@keyframes g2-flap {
  0%, 64%, 100% { transform: rotateX(62deg); }
  70%, 78%      { transform: rotateX(18deg); }
  86%           { transform: rotateX(66deg); }
}

.g2-imp {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 58px;
  height: 46px;
  transform: translateX(-50%);
  z-index: 3;
  animation: g2-peek var(--g2-loop) cubic-bezier(0.36, 0.04, 0.18, 1) infinite;
}

@keyframes g2-peek {
  0%, 14%   { transform: translate(-50%, -22px); }
  18%       { transform: translate(-42%, -28px); }
  24%       { transform: translate(-60%, -14px); }
  32%, 44%  { transform: translate(-50%, -8px); }
  52%, 60%  { transform: translate(-50%, -22px); }
  66%       { transform: translate(-40%, -28px); }
  70%, 78%  { transform: translate(-50%, 16px); }
  86%, 100% { transform: translate(-50%, -22px); }
}

.g2-horns {
  position: absolute;
  inset: 0;
  transform-origin: 50% 80%;
  animation: g2-horn-mood var(--g2-loop) ease-in-out infinite;
}

@keyframes g2-horn-mood {
  0%, 20%, 100% { transform: rotate(0deg) translateY(0); }
  28%, 42%      { transform: rotate(8deg) translateY(3px); }
  54%, 64%      { transform: rotate(-2deg) translateY(0); }
}

.g2-horn {
  position: absolute;
  top: 2px;
  width: 13px;
  height: 12px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(var(--imp-accent), 0.55);
  border: 1px solid rgba(var(--imp-bright), 0.35);
}
.g2-horn.g2-left  { left: 10px;  transform: rotate(-20deg); }
.g2-horn.g2-right { right: 10px; transform: rotate(20deg); }

.g2-face {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 50px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.g2-gaze {
  position: absolute;
  inset: 0;
  animation: g2-look var(--g2-loop) cubic-bezier(0.42, 0, 0.18, 1) infinite;
}

@keyframes g2-look {
  0%, 6%    { transform: translate(4px, 0); }
  12%, 18%  { transform: translate(1px, 0); }
  24%, 34%  { transform: translate(-5px, 0); }
  40%, 48%  { transform: translate(0, 2px); }
  54%, 62%  { transform: translate(4px, 0); }
  66%       { transform: translate(2px, 0); }
  80%, 88%  { transform: translate(0, 0); }
  94%, 100% { transform: translate(4px, 0); }
}

.g2-eye {
  position: absolute;
  top: 13px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--imp-bright), 0.94);
  transform-origin: center;
  animation: g2-eye-act var(--g2-loop) ease-in-out infinite;
}
.g2-eye.g2-left  { left: 12px; }
.g2-eye.g2-right { right: 12px; }

.g2-eye::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  border: 1px solid rgba(var(--imp-bright), 0.42);
}

@keyframes g2-eye-act {
  0%, 16%, 100% { transform: scale(1, 1); opacity: 1; }
  18%           { transform: scale(1, 0.18); opacity: 0.7; }
  24%, 36%      { transform: scale(1.18, 1.45); opacity: 1; }
  44%, 50%      { transform: scale(1, 0.85); opacity: 0.9; }
  56%, 64%      { transform: scale(1, 1); opacity: 1; }
  82%           { transform: scale(1, 0.2); opacity: 0.7; }
  86%           { transform: scale(1, 0.7); opacity: 1; }
}

.g2-arm {
  position: absolute;
  left: 78px;
  bottom: 56px;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--imp-bright), 0.72);
  transform-origin: 0 50%;
  z-index: 6;
  animation: g2-swipe var(--g2-loop) cubic-bezier(0.18, 0.78, 0.22, 1) infinite;
}

.g2-arm::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(var(--imp-accent), 0.45);
  border: 1px solid rgba(var(--imp-bright), 0.35);
}

@keyframes g2-swipe {
  0%, 14%   { transform: scaleX(0.12) rotate(8deg); opacity: 0; }
  17%       { transform: scaleX(1) rotate(-8deg); opacity: 1; }
  22%       { transform: scaleX(0.15) rotate(10deg); opacity: 0; }
  23%, 60%  { transform: scaleX(0.12) rotate(8deg); opacity: 0; }
  64%       { transform: scaleX(0.3) rotate(4deg); opacity: 1; }
  67%       { transform: scaleX(1) rotate(-6deg); opacity: 1; }
  72%       { transform: scaleX(0.28) rotate(8deg); opacity: 0.7; }
  76%, 100% { transform: scaleX(0.12) rotate(8deg); opacity: 0; }
}

.g2-mail {
  position: absolute;
  top: 30px;
  left: 130px;
  width: 26px;
  height: 16px;
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  z-index: 7;
  animation: g2-pass var(--g2-loop) cubic-bezier(0.36, 0.02, 0.2, 1) infinite;
}

.g2-mail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: var(--bg-card-3);
  border-bottom: 1px solid var(--line);
}

@keyframes g2-pass {
  0%        { transform: translate(0, 0) rotate(8deg); opacity: 1; }
  14%       { transform: translate(-22px, 1px) rotate(4deg); opacity: 1; }
  20%       { transform: translate(-62px, 0) rotate(-2deg); opacity: 1; }
  30%       { transform: translate(-140px, -4px) rotate(-10deg); opacity: 0; }
  32%       { transform: translate(6px, 0) rotate(8deg); opacity: 0; }
  50%       { transform: translate(6px, 0) rotate(8deg); opacity: 0; }
  54%       { transform: translate(0, 0) rotate(8deg); opacity: 1; }
  64%       { transform: translate(-44px, 1px) rotate(3deg); opacity: 1; }
  69%       { transform: translate(-50px, 12px) rotate(-14deg); opacity: 1; }
  74%       { transform: translate(-52px, 30px) rotate(-22deg) scale(0.65); opacity: 0; }
  86%       { transform: translate(8px, 0) rotate(8deg); opacity: 0; }
  92%, 100% { transform: translate(0, 0) rotate(8deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .g2-shell, .g2-flap, .g2-imp, .g2-horns, .g2-gaze,
  .g2-eye, .g2-arm, .g2-mail {
    animation: none !important;
  }
  .g2-shell { transform: translateX(-50%) scale(1, 1); }
  .g2-flap  { transform: rotateX(62deg); }
  .g2-imp   { transform: translate(-50%, -22px); }
  .g2-horns { transform: none; }
  .g2-gaze  { transform: translate(4px, 0); }
  .g2-arm   { transform: scaleX(0.12) rotate(8deg); opacity: 0; }
  .g2-mail  { transform: translate(0, 0) rotate(8deg); opacity: 1; }
}

/* Variant 10: Pigeonhole Lift */
.c3-scene {
  position: relative;
  width: 212px;
  height: 142px;
  overflow: hidden;
  --imp-loop: 5.8s;
  --imp-accent: 17, 17, 17;
  --imp-bright: 99, 99, 94;
}
[data-theme="dark"] .c3-scene {
  --imp-accent: 242, 242, 240;
  --imp-bright: 164, 164, 158;
}
.c3-cabinet {
  position: absolute;
  left: 101px;
  top: 8px;
  width: 106px;
  height: 126px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
}
.c3-slot {
  position: absolute;
  left: 12px;
  width: 80px;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-card);
}
.c3-slot::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 2px;
  background: rgba(var(--imp-bright), .22);
}
.c3-slot::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-2);
}
.c3-slot-a { top: 11px; }
.c3-slot-b { top: 48px; }
.c3-slot-c { top: 85px; }
.c3-filed {
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 36px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-card-3);
  transform: rotate(-2deg);
}
.c3-filed-b { right: 10px; transform: rotate(2deg); }
.c3-rail {
  position: absolute;
  left: 78px;
  top: 9px;
  width: 4px;
  height: 124px;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.c3-rail::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 4px;
  width: 8px;
  height: 1px;
  background: var(--line-strong);
  box-shadow: 0 113px 0 var(--line-strong);
}
.c3-platform {
  position: absolute;
  left: 64px;
  top: 105px;
  width: 35px;
  height: 25px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  z-index: 4;
  animation: c3-lift var(--imp-loop) cubic-bezier(.45,0,.2,1) infinite;
}
.c3-platform::after {
  content: "";
  position: absolute;
  left: -5px; right: -5px; bottom: -4px;
  height: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-card-3);
}
.c3-imp {
  position: absolute;
  left: 5px;
  top: -20px;
  width: 25px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-card);
}
.c3-horn {
  position: absolute;
  top: -7px;
  width: 9px;
  height: 8px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: rgba(var(--imp-accent), .55);
}
.c3-horn-a { left: 1px; transform: rotate(-15deg); }
.c3-horn-b { right: 1px; transform: rotate(15deg); }
.c3-eye {
  position: absolute;
  top: 10px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--imp-bright), .94);
  animation: c3-glance var(--imp-loop) ease-in-out infinite;
}
.c3-eye-a { left: 4px; }
.c3-eye-b { right: 4px; }
.c3-pusher {
  position: absolute;
  left: 25px;
  top: 8px;
  width: 50px;
  height: 5px;
  border-radius: 2px;
  background: rgba(var(--imp-accent), .58);
  transform-origin: left center;
  animation: c3-push var(--imp-loop) ease-in-out infinite;
}
.c3-pusher::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: rgba(var(--imp-accent), .58);
}
.c3-feeder {
  position: absolute;
  left: 3px;
  top: 105px;
  width: 60px;
  height: 27px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-2);
}
.c3-feeder::before,
.c3-feeder::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 34px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-card-3);
}
.c3-feeder::before { top: -5px; transform: rotate(-3deg); }
.c3-feeder::after { top: -9px; transform: rotate(2deg); }
.c3-mail {
  position: absolute;
  left: 23px;
  top: 103px;
  width: 36px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  animation: c3-file-mail var(--imp-loop) cubic-bezier(.45,0,.2,1) infinite;
}
.c3-mail::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 5%, 50% 63%, 0 5%);
  background: rgba(var(--imp-bright), .24);
}
.c3-marker {
  position: absolute;
  left: 88px;
  top: 61px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--imp-bright), .55);
  animation: c3-marker var(--imp-loop) ease-in-out infinite;
}

@keyframes c3-lift {
  0%, 20%, 84%, 100% { transform: translateY(0); }
  36%, 67% { transform: translateY(-59px); }
}
@keyframes c3-file-mail {
  0%, 100% { opacity: 1; transform: translate(0, 0); }
  14% { opacity: 1; transform: translate(40px, 0); }
  20% { opacity: 1; transform: translate(40px, 0); }
  36% { opacity: 1; transform: translate(40px, -59px); }
  50% { opacity: 1; transform: translate(96px, -59px); }
  58%, 83% { opacity: 0; transform: translate(106px, -59px); }
  84% { opacity: 0; transform: translate(0, 0); }
}
@keyframes c3-push {
  0%, 39%, 67%, 100% { transform: scaleX(.08); opacity: .28; }
  49%, 57% { transform: scaleX(1); opacity: .7; }
}
@keyframes c3-glance {
  0%, 20%, 84%, 100% { transform: translateX(-1px) scaleY(1); }
  36%, 49% { transform: translateX(1px) scaleY(1); }
  50% { transform: translateX(1px) scaleY(.2); }
  57%, 67% { transform: translateX(2px) scaleY(1); }
}
@keyframes c3-marker {
  0%, 30%, 73%, 100% { opacity: .18; transform: scale(.7); }
  36%, 67% { opacity: .82; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .c3-platform, .c3-mail, .c3-pusher, .c3-eye, .c3-marker { animation: none !important; }
  .c3-platform { transform: translateY(-59px); }
  .c3-mail { opacity: 1; transform: translate(48px, -59px); }
  .c3-pusher { opacity: .7; transform: scaleX(.34); }
  .c3-eye { transform: translateX(2px); }
  .c3-marker { opacity: .82; transform: scale(1); }
}

/* Loading text with animated dots */
.tinbox-loader-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.4;
    max-width: 260px;
}

.tinbox-dots span {
    animation: tinbox-dot 1.4s ease-in-out infinite;
    opacity: 0;
    display: inline-block;
}

.tinbox-dots span:nth-child(1) { animation-delay: 0s; }
.tinbox-dots span:nth-child(2) { animation-delay: 0.2s; }
.tinbox-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes tinbox-dot {
    0%, 60%, 100% { opacity: 0; }
    30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tinbox-dots span {
        animation: none !important;
    }
}

/* ── Cold outreach room: Clear pile + Sweep + Earlier pitches (in-stack chrome only) ── */

.tinbox-cold-clear,
.tinbox-cold-sweep {
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
}

.cold-earlier-link,
.cold-auto-clear-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: 0.85;
}

.cold-auto-clear-link {
    width: 100%;
    text-align: left;
    margin-top: 0.15rem;
}

.cold-earlier-link:hover,
.cold-auto-clear-link:hover {
    color: var(--text-main);
    opacity: 1;
}

.cold-earlier-link:focus-visible,
.cold-auto-clear-link:focus-visible {
    outline: 2px solid var(--accent, #111111);
    outline-offset: 2px;
    border-radius: 2px;
}

.cold-auto-clear-link[aria-pressed="true"] {
    color: var(--text-secondary, var(--text-main));
    opacity: 1;
}

/* ── Tinbox: empty state ── */

.tinbox-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 0.75rem;
}

.tinbox-empty svg {
    flex-shrink: 0;
}

.tinbox-empty p {
    font-size: 0.875rem;
    margin: 0;
}

.tinbox-empty .tinbox-recent-work,
.tinbox-list-empty .tinbox-recent-work {
    color: var(--text-faint);
    font-size: 0.75rem;
    margin: 0;
    text-align: center;
}

.tinbox-recent-work a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Snoozed pile room chrome ("Coming back") — same doorway grammar as
   cold-outreach-entry / setup-hold-entry: back control + room title. */
.snoozed-pile-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}
.snoozed-pile-entry[hidden] {
    display: none;
}
.snoozed-pile-title {
    font-family: var(--font-subject, ui-serif, "New York", "Iowan Old Style", Georgia, serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
}
.tinbox-list-row-actions .snoozed-bring-back {
    font-size: 0.8rem;
    padding: 2px 8px;
    color: var(--accent, #111111);
    border-color: var(--line);
}

/* Queue-done option cards (triage empty, including the setup-time Set aside doorway).
   Match .tinbox-list-row affordances: wall typography, hairline separators. */
.tinbox-empty-options {
    width: min(100%, 26rem);
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.tinbox-empty-options > .pattern-card {
    margin: 0.75rem 0 0;
}

.tinbox-empty-options.hidden {
    display: none;
}

.tinbox-queue-done-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0.65rem;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.tinbox-queue-done-option:first-child {
    border-top: 1px solid var(--line);
}

.tinbox-queue-done-option:hover {
    background: var(--bg-2);
}

.tinbox-queue-done-option:focus-visible {
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

.tinbox-queue-done-option-title {
    font-family: var(--font-subject, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.3;
}

.tinbox-queue-done-option-body {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.45;
}

.tinbox-wall-more,
.tinbox-wall-filed-line {
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.tinbox-wall-filed-line {
    margin-top: 0.2rem;
}

.tinbox-wall-more:hover,
.tinbox-wall-filed-line:hover {
    color: var(--text-main);
}

.first-contact-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    flex-wrap: wrap;
}

.first-contact-entry[hidden] {
    display: none;
}

.tinbox-first-contact-header {
    border-bottom: 1px solid var(--line);
    padding: 0.7rem;
}

.tinbox-first-contact-header-title,
.tinbox-first-contact-inline h3 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-subject, ui-serif, "New York", "Iowan Old Style", Georgia, serif);
    font-size: 0.9rem;
    font-weight: 500;
}

.tinbox-first-contact-helper {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.tinbox-first-contact-inline {
    padding: 0.75rem 0.65rem 0.35rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.tinbox-first-contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.tinbox-first-contact-inline .tinbox-first-contact-row {
    padding-right: 0;
    padding-left: 0;
}

.tinbox-first-contact-row.has-mailbox {
    grid-template-columns: 0.55rem minmax(0, 1fr) auto;
}

.tinbox-first-contact-mailbox-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.tinbox-first-contact-content {
    min-width: 0;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.tinbox-first-contact-content:hover {
    background: var(--bg-2);
}

.tinbox-first-contact-content:focus-visible {
    background: var(--bg-2);
    box-shadow: var(--shadow-glow);
}

.tinbox-first-contact-sender {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.tinbox-first-contact-sender strong,
.tinbox-first-contact-address,
.tinbox-first-contact-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-first-contact-address {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.tinbox-first-contact-subject {
    margin-top: 0.15rem;
    color: var(--text-main);
    font-family: var(--font-subject, ui-serif, "New York", "Iowan Old Style", Georgia, serif);
    font-size: 0.86rem;
}

.tinbox-first-contact-actions {
    display: flex;
    gap: 0.4rem;
}

.tinbox-first-contact-actions .first-contact-action {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.tinbox-first-contact-reader-actions {
    margin-left: auto;
}

@media (max-width: 620px) {
    .tinbox-first-contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .tinbox-first-contact-row.has-mailbox {
        grid-template-columns: 0.55rem minmax(0, 1fr);
    }

    .tinbox-first-contact-row.has-mailbox .tinbox-first-contact-actions {
        grid-column: 2;
    }

    .tinbox-first-contact-actions {
        justify-content: flex-start;
    }
}

/* Set aside warning card: stranded setup mail is a state to fix, not a
   feature to discover — amber accent + inline Archive all / Review. */
.tinbox-setup-hold-warning {
    cursor: default;
    border-left: 3px solid var(--warning);
    background: rgba(var(--warning-rgb), 0.07);
    padding-left: 0.75rem;
}

.tinbox-setup-hold-warning:hover {
    background: rgba(var(--warning-rgb), 0.11);
}

.tinbox-setup-hold-warning .tinbox-queue-done-option-title {
    color: var(--warning);
}

.tinbox-setup-hold-warning-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.tinbox-setup-hold-warning-actions button {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-1);
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tinbox-setup-hold-warning-actions button:hover {
    background: var(--bg-2);
}

.tinbox-setup-hold-warning-actions .tinbox-setup-hold-warning-archive {
    border-color: var(--warning);
    color: var(--warning);
}

.tinbox-setup-hold-warning-actions .tinbox-setup-hold-warning-archive:hover {
    background: rgba(var(--warning-rgb), 0.12);
}

/* List-mode empty with the same option cards. */
.tinbox-list-empty.tinbox-queue-done {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1.5rem 1rem 2rem;
    text-align: left;
}

.tinbox-list-empty .tinbox-queue-done-headline {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tinbox-list-empty .tinbox-empty-options {
    width: 100%;
    margin-top: 0.25rem;
}

/* ── Tinbox: action buttons ── */

.tinbox-primary-actions,
.tinbox-feedback,
.tinbox-tools,
.tinbox-composer {
    flex-shrink: 0;
}

/* "Why this email" uses plain text with no tinted box. In-place <mark> colors
   stay fixed (iframe + .imp-hl). */
/* The explain strip used to
   stack seven labelled blocks (eyebrow, summary, reason, policy quote, a
   bulleted ask list, a colour legend and a provenance row) and, because it was
   never capped to the reading column, it rendered nearly twice as wide as the
   message it was explaining. Everything past the two lines is behind Details. */
.tinbox-why-callout {
    flex-shrink: 0;
    margin: 0.3rem 0 0;
    padding: 0 0 0.5rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.tinbox-why-callout.hidden { display: none; }
/* One composed answer, shown only when the reader asks for Why details. */
.why-strip-line {
    margin: 0;
    overflow: visible;
    white-space: normal;
}
.why-strip-sum { color: var(--text-main); }
.why-strip-teach {
    appearance: none;
    margin: 0.4rem 0 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}
.why-strip-cap {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint, var(--text-muted));
    margin-right: 0.45rem;
}
/* Visible enough to separate two asks. At 0.4 opacity they read as a run-on. */
.why-strip-sep { opacity: 0.75; padding: 0 0.5rem; }
.why-strip-more-count { opacity: 0.6; margin-left: 0.35rem; }
.why-callout-loading { color: var(--text-muted); font-style: italic; }
/* Details: the audit answers. Hidden by default via the [hidden] attribute. */
.why-strip-more {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
    /* Readable. Content someone deliberately opened should not be the smallest,
       faintest text on the page. */
    font-size: 0.82rem;
    line-height: 1.5;
}
.why-strip-detail { margin: 0 0 0.3rem; }
.why-strip-detail:last-child { margin-bottom: 0; }
.why-strip-policy { font-style: italic; }
.why-strip-rest {
    list-style: disc;
    margin: 0 0 0.3rem;
    padding-left: 1.15rem;
}
/* "How it got sorted" — the consolidated Explain info (decision mode + confidence). */
.why-callout-classification {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}
/* Sentence case. Inside Details it is a phrase in a paragraph, not a section
   heading, and tracked caps at 10.5px was the loudest thing in the quietest
   part of the reader. */
.why-callout-classification-label {
    font-weight: 600;
    color: var(--text-muted);
}
.decision-provenance {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.08rem 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.3;
}
.decision-provenance--safety { color: var(--success-color); }
/* Quiet text toggle, not a filled capsule. */
.why-callout-chip,
.money-callout-chip,
.sender-research-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    padding: 0 0 1px;
    cursor: pointer;
}
.why-callout-chip:hover,
.money-callout-chip:hover,
.sender-research-chip:hover { color: var(--text-main); }
.why-callout-chip.active { color: var(--text-main); }
/* Money chip is a sentence, not a tracked-caps label — keep letter-spacing quieter. */
.money-callout-chip {
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 500;
}

.sender-research-card {
    flex-shrink: 0;
    max-height: min(42vh, 420px);
    overflow-y: auto;
    margin: 0.55rem 0 0.35rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.5;
}
.sender-research-card.hidden { display: none; }
.sender-research-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.sender-research-verdict { font-weight: 600; }
.sender-research-calibration,
.sender-research-caveat,
.sender-research-meta { color: var(--text-muted); }
.sender-research-dismiss {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.1rem;
    cursor: pointer;
}
.sender-research-dismiss:hover { color: var(--text-main); }
.sender-research-headline {
    margin: 0.35rem 0 0.7rem;
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.35;
}
.sender-research-section { margin-top: 0.7rem; }
.sender-research-section p { margin: 0.2rem 0 0; }
.sender-research-eyebrow,
.sender-research-sources > span {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sender-research-signals {
    display: grid;
    gap: 0.35rem;
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}
.sender-research-signal {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.55rem;
}
.sender-research-signal span { color: var(--text-muted); }
.sender-research-signal.is-positive strong { color: var(--success-color); }
.sender-research-signal.is-negative strong { color: var(--danger-color); }
.sender-research-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin-top: 0.8rem;
}
.sender-research-sources a,
.sender-research-refresh {
    color: var(--text-main);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sender-research-caveat {
    margin: 0.75rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    font-size: 0.75rem;
}
.sender-research-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
}
.sender-research-refresh {
    border: 0;
    background: transparent;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.sender-research-loading,
.sender-research-message { color: var(--text-muted); }

/* ── Thread digests (spec 2026-07-23) ───────────────────────────────────────
   Aurora Pro grammar: hairlines not boxes, muted tracked-caps eyebrows,
   italic quotes with a left rule (mirrors why-callout). No new accent colors. */
.tinbox-thread-digest {
    flex-shrink: 0;
    margin: 0.35rem 0 0.75rem;
    padding: 0.7rem 0 0.35rem;
    border: none;
    border-top: 1px solid var(--rule, var(--text-main));
    border-radius: 0;
    background: transparent;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-main);
}
.tinbox-thread-digest.hidden,
.tinbox-thread-digest[hidden] {
    display: none !important;
}

/* While a composer is open, the catch-up collapses to its eyebrow line: the
   reader has already digested it, the raw thread is the context that matters
   while drafting, and the freed rows go to the message window — which the
   card's overflow otherwise squeezes to a ~130px slit (2026-08-13 panel
   grading P1: "the history vanishes the moment you start replying"). */
.tinbox-stage:has(> .tinbox-composer:not(.hidden)) .thread-digest-panel > :not(.catchup-title) {
  display: none;
}

.thread-digest-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Catch-up card head: title reads as the section voice, situation as prose.
   The title is a BUTTON — tapping it minimizes the whole card to this one
   line (chevron rides .catchup-expander), tap again to reopen. */
.catchup-panel {
    gap: 0.35rem;
}
.catchup-title {
    margin: 0;
}
button.catchup-title {
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: inherit;
    text-align: left;
    align-self: stretch;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.4rem;
    cursor: pointer;
}
button.catchup-title:hover {
    color: var(--text-main);
}
button.catchup-title:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}

/* Everything below the title collapses as one unit. */
.catchup-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.catchup-why {
    order: -1;
    margin: 0 0 0.1rem;
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.5;
}
.catchup-details {
    padding: 0.35rem 0 0.1rem;
    color: var(--text-muted);
}
.catchup-details.hidden,
.catchup-details[hidden],
.catchup-provenance-detail.hidden,
.catchup-provenance-detail[hidden] {
    display: none !important;
}
.catchup-explanation-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.1rem;
    padding-top: 0;
}
.catchup-provenance {
    appearance: none;
    margin: 0;
    padding: 0.08rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    margin-left: auto;
}
.catchup-provenance-detail {
    margin-top: 0.15rem;
}
.catchup-degenerate .catchup-body {
    gap: 0.2rem;
}
.catchup-body.hidden,
.catchup-body[hidden] {
    display: none !important;
}
.catchup-panel.catchup-minimized {
    gap: 0;
}

/* Expander row: sentence-case buttons with chevrons — these are the two doors
   into the chain, not footnotes (panel: tracked-caps whispers failed first
   contact). They deliberately do NOT share the tracked-caps voice of
   .thread-digest-toggle used by per-quote links. */
.catchup-actions {
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.catchup-actions .thread-digest-toggle {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    border-bottom-color: transparent;
    padding-bottom: 1px;
}
.catchup-actions .thread-digest-toggle:hover {
    border-bottom-color: var(--rule, currentColor);
}

.catchup-asks-eyebrow {
    margin: 0.35rem 0 0;
}

/* One-page reader (2026-08-20, owner decision): detail panels flow at their
   natural height inside the card scroller — no nested scrollers. The old
   34vh caps existed so .tinbox-body never starved when the card clipped;
   with the card as the page scroller nothing starves. */
.thread-digest-expanded {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.catchup-messages.hidden,
.catchup-messages[hidden] {
    display: none !important;
}

.catchup-messages-loading {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.catchup-message-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

/* Conversation rows: full-width quiet buttons, hairline separated. */
.catchup-message-row {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--rule, rgba(127, 127, 127, 0.25));
    border-radius: 0;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
    font: inherit;
    color: var(--text-main);
    box-shadow: none;
}
.catchup-message-row:first-child {
    border-top: none;
}
.catchup-message-row:hover {
    background: var(--bg-hover, rgba(127, 127, 127, 0.08));
}
.catchup-message-row:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: -2px;
}
/* Active must never look like hover (panel: same pixel = which am I reading?).
   Accent left rail + the "· reading" tag make the state unambiguous. */
.catchup-message-row.is-active {
    background: var(--bg-hover, rgba(127, 127, 127, 0.08));
    border-left: 2px solid var(--accent, var(--text-main));
    padding-left: calc(0.25rem - 2px + 0.35rem);
}
.catchup-message-row.is-active .catchup-message-from::after {
    content: " · reading";
    font-weight: 400;
    color: var(--accent, var(--text-muted));
    text-transform: none;
    letter-spacing: 0;
}

/* Scroll cues: fade only the edge that is actually clipped, tracked per
   scroll position (a static fade greyed the last row even at scroll end). */
.catchup-messages.clip-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 22px), transparent);
}
.catchup-messages.clip-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 22px);
    mask-image: linear-gradient(to bottom, transparent, black 22px);
}
.catchup-messages.clip-top.clip-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 22px, black calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 22px, black calc(100% - 22px), transparent);
}

/* Expand chevrons live in CSS with empty alt text — as label text they were
   screen-reader noise on top of aria-expanded (re-judge nit). */
.catchup-expander::before {
    content: "▸ " / "";
    color: var(--text-muted);
}
.catchup-expander[aria-expanded="true"]::before {
    content: "▾ " / "";
}

/* "Reading an earlier message" strip — first-class state, not a 10px suffix. */
.tinbox-viewing-strip {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.25rem;
    padding: 0.45rem 0.6rem;
    border-left: 2px solid var(--accent, var(--text-main));
    background: var(--bg-hover, rgba(127, 127, 127, 0.07));
    font-size: 0.8rem;
    color: var(--text-main);
}
.tinbox-viewing-strip.hidden,
.tinbox-viewing-strip[hidden] {
    display: none !important;
}
.viewing-strip-line {
    font-weight: 600;
}
.viewing-strip-back {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}
.viewing-strip-back:hover {
    color: var(--text-muted);
}
.viewing-strip-back:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}
.viewing-strip-scope {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.catchup-message-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
}
.catchup-message-from {
    font-weight: 600;
    font-size: 0.82rem;
}
.catchup-message-date {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.catchup-message-snippet {
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

/* Retry inside the muted digest line: quiet inline verb. */
.thread-digest-retry {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
}
.thread-digest-retry:hover {
    color: var(--text-main);
}

/* While the catch-up card is up, the per-message Why strip is redundant.
   The ✦ Why chip stays live and un-suppresses on demand. */
.tinbox-why-callout.catchup-suppressed {
    display: none !important;
}

.thread-digest-toggle {
    align-self: flex-start;
    appearance: none;
    margin: 0.2rem 0 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    cursor: pointer;
}
.thread-digest-toggle:hover {
    color: var(--text-main);
}
.thread-digest-toggle:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}

.thread-digest-expanded.hidden,
.thread-digest-expanded[hidden] {
    display: none !important;
}

.thread-digest-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 0.25rem;
}

.thread-digest-situation {
    margin: 0.15rem 0 0;
    color: var(--text-main);
}

.thread-digest-empty-loops {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-style: italic;
}

.thread-digest-loops {
    list-style: disc;
    margin: 0.25rem 0 0;
    padding-left: 1.15rem;
    color: var(--text-main);
}
.thread-digest-loops li {
    margin: 0.12rem 0;
}

/* Quotes: left hairline rule + italic text (highlights-callout grammar). */
.thread-digest-quote {
    margin: 0.55rem 0 0;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border: none;
    border-left: 2px solid var(--rule, var(--border-color));
    background: transparent;
}
.thread-digest-quote-text {
    margin: 0;
    font-style: italic;
    color: var(--text-main);
    line-height: 1.5;
}
.thread-digest-quote-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.thread-digest-quote-attr {
    color: var(--text-muted);
}
/* Sentence case, readable size — the uppercased 10px taxonomy labels read
   as "machine jargon, near-illegible" (panel). */
.thread-digest-quote-why {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-style: italic;
    color: var(--text-muted);
}
.thread-digest-open-msg {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0 0 1px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    cursor: pointer;
}
.thread-digest-open-msg:hover {
    color: var(--text-main);
}
.thread-digest-open-msg:focus-visible {
    outline: 2px solid var(--accent, var(--text-main));
    outline-offset: 2px;
}

/* Collapsed timeline — native details/summary, no box. */
.thread-digest-timeline {
    margin: 0;
    padding: 0;
    border: none;
}
.thread-digest-timeline-summary {
    cursor: pointer;
    list-style: none;
}
.thread-digest-timeline-summary::-webkit-details-marker {
    display: none;
}
.thread-digest-timeline-summary::before {
    content: "▸ ";
    font-size: 0.85em;
    color: var(--text-muted);
}
.thread-digest-timeline[open] > .thread-digest-timeline-summary::before {
    content: "▾ ";
}
.thread-digest-timeline-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}
.thread-digest-timeline-entry {
    margin: 0.2rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.thread-digest-noise,
.thread-digest-partial {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}
.thread-digest-framing {
    margin: 0.35rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color, var(--line));
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.thread-digest-unavailable {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Generating: 3-line skeleton (wall-toned, no brand shimmer). */
.thread-digest-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.15rem 0;
}
.thread-digest-skel-line {
    height: 0.7rem;
    border-radius: 2px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}
.thread-digest-skel-line--short {
    width: 62%;
}

/* In-place highlight marks rendered in the PARENT document (plain-text-only
   emails). HTML emails render in an iframe; an equivalent copy of these rules is
   injected there by highlights.js (IFRAME_MARK_STYLES) — keep them in sync. */
.imp-hl {
    background: #fbe3ae;
    color: #412402;
    border-radius: 2px;
    padding: 0 1px;
    text-decoration: underline;
    text-decoration-color: #ba7517;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.imp-hl-info {
    background: #cfe4f8;
    color: #042c53;
    text-decoration-color: #378add;
}
/* Sparkle prefix marks each highlight as AI-added. CSS-generated, so it never
   pollutes the email text, copy/paste, or quote matching. Inherits the mark's
   color (amber for actions, blue for info). Keep in sync with the iframe copy
   in highlights.js (IFRAME_MARK_STYLES). */
.imp-hl::before {
    content: "✦";
    font-size: 0.8em;
    margin-right: 0.15em;
    opacity: 0.7;
    vertical-align: 0.05em;
}

.tinbox-actionbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem 0.7rem;
    border-top: 1px solid var(--line);
    margin-top: 0.6rem;
    position: relative;
    z-index: 5;
}

.tinbox-primary-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Not flex:1. Growing this group pushed Tools to the far right edge of a
       now-full-width bar, a thousand pixels from every other control, where it
       read as orphaned rather than secondary. Shrink-to-fit keeps the whole bar
       one group; Tools stays last, just not exiled. */
    flex: 0 1 auto;
    min-width: 0;
}

/* Permanent "Wrong teaches the imp" prose removed (spec §4, 2026-07-25);
   Teach the imp lives in Tools; ? overlay still works. Belt-and-braces for
   any cached page markup. */
.tinbox-wrong-hint {
    display: none !important;
}

.tinbox-feedback {
    padding-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tinbox-feedback .feedback-form {
    margin-top: 0;
}

/* Action bar: one sentence-case family. Archive is the only filled (ink)
   button; Trash keeps red text at the same shape/size as the rest. */
.tinbox-action-btn {
    flex: none;
    min-height: 34px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.4rem 0.65rem;
    transition: color var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tinbox-action-btn:hover:not(:disabled) {
    color: var(--text-main);
    opacity: 0.85;
}

.tinbox-action-btn[data-action="archive"] {
    background: var(--text-main);
    border: 1px solid var(--text-main);
    border-radius: 2px;
    color: var(--bg-body);
    padding: 0.4rem 0.85rem;
    letter-spacing: 0;
    box-shadow: none;
}

.tinbox-action-btn[data-action="archive"]:hover:not(:disabled) {
    filter: none;
    color: var(--bg-body);
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

.tinbox-action-btn[data-action="delete"] {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--danger-color);
}

.tinbox-action-btn[data-action="delete"]:hover:not(:disabled) {
    background: transparent;
    border-color: var(--line);
    color: var(--danger-color);
    opacity: 0.85;
}

/* Wrong = quiet secondary verb (no amber accent). */
button.tinbox-action-btn-wrong.secondary,
[data-theme="light"] button.tinbox-action-btn-wrong.secondary,
[data-theme="dark"] button.tinbox-action-btn-wrong.secondary {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    color: var(--text-muted);
    box-shadow: none;
}
button.tinbox-action-btn-wrong.secondary:hover:not(:disabled),
[data-theme="light"] button.tinbox-action-btn-wrong.secondary:hover:not(:disabled),
[data-theme="dark"] button.tinbox-action-btn-wrong.secondary:hover:not(:disabled) {
    background: transparent;
    border-bottom-color: var(--rule, currentColor);
    color: var(--text-main);
}

.tinbox-action-btn[data-action="requires_response"],
.tinbox-action-btn[data-action="should_read"],
.tinbox-action-btn[data-action="reply"],
.tinbox-action-btn[data-action="defer"],
.tinbox-action-btn.secondary {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-main);
    box-shadow: none;
}

.tinbox-action-btn[data-action="requires_response"]:hover:not(:disabled),
.tinbox-action-btn[data-action="should_read"]:hover:not(:disabled),
.tinbox-action-btn[data-action="reply"]:hover:not(:disabled),
.tinbox-action-btn[data-action="defer"]:hover:not(:disabled),
.tinbox-action-btn.secondary:hover:not(:disabled) {
    background: transparent;
    color: var(--text-main);
    opacity: 0.85;
}

.tinbox-action-btn kbd,
.tinbox-feedback kbd,
.tinbox-snooze > summary kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 0;
    padding: 0.05rem 0.28rem;
    border: 1px solid var(--line);
    border-bottom-width: 1px;
    border-radius: 2px;
    background: transparent;
    color: var(--text-faint);
    vertical-align: middle;
    line-height: 1.5;
}

.tinbox-action-btn[data-action="archive"] kbd {
    border-color: color-mix(in srgb, var(--bg-body) 35%, transparent);
    background: color-mix(in srgb, var(--bg-body) 12%, transparent);
    color: var(--bg-body);
}

.tinbox-action-btn[data-action="delete"] kbd {
    border-color: color-mix(in srgb, var(--danger-color) 35%, transparent);
    color: var(--danger-color);
    background: transparent;
}

.tinbox-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Tinbox: more tools disclosure ── */

/* .tinbox-tools styling now handled by .tinbox-bar-toggle */

.tinbox-secondary-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
    padding: 0;
}

.tinbox-secondary-actions button,
.tinbox-secondary-actions .button-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.5rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--text-main);
    box-shadow: none;
}

.tinbox-secondary-actions button:hover,
.tinbox-secondary-actions .button-link:hover {
    background: var(--bg-2, var(--accent-soft));
}

.tinbox-secondary-actions kbd {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.7;
    margin-left: auto;
    padding: 0.05rem 0.28rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: transparent;
}

.tinbox-tools-divider {
    height: 1px;
    margin: 0.3rem 0.5rem;
    background: var(--line);
    border: 0;
}

.tinbox-secondary-actions .button-link {
    margin: 0;
}

.tinbox-secondary-actions .button-link.disabled {
    pointer-events: none;
    opacity: 0.35;
}

/* ── Tinbox: reply composer ── */

.tinbox-composer {
    background: transparent;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 1rem 0 0.25rem;
}

/* Just-sent reply, painted in the composer slot under the message. */
.tinbox-reply-sent {
    flex-shrink: 0;
    margin: 0.75rem 0 0.25rem;
    padding: 0.7rem 0.85rem;
    border-left: 2px solid var(--accent, var(--text-main));
    background: var(--accent-soft);
    border-radius: 0 2px 2px 0;
}

.tinbox-reply-sent.hidden {
    display: none;
}

.tinbox-reply-sent-kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.tinbox-reply-sent-text {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-main);
}

.tinbox-composer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Real breathing room before the Close button: with space-between alone a
       long recipient summary ellipsizes to EXACTLY Close's left edge and the
       Edit affordance visually collides with the button (owner report,
       2026-08-18). */
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.tinbox-reply-recipient-summary {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.tinbox-composer-head > .secondary {
    flex: 0 0 auto;
}

.tinbox-reply-recipient-summary .hint {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-reply-recipient-edit {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
}

.tinbox-reply-recipient-edit:hover:not(:disabled) {
    color: var(--text-main);
}

.tinbox-reply-recipient-editor {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-2);
}

.tinbox-reply-recipient-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem 0.5rem;
}

.tinbox-reply-recipient-label {
    padding-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tinbox-reply-recipient-field {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tinbox-reply-recipient-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.2rem 0.25rem 0.2rem 0.55rem;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-reply-recipient-remove {
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    padding: 0.05rem 0.25rem;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.tinbox-reply-recipient-remove:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--danger-color);
}

.tinbox-reply-recipient-row input {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
}

.tinbox-reply-recipient-error,
.tinbox-reply-recipient-hint {
    margin: 0 0 0 2.25rem;
    font-size: 0.78rem;
    color: var(--danger-color);
}

.tinbox-composer textarea {
    min-height: 120px;
    margin-bottom: 0.75rem;
    resize: vertical;
}

.tinbox-assist-undo {
    margin: -0.35rem 0 0.75rem;
    color: var(--text-muted);
}

.tinbox-assist-undo-button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tinbox-composer .actions-row {
    justify-content: flex-start;
    gap: 0.5rem;
}

/* ── Desktop composer dock (2026-08-17 council, 3 seats) ──
   On /mail the composers are SIBLINGS of the message scroller inside a
   viewport-locked stage, so a tall draft (AI panels, attachments, long text)
   used to clip the Send row below the fold with no scrollable ancestor to
   reach it, while the message collapsed to a sliver. The dock bounds the
   composer and makes IT the scroll container: everything grows inward, the
   sticky send rows finally have a scrollport, and the message keeps a
   readable floor with its own #tinbox-body scroll. Scoped to the /mail stage
   (direct-child selectors) so the /search reader host and the ≤768px
   scrolling-stage layout are untouched. */
@media (min-width: 769px) {
    .tinbox-stage:has(> .tinbox-composer:not(.hidden)) > .tinbox-card {
        flex: 1 1 auto;
        /* Readable-message floor. The percentage keeps floor + composer cap
           under the stage height on very short windows: the composer cannot
           shrink (flex-shrink: 0), so an oversized fixed floor would push its
           send row past the pane edge again. */
        min-height: min(180px, 30%);
    }

    /* The teach panel is another non-shrinking stage sibling: left visible it
       can push the dock's send row past the pane edge. It rests (state kept)
       while a composer is open, exactly like the action bar below. */
    .tinbox-stage:has(> .tinbox-composer:not(.hidden)) > .tinbox-feedback {
        display: none;
    }

    .tinbox-stage > .tinbox-composer:not(.hidden) {
        max-height: 60%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* The sticky head and send row must own the scrollport's edges: any
           composer padding beyond them is a transparent strip that scrolled
           content shows through. Their own padding restores the spacing. */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Close mirrors Send: both ends of the dock stay reachable while the
       middle scrolls. */
    .tinbox-stage > .tinbox-composer:not(.hidden) > .tinbox-composer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg-card);
        margin-bottom: 0;
        padding: 1rem 0 0.5rem;
    }

    /* Compose-new answers no message: give it the whole pane instead of
       squatting under a stale reader. */
    .tinbox-stage:has(> #tinbox-compose:not(.hidden)) > .tinbox-card,
    .tinbox-stage:has(> #tinbox-compose:not(.hidden)) > .tinbox-empty {
        display: none;
    }

    .tinbox-stage > #tinbox-compose:not(.hidden) {
        flex: 1 1 auto;
        max-height: none;
        border-top: none;
    }
}

/* Forward/compose send rows pin like reply's (#tinbox-reply-send-row below):
   component-level, so any scrollport holding the composer — the /mail dock or
   the /search reader pane — keeps the terminal action on screen. */
#tinbox-forward-actions,
#tinbox-compose-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bg-card);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 0;
}

.tinbox-reply-busy-status {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-height: 1.25em;
    margin: 0.25rem 0 0.5rem;
    visibility: hidden;
}

.tinbox-reply-busy-status.is-visible {
    visibility: visible;
}

.tinbox-reply-busy-status .spinner-inline {
    flex: 0 0 auto;
}

.tinbox-reply-busy-copy {
    margin: 0;
}

.tinbox-find-facts {
    margin: 0.25rem 0 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.tinbox-find-facts > .hint {
    margin: 0;
}

#tinbox-find-facts-list {
    display: grid;
    gap: 0.625rem;
    max-height: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.tinbox-find-fact {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--line);
}

.tinbox-find-fact-sentence,
.tinbox-find-fact-source {
    margin: 0;
}

.tinbox-find-fact-source {
    margin-top: 0.2rem;
}

.tinbox-find-fact .tinbox-find-fact-actions {
    margin-top: 0.35rem;
}

#tinbox-reply-send-row {
    scroll-margin-bottom: 24px;
    /* Send must never hide below a pane edge while the composer is open:
       scroll choreography kept losing to caret-visibility scrolls and late
       reflow, so the terminal action pins itself to the scroll container's
       bottom instead. */
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bg-card);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 0;
}

.tinbox-draft-provenance {
    margin: 0 0 0.75rem;
}

.tinbox-provenance-toggle {
    display: inline;
    margin: -0.1rem -0.2rem;
    padding: 0.1rem 0.2rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tinbox-provenance-toggle:hover {
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-main) 7%, transparent);
}

.tinbox-provenance-suffix {
    opacity: 0.72;
}

.tinbox-draft-provenance.is-quiet {
    opacity: 0.82;
}

.tinbox-draft-provenance > ul {
    display: grid;
    gap: 0.5rem;
    max-height: 200px;
    margin: 0.5rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.tinbox-draft-provenance > ul.hidden {
    display: none;
}

.tinbox-draft-provenance li,
.tinbox-draft-provenance li p {
    margin: 0;
}

/* ── Tinbox: dictation (the mic is live, and it says so) ──
   The bar only exists while recording. A pulsing dot for state, a waveform
   driven by real microphone input for proof, a running clock so a long pause
   never reads as a hang, and one unambiguous Stop. */

.dictation-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: -0.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--danger-color) 6%, transparent);
}

.dictation-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger-color);
    animation: dictation-pulse 1.4s ease-in-out infinite;
}

@keyframes dictation-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.dictation-state {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger-color);
}

/* Fixed and compact on purpose: stretched across the whole bar the bars go
   sparse and read as an empty rule rather than a live meter. */
.dictation-wave {
    flex: 0 0 156px;
    height: 22px;
    margin-right: auto;
    /* The canvas paints with `currentColor`. */
    color: var(--danger-color);
}

.dictation-time {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.dictation-stop {
    flex: 0 0 auto;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-md);
    background: var(--danger-color);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.dictation-stop:hover { opacity: 0.85; }
.dictation-stop:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.dictation-note {
    margin: -0.5rem 0 0.75rem;
}

/* Waiting on the engine's closing result: still locked, but no longer live. */
.dictation-bar.is-finishing .dictation-dot {
    animation: none;
    opacity: 0.45;
}

.dictation-stop:disabled {
    opacity: 0.5;
    cursor: default;
}

/* While the bar is up it owns Stop; the row button would be a second, identical
   control sitting next to it. Class-based, not per-composer: Reply, Forward and
   Compose all carry .dictation-toggle. */
.dictation-toggle.is-dictating {
    display: none;
}

.dictation-toggle .mic-glyph {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .dictation-dot { animation: none; }
}

/* ── Tinbox: forward composer (secondary, calm) ── */

.tinbox-forward-composer {
    margin-top: 0.5rem;
}

.tinbox-forward-label {
    display: block;
    margin-bottom: 0.25rem;
}

.tinbox-forward-to-wrap,
.tinbox-forward-note-wrap {
    margin-bottom: 0.75rem;
    position: relative;
}

.tinbox-forward-to-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.35rem 0.5rem;
    background: var(--bg-card, transparent);
    min-height: 2.25rem;
}

.tinbox-forward-to-field:focus-within {
    border-color: var(--text-muted);
}

.tinbox-forward-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.tinbox-forward-chips.hidden { display: none; }

.tinbox-forward-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg-2, transparent);
    color: var(--text-main);
    max-width: 100%;
}

.tinbox-forward-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-forward-chip button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-faint);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.tinbox-forward-chip button:hover {
    color: var(--text-main);
}

#tinbox-forward-to {
    flex: 1 1 10rem;
    min-width: 8rem;
    border: none;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.15rem 0;
    outline: none;
}

.tinbox-forward-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: 2px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg-card, var(--bg-body));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-height: 12rem;
    overflow-y: auto;
}

.tinbox-forward-suggest.hidden { display: none; }

.tinbox-forward-suggest-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font: inherit;
    color: var(--text-main);
}

.tinbox-forward-suggest-row:hover,
.tinbox-forward-suggest-row[aria-selected="true"] {
    background: var(--bg-2, rgba(0, 0, 0, 0.04));
}

.tinbox-forward-suggest-addr {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-forward-suggest-meta {
    font-size: 0.72rem;
    color: var(--text-faint);
    flex-shrink: 0;
}

.tinbox-forward-didyoumean {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
}

.tinbox-forward-didyoumean button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--text-main);
    text-decoration: underline;
    cursor: pointer;
}

.tinbox-forward-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.tinbox-forward-quiet-btn {
    font-size: 0.75rem !important;
    padding: 0.15rem 0.4rem !important;
    opacity: 0.85;
}

.tinbox-forward-quiet-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.tinbox-forward-replace-note {
    margin-top: 0;
}

.tinbox-forward-note-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
    min-height: 1.25rem;
}

.tinbox-forward-note-count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-faint, var(--text-muted));
    white-space: nowrap;
}

.tinbox-forward-note-count.is-at-limit {
    color: var(--text-muted);
}

.tinbox-provider-save {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--text-muted);
}

.tinbox-provider-save.hidden {
    display: none;
}

.tinbox-provider-save .hint {
    margin: 0;
    font-size: 0.72rem;
}

.tinbox-unsent-overlay {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.tinbox-unsent-panel {
    position: relative;
    inset: auto;
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 2rem));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.tinbox-unsent-panel .drawer-header p {
    margin: 0.2rem 0 0;
}

.tinbox-unsent-panel-status {
    min-height: 1.25rem;
    margin: 0;
    padding: 0.55rem 1.25rem 0;
}

.tinbox-unsent-list {
    overflow-y: auto;
    padding: 0.65rem 1.25rem 1.25rem;
}

.tinbox-unsent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    border-bottom: 1px solid var(--line);
}

.tinbox-unsent-row:last-child {
    border-bottom: 0;
}

.tinbox-unsent-row-main {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    text-align: left;
}

.tinbox-unsent-row-main strong,
.tinbox-unsent-row-main .hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-unsent-kind {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tinbox-unsent-row-meta {
    display: flex;
    align-items: center;
    min-width: 0;
}

.tinbox-unsent-discard {
    font-size: 0.75rem !important;
}

.tinbox-unsent-empty {
    margin: 0;
    padding: 1rem 0;
}

#tinbox-forward-note {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg-card, transparent);
    color: var(--text-main);
}

.tinbox-forward-subject {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tinbox-forward-original {
    margin: 0 0 0.75rem;
    /* Quiet greyed quote block (was a collapsible <details>): a left rail and
       muted ink, always visible, clamped to ~12 lines with a Show all toggle. */
    border-left: 2px solid var(--line);
    border-radius: 0;
    padding: 0.1rem 0 0.1rem 0.65rem;
    background: transparent;
}

.tinbox-forward-original-caption {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tinbox-forward-original-body {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    /* ~12 lines; JS shows the toggle only when the text overflows. */
    max-height: calc(1.45em * 12);
    overflow: hidden;
    user-select: text;
}

.tinbox-forward-original.is-expanded .tinbox-forward-original-body {
    max-height: 16rem;
    overflow-y: auto;
}

.tinbox-forward-original-toggle {
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.tinbox-forward-original-toggle:hover:not(:disabled) {
    color: var(--text-main);
}

.tinbox-forward-original-toggle.hidden { display: none; }

.tinbox-forward-attachments {
    margin-bottom: 0.75rem;
}

.tinbox-forward-attachments.hidden { display: none; }

.tinbox-forward-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tinbox-forward-mode.hidden { display: none; }

.tinbox-forward-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.8rem;
}

.tinbox-forward-att-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tinbox-forward-att-list.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.tinbox-forward-att-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.78rem;
}

.tinbox-forward-att-state.error {
    color: var(--danger-color);
}

.tinbox-forward-att-state .secondary {
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
}

.tinbox-forward-att-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-main);
}

.tinbox-forward-att-row input {
    flex-shrink: 0;
}

.tinbox-forward-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-forward-att-size {
    color: var(--text-faint);
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* User-added outbound attachments (compose / reply / forward) */
.tinbox-attachments {
    margin: 0 0 0.75rem;
}

.tinbox-attachments-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.tinbox-attachments-total {
    font-size: 0.78rem;
}

.tinbox-attachments-total.error {
    color: var(--danger-color);
}

.tinbox-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.tinbox-attachments-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-main);
}

.tinbox-attachments-remove {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
}

.tinbox-attachments-remove:hover:not(:disabled) {
    color: var(--danger-color);
    background: var(--accent-soft);
}

.tinbox-attachments-remove:disabled {
    opacity: 0.45;
    cursor: default;
}

.tinbox-attachments-errors {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--danger-color);
}

.tinbox-composer.is-dragover {
    outline: 2px dashed var(--accent-color);
    outline-offset: -4px;
    background: var(--accent-soft);
}

.tinbox-unsent-att-note {
    font-style: italic;
}

.tinbox-forward-confirm {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg-2, transparent);
}

.tinbox-forward-confirm.hidden { display: none; }

.tinbox-forward-confirm-title {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tinbox-forward-confirm-recipients {
    list-style: none;
    margin: 0 0 0.45rem;
    padding: 0;
}

.tinbox-forward-confirm-recipients li {
    font-size: 0.88rem;
    color: var(--text-main);
    padding: 0.15rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tinbox-forward-new-tag {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.05rem 0.35rem;
}

#tinbox-forward-confirm-meta {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

body.tinbox-page #tinbox-forward-send.btn-primary,
body.tinbox-page #tinbox-forward-confirm-send.btn-primary,
body.tinbox-page #tinbox-compose-send.btn-primary,
body.tinbox-page #tinbox-compose-confirm-send.btn-primary {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    border-radius: 2px;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.tinbox-page #tinbox-reply-send.btn-primary:disabled,
body.tinbox-page #tinbox-forward-send.btn-primary:disabled,
body.tinbox-page #tinbox-compose-send.btn-primary:disabled {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    border-radius: 2px;
    opacity: 0.58;
    cursor: not-allowed;
}

/* ── Tinbox: compose (reuses forward chrome; thin From/Subject deltas) ── */

.queue-head .tinbox-compose-open {
    margin: 0;
}

.tinbox-compose-from-select,
.tinbox-compose-subject-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.45rem 0.55rem;
    font: inherit;
}

.tinbox-compose-from-select:focus,
.tinbox-compose-subject-input:focus {
    outline: none;
    border-color: var(--text-muted, var(--line));
}

.tinbox-compose-recipient-first .tinbox-compose-from-select {
    border-color: transparent;
    border-bottom-color: var(--line);
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 1.6rem;
}

.tinbox-compose-recipient-first .tinbox-compose-from-select:focus {
    border-bottom-color: var(--text-muted, var(--line));
}

/* Match #tinbox-forward-to: lives inside .tinbox-forward-to-field chrome. */
#tinbox-compose-to {
    flex: 1 1 10rem;
    min-width: 8rem;
    border: none;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.15rem 0;
    outline: none;
}

.tinbox-compose-from-static {
    margin: 0.15rem 0 0;
}

.tinbox-compose-from-hint {
    margin: 0.35rem 0 0;
    line-height: 1.45;
}

.tinbox-compose-from-hint.hidden { display: none; }

.tinbox-compose-recipient-first .tinbox-compose-from-hint {
    margin-top: 0.25rem;
    font-size: 0.76rem;
}

.tinbox-compose-recipient-first .tinbox-compose-from-hint-slot {
    min-height: 0;
}

.tinbox-compose-from-hint-slot:has(.tinbox-compose-from-hint.hidden) {
    display: none;
}

/* Compose owns a richer contact menu. Forward's compact rows stay unchanged. */
.tinbox-compose-suggest-panel {
    min-height: 3.1rem;
    max-height: 18rem;
    padding: 0.25rem 0;
}

.tinbox-compose-suggest-group {
    padding: 0;
}

.tinbox-compose-suggest-group + .tinbox-compose-suggest-group {
    border-top: 1px solid var(--line);
    margin-top: 0.2rem;
    padding-top: 0.2rem;
}

.tinbox-compose-suggest-heading {
    display: block;
    padding: 0.25rem 0.7rem 0.15rem;
    color: var(--text-faint);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.tinbox-compose-suggest-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "person time"
        "address chip";
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    padding: 0.48rem 0.7rem;
    text-align: left;
}

.tinbox-compose-suggest-row:hover,
.tinbox-compose-suggest-row[aria-selected="true"] {
    background: var(--bg-2, rgba(0, 0, 0, 0.04));
}

.tinbox-compose-suggest-person {
    grid-area: person;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 600;
}

.tinbox-compose-suggest-address {
    grid-area: address;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-faint);
    font-size: 0.75rem;
}

.tinbox-compose-suggest-time {
    grid-area: time;
    color: var(--text-faint);
    font-size: 0.7rem;
    white-space: nowrap;
}

.tinbox-compose-suggest-chip {
    grid-area: chip;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.35;
    max-width: 12rem;
    overflow: hidden;
    padding: 0.05rem 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tinbox-compose-suggest-action,
.tinbox-compose-suggest-status {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
}

.tinbox-compose-suggest-action {
    cursor: pointer;
}

.tinbox-compose-suggest-action:hover,
.tinbox-compose-suggest-action[aria-selected="true"] {
    background: var(--bg-2, rgba(0, 0, 0, 0.04));
    color: var(--text-main);
}

.tinbox-compose-suggest-status {
    min-height: 2.6rem;
    color: var(--text-faint);
}

.tinbox-compose-no-subject {
    color: var(--text-faint, var(--text-muted));
    font-style: italic;
}

#tinbox-compose-body {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.55rem 0.65rem;
    font: inherit;
    line-height: 1.45;
}

#tinbox-compose-body:focus {
    outline: none;
    border-color: var(--text-muted, var(--line));
}

/* ── Composer footer row (reply / compose / forward share this) ──
   One row at the bottom of each composer: primary assist, overflow menu,
   mic and attach icon buttons, a spacer, and the filled ink send button.
   The row is also the sticky terminal element via the existing
   #tinbox-reply-send-row / #tinbox-forward-actions / #tinbox-compose-actions
   rules above. */

.tinbox-composer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tinbox-composer-assist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.tinbox-composer-footer-spacer {
    flex: 1 1 auto;
}

.tinbox-composer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.tinbox-composer-icon-btn:hover:not(:disabled) {
    color: var(--text-main);
    background: var(--bg-2, rgba(0, 0, 0, 0.04));
}

.tinbox-composer-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.tinbox-composer-icon-btn .mic-glyph,
.tinbox-composer-icon-btn .clip-glyph {
    display: block;
    margin-right: 0;
}

/* The Assist / More overflow menus open upward off the footer. */
.tinbox-composer-menu {
    position: relative;
}

.tinbox-composer-menu.hidden { display: none; }

.tinbox-composer-menu-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.tinbox-composer-menu-summary::-webkit-details-marker { display: none; }

.tinbox-composer-menu-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: grid;
    gap: 0.1rem;
    min-width: 11rem;
    margin: 0;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg-card, var(--bg-body));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tinbox-composer-menu-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.tinbox-composer-menu-item:hover:not(:disabled) {
    background: var(--bg-2, rgba(0, 0, 0, 0.04));
}

.tinbox-composer-menu-item:disabled {
    color: var(--text-faint, var(--text-muted));
    cursor: default;
}

.tinbox-composer-menu-item[aria-pressed="true"]::before {
    content: "✓ ";
    color: var(--text-muted);
}

/* The hidden mode radios ride inside the More menu; no extra box spacing. */
.tinbox-composer-menu-panel .tinbox-forward-mode {
    margin-bottom: 0;
    font-size: inherit;
}

/* ── Composer header lines (compose / forward): mail-client rows with a
   muted small-caps label at the left and hairlines between lines. ── */

.tinbox-composer-lines {
    margin-bottom: 0.5rem;
}

.tinbox-composer-line {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    padding: 0.3rem 0;
}

.tinbox-composer-line + .tinbox-composer-line {
    border-top: 1px solid var(--line);
}

.tinbox-composer-line-label {
    flex: 0 0 3.4rem;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The chips field loses its box inside a header line. */
.tinbox-composer-line .tinbox-forward-to-field {
    flex: 1 1 12rem;
    min-height: 0;
    padding: 0.1rem 0;
    border: none;
    background: transparent;
}

/* The contact menu aligns under the field, past the label column. */
.tinbox-composer-line .tinbox-forward-suggest {
    left: 4.05rem;
}

/* The From select renders as a quiet inline chip, not a boxed input. */
.tinbox-composer-line .tinbox-compose-from-select {
    width: auto;
    max-width: 100%;
    padding: 0.2rem 1.5rem 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-card, transparent);
    font-size: 0.82rem;
}

.tinbox-composer-line .tinbox-compose-from-static {
    margin: 0;
    font-size: 0.85rem;
}

.tinbox-composer-line .tinbox-compose-from-hint-slot {
    flex: 1 1 100%;
}

/* The Subject input and the forward subject text sit inline, box-free. */
.tinbox-composer-line .tinbox-compose-subject-input {
    flex: 1 1 12rem;
    width: auto;
    padding: 0.2rem 0;
    border: none;
    background: transparent;
}

.tinbox-composer-line .tinbox-forward-subject {
    margin: 0;
}

/* The body textarea fills the card with no box border of its own. The ids
   are listed because the legacy per-textarea rules carry id specificity. */
.tinbox-composer-body-wrap textarea,
.tinbox-composer-body-wrap #tinbox-compose-body,
.tinbox-composer-body-wrap #tinbox-forward-note {
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

.tinbox-composer-body-wrap textarea:focus,
.tinbox-composer-body-wrap #tinbox-compose-body:focus,
.tinbox-composer-body-wrap #tinbox-forward-note:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* ── Tinbox: status bar ── */

body.tinbox-page #tinbox-status {
    padding: 0.3rem 1.25rem 0;
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-size: 0.78rem;
    min-height: 0;
}

body.tinbox-page #tinbox-status.error {
    color: var(--danger-color);
}

body.tinbox-page #tinbox-status.success {
    color: var(--text-muted);
}

/* ── Tinbox: pill active/hover states ── */

body.tinbox-page .tinbox-pill:hover:not(.active) {
    background: transparent;
    color: var(--text-muted);
}

/* ── Tinbox: view toggle ── */

.tinbox-view-toggle {
    display: inline-flex;
}

.tinbox-view-icon.hidden {
    display: none;
}

/* ── Tinbox: list view ── */

.tinbox-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 0 1rem;
    scrollbar-width: thin;
}

.tinbox-list-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Queue rows: pure typography on the wall, hairline separators. No card chrome. */
.tinbox-list-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.55rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 0;
    position: relative;
    outline: none;
}

.tinbox-list-row:hover {
    background: var(--bg-2);
}

/* Selected = lifted paper sheet, marked with an ink rule at the leading edge.
   Selecting a row no longer moves it to the top of the list, so "which one am I
   reading" can't be read from position — the mark is the only answer, and the
   surface lift alone is invisible at these contrast steps in both themes. */
.tinbox-list-row {
    --row-selected-rule: inset 3px 0 0 0 var(--accent);
}

.tinbox-list-row.selected {
    background: var(--bg-card);
    box-shadow: var(--row-selected-rule), var(--shadow-md);
    border-radius: 2px;
    border-bottom-color: transparent;
    z-index: 1;
}

.tinbox-list-row.selected::before,
.tinbox-list-row.selected::after {
    content: none;
    display: none;
}

.tinbox-list-row:focus-visible {
    box-shadow: var(--shadow-glow);
    border-radius: 2px;
}

/* Keyboard focus must survive selection: layer the ink ring over the paper lift. */
.tinbox-list-row.selected:focus-visible,
html[data-theme] body.tinbox-page .tinbox-list-row.selected:focus-visible {
    box-shadow: var(--row-selected-rule), var(--shadow-md), var(--shadow-glow);
}

/* Fallback focus anchors (tinbox_focus.mjs). They exist so the page keeps a
   live keyboard-focus owner when the selected row is rebuilt; that focus is
   bookkeeping, never a place the user navigated to, so it draws nothing. */
#tinbox-list:focus,
#tinbox-list:focus-visible,
#tinbox-card:focus,
#tinbox-card:focus-visible {
    outline: none;
    box-shadow: none;
}

.tinbox-list-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.tinbox-list-row-subject {
    display: flex;
    align-items: baseline;
    /* Gap between subject ellipsis and attachment glyph (must not sit flush). */
    gap: 0.4rem;
    min-width: 0;
    font-family: var(--font-subject, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
}
.tinbox-list-row-subject-text {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sender: small/600 sans. */
.tinbox-list-row-meta {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tinbox-needs-reply-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem 0.02rem 0.32rem;
    border-radius: 999px;
    background: var(--bg-card-3);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    vertical-align: middle;
    line-height: 1.4;
}

.tinbox-needs-reply-marker::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.85;
    flex: none;
}

.tinbox-replied-marker {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    color: var(--success-color);
    font-size: 0.64rem;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.tinbox-mailbox-dot {
    display: inline-block;
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    flex: none;
}

.tinbox-list-one-mailbox .tinbox-mailbox-dot {
    display: none;
}

/* Reinboxed rows: decided-archive mail moved back to the inbox, surfaced by
   the daily audit. Same quiet grammar as the needs-reply marker; a hollow dot
   distinguishes it at a glance without shouting. */
.tinbox-reinboxed-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: 0.4rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}

.tinbox-reinboxed-marker::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0.65;
}

/* Thread-collapse badge + participants (spec 2026-07-22). Quiet chip grammar. */
.tinbox-thread-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-card-3);
    vertical-align: middle;
    white-space: nowrap;
}

.tinbox-thread-participants {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.02rem;
}

.tinbox-sender .tinbox-thread-badge {
    font-weight: 600;
}

.tinbox-sender .tinbox-thread-participants {
    width: 100%;
    flex-basis: 100%;
    margin-top: 0.1rem;
}

/* Why-line: muted footnote. */
.tinbox-list-row-snippet {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.02rem;
}

/* Quiet stale-digest marker on folded cards — muted, no accent color. */
.tinbox-digest-stale {
    font-weight: 400;
    color: var(--text-faint, var(--text-muted));
    white-space: nowrap;
}

.tinbox-list-row-date {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-faint);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
    text-align: right;
}

/* Quiet status stamp: owner has replied through the app. Same tone as
   needs-reply / reinboxed markers; not a control. */
.tinbox-replied-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.tinbox-replied-glyph {
    flex-shrink: 0;
    opacity: 0.75;
}

.tinbox-replied-line {
    margin-top: 0.28rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.tinbox-replied-line.hidden,
.tinbox-replied-line[hidden] {
    display: none;
}

.spine-coda-owner {
    margin-left: 0.42rem;
    color: var(--text-faint, var(--text-muted));
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Reader mailbox identity: a full-address capsule. Compact list surfaces
   override this below to preserve their existing quiet local-part label. */
.tinbox-acct-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    max-width: min(100%, 24rem);
    min-width: 0;
    padding: 0.18rem 0.55rem 0.18rem 0.42rem;
    margin-right: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-main);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: middle;
}
.tinbox-acct-chip-dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    flex: none;
}
.tinbox-acct-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Queue and unsent-rescue mailbox labels retain their previous treatment. */
.tinbox-list-row .tinbox-acct-chip,
.tinbox-unsent-row .tinbox-acct-chip {
    display: inline !important;
    align-items: baseline !important;
    gap: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin-right: 0.4rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}
.tinbox-list-row .tinbox-acct-chip > span:first-child,
.tinbox-unsent-row .tinbox-acct-chip > span:first-child {
    display: none !important;
}

/* One inbox in the loaded queue means the tag repeats the same token on every
   row and distinguishes nothing. The reader header keeps its tag — that is one
   instance, not a column of them. Set by renderListRowsInner(). */
.tinbox-list-one-mailbox .tinbox-acct-chip {
    display: none !important;
}

.tinbox-list-more {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
    flex-shrink: 0;
}

.tinbox-list-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2rem 1.25rem;
    text-align: center;
    line-height: 1.5;
}

.tinbox-list-empty.tinbox-list-loading {
    animation: tinbox-list-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes tinbox-list-loading-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tinbox-list-empty.tinbox-list-loading { animation: none; }
}

@media (min-width: 769px) {
    .queue-pane {
        padding: 0.6rem 0.75rem 0;
    }

    .reader-pane {
        padding: 0.7rem 1.5rem 0;
    }

    #tinbox-card {
        padding: 0.4rem 1.25rem 0;
    }

    /* The message IS the page. Nothing in the reader is capped to a centred
       column any more: a 760px sheet in a 1500px pane read as a small letter
       dropped in a grey field, and the explain strip above it — which was never
       capped — was twice its width. Everything now shares the pane's left edge
       and its full width; the reading measure lives inside the paper.
       width:100% stays mandatory on any flex child that ever gets a max-width:
       margin-inline:auto in a COLUMN flex container kills the cross-axis
       stretch and the email iframe silently falls back to 300px. */
    .tinbox-headline,
    .tinbox-subline,
    .tinbox-recipients,
    .tinbox-why-callout,
    #tinbox-body .viewer-content,
    .tinbox-body .viewer-plain-only,
    .tinbox-body .plain-text-toggle,
    .tinbox-actionbar {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .tinbox-headline {
        margin-bottom: 0.12rem;
    }

    /* One line. The old rule reserved two lines' height on every message to
       stop the body jumping — which spent a permanent empty line to display
       one on nearly all mail. The full subject stays available as the title
       attribute and in the queue row. */
    .tinbox-headline h3 {
        display: block;
        min-height: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.32rem;
        line-height: 1.3;
        /* Not flex:1. Now that the header spans the pane, a growing h3 shoved
           the status tag to the far right edge, a thousand pixels from the
           subject it belongs to. Shrink-to-fit keeps them adjacent. */
        flex: 0 1 auto;
    }

    .tinbox-body {
        margin-top: 0.5rem;
    }

    .tinbox-body .viewer-html-frame {
        flex: 0 0 auto;
    }

    /* Plain-text mail never goes through the iframe, so it is typeset here —
       in the same proportional face and size as the srcdoc, at the same page
       margin. It used to render in 0.95rem monospace, which read as a log file
       rather than a letter and made the message look smaller than it is.
       pre-wrap keeps the sender's own hard wraps, which is what actually
       governs line length in plain mail. */
    .tinbox-body .viewer-plain-only pre,
    .tinbox-body .plain-text-toggle pre {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        font-size: 1.03rem;
        line-height: 1.62;
        padding: 2.1rem clamp(1.5rem, 3vw, 3.5rem);
    }

    .tinbox-body .plain-text-toggle {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .tinbox-body .plain-text-toggle summary {
        display: inline-block;
        margin: 0;
        padding: 0.2rem 0;
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .tinbox-body .plain-text-toggle[open] summary {
        margin-bottom: 0.25rem;
    }

    .tinbox-actionbar {
        min-height: 44px;
        margin-top: 0.35rem;
        /* The bar lives outside #tinbox-card, whose inline padding insets the
           sheet. Matching that padding here keeps the first verb on the same
           left edge as the paper instead of 20px outside it. */
        padding: 0.4rem 1.25rem 0.45rem;
    }

    .tinbox-action-btn {
        min-height: 30px;
    }

    body.tinbox-page .tinbox-pill {
        min-height: 30px;
        padding: 0.25rem 0.4rem;
        flex-direction: row;
        align-items: baseline;
        gap: 0.3rem;
    }

    body.tinbox-page .tinbox-pill .metric-value {
        font-size: 0.78rem;
    }

    .queue-title {
        display: none;
    }

    .queue-head .account-filter {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }

    .queue-head .account-scope-trigger {
        width: 100%;
        min-width: 0;
        /* Full width keeps the click target generous, but the label has to sit
           on the same left edge as the counts row underneath it — centred text
           in a stretched control reads as a mistake. */
        justify-content: flex-start;
    }

    .queue-head .account-scope-label {
        min-width: 0;
    }

    .tinbox-list-row {
        padding: 0.45rem 0.55rem;
    }

    .tinbox-list-row-meta {
        line-height: 1.2;
    }

    .tinbox-list-row-subject,
    .tinbox-list-row-snippet {
        line-height: 1.3;
    }

    .tinbox-list-row .tinbox-acct-chip,
    .tinbox-unsent-row .tinbox-acct-chip {
        letter-spacing: 0.01em !important;
        text-transform: none !important;
    }

    body.tinbox-page .tinbox-pill .metric-label,
    #tinbox-chips > * {
        letter-spacing: 0.01em;
        text-transform: none;
    }
}

/* ── Tinbox: responsive ── */

@media (max-width: 1080px) {
    .tinbox-panes {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .tinbox-panes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        /* Keep the grid from collapsing to 0 when a child is display:none. */
        min-height: 0;
        height: 100%;
    }

    .tinbox-content.mode-list .tinbox-panes {
        /* List mode: single full-height track for the queue (reader is display:none). */
        grid-template-rows: minmax(0, 1fr);
    }

    /* List mode: full-height queue, no collapse chrome (unchanged from prior). */
    .tinbox-content.mode-list .queue-pane {
        max-height: none;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .tinbox-content.mode-list .queue-collapse-toggle {
        display: none !important;
    }

    .tinbox-content.mode-list .queue-sheet {
        display: flex;
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        height: 100%;
        position: static;
        box-shadow: none;
        overflow: hidden;
    }

    .tinbox-content.mode-list .tinbox-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    /* Focus mode: reader fills remaining height; action bar stays on-screen. */
    .tinbox-content.mode-focus .reader-pane {
        min-height: 0;
        overflow: hidden;
    }

    .tinbox-content.mode-focus .tinbox-stage {
        min-height: 0;
        overflow: auto;
    }

    .tinbox-content.mode-focus .tinbox-actionbar {
        flex: none;
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: var(--bg-body);
    }

    .queue-pane {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 0.75rem 0.75rem 0;
    }

    /* Focus mode: collapse queue to a single-line bar; reader gets the viewport. */
    .tinbox-content.mode-focus .queue-pane {
        max-height: none;
        padding: 0;
        gap: 0;
        overflow: visible;
        position: relative;
        z-index: 20;
        border-bottom: none;
        background: transparent;
    }

    .tinbox-content.mode-focus .queue-collapse-toggle {
        display: flex;
    }

    /* Collapsed: hide the full queue chrome so the reader is not crushed. */
    .tinbox-content.mode-focus .queue-pane:not(.queue-expanded) .queue-sheet {
        display: none;
    }

    /* Expanded: current list as a sheet overlay over the reader (≤42vh). */
    .tinbox-content.mode-focus .queue-pane.queue-expanded .queue-sheet {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: 42vh;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 0.75rem 0.75rem 0.85rem;
        background: var(--bg-2);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        z-index: 30;
    }

    .queue-title {
        font-size: 1.25rem;
    }

    .reader-pane {
        padding: 0.75rem 0.75rem 0;
    }

    /* One-row mobile header: scope flexes, icon buttons stay 32px, title
       and view toggle hide (list is the only mode at this breakpoint). */
    .queue-head {
        flex-wrap: nowrap;
    }

    .queue-head-title-row,
    .queue-head .queue-title,
    .queue-head .tinbox-view-toggle {
        display: none;
    }

    .queue-head .account-filter {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }

    .queue-head .account-scope-trigger {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }
}

/* Touch / coarse pointer: larger action targets, hide keyboard chips (no keyboard). */
@media (pointer: coarse) {
    .tinbox-action-btn,
    .tinbox-primary-actions .tinbox-action-btn,
    .tinbox-secondary-actions button,
    .tinbox-secondary-actions .button-link {
        min-height: 44px;
    }

    .tinbox-action-btn kbd,
    .tinbox-secondary-actions kbd,
    .tinbox-actionbar kbd,
    .tinbox-feedback kbd,
    .tinbox-snooze summary kbd {
        display: none;
    }
}

/* Mobile action bar: one even row of equal actions, no hotkey chips (W3). */
@media (max-width: 768px) {
    .tinbox-actionbar {
        gap: 0.35rem;
        padding-inline: 0.5rem;
    }

    .tinbox-primary-actions {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.3rem;
        min-width: 0;
        width: auto;
    }

    .tinbox-primary-actions .tinbox-action-btn,
    .tinbox-primary-actions .tinbox-snooze {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    /* Even treatment for all five actions — same sentence-case family. */
    .tinbox-primary-actions .tinbox-action-btn,
    .tinbox-primary-actions .tinbox-action-btn.secondary,
    .tinbox-primary-actions .tinbox-snooze > summary {
        min-height: 44px;
        min-width: 0;
        padding: 0.45rem 0.25rem;
        border: 1px solid var(--line);
        border-radius: 2px;
        background: var(--bg-card, var(--surface, transparent));
        color: var(--text-main);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        box-shadow: none;
    }

    .tinbox-primary-actions .tinbox-action-btn[data-action="archive"] {
        background: var(--text-main);
        color: var(--bg-body);
        border-color: var(--text-main);
    }

    .tinbox-primary-actions .tinbox-action-btn[data-action="delete"] {
        color: var(--danger-color, #b42318);
        border-color: var(--line);
        background: var(--bg-card, var(--surface, transparent));
    }

    .tinbox-primary-actions .tinbox-snooze {
        position: relative;
    }

    .tinbox-primary-actions .tinbox-snooze > summary {
        list-style: none;
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
    }

    .tinbox-primary-actions .tinbox-snooze > summary::-webkit-details-marker {
        display: none;
    }

    .tinbox-action-btn kbd,
    .tinbox-secondary-actions kbd,
    .tinbox-actionbar kbd,
    .tinbox-feedback kbd,
    .tinbox-snooze summary kbd {
        display: none;
    }

    /* Spacer is a desktop push-right aid; More sits at the end of the row. */
    .tinbox-actionbar > span.tinbox-bar-spacer {
        display: none;
    }

    .tinbox-tools {
        flex: none;
        margin-left: 0.2rem;
    }
}

@media (max-width: 600px) {

    .tinbox-primary-actions {
        flex-wrap: nowrap;
    }

    .tinbox-action-btn {
        min-width: 0;
    }

    .tinbox-card {
        padding: 1rem;
    }

    #tinbox-card {
        padding: 0.85rem;
    }

    .tinbox-shortcuts {
        font-size: 0.58rem;
    }

    .tinbox-card h3 {
        font-size: 1rem;
    }

    .tinbox-metrics {
        gap: 0.18rem;
    }

    body.tinbox-page .tinbox-pill {
        padding: 0.3rem 0.58rem;
    }
}


/* ── Tinbox cleanup widget (strip in the queue pane) ── */
.tinbox-cleanup-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  flex: none;
}
.tinbox-cleanup-widget.hidden { display: none; }
.tinbox-cleanup-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.tinbox-cleanup-progress {
  display: inline-block;
  flex: 1 1 60px;
  min-width: 50px;
  width: 80px;
  height: 3px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.tinbox-cleanup-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--text-main);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}
.tinbox-cleanup-btn {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.1rem 0.1rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--rule, currentColor);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
.tinbox-cleanup-btn:hover {
  background: transparent;
  opacity: 0.85;
}
.tinbox-cleanup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tinbox-cleanup-btn.danger {
  color: var(--danger-color);
  border-bottom-color: var(--danger-color);
}
.tinbox-cleanup-btn.danger:hover {
  background: transparent;
  color: var(--danger-color);
}
.tinbox-cleanup-details {
  position: relative;
}
.tinbox-cleanup-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  color: var(--primary-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.tinbox-cleanup-link::-webkit-details-marker { display: none; }
.tinbox-cleanup-link:hover {
  text-decoration: underline;
}
.tinbox-cleanup-popover {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 0.55rem);
  bottom: auto;
  width: min(380px, calc(100vw - 2rem));
  max-height: 420px;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  z-index: 30;
}
.tinbox-cleanup-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}
.tinbox-cleanup-panel-head strong {
  font-size: 0.8rem;
  color: var(--text-main);
}
.tinbox-cleanup-panel-head span,
.tinbox-cleanup-detail-row {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tinbox-cleanup-feed {
  display: flex;
  flex-direction: column;
  margin-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.tinbox-cleanup-feed-item {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
}
.tinbox-cleanup-feed-item.error .tinbox-cleanup-feed-action {
  color: var(--danger-color);
}
.tinbox-cleanup-feed-subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}
.tinbox-cleanup-feed-action {
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
}
.tinbox-cleanup-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.tinbox-cleanup-summary-tag {
  display: inline;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 0.68rem;
  color: var(--text-muted);
  background: transparent;
}
.tinbox-cleanup-links {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.tinbox-cleanup-links button {
  font-size: 0.68rem;
  padding: 0.25rem 0.5rem;
}
/* Theme-specific cleanup overrides retired — tokens handle light/dark. */

/* ── Bottom bar toggles (AI activity, Tools) ── */
.tinbox-bar-toggle {
  position: relative;
}
.tinbox-bar-toggle > summary {
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  user-select: none;
  list-style: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tinbox-bar-toggle > summary:hover { opacity: 1; }
.tinbox-bar-toggle > summary::-webkit-details-marker { display: none; }
.tinbox-bar-toggle[open] > summary { opacity: 1; }
.tinbox-bar-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  /* Clamp to the viewport like .tinbox-cleanup-popover — a hard 340px
     overflowed the screen edge on phones. */
  width: min(340px, calc(100vw - 2rem));
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  margin-bottom: 0.35rem;
  z-index: 20;
}
.tinbox-tools-popover { width: min(18rem, calc(100vw - 2rem)); left: auto; right: 0; }
.tinbox-bar-spacer { flex: 1 1 auto; min-width: 0.5rem; }
.tinbox-tools { flex: none; margin-left: 0; }
.tinbox-tools > summary {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  min-height: 34px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
}
.activity-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.15rem;
  border-radius: 0;
  font-size: 0.75rem;
  background: transparent;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  transition: none;
}
.activity-entry:hover {
  border-color: var(--line);
}
.activity-entry__decision {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  white-space: nowrap;
}
.activity-entry__decision--spam { color: var(--danger-color); }
.activity-entry__decision--trashed { color: var(--danger-color); }
.activity-entry__decision--archive,
.activity-entry__decision--archived,
.activity-entry__decision--filed,
.activity-entry__decision--useful_archive,
.activity-entry__decision--receipt { color: var(--text-muted); }
.activity-entry__decision--requires_response { color: var(--text-main); }
.activity-entry__decision--should_read { color: var(--text-main); }
.activity-entry__decision--kept { color: var(--text-main); }

.activity-entry__mode--list,
.activity-entry__mode--rule { color: var(--text-main); }
.activity-entry__mode--imp { color: var(--warning-color); }
.activity-entry__mode--safety { color: var(--success-color); }
.activity-entry__subject {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
  font-family: var(--font-subject, ui-serif, 'New York', Georgia, serif);
  font-weight: 500;
}
.activity-entry__time {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.activity-entry__recovery {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 0.68rem;
  padding-left: 0.1rem;
}

/* Feedback confirmation toast enhancement */
.feedback-sent-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--success-color, var(--text-muted));
  padding: 0.25rem 0.5rem;
  animation: fadeInOut 2s ease forwards;
}

/* Teach acts: Trash is destructive (never default); Pitch pile/Keep neutral. */
.tinbox-feedback .feedback-correct-btn.feedback-act-destructive,
.tinbox-feedback .feedback-correct-btn[data-act="trash"] {
  color: var(--danger, #c2410c);
  border-color: rgba(220, 100, 80, 0.4);
}
.tinbox-feedback .feedback-correct-btn.feedback-act-destructive:hover,
.tinbox-feedback .feedback-correct-btn[data-act="trash"]:hover {
  border-color: rgba(220, 100, 80, 0.75);
  background: rgba(220, 100, 80, 0.1);
}
.tinbox-feedback .feedback-receipt {
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}
.feedback-receipt-summary {
  display: block;
}
.teach-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary, var(--text-muted));
}
.teach-offer-prompt {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--text-primary, inherit);
}
.teach-offer-scope {
  flex: 1 1 100%;
  font-size: 0.72rem;
  color: var(--text-muted, var(--text-secondary));
  line-height: 1.3;
}
.teach-offer-actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.teach-offer-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--line, var(--border, #ccc));
  background: var(--bg-secondary, transparent);
  color: var(--text-primary, inherit);
  cursor: pointer;
}
.teach-offer-btn:hover:not(:disabled) {
  border-color: var(--accent, #111111);
}
.teach-offer-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.teach-offer-yes {
  border-color: rgba(80, 140, 100, 0.45);
}
.teach-offer-accepted,
.teach-offer-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-secondary, var(--text-muted));
}
.teach-offer-accepted-text {
  color: var(--success-color, var(--text-primary));
}
.teach-offer-float {
  position: fixed;
  /* Above the bottom-center undo-toast zone (~2rem + toast height): the
     leave-act flow shows BOTH at once and the toast was fully covering the
     offer's Yes/No for its whole 7s life (QA 2026-07-28). */
  bottom: 7rem;
  left: 50%;
  transform: translateX(-50%);
  /* Above the coach/tip layer (1200) — the offer carries Yes/No actions and
     follows a user action; a passive tip must never sit on top of it. */
  z-index: 1250;
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.75rem 1.75rem 0.75rem 1rem;
  border-radius: 8px;
  background: var(--bg-elevated, var(--bg-secondary, #1c1c22));
  border: 1px solid var(--line, var(--border, #333));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.teach-offer-float .teach-offer {
  color: var(--text-primary, inherit);
}
.teach-offer-float-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: none;
  background: transparent;
  color: var(--text-muted, inherit);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}
.teach-offer-float-close:hover {
  color: var(--text-primary, inherit);
  background: rgba(128, 128, 128, 0.12);
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Gallery White refinements ────────────────────────────────────────────
   High-specificity rules using html[data-theme] (0,3,2) win over the base
   pill rules above (0,2,1) regardless of file order.
   ────────────────────────────────────────────────────────────────────────── */

/* Queue tabs: active = ink underline, no filled capsule. */
html[data-theme] body.tinbox-page .tinbox-pill.active,
html[data-theme] body.tinbox-page .tinbox-pill[aria-selected="true"] {
    background: transparent;
    box-shadow: none;
    color: var(--text-main);
}
html[data-theme] body.tinbox-page .tinbox-pill.active::after,
html[data-theme] body.tinbox-page .tinbox-pill[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0;
    height: 1px;
    background: var(--rule, var(--text-main));
}

html[data-theme] body.tinbox-page .tinbox-pill.active .metric-value,
html[data-theme] body.tinbox-page .tinbox-pill[aria-selected="true"] .metric-value {
    color: var(--text-main);
}

/* Reader chrome sits on the wall — no card float, no gradient bloom. */
.tinbox-card {
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
}

.tinbox-card::before {
    content: none;
    display: none;
}

/* Subject is the artwork: medium serif. */
.tinbox-card h3 {
    font-family: var(--font-subject, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    font-size: 1.55rem;
    color: var(--text-main);
}

/* Loader stays neutral ink; each scene root can override these inherited values. */
.tinbox-loader {
    --imp-accent: 17, 17, 17;
    --imp-bright: 99, 99, 94;
}
[data-theme="dark"] .tinbox-loader {
    --imp-accent: 242, 242, 240;
    --imp-bright: 164, 164, 158;
}

/* Wall-toned loading bars (redacted), no brand shimmer. */
body.tinbox-page .skeleton,
body.tinbox-page .skeleton-card,
body.tinbox-page .skeleton-text {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 2px;
}
body.tinbox-page .skeleton::after,
body.tinbox-page .skeleton-card::after {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--line) 80%, transparent),
        transparent
    );
}

/* Primary send in composer = ink placard. */
body.tinbox-page #tinbox-reply-send.btn-primary,
body.tinbox-page .tinbox-composer .btn-primary {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    border-radius: 2px;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Beat modern.css post-import overrides (source order) ─────────────────
   modern.css styles `button.secondary`, pill radii, and light-theme action
   chips AFTER this file is imported. html[data-theme] body.tinbox-page
   specificity wins without editing modern.css (out of Seat B ownership).
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme] body.tinbox-page .tinbox-action-btn,
html[data-theme] body.tinbox-page .tinbox-action-btn.secondary,
html[data-theme] body.tinbox-page button.tinbox-action-btn,
html[data-theme] body.tinbox-page button.tinbox-action-btn.secondary {
    border-radius: 0;
    letter-spacing: 0;
    text-transform: none;
    font-size: 10.5px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    box-shadow: none;
    color: var(--text-main);
    padding: 0.4rem 0.15rem 0.35rem;
    transform: none;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="archive"],
html[data-theme] body.tinbox-page button.tinbox-action-btn[data-action="archive"] {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    border-bottom: none;
    border-radius: 2px;
    padding: 0.5rem 0.95rem;
    box-shadow: none;
    transform: none;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="archive"]:hover:not(:disabled),
html[data-theme] body.tinbox-page button.tinbox-action-btn[data-action="archive"]:hover:not(:disabled) {
    background: var(--text-main);
    color: var(--bg-body);
    filter: none;
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="delete"],
html[data-theme] body.tinbox-page button.tinbox-action-btn[data-action="delete"],
html[data-theme="light"] body.tinbox-page .tinbox-action-btn[data-action="delete"],
html[data-theme="dark"] body.tinbox-page .tinbox-action-btn[data-action="delete"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--danger-color);
    color: var(--danger-color);
    box-shadow: none;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="delete"]:hover:not(:disabled),
html[data-theme="light"] body.tinbox-page .tinbox-action-btn[data-action="delete"]:hover:not(:disabled) {
    background: transparent;
    color: var(--danger-color);
    border-bottom-color: var(--danger-color);
    opacity: 0.85;
}

html[data-theme] body.tinbox-page button.tinbox-action-btn-wrong.secondary,
html[data-theme="light"] body.tinbox-page button.tinbox-action-btn-wrong.secondary,
html[data-theme="dark"] body.tinbox-page button.tinbox-action-btn-wrong.secondary,
html[data-theme="light"] body.tinbox-page .tinbox-action-btn-wrong {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    color: var(--text-muted);
    box-shadow: none;
}

html[data-theme] body.tinbox-page button.tinbox-action-btn-wrong.secondary:hover:not(:disabled),
html[data-theme="light"] body.tinbox-page button.tinbox-action-btn-wrong.secondary:hover:not(:disabled),
html[data-theme="light"] body.tinbox-page .tinbox-action-btn-wrong:hover:not(:disabled) {
    background: transparent;
    color: var(--text-main);
    border-bottom-color: var(--rule, currentColor);
}

html[data-theme] body.tinbox-page .tinbox-action-btn kbd,
html[data-theme="light"] body.tinbox-page .tinbox-action-btn kbd,
html[data-theme] body.tinbox-page .tinbox-feedback kbd,
html[data-theme] body.tinbox-page .tinbox-secondary-actions kbd {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-faint);
    opacity: 1;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="archive"] kbd,
html[data-theme="light"] body.tinbox-page .tinbox-action-btn[data-action="archive"] kbd {
    background: color-mix(in srgb, var(--bg-body) 12%, transparent);
    border-color: color-mix(in srgb, var(--bg-body) 35%, transparent);
    color: var(--bg-body);
    opacity: 1;
}

html[data-theme] body.tinbox-page .tinbox-action-btn[data-action="delete"] kbd {
    border-color: color-mix(in srgb, var(--danger-color) 35%, transparent);
    color: var(--danger-color);
    background: transparent;
}

/* Snooze summary joins the same sentence-case family as Reply/Later.
   Must sit AFTER the theme beat-block so it
   isn't left as the only grey/boxed outlier. */
html[data-theme] body.tinbox-page .tinbox-snooze > summary,
html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-snooze > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    border: none;
    border-bottom: 1px solid var(--rule, currentColor);
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.4rem 0.15rem 0.35rem;
    box-shadow: none;
    cursor: pointer;
}
html[data-theme] body.tinbox-page .tinbox-snooze > summary:hover {
    color: var(--text-main);
    opacity: 0.85;
}

/* Mobile (≤768): re-assert one shared primary-action family AFTER the theme
   beat-block. Earlier @media (max-width: 768px) chip rules lose to
   html[data-theme] body.tinbox-page .tinbox-action-btn — which left Snooze
   as a boxed chip while Reply/Later stayed underlined. */
@media (max-width: 768px) {
    html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-action-btn,
    html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-action-btn.secondary,
    html[data-theme] body.tinbox-page .tinbox-primary-actions button.tinbox-action-btn,
    html[data-theme] body.tinbox-page .tinbox-primary-actions button.tinbox-action-btn.secondary,
    html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-snooze > summary {
        min-height: 44px;
        min-width: 0;
        padding: 0.45rem 0.25rem;
        border: none;
        border-bottom: 1px solid var(--rule, currentColor);
        border-radius: 0;
        background: transparent;
        color: var(--text-main);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        box-shadow: none;
    }
    html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-action-btn[data-action="archive"],
    html[data-theme] body.tinbox-page .tinbox-primary-actions button.tinbox-action-btn[data-action="archive"] {
        background: var(--text-main);
        color: var(--bg-body);
        border: none;
        border-bottom: none;
        border-radius: 2px;
        padding: 0.5rem 0.4rem;
    }
    html[data-theme] body.tinbox-page .tinbox-primary-actions .tinbox-action-btn[data-action="delete"],
    html[data-theme] body.tinbox-page .tinbox-primary-actions button.tinbox-action-btn[data-action="delete"] {
        color: var(--danger-color, #b42318);
        border: none;
        border-bottom: 1px solid var(--danger-color, #b42318);
        background: transparent;
    }
}

html[data-theme="light"] body.tinbox-page .tinbox-action-btn[data-action="requires_response"]:hover:not(:disabled),
html[data-theme="light"] body.tinbox-page .tinbox-action-btn[data-action="should_read"]:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--rule, currentColor);
    color: var(--text-main);
}

html[data-theme] body.tinbox-page .tinbox-cleanup-btn,
html[data-theme] body.tinbox-page .tinbox-secondary-actions button,
html[data-theme] body.tinbox-page .tinbox-secondary-actions .button-link {
    border-radius: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    box-shadow: none;
    transform: none;
}

html[data-theme] body.tinbox-page .tinbox-list-row.selected {
    background: var(--bg-card);
    box-shadow: var(--row-selected-rule), var(--shadow-md);
    border-radius: 2px;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
}

html[data-theme] body.tinbox-page .tinbox-list-row.selected::before,
html[data-theme] body.tinbox-page .tinbox-list-row.selected::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
}

html[data-theme] body.tinbox-page .tinbox-body .viewer-html-frame {
    background: #FEFEFC;
    box-shadow: var(--shadow-md);
    border: none;
    border-radius: 2px;
}

html[data-theme] body.tinbox-page .tinbox-why-callout {
    background: transparent;
    /* No rule of its own. The sheet's own hairline already separates the strip
       from the message; a second heavy line directly above it read as two
       competing dividers across the full width of the pane. */
    border: none;
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body.tinbox-page .activity-entry,
html[data-theme="light"] body.tinbox-page .activity-entry,
html[data-theme] body.tinbox-page .activity-entry__decision,
html[data-theme="light"] body.tinbox-page .activity-entry__decision {
    background: transparent;
    border-radius: 0;
    border-color: var(--line);
}

/* While any composer (reply / forward / compose) is open, the triage action
   bar hides: its buttons are inert-by-intent then (hotkeys already are), and
   it overlays the composer's own Cancel/Send row at the pane bottom. */
body.tinbox-page:has(section.tinbox-composer:not(.hidden)) .tinbox-actionbar {
    display: none;
}

/* Queue-done cards up: hide the duplicate Set aside wall entry (mirrors iOS). */
body.tinbox-queue-done-visible #setup-hold-entry {
  display: none;
}

/* --- Bulk select (list view) + snooze menu -------------------------------
   Multi-select is deliberately quiet: the checkbox only reveals itself on
   hover or when something is selected, so the default reading experience is
   the same clean list it has always been. Triage stays one-at-a-time; this is
   the escape hatch for a screen full of the same newsletter. */

.tinbox-list-row-select {
    display: flex;
    align-items: center;
    padding-top: 0.15rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: pointer;
    flex: 0 0 auto;
}

.tinbox-list-row:hover .tinbox-list-row-select,
.tinbox-list-row:focus-within .tinbox-list-row-select,
.tinbox-list-row.bulk-selected .tinbox-list-row-select {
    opacity: 1;
}

.tinbox-list-row-select input {
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.tinbox-list-row.bulk-selected {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tinbox-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    position: sticky;
    top: 0;
    z-index: 3;
}

.tinbox-bulk-count {
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: auto;
}

.tinbox-bulk-bar button {
    font-size: 0.82rem;
    padding: 0.25rem 0.6rem;
}

.tinbox-bulk-clear {
    opacity: 0.75;
}

.tinbox-snooze > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: transparent;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.4rem 0.65rem;
    box-shadow: none;
}
.tinbox-snooze > summary:hover {
    color: var(--text-main);
    opacity: 0.85;
}

.tinbox-snooze > summary::-webkit-details-marker {
    display: none;
}

.tinbox-snooze-popover {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    left: 0;
    right: auto;
    width: max-content;
    max-width: 16rem;
    min-width: 12rem;
    overflow: visible;
    margin-bottom: 0.5rem;
}

.tinbox-snooze-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 1.15rem;
    border: 6px solid transparent;
    border-top-color: var(--bg-card);
}

.tinbox-snooze-popover::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 1.1rem;
    border: 7px solid transparent;
    border-top-color: var(--line);
}

.tinbox-snooze-presets {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tinbox-snooze-popover button,
.tinbox-snooze-pick {
    text-align: left;
    width: 100%;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.45rem 0.55rem;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
}

.tinbox-snooze-popover button:hover,
.tinbox-snooze-pick:hover {
    background: var(--bg-2, var(--accent-soft));
}

.tinbox-snooze-custom {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.35rem 0.2rem 0.15rem;
    border-top: 1px solid var(--line);
}

.tinbox-snooze-custom.hidden {
    display: none;
}

.tinbox-snooze-custom-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tinbox-snooze-custom-caption {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.tinbox-snooze-custom input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--input-bg, var(--bg-card));
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
}

.tinbox-snooze-custom-confirm {
    background: var(--text-main) !important;
    color: var(--bg-body) !important;
    text-align: center !important;
}

.tinbox-attachment-badge {
    flex: none;
    font-size: 0.75em;
    opacity: 0.6;
    /* Real gap after the subject ellipsis (subject row is flex + gap; keep
       an explicit margin too so a bare text-node subject still separates). */
    margin-left: 0.35rem;
    vertical-align: baseline;
    line-height: 1;
}

/* Queue rows clamp sender/subject to one line each, so the chip gets its own
   line there (inline it would be clipped to nothing). */
.tinbox-invite-line {
    margin-top: 0.15rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Same clipping rule for the reinboxed marker's list-row placement. */
.tinbox-reinboxed-line {
    margin-top: 0.15rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.tinbox-reinboxed-line .tinbox-reinboxed-marker {
    margin-left: 0;
}

.tinbox-invite-line .tinbox-invite-chip {
    margin-left: 0;
    max-width: 100%;
}

/* Calendar-invite chip (G6): same quiet chip grammar as the thread badge, one
   notch more present — a real meeting must not scan like every other subject. */
.tinbox-invite-chip {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-main);
    background: var(--accent-soft);
    border: 1px solid var(--border-color);
    vertical-align: middle;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Recently archived keeps review panel (G6 safety net) ── */
.archived-keeps-room {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    flex: 1;
    overflow: auto;
    padding: 0.5rem 0 0.75rem;
}

.archived-keeps-room.hidden { display: none; }

.archived-keeps-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.archived-keeps-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.archived-keeps-title-row button { font-size: 0.78rem; }

.archived-keeps-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

.archived-keeps-helper,
.archived-keeps-empty {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.archived-keeps-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.archived-keeps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg-card);
}

.archived-keeps-row-main { min-width: 0; }

.archived-keeps-row-subject {
    font-family: var(--font-display, inherit);
    font-size: 0.9rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archived-keeps-row-meta,
.archived-keeps-row-when {
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archived-keeps-scope {
    margin-left: 0.4rem;
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    background: var(--bg-card-3);
}

.archived-keeps-restore { flex: 0 0 auto; font-size: 0.78rem; }

/* ── Recently archived review panel (shares the archived-keeps chrome) ── */

.queue-head .tinbox-recent-archives-open {
    margin: 0;
}

.recent-archives-filters {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.recent-archives-filter {
    font-size: 0.74rem;
    padding: 0.18rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
}

.recent-archives-filter.active {
    color: var(--text-main);
    border-color: var(--accent, currentColor);
}

.recent-archives-actor,
.recent-archives-destination {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    background: var(--bg-card-3);
}

.recent-archives-actor.is-user { font-weight: 600; }

.recent-archives-restore { flex: 0 0 auto; font-size: 0.78rem; white-space: nowrap; }

/* ── Reader body error (friendly, never the raw backend detail) ── */
.tinbox-body-error {
  padding: 1.25rem 0;
  color: var(--text-muted);
}
.tinbox-body-error p { margin: 0 0 0.75rem; }

/* Reader actions stay sentence case. Match the late theme override
   specificity so modern.css cannot reintroduce the old register. */
@media (min-width: 769px) {
  html[data-theme] body.tinbox-page .tinbox-action-btn,
  html[data-theme] body.tinbox-page button.tinbox-action-btn,
  html[data-theme] body.tinbox-page .tinbox-snooze > summary,
  html[data-theme] body.tinbox-page .tinbox-secondary-actions button {
    letter-spacing: 0.01em;
    text-transform: none;
  }
}

/* ── Thread Spine (2026-08-19, THREAD_SPINE): one line per message, day
   rules, one-open expansion. Rides the catch-up panel shell so minimize and
   mount behavior stay identical. ── */
.spine-stateline {
    margin: 0.15rem 0 0.35rem;
    color: var(--text-main);
}
.spine-rows {
    margin-top: 0.2rem;
}
.spine-dayrule {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.65rem 0 0.25rem;
}
.spine-dayrule::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border-color);
}
.spine-dayrule span {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.spine-row {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.22rem 0.3rem;
    margin: 0;
    font: inherit;
    color: var(--text-main);
    cursor: pointer;
}
.spine-row:hover {
    background: rgba(127, 127, 127, 0.08);
}
.spine-row.spine-current:hover {
    background: none;
}
.spine-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.spine-who {
    flex: 0 0 74px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.spine-gist {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}
.spine-current .spine-gist {
    font-weight: 600;
}
.spine-current {
    cursor: default;
}
.spine-current-mark {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.spine-slot[hidden] {
    display: none !important;
}
.spine-msg-body {
    margin: 0.15rem 0 0.5rem 84px;
    padding: 0.6rem 0.8rem;
    background: rgba(127, 127, 127, 0.07);
    border-radius: 8px;
}
.spine-msg-meta {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.spine-msg-text {
    white-space: pre-wrap;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-main);
}
.spine-msg-open {
    display: inline-block;
    margin-top: 0.5rem;
}
.spine-coda-eyebrow {
    margin-top: 0.7rem;
}
@media (max-width: 640px) {
    .spine-row {
        flex-wrap: wrap;
    }
    .spine-who {
        flex-basis: 100%;
    }
    .spine-msg-body {
        margin-left: 0;
    }
}