/* say-it.css — the Ferguson Family Vault's one voice-input control.
 *
 * unifying-sayit-voice S4 (2026-09-15). Joe ruling 4: the Halo Mic Quill carries the
 * wordmark "Say It" inside the artwork, so the control takes NO text caption anywhere.
 * There is deliberately no rule in this file that draws a label next to `.sayit-glyph` —
 * if one ever appears, it is the bug.
 *
 * Z-index: the sheet sits at 11600 / backdrop 11550 — ABOVE the Mobile Control Panel's own
 * popup pair (11500 / 11400, mobile-control-panel.js), because Say It can be pressed FROM a
 * control-panel slot and a door that opens underneath the bar that opened it is not a door.
 * Below the toast layer, so "Captured." is readable while the sheet dissolves.
 */

/* ── The control ──────────────────────────────────────────────────────────────── */

.sayit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    line-height: 0;
    color: inherit;
    transition: transform 120ms ease, background-color 120ms ease;
}

.sayit-btn:hover,
.sayit-btn:focus-visible {
    background: rgba(94, 234, 212, 0.12);
}

.sayit-btn:active { transform: scale(0.94); }

.sayit-btn:focus-visible {
    outline: 2px solid #5EEAD4;
    outline-offset: 2px;
}

.sayit-glyph {
    display: block;
    width: 26px;
    height: 26px;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Sizes (unifying-portrait-voice S2) ───────────────────────────────────────────
   SayIt.button({size}) — 'standard' is the rule above, unchanged, so every existing call
   site keeps its look. Still no caption at any size: the hero is the glyph, larger. */

.sayit-btn--hero {
    padding: 8px;
    border-radius: 16px;
    min-width: 64px;
    min-height: 64px;
    background: rgba(94, 234, 212, 0.14);
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.38);
}
.sayit-btn--hero:hover,
.sayit-btn--hero:focus-visible { background: rgba(94, 234, 212, 0.26); }
.sayit-btn--hero .sayit-glyph,
.sayit-glyph--hero { width: 48px; height: 48px; }

.sayit-btn--inline {
    padding: 4px;
    border-radius: 8px;
    min-width: 32px;
    min-height: 32px;
    vertical-align: middle;
}
.sayit-btn--inline .sayit-glyph,
.sayit-glyph--inline { width: 20px; height: 20px; }

/* The touch floor (Greg 2026-10-19, Say It sweep, iPad): 'standard' is 26px + 6px padding = 38px,
   so every host that did not size its own slot (the story Sources window, the story media
   pop-up) drew a 38px target. On a touch screen every Say It is at least 44px; the hero keeps
   its 64. Placed after the size rules so it outranks 'inline' on touch. */
@media (pointer: coarse) {
    .sayit-btn:not(.sayit-btn--hero) { min-width: 44px; min-height: 44px; }
}

/* Light surfaces: the light glyph (variant 'light') on a faint teal wash that reads on white. */
.sayit-btn--light:hover,
.sayit-btn--light:focus-visible { background: rgba(13, 110, 100, 0.10); }
.sayit-btn--light:focus-visible { outline-color: #0d6e64; }
.sayit-btn--hero.sayit-btn--light {
    background: rgba(13, 110, 100, 0.08);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 100, 0.30);
}

/* A hero slot in the universal control panel draws the larger glyph in the same slot. */
.mcp-slot[data-slot-id="say-it"] .sayit-glyph--hero { width: 40px; height: 40px; }

/* In the universal control panel the glyph sits in the icon wrapper the bar already
   builds; the label wrapper below it is EMPTY by design and must not reserve a line. */
.mcp-slot[data-slot-id="say-it"] .mobile-tab-label:empty { display: none; }
.mcp-slot[data-slot-id="say-it"] .sayit-glyph { width: 24px; height: 24px; margin: 0 auto; }

/* ── A window's own Say It (unifying-portrait-voice S3) ──────────────────────────────
   SayIt.mount() places the control in a window's header beside its ✕ and marks it with
   `data-sayit-surface`. In a flex header it rides to the right with the close; it never
   shrinks to nothing between a long title and the ✕. */
.sayit-btn[data-sayit-surface] {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 6px;
}
/* The story detail modal's Contribute rail (desktop): one Say It where Voice/Note/Tell Story
   were. On the phone shell the Mobile Control Panel slot carries the same surface, so the
   rail's copy steps aside rather than doubling. */
.sidebar-sayit-slot { display: flex; justify-content: center; }
.sidebar-sayit-slot .sayit-btn[data-sayit-surface] { margin: 0; }
body.has-mobile-tab-bar .sidebar-sayit-slot { display: none; }
/* Inline Say It per row in the Attribution Viewer's conflicts list. */
.am-conflict-actions[data-am-sayit] { display: flex; align-items: center; }

/* ── The sheet ────────────────────────────────────────────────────────────────── */

.sayit-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 20, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* ⭐ THE TOP LAYER (listening-hands-free S1, Joe 2026-10-25: Say It sat under the landing's
       drawer). While the sheet is open it is above every modal, overlay and story graphic —
       the vault's highest band below the three system veils (frame-controller leave/boot-fail
       2147483645-6, the index.html boot screen 2147483647). Z_INDEX_HIERARCHY.md Tier 0. */
    z-index: 2147483643;
    cursor: pointer;
}

.sayit-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(440px, 100vw);
    box-sizing: border-box;
    /* The bar is ~64px and may be under the home indicator; the sheet clears both so the
       member's thumb is not choosing between Done and a tab. */
    padding: 22px 20px calc(88px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #1e2150 0%, #0c0e22 100%);
    color: #E6F7F4;
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-bottom: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
    z-index: 2147483644;           /* the top layer — see .sayit-backdrop */
    text-align: center;
    animation: sayit-rise 180ms ease-out;
    cursor: pointer;               /* touching anywhere on the sheet ends the recording */
}

@keyframes sayit-rise {
    from { transform: translate(-50%, 18px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sayit-sheet { animation: none; }
    .sayit-btn   { transition: none; }
    .sayit-sheet-glyph { animation: none !important; }
}

/* Desktop: a centred popover rather than a bottom sheet. Same object, same door, seated
   where a pointer expects it. */
@media (min-width: 900px) {
    .sayit-sheet {
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 18px;
        border-bottom: 1px solid rgba(94, 234, 212, 0.28);
        padding: 26px 24px 22px;
    }
    @keyframes sayit-rise {
        from { transform: translate(-50%, calc(-50% + 12px)); opacity: 0; }
        to   { transform: translate(-50%, -50%);              opacity: 1; }
    }
}

.sayit-sheet-glyph {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    /* A slow breath, not a VU meter: the sheet says "I am listening", it does not pretend to
       visualise audio it never measures. */
    animation: sayit-breathe 2.4s ease-in-out infinite;
}

@keyframes sayit-breathe {
    0%, 100% { opacity: 0.86; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.045); }
}

/* ⭐ THE HALO IS THE WHOLE LISTENING FACE (Joe 2026-10-25: "the only visual is a pulsing Say It
   icon"). Dim and still while the microphone starts — words spoken now are not recorded —
   then a teal pulse once it is live. */
.sayit-sheet-glyph.is-starting {
    opacity: 0.45;
    animation: none;
    filter: grayscale(0.4);
}
.sayit-sheet-glyph.is-listening {
    border-radius: 50%;
    animation: sayit-pulse 1.4s ease-in-out infinite;
}
@keyframes sayit-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(94, 234, 212, 0); }
}

/* While starting and listening the status line is for screen readers only (it is the live
   region that announces "Listening"); it becomes visible the moment there is something a
   member must read — a failure, nothing heard. */
.sayit-sheet[data-sayit-phase="starting"] .sayit-status,
.sayit-sheet[data-sayit-phase="listening"] .sayit-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sayit-sheet[data-sayit-phase="failed"] { cursor: default; }

.sayit-status {
    font-size: 16px;
    line-height: 1.45;
    min-height: 2.9em;
    margin: 4px 8px 16px;
    color: #CBEFE9;
}

.sayit-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.sayit-actions button {
    flex: 1 1 0;
    max-width: 180px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(94, 234, 212, 0.35);
}

/* The failure path's one button. There is no Done, Stop or Cancel (Joe 2026-09-15,
   2026-10-25): silence or a tap ends the recording and the sheet leaves once custody is taken. */
.sayit-retry {
    background: #0F766E;
    color: #ECFDF8;
}

/* `hidden` must actually hide: `.sayit-actions button { flex: 1 1 0 }` sets `display`
   on every child and would otherwise win against the attribute's UA rule, leaving a
   spinner phase with a live button sitting under it. */
.sayit-actions button[hidden] { display: none; }

/* The spinner owns the sheet between "stop" and custody — and nothing else does. */
.sayit-spinner {
    width: 26px;
    height: 26px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 3px solid rgba(94, 234, 212, 0.25);
    border-top-color: #5EEAD4;
    animation: sayit-spin 0.8s linear infinite;
}

.sayit-spinner[hidden] { display: none; }

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

@media (prefers-reduced-motion: reduce) {
    .sayit-spinner { animation-duration: 2.4s; }
}

.sayit-actions button:focus-visible {
    outline: 2px solid #5EEAD4;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════════
   THE STORY PLAYER — truing-import-receiver S6 (§H Part D)
   ══════════════════════════════════════════════════════════════════════════════════
   Joe 2026-09-27: "substitute the Say It control in the story playback navigation panel
   where Fergi AI is right now … also the chapter navigation."

   The standing slot keeps what LS-16 won for the Fergi AI button it replaces — last in
   the strip, LARGER than the Sources circle above it, its own chrome — so the one
   control that talks to Fergi is still the one you can name without hovering. It wears
   the Halo in the Say It teal, never a caption (Joe ruling 4: the glyph IS the label). */

.pres-sayit-btn {
    width: 56px;
    height: 56px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(94, 234, 212, 0.42);
    background: radial-gradient(circle at 50% 42%,
                                rgba(94, 234, 212, 0.20) 0%,
                                rgba(60, 90, 160, 0.14) 60%,
                                rgba(150, 180, 220, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.10), 0 2px 12px rgba(94, 234, 212, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms;
}
.pres-sayit-btn .sayit-glyph { width: 40px; height: 40px; }
.pres-sayit-btn:hover,
.pres-sayit-btn:focus-visible {
    border-color: rgba(94, 234, 212, 0.85);
    background: radial-gradient(circle at 50% 42%,
                                rgba(94, 234, 212, 0.34) 0%,
                                rgba(60, 90, 160, 0.20) 60%,
                                rgba(150, 180, 220, 0.10) 100%);
    outline: none;
}

/* interpreting-family-channels S3 — the chapter controls' compact slot is FERGI AI now.
   `.pres-chapter-sayit` is retired (Joe #7, 2026-10-02: "one Say It control"; the standing
   Say It below carries the chapter in its moment). The slot shows Fergi AI's brand mark —
   the header's artwork, never the Halo — so the player is never without a visible Fergi
   (R-C) and no member can mistake it for a second Say It. Same 32 px footprint. */
.pres-fergi-entry {
    margin-top: 6px;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(13, 148, 136, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pres-fergi-entry-art { width: 22px; height: 22px; display: block; pointer-events: none; }
.pres-fergi-entry:hover,
.pres-fergi-entry:focus-visible {
    background: rgba(13, 148, 136, 0.24);
    border-color: rgba(20, 184, 166, 0.70);
    outline: none;
}

/* Pocket: the top-bar slot (sized by pocket-stage.css as .pocket-topbar-fergi) and the
   head of the chapters sheet. */
.pocket-topbar-sayit .sayit-glyph { width: 28px; height: 28px; }
.pocket-chapscrub-title { display: flex; align-items: center; justify-content: space-between; }
.pocket-chapscrub-sayit {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(94, 234, 212, 0.35);
    background: rgba(10, 46, 46, 0.9);
    display: grid;
    place-items: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.pocket-chapscrub-sayit .sayit-glyph { width: 28px; height: 28px; }
/* Say It and the ✕ share the sheet's head, right-aligned (Greg G-152). */
.pocket-chapscrub-head-actions { display: inline-flex; align-items: center; gap: 10px; }
.pocket-chapscrub-close {
    width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.34); color: #e0e6e8;
    -webkit-tap-highlight-color: transparent;
}
.pocket-chapscrub-close:active { background: rgba(0, 0, 0, 0.6); }

/* ── The panel over the stage — Fergi's answer, and the typed road ─────────────────
   Below the Say It sheet (11550/11600) so a second press opens OVER it; above the
   stage. The story behind it is frozen; "Back to the story" gives it back. */
.pres-sayit-panel {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    width: min(560px, 92vw);
    max-height: min(52vh, 460px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(30, 33, 80, 0.97) 0%, rgba(12, 14, 34, 0.97) 100%);
    color: #E6F7F4;
    border: 1px solid rgba(94, 234, 212, 0.32);
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
    z-index: 11500;
    font: 15px/1.45 Inter, "Source Sans 3", system-ui, sans-serif;
    animation: sayit-panel-rise 160ms ease-out;
}
@keyframes sayit-panel-rise {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
.pres-sayit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 8px 16px;
    border-bottom: 1px solid rgba(94, 234, 212, 0.16);
}
.pres-sayit-where {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(150, 235, 220, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pres-sayit-close {
    flex: 0 0 auto;
    border: 1px solid rgba(94, 234, 212, 0.35);
    background: rgba(94, 234, 212, 0.10);
    color: #E6F7F4;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.pres-sayit-close:hover,
.pres-sayit-close:focus-visible { background: rgba(94, 234, 212, 0.24); outline: none; }
.pres-sayit-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pres-sayit-you { align-self: flex-end; max-width: 88%; text-align: right; }
.pres-sayit-you .pres-sayit-text {
    display: inline-block;
    background: rgba(94, 234, 212, 0.16);
    border-radius: 12px 12px 2px 12px;
    padding: 7px 11px;
}
.pres-sayit-receipt { font-size: 11px; color: rgba(180, 225, 215, 0.75); margin-top: 3px; }
.pres-sayit-fergi { align-self: flex-start; max-width: 94%; white-space: pre-wrap; }
.pres-sayit-note { align-self: center; font-size: 13px; color: rgba(210, 220, 240, 0.8); text-align: center; }
.pres-sayit-note.is-thinking { font-style: italic; }
.pres-sayit-type {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(94, 234, 212, 0.16);
}
.pres-sayit-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(94, 234, 212, 0.30);
    background: rgba(8, 10, 26, 0.7);
    color: #E6F7F4;
    border-radius: 10px;
    padding: 9px 11px;
    font: inherit;
}
.pres-sayit-input:focus { outline: 2px solid #5EEAD4; outline-offset: 1px; }
.pres-sayit-send {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    background: #5EEAD4;
    color: #0c0e22;
    font-weight: 600;
    cursor: pointer;
}
.pres-sayit-flash {
    position: fixed;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    background: rgba(12, 14, 34, 0.94);
    color: #E6F7F4;
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 999px;
    padding: 8px 16px;
    z-index: 11500;
    font: 14px/1.3 Inter, system-ui, sans-serif;
}
/* Pocket / narrow glass: a bottom sheet over the stage, clear of the home indicator. */
@media (max-width: 700px) {
    .pres-sayit-panel {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-height: 62vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: none;
    }
    .pres-sayit-input { font-size: 16px; }   /* no iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce) {
    .pres-sayit-panel { animation: none; }
}

/* ── Both curators (truing-import-receiver S6, directive 6) ─────────────────────────
   The Say It slot sits in the actions row beside 📝 Context — the typed road to the same
   family note — and the receipt line under the row names the kept utterance. */
.sc-unified-actions .action-btn.sc-sayit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-color: rgba(94, 234, 212, 0.45);
}
.sc-unified-actions .action-btn.sc-sayit .sayit-glyph { width: 26px; height: 26px; }
.sc-sayit-receipt {
    font-size: 12px;
    color: rgba(150, 235, 220, 0.95);
    padding: 4px 12px 0;
    min-height: 1em;
}
.msc-pill.msc-pill-sayit { padding: 4px 10px; }
.msc-pill.msc-pill-sayit .sayit-glyph { width: 24px; height: 24px; }

/* ── THE TRANSCRIPT POP-UP (interpreting-family-channels S2, Joe R-A 2026-10-02) ──────────────
   "just present the transcribed text the user just spoke in a pop-up modal for 5 seconds or
   until it is dismissed by a control in the pop-up." The member's own words and a ✕ — no
   answer, no Ask box. Not blocking: no backdrop, no focus trap, the screen stays usable.
   Shown by `.is-open` (ModalManager's canonical open state in the app; set directly on a
   produced story page, which has no ModalManager). */
.sayit-transcript-popup {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    box-sizing: border-box;
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 14px 18px;
    background: linear-gradient(180deg, #1e2150 0%, #0c0e22 100%);
    color: #E6F7F4;
    border: 1px solid rgba(94, 234, 212, 0.38);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    z-index: 2147483642;           /* the member's own words, in Say It's top band */
    animation: sayit-popup-in 160ms ease-out;
}
.sayit-transcript-popup.is-open { display: flex; }
.sayit-transcript-words {
    flex: 1 1 auto;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-style: italic;
    overflow-wrap: anywhere;
    max-height: 30vh;
    overflow-y: auto;
}
.sayit-transcript-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;
    border: none;
    border-radius: 22px;
    background: transparent;
    color: #E6F7F4;
    font-size: 18px;
    cursor: pointer;
}
.sayit-transcript-close:hover,
.sayit-transcript-close:focus-visible { background: rgba(94, 234, 212, 0.16); outline: none; }
@keyframes sayit-popup-in {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sayit-transcript-popup { animation: none; } }
@media (min-width: 900px) {
    .sayit-transcript-popup { bottom: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   THE OUTBOX BADGE + LIST (streamlining-sayit-stories S1, Joe ruling 1 2026-10-26:
   "replace it with an on-device outbox"). A comment still on the device is a quiet dot on
   every Say It control — amber while it waits (network, sign-in), the warm red only when the
   Vault gave a final no and the member's choice is wanted. Never a blocking sheet.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.sayit-outbox-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f2b33d;            /* amber: waiting, nothing for the member to do */
    color: #1a1406;
    font: 700 10px/16px system-ui, -apple-system, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(10, 18, 24, 0.85);
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
}
.sayit-outbox-badge.is-failed { background: #e0604c; color: #fff; }
.sayit-outbox-badge[hidden] { display: none; }

.sayit-outbox-list {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 24px));
    max-height: 60vh;
    overflow-y: auto;
    z-index: 2147483642;           /* Say It's top band, under the sheet */
    background: rgba(14, 24, 30, 0.97);
    color: #e8f4f2;
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 10px 12px 12px;
    font: 15px/1.4 system-ui, -apple-system, sans-serif;
}
.sayit-outbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                     font-weight: 600; margin-bottom: 6px; }
.sayit-outbox-close { background: none; border: 0; color: inherit; font-size: 18px; min-width: 44px; min-height: 44px; }
.sayit-outbox-row { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 0; }
.sayit-outbox-row.is-failed .sayit-outbox-why { color: #f39a8b; }
.sayit-outbox-text { font-style: italic; }
.sayit-outbox-why { font-size: 13px; opacity: 0.8; margin: 2px 0 6px; }
.sayit-outbox-acts { display: flex; gap: 10px; }
.sayit-outbox-acts button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(94, 234, 212, 0.45);
                            background: rgba(94, 234, 212, 0.12); color: inherit; font: inherit; }
.sayit-outbox-acts .sayit-outbox-discard { border-color: rgba(255, 255, 255, 0.2); background: transparent; }