/* ============================================================================
   GENESIS MESSENGER — LIVE PREVIEW PARITY SYSTEM (430.22 / 020)
   ----------------------------------------------------------------------------
   Visual source of truth: the LIVE RENDERED Genesis Preview home
   (genesis-preview.iamhankj.com/index.html#home). Computed styles were
   extracted from the running page and supersede older CSS documents:
   - Typography: -apple-system,"system-ui","Helvetica Neue",Arial everywhere;
     NO serif. Brand = "Avenir Next" 700 14px -0.35px. Titles 650 weight with
     tight negative tracking (h2/section 24px -0.48px). Eyebrows 11px/700/
     +0.88px uppercase in muted gray (never accent-colored).
   - Navigation: charcoal #1c1c1e aside, border #3a3a3c; ACTIVE nav is
     INVERTED — white background, black text, radius 13px.
   - Surfaces: #000 body, #1c1c1e cards (border #34363b, radius 20px),
     #2c2c2e fields/inputs, #242426/#3a3a3c control pills.
   - Accent: Apple blue #0a84ff is the single system accent (primary action,
     links, system voice). Status: #30d158/#ff9f0a/#ff453a.
   All legacy --gm-* token names are preserved so genesis-messenger-live-
   activity.css, genesis-messenger-breakout-ui.css, and the JS custom-theme
   controller keep working. No layout semantics change.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* metrics + type */
  --gm-sidebar-width:320px;
  --gm-font-sans:-apple-system,"system-ui","Helvetica Neue",Arial,sans-serif;
  --gm-font-serif:"Avenir Next",-apple-system,"system-ui","Helvetica Neue",Arial,sans-serif; /* display voice = preview brand voice */
  --gm-radius-lg:20px;--gm-radius:16px;--gm-radius-sm:12px;--gm-radius-pill:999px;
  /* 023B B8: the shared appearance engine paints its popover from --card;
     without it the menu stayed a dark slab in light mode. */
  --card:#1c1c1e;

  /* semantic surfaces — live Preview Apple-neutral dark */
  --gm-bg:#000000;             /* app background            */
  --gm-surface:#1c1c1e;        /* primary surface (canvas)  */
  --gm-raised:#2c2c2e;         /* raised surface            */
  --gm-inset:#141416;          /* inset / reading recess    */
  --gm-hover:#242426;          /* hover wash    */
  --gm-selected:#2c2c2e;       /* selected state wash       */

  /* borders */
  --gm-border:#3a3a3c;         /* subtle hairline           */
  --gm-border-strong:#5a5a5e;  /* strong border             */
  --gm-border-subtle:rgba(255,255,255,.09);

  /* text — Apple system grays */
  --gm-text:#f5f5f7;
  --gm-secondary:#c7c7cc;
  --gm-muted:#8e8e93;

  /* Genesis system accent: Apple blue (live preview primary) */
  --gm-accent:#0a84ff;
  --gm-accent-strong:#6db2ff;
  --gm-accent-soft:rgba(10,132,255,.15);
  --gm-focus-ring:0 0 0 3px rgba(10,132,255,.4);

  /* status vocabulary — Apple system colors (live preview tokens) */
  --gm-success:#30d158;--gm-success-soft:rgba(48,209,88,.14);
  --gm-warning:#ff9f0a;--gm-warning-soft:rgba(255,159,10,.14);
  --gm-danger:#ff453a;--gm-danger-soft:rgba(255,69,58,.13);
  --gm-attention:#ff9f0a;

  /* project hues (from styles.css Genesis family) */
  --gm-hue-personal:#db5d72;--gm-hue-creative:#8f7cff;--gm-hue-learning:#6f8ce0;
  --gm-hue-news:#d5a54f;--gm-hue-social:#4fb6c9;--gm-hue-executive:#5ea385;  --gm-shadow:none;
  --gm-shadow-soft:none;

  --gm-avatar-user:#48484a;    /* neutral — the human voice */
  --gm-avatar-assistant:#0a84ff;/* Apple blue — the Genesis system voice */
  /* legacy aliases (breakout UI + custom-theme controller still read these) */
  --gm-surface-2:#242426;--gm-surface-3:#2c2c2e;

  /* Live Preview navigation signature: charcoal aside, inverted white/black
     active state, greenish-white inactive text (extracted computed values) */
  --gm-sidebar-bg:#1c1c1e;
  --gm-sidebar-bg-2:#1c1c1e;
  --gm-sidebar-active:#ffffff;
  --gm-sidebar-active-text:#000000;
  --gm-sidebar-text:#f4f5fa;
  --gm-sidebar-muted:#d7e2dd;
  --gm-sidebar-faint:#8e8e93;
  --gm-sidebar-line:#3a3a3c;
  --gm-sidebar-mark:#a9c0b6;
  font-family:var(--gm-font-sans);color:var(--gm-text);background:var(--gm-bg);
}
:root[data-theme="light"]{
  /* live Preview light family = styles.css Genesis paper */
  --gm-bg:#f4f2eb;--gm-surface:#fffefa;--gm-raised:#ffffff;--gm-inset:#f6f8f6;
  --gm-hover:#eef0ec;--gm-selected:#e7efe9;
  --gm-border:#dfe3dc;--gm-border-strong:#c8cfc9;--gm-border-subtle:rgba(52,95,80,.13);
  --gm-text:#24312d;--gm-secondary:#4a5a54;--gm-muted:#718079;
  --gm-accent:#0a84ff;--gm-accent-strong:#0060df;--gm-accent-soft:rgba(10,132,255,.11);
  --gm-focus-ring:0 0 0 3px rgba(10,132,255,.3);
  --gm-success:#2e7d4f;--gm-success-soft:rgba(46,125,79,.12);
  --gm-warning:#9a6a12;--gm-warning-soft:rgba(154,106,18,.11);
  --gm-danger:#b34040;--gm-danger-soft:rgba(179,64,64,.10);
  --gm-shadow:none;--gm-shadow-soft:none;
  --gm-avatar-user:#636366;--gm-avatar-assistant:#0a84ff;--card:#fffefa;
  --gm-surface-2:#ffffff;--gm-surface-3:#f0f0ea;
  --gm-sidebar-bg:#f6f8f6;--gm-sidebar-bg-2:#f6f8f6;
  --gm-sidebar-active:#24312d;--gm-sidebar-active-text:#ffffff;
  --gm-sidebar-text:#24312d;--gm-sidebar-muted:#4a5a54;--gm-sidebar-faint:#718079;
  --gm-sidebar-line:#dfe3dc;--gm-sidebar-mark:#4a5a54;
}
/* Custom appearance is injected as concrete --gm-* custom properties by the
   JS controller (Apple-gradient engine parity, today-semantic-appearance.js).
   The static block only fixes the color-scheme. */
:root[data-theme="custom"]{color-scheme:dark}

/* --- 2. BASE + FOCUS ------------------------------------------------------ */
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--gm-bg);color:var(--gm-text)}
html.messenger-page,body.messenger-app{overflow:hidden}
body{margin:0;font:15px/1.55 var(--gm-font-sans);-webkit-font-smoothing:antialiased;transition:background-color .16s ease,color .16s ease}
button,input,select,textarea,a{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role="separator"]:focus-visible{
  outline:3px solid var(--gm-accent)!important;outline-offset:2px!important}

/* shared Genesis eyebrow vocabulary — live Preview: 11px/700/+0.88px uppercase, muted gray */
.gm-current-label,.gm-current-kicker,.gm-section-title,.gm-continuation-label,.gm-next-action-label{
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gm-muted)}
.gm-current-label,.gm-current-kicker{color:var(--gm-muted)}

/* --- 3. APP SHELL --------------------------------------------------------- */
/* P0 (Session 022A-2): clamp the single implicit grid row to the shell height.
   With an auto row, the desktop sidebar's grouped roster (57 conversations)
   inflated the row to its own content height (~3500px), stretching the
   conversation pane and pushing the composer below the viewport clip.
   minmax(0,1fr) bounds the row to the shell; the roster scrolls inside. */
.gm-shell{display:grid;grid-template-columns:var(--gm-sidebar-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100vh;background:var(--gm-bg)}

/* Sidebar: live Preview charcoal aside — constant, flat #1c1c1e, #3a3a3c line */
/* P0 (Session 022A-2): min-height:0 lets the sidebar shrink to the clamped
   grid row (overflow:visible items otherwise keep a content-based minimum),
   so .gm-roster — already min-height:0 + overflow:auto — scrolls internally. */
.gm-sidebar{display:flex;flex-direction:column;gap:12px;padding:20px 16px 14px;position:relative;min-width:0;min-height:0;
  background:var(--gm-sidebar-bg);
  color:var(--gm-sidebar-text);border-right:1px solid var(--gm-sidebar-line)}
.gm-sidebar-resize{position:absolute;z-index:30;top:0;right:-5px;width:10px;height:100%;cursor:col-resize;touch-action:none}
.gm-sidebar-resize::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent;transition:background-color .14s ease}
.gm-sidebar-resize:hover::after,.gm-sidebar-resize:focus-visible::after,.gm-sidebar.is-resizing .gm-sidebar-resize::after{background:var(--gm-sidebar-mark)}
.gm-brand-row{display:flex;align-items:center;gap:12px;padding:2px 2px 10px}
.gm-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:transparent;color:var(--gm-sidebar-text);
  font-family:var(--gm-font-sans);font-size:22px;font-weight:650;border:1px solid var(--gm-sidebar-mark)}
.gm-brand{font-family:var(--gm-font-serif);font-weight:700;font-size:14px;letter-spacing:-.025em;color:var(--gm-sidebar-text)}
.gm-new-chat,.gm-nav-item,.gm-refresh,.gm-header-actions button,.gm-open-source,.gm-transcript-footer button{border:0;background:transparent;color:inherit}
.gm-new-chat{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--gm-radius-sm);text-align:left}
.gm-new-chat:disabled,.gm-nav-item:disabled{opacity:.45}
.gm-nav{display:grid;gap:3px}
.gm-nav-item{display:flex;gap:11px;align-items:center;padding:10px 13px;border-radius:var(--gm-radius-sm);text-align:left;color:var(--gm-sidebar-muted);font-size:.875rem;font-weight:650;letter-spacing:-.01em;transition:background-color .13s ease,color .13s ease}
/* B8: hover washes derive from the sidebar's own text color so they work in
   dark (light wash) AND light mode (dark wash) — no more dark-only washes. */
.gm-nav-item:hover:not(:disabled){background:color-mix(in srgb,var(--gm-sidebar-text) 8%,transparent);color:var(--gm-sidebar-text)}
.gm-nav-item.active{background:var(--gm-sidebar-active);color:var(--gm-sidebar-active-text);font-weight:650}
.gm-sidebar-divider{height:1px;background:var(--gm-sidebar-line)}

/* Current-conversation anchor in sidebar */
.gm-current-conversation{display:grid;gap:3px;padding:12px 13px;border:1px solid var(--gm-sidebar-line);
  background:color-mix(in srgb,var(--gm-sidebar-text) 6%,transparent);border-radius:var(--gm-radius)}
.gm-current-conversation strong{font-size:.88rem;line-height:1.35;overflow-wrap:anywhere;color:var(--gm-sidebar-text)}
.gm-current-project{font-size:.72rem;color:var(--gm-sidebar-faint)}

.gm-search-label{font-size:.78rem;color:var(--gm-sidebar-muted);font-weight:650}
.gm-search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--gm-sidebar-line);border-radius:12px;padding:9px 12px;background:var(--gm-raised);transition:border-color .13s ease}
.gm-search-wrap:focus-within{border-color:var(--gm-sidebar-mark)}
.gm-search-wrap input{border:0;outline:0;background:transparent;width:100%;color:var(--gm-sidebar-text)}
.gm-search-wrap input::placeholder{color:var(--gm-sidebar-faint)}

/* --- 4. ROSTER ------------------------------------------------------------- */
.gm-roster{min-height:0;overflow:auto;display:grid;align-content:start;gap:2px;padding-right:2px;scrollbar-width:thin}
.gm-roster-head{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 0}
.gm-roster-count{font-size:.7rem;color:var(--gm-muted);font-variant-numeric:tabular-nums}
.conversation{width:100%;border:1px solid transparent;background:transparent;border-radius:var(--gm-radius-sm);padding:9px 11px;text-align:left;color:var(--gm-sidebar-text);cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
.conversation:hover{background:color-mix(in srgb,var(--gm-sidebar-text) 6%,transparent)}
.conversation.active{background:var(--gm-sidebar-active);border-color:transparent;color:var(--gm-sidebar-active-text)}
.conversation .gm-row-title{display:-webkit-box;font-weight:600;white-space:normal;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.35;overflow-wrap:anywhere}
.conversation.active .gm-row-title{color:var(--gm-sidebar-active-text);font-weight:700}
.conversation.active .gm-row-title::after{content:"  · CURRENT";font-size:.62rem;letter-spacing:.09em;color:var(--gm-sidebar-active-text);opacity:.7;font-weight:700}
.conversation .gm-row-meta{display:block;font-size:.74rem;color:var(--gm-sidebar-faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.conversation.active .gm-row-meta{color:var(--gm-sidebar-active-text);opacity:.72}
.gm-sidebar-footer{margin-top:auto;padding-top:10px;border-top:1px solid var(--gm-sidebar-line);display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--gm-sidebar-muted)}
.gm-status{font-size:.72rem;color:var(--gm-sidebar-faint)}
.gm-status[data-state="error"]{color:var(--gm-danger)}
.gm-refresh{font-size:.76rem;color:var(--gm-sidebar-muted);cursor:pointer}
.gm-refresh:hover{color:#fff}

/* --- 4b. SESSION 023A: PILL / RADIUS TOKEN CANON --------------------------- */
/* One geometry vocabulary (B3/B4). Pill = capsule controls (chips, small
   actions); radius-sm = inputs/rows/cards; radius-lg = big canvas corners.
   Heights: pill 30px; control 34px. All status/attention/selection color
   comes from status tokens — never accent-blue (B2). */
.gm-group-count,.gm-attachment-actions a,.gm-attachment-actions button{
  border-radius:var(--gm-radius-pill)}
/* 023B D: DATE = quiet top-level orientation, not a utility pill. The date
   sits alone on the orientation strip above the conversation header, styled
   like the live Preview's #date (plain kicker-scale text — no border, no
   capsule). LIVE SYNC stays a separate pill with its own last-success time. */
.gm-orientation{flex-shrink:0;padding:12px 28px 0;border-bottom:0;background:transparent}
.gm-orientation-date{display:block;font-size:.72rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--gm-muted);font-variant-numeric:tabular-nums}
.gm-orientation-date::before{content:"";display:none}
.gm-transcript-unavailable{margin:26px 30px;padding:14px 16px;display:grid;gap:4px;max-width:560px;
  border:1px solid var(--gm-border-subtle);border-radius:var(--gm-radius-sm);background:var(--gm-inset)}
.gm-transcript-unavailable strong{font-size:.9rem;font-weight:650;color:var(--gm-text)}
.gm-transcript-unavailable span{font-size:.82rem;color:var(--gm-muted);line-height:1.5}
.gm-transcript-unavailable[data-severity="error"]{border-color:var(--gm-danger-soft)}
.gm-transcript-unavailable[data-severity="error"] strong{color:var(--gm-danger)}
.gm-attachments{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
/* 023B B: one small-action pill geometry (26px capsule, raised surface,
   tabular numerals) shared with .gm-group-count and the header pills. */
.gm-attachment-actions a,.gm-attachment-actions button{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:3px 10px;
  border:1px solid var(--gm-border);border-radius:var(--gm-radius-pill);background:var(--gm-raised);color:var(--gm-text);
  font-size:.7rem;font-weight:650;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .12s ease}
.gm-attachment-actions a:hover,.gm-attachment-actions button:hover{background:var(--gm-hover);color:var(--gm-text)}
.gm-attachment-actions a:focus-visible,.gm-attachment-actions button:focus-visible{outline:none;box-shadow:var(--gm-focus-ring)}
.gm-attachment[data-state="reference"] .gm-attachment-meta{color:var(--gm-muted)}

/* groups */
.gm-group{margin:0 0 4px}
/* Session 023: real project folder rows — stable folder icon, rotating caret,
   comfortable whole-row click target, Apple-system look. */
.gm-group .gm-folder-icon{font-size:.85rem;line-height:1;width:1.1rem;text-align:center}
.gm-group.gm-project>.gm-group-toggle{padding:9px 10px;font-size:.75rem;text-transform:none;letter-spacing:.01em;font-weight:600;color:var(--gm-sidebar-text)}
.gm-group.gm-project>.gm-group-toggle:hover{background:color-mix(in srgb,var(--gm-sidebar-text) 8%,transparent)}
.gm-group.gm-project.has-current>.gm-group-toggle{color:#fff}
.gm-group.gm-project .gm-group-title{font-weight:600}
.gm-group-toggle:focus-visible{outline:2px solid var(--gm-accent);outline-offset:1px}
.gm-group-toggle{display:flex;width:100%;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:var(--gm-radius-sm);background:transparent;color:var(--gm-sidebar-faint);font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left;transition:background-color .12s ease,color .12s ease}
.gm-group-toggle:hover{background:color-mix(in srgb,var(--gm-sidebar-text) 6%,transparent);color:var(--gm-sidebar-text)}
.gm-group-caret{display:inline-block;transition:transform .14s ease;font-size:.68rem;color:var(--gm-sidebar-faint)}
.gm-group.open .gm-group-caret{transform:rotate(90deg)}
.gm-group-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.gm-group-count{font-size:.66rem;font-weight:600;color:var(--gm-sidebar-muted);font-variant-numeric:tabular-nums;background:rgba(255,255,255,.09);border-radius:var(--gm-radius-pill);padding:1px 8px}
.gm-group.has-current .gm-group-title{color:var(--gm-sidebar-text)}
.gm-group-items{display:none;flex-direction:column;gap:2px;padding:2px 0 4px 10px}
.gm-group.open .gm-group-items{display:flex}
.gm-group-items .conversation{padding:8px 10px;border-radius:8px}
.gm-group-items .conversation .gm-row-title{font-weight:550;font-size:.85rem}
.gm-group-toggle[disabled]{cursor:default}
.gm-group-toggle[disabled]:hover{background:transparent;color:var(--gm-secondary)}
.gm-group .gm-group-items{margin-left:2px}

/* pins */
.conversation{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:start}
.conversation .gm-row-title{grid-column:1}
.conversation .gm-row-meta{grid-column:1}
.gm-pin{grid-column:2;grid-row:1/span 2;align-self:start;justify-self:end;border:0;background:transparent;color:var(--gm-sidebar-faint);cursor:pointer;font-size:.85rem;line-height:1;padding:3px 4px;border-radius:6px;opacity:.5;transition:opacity .12s ease}
.gm-pin:hover,.gm-pin:focus-visible{opacity:1;background:color-mix(in srgb,var(--gm-sidebar-text) 9%,transparent);color:var(--gm-sidebar-text)}
.gm-pin.pinned{opacity:1;color:var(--gm-warning)}
.conversation:has(.gm-pin.pinned){border-color:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gm-warning) 55%,transparent)}

/* --- 5. MAIN / CONVERSATION CANVAS ---------------------------------------- */
.gm-main{min-width:0;overflow:hidden;background:var(--gm-bg);display:flex;flex-direction:column}
.gm-conversation{min-height:0;flex:1;display:flex;flex-direction:column;background:var(--gm-surface);
  border-top-left-radius:var(--gm-radius-lg);border:1px solid var(--gm-border);border-right:0;border-bottom:0;
  overflow:hidden}
/* P0 (Session 022A): fixed chrome (header/breakout) must not be sacrificed by
   flex to keep the pane bounded — that squeeze is what pushed the composer out
   of the viewport. Chrome keeps its natural height; the transcript flexes. */
.gm-conversation>header,.gm-conversation>.gm-conversation-header{flex-shrink:0}
.gm-conversation>.gm-breakout-panel{flex-shrink:0;max-height:min(44vh,420px);overflow-y:auto}
.gm-conversation-header{display:flex;justify-content:space-between;gap:18px;padding:14px 28px 16px;border-bottom:1px solid var(--gm-border-subtle);
  background:transparent}
/* B10: the title owns the row's width; the action pills keep natural size and
   wrap below on narrow panes instead of squeezing the title to a sliver. */
.gm-heading-copy{min-width:0;flex:1 1 auto}
.gm-header-actions{flex:0 1 auto}
.gm-project{margin:0 0 5px;font-size:.72rem;color:var(--gm-secondary);font-weight:650;letter-spacing:.04em}
.gm-conversation-header h1{margin:0;font-family:var(--gm-font-sans);font-size:1.5rem;font-weight:650;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--gm-text)}
.gm-meta{font-size:.75rem;color:var(--gm-muted)}
.gm-heading-copy .gm-meta{margin:5px 0 0}
.gm-header-actions{display:flex;align-items:center;gap:7px;position:relative}
.gm-header-actions .gm-action-label{display:none}
/* B8: header pills use the raised-surface token, not a hardcoded dark gray,
   so light mode gets a white pill and dark mode keeps charcoal. */
.gm-header-actions button,.gm-open-source,.gm-custom-colors>summary{min-height:34px;border-radius:var(--gm-radius-pill);background:var(--gm-raised);color:var(--gm-text);border:1px solid var(--gm-border);cursor:pointer;font-size:.8rem;font-weight:650;letter-spacing:-.01em;transition:background-color .12s ease,color .12s ease}
/* Appearance trigger = the Preview's #themeToggle pill; the shared engine
   (today-semantic-appearance.js) upgrades it in place with the segmented
   Light/Dark/Custom + Apple gradient swatch grid popover. */
/* B3: the appearance trigger is a text pill — natural width, not the 34px
   icon-square geometry (label previously clipped into the Refresh button). */
.gm-header-actions #themeToggle{width:auto;min-width:34px;height:34px;padding:6px 14px;display:inline-flex;align-items:center}
.gm-header-actions button:hover,.gm-open-source:hover{background:var(--gm-hover);color:var(--gm-text)}
.gm-header-actions button,.gm-open-source,.gm-custom-colors>summary{width:34px;height:34px;display:grid;place-items:center;text-decoration:none}
.gm-theme-control select{padding:6px 30px 6px 12px;border-color:var(--gm-border);color:var(--gm-text)}
/* The shared appearance popover inherits page tokens; keep its menu above the header */
.genesis-appearance-menu{background:var(--gm-raised,#2c2c2e);color:var(--gm-text)}
.genesis-appearance-menu button{color:inherit}

/* --- FRESH-INPUT SURFACE (restored from fca5aaec; 50e1cc17 dropped the block
   while keeping the markup, leaving the fresh composer/"Just type"/send buttons
   as unstyled UA defaults). Tokens verified against the current root. ---------- */
.gm-fresh-start{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--gm-border);border-radius:10px;background:var(--gm-surface-2);color:var(--gm-accent-strong);font-weight:700;text-align:left;cursor:pointer;margin-top:2px}
.gm-fresh-start:hover{border-color:var(--gm-accent);background:var(--gm-accent-soft)}
.gm-fresh-input{height:100%;display:grid;place-items:center;padding:28px;background:var(--gm-bg)}
.gm-fresh-inner{width:min(680px,100%);display:grid;gap:10px}
.gm-fresh-input h1{margin:0;font-size:1.15rem;line-height:1.35;overflow-wrap:anywhere}
.gm-fresh-hint{margin:0;color:var(--gm-muted);font-size:.85rem}
.gm-fresh-inner .gm-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.gm-fresh-inner textarea{width:100%;min-height:120px;resize:vertical;padding:12px;border:1px solid var(--gm-border-strong);border-radius:12px;background:var(--gm-surface);color:var(--gm-text);font:inherit;line-height:1.5}
.gm-fresh-inner textarea:focus{outline:2px solid var(--gm-accent);outline-offset:1px}
.gm-fresh-inner textarea::placeholder{color:var(--gm-muted)}
.gm-fresh-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gm-fresh-actions span[data-state="saved"]{color:var(--gm-success)}
.gm-fresh-actions span[data-state="local"]{color:var(--gm-warning)}
.gm-fresh-actions span[data-state="sent"]{color:var(--gm-success)}
.gm-fresh-actions span[data-state="error"]{color:var(--gm-danger)}
.gm-fresh-actions span,.gm-fresh-state{font-size:.74rem;color:var(--gm-muted)}
.gm-fresh-buttons{display:flex;gap:8px}
.gm-fresh-buttons button{border:0;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;background:var(--gm-accent);color:#fff}
.gm-fresh-buttons button:disabled{opacity:.55}
#gmFreshSend{background:var(--gm-accent);color:#fff}
#gmFreshBack{background:var(--gm-surface-2);color:var(--gm-accent-strong);border:1px solid var(--gm-border)}
@media(max-width:800px){.gm-fresh-input{padding:18px}}
.gm-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.gm-custom-colors{position:relative}
.gm-custom-colors>summary{list-style:none}
.gm-custom-colors>summary::-webkit-details-marker{display:none}
.gm-custom-colors[open] .gm-custom-color-grid{display:grid}
.gm-custom-color-grid{display:none;position:absolute;right:0;top:42px;z-index:20;width:min(320px,80vw);grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:var(--gm-raised);border:1px solid var(--gm-border);border-radius:var(--gm-radius);box-shadow:var(--gm-shadow)}
.gm-custom-color-grid label{display:grid;gap:5px;font-size:.72rem;font-weight:650;color:var(--gm-secondary)}
.gm-custom-color-grid input[type="color"]{width:100%;height:36px;padding:3px;border:1px solid var(--gm-border);border-radius:8px;background:var(--gm-inset)}

/* --- 6. STATUS BANNERS / ONE STATUS VOCABULARY ------------------------------ */
.gm-loading-banner,.gm-next-action{margin:14px 28px 0;padding:10px 13px;border-radius:var(--gm-radius-sm);font-size:.82rem;display:flex;gap:10px;align-items:center}
.gm-loading-banner{border:1px solid var(--gm-border-subtle);background:var(--gm-inset);color:var(--gm-secondary)}
.gm-spinner{width:15px;height:15px;border:2px solid var(--gm-border-strong);border-top-color:var(--gm-accent);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- 7. EMPTY STATES -------------------------------------------------------- */
.gm-empty-state{height:100%;display:grid;place-items:center;align-content:center;text-align:center;color:var(--gm-muted);background:var(--gm-bg);gap:2px}
.gm-empty-state h1{margin:.6rem 0 .2rem;color:var(--gm-text);font-family:var(--gm-font-sans);font-weight:650;font-size:1.4rem;letter-spacing:-.02em}
.gm-empty-state p{margin:0;max-width:34rem}
.gm-empty-icon{font-size:1.7rem;color:var(--gm-accent-strong)}
.gm-empty,.gm-error{padding:26px 28px;color:var(--gm-muted);font-size:.9rem;line-height:1.5}
.gm-error{color:var(--gm-danger)}

/* --- 8. TRANSCRIPT ----------------------------------------------------------- */
.gm-transcript-shell{min-height:0;flex:1 1 0;display:flex;flex-direction:column;position:relative}
.gm-messages{flex:1 1 0;min-height:60px;overflow:auto;padding:22px 30px 8px;scrollbar-gutter:stable;background:var(--gm-surface);overscroll-behavior:contain}
/* keyboard-scrollable transcript without stealing tab order from controls */
.gm-messages:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gm-accent) 45%,transparent)}
.message{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:11px;margin:0 0 22px;max-width:880px}
.message header{grid-column:2;display:flex;gap:9px;align-items:baseline;margin-bottom:5px}
.message header strong{font-size:.8rem;font-weight:650;letter-spacing:-.01em}
.message header span{font-size:.68rem;color:var(--gm-muted);font-variant-numeric:tabular-nums}
/* Assistant: integrated editorial surface (no bubble wall); hairline spine */
.message p{grid-column:2;margin:0;white-space:pre-wrap;line-height:1.6;font-size:.93rem;color:var(--gm-text);
  padding:2px 0 2px 14px;border-left:2px solid var(--gm-border-subtle);width:100%;max-width:min(760px,100%)}
.message[data-role="assistant"] p{border-left-color:color-mix(in srgb,var(--gm-avatar-assistant) 55%,transparent)}
/* User: quiet raised bubble — the human voice sits on a surface */
.message[data-role="user"] p{background:var(--gm-raised);border:1px solid var(--gm-border-subtle);border-left:2px solid color-mix(in srgb,var(--gm-avatar-user) 75%,transparent);
  border-radius:4px var(--gm-radius) var(--gm-radius) var(--gm-radius);padding:11px 14px;width:fit-content}
.gm-avatar{grid-column:1;grid-row:1/span 2;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--gm-avatar-user);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.message[data-role="assistant"] .gm-avatar{background:var(--gm-avatar-assistant)}
.gm-transcript-footer{flex:0 0 auto;padding:8px 30px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--gm-border-subtle)}
.gm-transcript-footer button{font-size:.76rem;color:var(--gm-accent-strong);cursor:pointer}

/* Attachment component language — prepared for future attachment data.
   Current capture data carries no attachment payloads, so no DOM renders
   this yet; the state below is the truthful "incomplete/missing" form. */
.gm-attachment{display:flex;align-items:center;gap:11px;margin:10px 0 0;padding:11px 13px;background:var(--gm-raised);
  border:1px solid var(--gm-border-subtle);border-radius:var(--gm-radius-sm);max-width:min(420px,100%)}
.gm-attachment[data-kind="image"] .gm-attachment-icon{background:var(--gm-success-soft);color:var(--gm-success)}
.gm-attachment-icon{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--gm-accent-soft);color:var(--gm-accent-strong);font-size:.95rem}
.gm-attachment-body{min-width:0;display:grid;gap:1px}
.gm-attachment-name{font-size:.82rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-attachment-meta{font-size:.68rem;color:var(--gm-muted)}
.gm-attachment[data-state="unavailable"],.gm-attachment[data-state="source_unavailable"]{border-style:dashed}
.gm-attachment[data-state="unavailable"] .gm-attachment-meta,.gm-attachment[data-state="source_unavailable"] .gm-attachment-meta{color:var(--gm-warning)}
.gm-attachment[data-state="available_locally"]{border-color:var(--gm-success)}
.gm-attachment[data-state="available_locally"] .gm-attachment-icon{background:var(--gm-success-soft);color:var(--gm-success)}
.gm-attachment[data-state="capturing"]{opacity:.75}
.gm-attachment[data-state="capturing"] .gm-attachment-meta{color:var(--gm-accent-strong)}
/* Session 026 Part B: drift states — truthful, alarming but not decorative */
.gm-attachment[data-state="integrity_failed"],.gm-attachment[data-state="local_file_missing"],.gm-attachment[data-state="provenance_mismatch"]{border-style:dashed;border-color:var(--gm-warning)}
.gm-attachment[data-state="integrity_failed"] .gm-attachment-meta,.gm-attachment[data-state="local_file_missing"] .gm-attachment-meta,.gm-attachment[data-state="provenance_mismatch"] .gm-attachment-meta{color:var(--gm-warning)}
.gm-attachment[data-state="integrity_ok"]{border-color:var(--gm-success)}
.gm-attachment-actions{margin-left:auto;display:flex;gap:6px;flex:none}
/* 023B B: geometry consolidated in the small-action pill block above
   (26px capsule, raised surface). This legacy duplicate rule is removed. */

/* rich content inherits the editorial rhythm */
.message code{background:var(--gm-inset);border:1px solid var(--gm-border-subtle);border-radius:5px;padding:.08em .35em;font-size:.86em}
.message pre{background:var(--gm-inset);border:1px solid var(--gm-border-subtle);border-radius:var(--gm-radius-sm);padding:12px 14px;overflow:auto;margin:.6em 0}
.message pre code{border:0;background:transparent;padding:0}
.message blockquote{margin:.6em 0;padding:2px 0 2px 12px;border-left:2px solid var(--gm-border-strong);color:var(--gm-secondary)}
.message table{border-collapse:collapse;margin:.6em 0;font-size:.88em}
.message th,.message td{border:1px solid var(--gm-border-subtle);padding:6px 10px;text-align:left}
.message th{background:var(--gm-inset)}
.message ul,.message ol{margin:.5em 0;padding-left:1.4em}
.message a{color:var(--gm-accent-strong)}

/* --- 9. COMPOSER — the primary action surface -------------------------------- */
/* P0 (Session 022A): the composer is the primary action and must never be
   squeezed out of view. flex-shrink:0 pins it inside the bounded conversation
   pane; the transcript scroller above absorbs ALL height changes instead. */
.messenger-app .messenger-composer{margin:0 28px 20px!important;padding:13px!important;border:1px solid var(--gm-border)!important;
  border-radius:var(--gm-radius)!important;background:var(--gm-raised)!important;box-shadow:var(--gm-shadow-soft)!important;
  display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;flex:0 0 auto!important;
  transition:border-color .14s ease,box-shadow .14s ease}
.messenger-app .messenger-composer:focus-within{border-color:color-mix(in srgb,var(--gm-accent) 55%,transparent)!important;
  box-shadow:var(--gm-shadow-soft),var(--gm-focus-ring)!important}
.messenger-app .messenger-composer-label{position:absolute!important;left:-9999px!important}
.messenger-app .messenger-composer textarea{grid-column:1/3!important;min-height:70px!important;max-height:220px!important;border:0!important;background:transparent!important;
  color:var(--gm-text)!important;padding:0!important;resize:none!important;outline:0!important;line-height:1.55!important;overflow-y:auto!important}
.messenger-app .messenger-composer textarea::placeholder{color:var(--gm-muted)!important}
.messenger-app .messenger-composer-actions{grid-column:1/3!important;border-top:1px solid var(--gm-border-subtle)!important;padding-top:9px!important}
.messenger-app .messenger-composer-actions span{color:var(--gm-muted)!important;font-size:.74rem!important}
.messenger-app .messenger-composer-actions span[data-state="blocked"]{color:var(--gm-danger)!important}
.messenger-app .messenger-composer-actions span[data-state="received"]{color:var(--gm-success)!important}
/* Blue is the single system accent — live Preview pill button (radius 999, weight 650) */
.messenger-app .messenger-composer-actions button{border:0!important;border-radius:var(--gm-radius-pill)!important;
  background:var(--gm-accent)!important;color:#fff!important;
  padding:9px 16px!important;font-weight:650!important;letter-spacing:-.01em!important;cursor:pointer!important;
  transition:filter .13s ease}
.messenger-app .messenger-composer-actions button:hover:not(:disabled){filter:brightness(1.08)}
.messenger-app .messenger-composer-actions button:disabled{opacity:.5!important;box-shadow:none!important}

/* --- 10. R6 / R9 SURFACES ------------------------------------------------------ */
/* R6 welcome-back banner (first styling — previously unstyled browser defaults) */
/* P0 (Session 022A): the banner sits in body flow ABOVE the 100vh shell, so as
   static content it pushed the whole shell — composer included — below the
   viewport clip. It is chrome: the shell reserves space for it via the
   --gm-chrome-top offset (kept current by genesis-messenger.js), so the shell
   shrinks instead of overflowing. The banner itself stays in normal flow. */
.gm-reorientation{margin:0;padding:12px 28px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--gm-border-subtle);
  background:var(--gm-raised);color:var(--gm-text)}
/* P0 (Session 022B): welcome-back collapses to a one-line strip; the summary
   (and its Resume / See-what-changed actions) live behind the disclosure. */
.gm-reorient-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:2px 0;border:0;background:transparent;color:inherit;
  font:inherit;font-size:.82rem;font-weight:650;cursor:pointer;text-align:left}
.gm-reorient-toggle:hover .gm-reorient-brief{color:var(--gm-text)}
.gm-reorient-caret{font-size:.7rem;color:var(--gm-muted);flex:none}
.gm-reorient-brief{font-weight:550;color:var(--gm-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-reorient-detail{display:grid;gap:8px;padding-top:8px}
body.messenger-app>.gm-shell{height:auto;position:fixed;left:0;right:0;bottom:0;top:var(--gm-chrome-top,0px)}
body.messenger-app>.gm-live-activity{position:fixed}
.gm-reorient-copy{display:grid;gap:2px;font-size:.86rem;line-height:1.45}
.gm-reorient-copy strong{font-family:var(--gm-font-sans);font-weight:650;font-size:1rem;letter-spacing:-.01em}
.gm-reorient-copy span{color:var(--gm-secondary)}
.gm-reorient-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.gm-reorient-actions button{border:1px solid var(--gm-border);border-radius:var(--gm-radius-sm);
  background:var(--gm-hover);color:var(--gm-text);padding:7px 13px;font-size:.8rem;font-weight:650;cursor:pointer;transition:background-color .13s ease}
.gm-reorient-actions button:hover{background:var(--gm-raised)}
.gm-continuation{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 0;font-size:.92rem;flex-wrap:wrap}
.gm-continuation[hidden]{display:none!important}
.gm-continuation-label{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gm-accent-strong)}
.gm-continuation-view{border:1px solid var(--gm-border-subtle);border-radius:var(--gm-radius-sm);background:var(--gm-hover);color:var(--gm-text);padding:4px 10px;font-size:.8rem;cursor:pointer}
.gm-continuation-view:hover{background:var(--gm-selected)}
.gm-next-action[hidden]{display:none!important}
.gm-next-action{border:1px solid var(--gm-border-subtle);background:var(--gm-raised);flex-wrap:wrap}
.gm-next-action-label{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gm-accent-strong)}
/* --- R106 · automatic continuation notice --------------------------------
   One card, three orientation answers (what changed / need Nico / next
   action), one action. Not color-coded: the label text carries the state. */
.gm-auto-continuation{margin:14px 28px 0}
.gm-auto-continuation[hidden]{display:none!important}
.gm-auto-cont-card{border:1px solid var(--gm-border-subtle);border-left:3px solid var(--gm-accent);background:var(--gm-raised);border-radius:var(--gm-radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:.82rem}
.gm-auto-cont-title{margin:0;font-size:.8rem}
.gm-auto-cont-when{color:var(--gm-muted);font-weight:400}
.gm-auto-cont-changes{margin:0;color:var(--gm-text)}
.gm-auto-cont-need{margin:0;color:var(--gm-secondary)}
.gm-auto-cont-unresolved{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gm-auto-cont-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gm-muted)}
.gm-auto-cont-item{border:1px solid var(--gm-border-subtle);border-radius:999px;padding:1px 8px;font-size:.72rem;color:var(--gm-secondary)}
.gm-auto-cont-open{align-self:flex-start;margin-top:2px;border:1px solid var(--gm-accent);background:var(--gm-accent);color:var(--gm-bg);border-radius:var(--gm-radius-sm);padding:7px 14px;font-weight:600;font-size:.8rem;cursor:pointer}
.gm-auto-cont-open:hover{filter:brightness(1.12)}
.gm-auto-cont-open:focus-visible{outline:none;box-shadow:var(--gm-focus-ring,0 0 0 3px rgba(10,132,255,.45))}
@media (max-width:800px){.gm-auto-continuation{margin:10px 14px 0}}
.gm-next-action-resume{border:1px solid var(--gm-border);border-radius:var(--gm-radius-sm);background:var(--gm-hover);color:var(--gm-text);padding:6px 12px;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left}
.gm-next-action-resume:hover{background:var(--gm-selected)}

/* --- 13. LIVE SYNC control (restored Preview vocabulary: .today-live-sync) ---
   Truthful states only: synced (blue dot), attention (amber), offline (gray).
   Session 021: shows the authoritative last-successful-sync time when known. */
.today-live-sync{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;min-height:34px;padding:6px 14px;border-radius:var(--gm-radius-pill);
  border:1px solid var(--gm-border);background:var(--gm-raised);color:var(--gm-text);font-size:.8rem;font-weight:650;letter-spacing:-.01em;cursor:default}
/* full text pill, not a 34px icon square (beats .gm-header-actions button) */
.gm-header-actions button.today-live-sync{width:auto;height:auto;display:inline-flex;place-items:center}
.today-live-sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gm-muted);flex:none}
.today-live-sync[data-state="synced"]::before{background:var(--gm-accent);box-shadow:0 0 0 3px var(--gm-accent-soft)}
.today-live-sync[data-state="attention"]::before{background:var(--gm-warning);box-shadow:0 0 0 3px var(--gm-warning-soft)}
.today-live-sync[data-state="offline"]::before{background:var(--gm-muted)}

/* --- 14. JUMP TO LATEST ----------------------------------------------------- */
.gm-jump-latest{position:absolute;right:26px;bottom:58px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--gm-radius-pill);border:1px solid var(--gm-border);
  background:color-mix(in srgb,var(--gm-raised) 92%,transparent);backdrop-filter:blur(10px);
  color:var(--gm-text);font-size:.78rem;font-weight:650;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:background-color .13s ease}
.gm-jump-latest:hover{background:var(--gm-hover)}
.gm-jump-latest[hidden]{display:none}
.gm-conversation{position:relative}

/* --- 15. RESPONSIVE ------------------------------------------------------------ */
@media(max-width:1180px){
  .gm-conversation-header{flex-wrap:wrap}
  .gm-header-actions{flex:1 1 100%;justify-content:flex-start}
}

/* ===== Session 027: mobile navigation recovery (≤800px) =====
   Desktop keeps the persistent sidebar (unchanged). At ≤800px the sidebar
   hides (existing rule) and a compact header trigger + modal drawer reusing
   the ONE authoritative roster takes over. Trigger visibility is owned by
   the media queries; open/close/focus by genesis-messenger.js. */
#gmMobileNavTrigger{display:none}
#gmMobileNav{position:fixed;inset:0;z-index:60}
#gmMobileNav[hidden]{display:none}
.gm-mobile-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--gm-bg,#101014) 62%,transparent);backdrop-filter:blur(2px)}
#gmMobileNavPanel{position:fixed;top:0;bottom:0;left:0;width:min(340px,92vw);max-width:92vw;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--gm-sidebar-bg,var(--gm-raised,#1c1c1e));color:var(--gm-sidebar-text,#f5f5f7);border-right:1px solid var(--gm-sidebar-line,#3a3a3c);
  box-shadow:0 18px 48px rgba(0,0,0,.45);display:flex;flex-direction:column}
.gm-mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--gm-sidebar-line,#3a3a3c);position:sticky;top:0;background:inherit;z-index:2}
.gm-mobile-nav-head span:first-child{font-family:var(--gm-font-serif);font-weight:700;font-size:.95rem;color:inherit}
#gmMobileNavClose{min-width:40px;min-height:40px;border:1px solid var(--gm-sidebar-line,#3a3a3c);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
#gmMobileNavSlot{display:flex;flex-direction:column;gap:12px;padding:14px;min-height:0}
/* Roster chrome inside the drawer: compact spacing, token-driven */
#gmMobileNavSlot .gm-roster-head{padding:0 2px}
#gmMobileNavSlot .gm-search-wrap{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--gm-sidebar-text,#fff) 8%,transparent);border:1px solid var(--gm-sidebar-line,#3a3a3c);border-radius:10px;padding:8px 10px}
#gmMobileNavSlot .gm-search-wrap input{background:transparent;border:0;color:var(--gm-sidebar-text,#f5f5f7);min-width:0;flex:1;font:inherit}
#gmMobileNavSlot .gm-fresh-start,#gmMobileNavSlot .gm-refresh{background:transparent;border:1px solid var(--gm-sidebar-line,#3a3a3c);color:var(--gm-sidebar-text,#f5f5f7);border-radius:10px;min-height:40px;cursor:pointer}
#gmMobileNavSlot .gm-status{color:var(--gm-sidebar-faint,var(--gm-muted,#9a97a8))}
#gmMobileNavSlot .gm-sidebar-divider{height:1px;background:var(--gm-sidebar-line,#3a3a3c)}
#gmMobileNavSlot .gm-nav{display:none}
@media(max-width:800px){
  #gmMobileNavTrigger{display:inline-flex;align-items:center;gap:6px;order:-1;flex:0 0 auto;min-height:38px;border:1px solid var(--gm-border);border-radius:10px;background:var(--gm-surface-2,var(--gm-raised));color:var(--gm-text);cursor:pointer;padding:0 12px}
  #gmMobileNavTrigger:focus-visible{outline:3px solid var(--gm-accent);outline-offset:2px}
}
@media(min-width:801px){
  /* leaving mobile: drawer force-closed + hidden; roster auto-restored by JS matchMedia */
  #gmMobileNav{display:none!important}
  #gmMobileNavTrigger{display:none!important}
}
@media(prefers-reduced-motion:reduce){#gmMobileNavPanel,.gm-mobile-backdrop{transition:none!important;animation:none!important}}
@media(max-width:800px){
  .gm-shell{grid-template-columns:1fr}
  .gm-sidebar{display:none!important}
  .gm-conversation{border-radius:0;border:0}
  .gm-orientation{padding:10px 18px 0}
  .gm-conversation-header{padding:12px 18px 14px;flex-wrap:wrap;row-gap:10px}
  .gm-conversation>.gm-breakout-panel{max-height:min(38vh,340px)}
  .gm-heading-copy{flex:1 1 100%}
  .gm-header-actions{align-items:center;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;row-gap:8px}
  .gm-theme-control{order:-1}
  .today-live-sync{order:-1}
  .gm-jump-latest{right:16px;bottom:54px}
  .gm-header-actions button,.gm-open-source,.gm-custom-colors>summary{flex:none}
  .gm-reorientation{padding:12px 18px}
  .gm-messages{padding:16px 18px 6px}
  .gm-transcript-footer{padding:6px 18px 10px}
  .gm-loading-banner,.gm-next-action{margin:12px 18px 0}
  .messenger-app .messenger-composer{margin:0 18px 16px!important}
}
/* ===== Session 028 (R52): runtime environment identity =====
   Durable, non-color-only PREVIEW·DEV marker in primary chrome. Server-side
   injected for non-production runtimes only; Production serves no such node. */
.gm-runtime-env{position:fixed;top:8px;right:10px;z-index:70;display:inline-flex;align-items:center;gap:6px;
  max-width:min(46vw,300px);padding:3px 10px;border:1px solid var(--gm-border,#3a3a3c);border-radius:999px;
  background:var(--gm-surface-2,var(--gm-raised,#1c1c1e));color:var(--gm-text,#f5f5f7);
  font-size:.66rem;font-weight:700;letter-spacing:.04em;line-height:1.4;pointer-events:none}
.gm-runtime-env-pill{padding:1px 7px;border-radius:999px;border:1px solid currentColor;font-weight:800}
.gm-runtime-env-text{color:var(--gm-muted,var(--gm-sidebar-faint,#9a97a8));font-weight:600}
@media(max-width:800px){
  .gm-runtime-env{top:6px;right:8px;max-width:52vw;padding:2px 8px}
  .gm-runtime-env-text{display:none} /* pill alone stays visible + labelled on small screens */
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){#gmMobileNavPanel{transition:transform .22s ease,opacity .18s ease}#gmMobileNavPanel[data-open="false"]{transform:translateX(-14px);opacity:0}#gmMobileNavPanel[data-open="true"]{transform:none;opacity:1}}