/* ============================================================================
   mobile_ui.css — FinChat's phone layout (below 768px), from the Finchat
   Mobile design (Organic design system: sand ground, terracotta accent, sage
   second accent, Caprasimo over Figtree, over-rounded shapes).

   Added to every page by middleware/pwaHead.js, with mobile_ui.js. Every rule
   that changes layout is inside the phone media query AND keyed to
   html.fcm-on, which mobile_ui.js sets only on app pages — so tablets,
   desktop, and the login/share pages are untouched, and a page whose script
   failed keeps its own (working) phone layout.

   Page sections are keyed by each page's own ids, so the rules are inert on
   every other page (the SPA router keeps one document across four of them).
   ========================================================================== */

/* --- tokens (the design's ramps; dark values follow the app's espresso) --- */
:root {
  --m-bg: #f5ead8;
  --m-card: #f9f4ed;      /* neutral-100: cards, buttons, sheets' rows */
  --m-n200: #eee7db;
  --m-sunk: #ebddc5;      /* surface: insets, user bubbles, stat wells */
  --m-line: #dcd3c4;      /* neutral-300 */
  --m-line-2: #c0b6a5;    /* neutral-400 */
  --m-ink: #201e1d;
  --m-ink-2: #645c50;     /* neutral-700: secondary copy */
  --m-ink-3: #82796a;     /* neutral-600: meta */
  --m-ink-4: #a19786;     /* neutral-500 */
  --m-ink-5: #474238;     /* neutral-800 */
  --m-accent: #c67139;
  --m-accent-hover: #b2622d;
  --m-accent-100: #fff2eb;
  --m-accent-200: #ffe1d0;
  --m-accent-300: #ffc6a5;
  --m-accent-400: #f6a06b;
  --m-accent-700: #8c491a;
  --m-accent-800: #643312;
  --m-accent-900: #402310;
  --m-sage-100: #f0fae1;
  --m-sage-200: #e1eecc;
  --m-sage-300: #ccdbb2;
  --m-sage-400: #aebf92;
  --m-sage-500: #8fa073;
  --m-sage-600: #728157;
  --m-sage-800: #3d472b;
  --m-sage-900: #272e1b;
  --m-dark: #2e2b25;      /* neutral-900: drawer, dark cards, toast */
  --m-dark-2: #474238;
  --m-inv: #2e2b25;        /* selected chips and segments: ink fill… */
  --m-on-inv: #f9f4ed;     /* …and the text on it (flips in dark mode) */
  --m-on-dark: #eee7db;
  --m-on-dark-2: #a19786;
  --m-head: "Caprasimo", Georgia, serif;
  --m-body: "Figtree", system-ui, sans-serif;
  --m-shadow-sm: 0 1px 2px rgba(46, 43, 37, .14);
  --m-shadow-md: 0 3px 10px rgba(46, 43, 37, .16);
  --m-shadow-lg: 0 12px 32px rgba(46, 43, 37, .22);
}
:root[data-theme="dark"] {
  --m-bg: #12100c;
  --m-card: #1d1913;
  --m-n200: #26211a;
  --m-sunk: #26211a;
  --m-line: #352c21;
  --m-line-2: #4a3d2d;
  --m-ink: #f0e7d7;
  --m-ink-2: #cbbca4;
  --m-ink-3: #9b8d78;
  --m-ink-4: #7d705e;
  --m-ink-5: #d8cab2;
  --m-accent: #e08a4e;
  --m-accent-hover: #ee9a5e;
  --m-accent-100: #33231a;
  --m-accent-200: #45291a;
  --m-accent-300: #6b3d22;
  --m-accent-400: #a05a2c;
  --m-accent-700: #f0a46f;
  --m-accent-800: #f6b88c;
  --m-accent-900: #ffd9bd;
  --m-sage-100: #222a18;
  --m-sage-200: #2c3720;
  --m-sage-300: #3b4a2b;
  --m-sage-400: #56663f;
  --m-sage-500: #7d905f;
  --m-sage-600: #9cb07c;
  --m-sage-800: #c8d8ad;
  --m-sage-900: #e1eecc;
  --m-dark: #0d0b08;
  --m-dark-2: #26211a;
  --m-inv: #f0e7d7;
  --m-on-inv: #12100c;
  --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --m-shadow-md: 0 3px 10px rgba(0, 0, 0, .45);
  --m-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* Pages lock body to the viewport with Tailwind's h-screen (100vh) and let
   one inner column scroll. On a phone 100vh is the height with the browser's
   toolbars retracted, so whatever is pinned to the bottom (Chat's composer
   tools and Send, a group thread's composer) sat below the visible screen.
   100dvh is the height actually showing. body.* outranks Tailwind's .h-screen,
   which the CDN build injects after this sheet. */
@supports (height: 100dvh) {
  body.h-screen { height: 100dvh; }
  body.min-h-screen { min-height: 100dvh; }
}

/* The bar, sheet and dialog parts exist at every width (built once), but are
   only ever drawn on a phone. */
.fcm-bar { display: none; }
.fcm-ic { width: 1em; height: 1em; display: block; flex: none; }
/* The drawer carries the design's icons beside its own; only phones show them. */
#sideNav .fcm-navic { display: none; }

@media (max-width: 767px) {

  /* --- theme tokens, phone light theme ------------------------------------
     Re-points the app's shared channels at the design's sand ramp, so the
     many surfaces built on var(--bg)/var(--surface)/Tailwind's cream-* follow
     without per-element rules. Dark mode keeps its espresso palette. */
  html.fcm-on:not([data-theme="dark"]) {
    --bg-rgb: 245 234 216;
    --surface-rgb: 249 244 237;
    --surface-2-rgb: 238 231 219;
    --surface-3-rgb: 235 221 197;
    --border-rgb: 220 211 196;
    --border-2-rgb: 192 182 165;
    --text-rgb: 32 30 29;
    --text-2-rgb: 100 92 80;
    --text-3-rgb: 130 121 106;
  }
  html.fcm-on body { -webkit-tap-highlight-color: transparent; }

  /* --- app bar ----------------------------------------------------------- */
  html.fcm-bar-on .fcm-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; top: 0; z-index: 50;
    height: calc(60px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    background: var(--m-bg); color: var(--m-ink);
    font-family: var(--m-body);
  }
  html.fcm-bar-on body { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; }
  .fcm-titles { flex: 1; min-width: 0; line-height: 1.15; }
  .fcm-title {
    font-family: var(--m-head); font-size: 22px; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fcm-sub {
    font-size: 12px; color: var(--m-ink-2); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fcm-bar-actions { display: flex; gap: 8px; flex: none; }
  .fcm-bar-actions:empty { display: none; }
  .fcm-circ {
    position: relative; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid var(--m-line); background: var(--m-card); color: var(--m-ink-5);
    font-size: 20px;
  }
  .fcm-circ:active { background: var(--m-n200); }
  .fcm-circ-dark { border: 0; background: var(--m-inv); color: var(--m-on-inv); }
  .fcm-circ-dark:active { background: var(--m-dark-2); }
  .fcm-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--m-accent); color: #f9f4ed;
    font: 700 11px/20px var(--m-body); text-align: center;
    border: 2px solid var(--m-bg); box-sizing: content-box;
  }
  .fcm-badge[hidden] { display: none; }

  /* Each page's own top header gives way to the bar. Keyed by the page
     toggle the header carries; Settings' header is a div (see its section). */
  html.fcm-bar-on header:has(#navToggle) { display: none !important; }
  /* sidebar_nav.js's fallback bar never shows under the phone shell. */
  html.fcm-on .sbn-mbar { display: none !important; }

  /* --- drawer ------------------------------------------------------------ */
  html.fcm-on #sideNav.sbn:not(.sbn-cream) {
    --sbn-bg: #2e2b25; --sbn-fg: #f9f4ed; --sbn-muted: #a19786; --sbn-item: #dcd3c4;
    --sbn-hover: rgba(249, 244, 237, .06); --sbn-badge: #474238; --sbn-line: rgba(249, 244, 237, .1);
    --sbn-accent: #c67139;
  }
  html.fcm-on #sideNav.sbn {
    width: 304px; max-width: 86%;
    border-radius: 0 36px 36px 0; border-right: 0 !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--m-body);
    overflow: hidden;
  }
  html.fcm-on #sideNav.sbn.open { box-shadow: var(--m-shadow-lg) !important; }
  html.fcm-on .sbn-head { padding: 0 6px 16px; align-items: center; gap: 10px; }
  html.fcm-on .sbn-head .sbn-logo svg { width: 34px; }
  html.fcm-on .sbn-head .sbn-brand { font-size: 22px; }
  html.fcm-on .sbn-themebtn { display: none; }
  html.fcm-on .sbn-close { width: 44px; height: 44px; background: var(--sbn-badge); color: var(--sbn-item); }
  html.fcm-on .sbn-newwrap { padding: 0 4px 10px; }
  html.fcm-on .sbn-newchat {
    min-height: 46px; gap: 6px; padding: 0 16px;
    font-family: var(--m-head); font-weight: 400; font-size: 14px;
  }
  html.fcm-on .sbn-newchat .material-symbols-outlined { display: none; }
  html.fcm-on .sbn-newchat .fcm-ic { font-size: 16px; }
  html.fcm-on #sideNav.sbn .sbn-scroll { padding: 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
  html.fcm-on .sbn-scroll > div { gap: 2px !important; }
  html.fcm-on .sbn-recentwrap { padding: 0; }
  html.fcm-on .sbn-recentlist { max-height: none; overflow: visible; }
  html.fcm-on .sbn-label {
    font-size: 11px; font-weight: 400; letter-spacing: .12em; color: #a19786;
    padding: 10px 14px 6px; margin: 0 !important;
  }
  html.fcm-on #sideNav.sbn-cream .sbn-label { color: var(--sbn-muted); }
  html.fcm-on .sbn-syslabel { padding-top: 14px; }
  html.fcm-on .sbn-recentwrap .sbn-label { padding-top: 10px; }
  html.fcm-on .sbn-scroll > .sbn-label:not(.sbn-syslabel) { padding-top: 14px; }
  html.fcm-on .sbn-item {
    min-height: 44px; padding: 0 14px; gap: 14px; border-radius: 999px;
    font-size: 14.5px; font-weight: 600;
  }
  html.fcm-on .sbn-item.sbn-active { font-weight: 600; color: #f9f4ed; box-shadow: none; }
  html.fcm-on .sbn-item .material-symbols-outlined { display: none; }
  html.fcm-on #sideNav .fcm-navic { display: block; }
  html.fcm-on .sbn-item .fcm-navic { font-size: 19px; }
  html.fcm-on .sbn-item.sbn-soon { color: #82796a; }
  html.fcm-on .sbn-soonbadge { font-size: 10px; padding: 3px 8px; background: var(--sbn-badge); color: var(--sbn-muted); }
  html.fcm-on .fcm-hide-phone { display: none !important; }
  html.fcm-on .sbn-recent {
    min-height: 44px; padding: 0 0 0 10px; gap: 10px; border-radius: 999px;
    font-size: 13.5px; font-weight: 400;
  }
  html.fcm-on .sbn-recent .sbn-rmore {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0;
    border-radius: 50%; color: var(--sbn-muted);
  }
  /* The ⋯ opens a sheet on phones, so the row never swaps in inline actions. */
  html.fcm-on .sbn-recent .sbn-ract { display: none !important; }
  html.fcm-on .sbn-recent.sbn-ract-open .sbn-rmore { display: grid; }
  html.fcm-on .sbn-foot { padding: 10px 0 0; border-top: 0; }
  html.fcm-on #sbnProfile {
    padding: 10px !important; border-radius: 999px !important; gap: 12px;
    background: var(--sbn-badge); color: var(--sbn-fg);
  }
  html.fcm-on #sideNav.sbn:not(.sbn-cream) .sbn-avatar { background: #ccdbb2; color: #272e1b; }
  html.fcm-on .sbn-avatar { width: 38px; height: 38px; font-size: 15px; }
  html.fcm-on .sbn-urole { font-size: 12px; }
  html.fcm-on #sideNav.sbn:not(.sbn-cream) .sbn-urole { color: #c0b6a5; }
  html.fcm-on .sbn-mbackdrop.sbn-show, html.fcm-on #navBackdrop { background: rgba(46, 43, 37, .45) !important; }

  /* --- sheet ------------------------------------------------------------- */
  .fcm-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(46, 43, 37, .45); opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .fcm-scrim.fcm-show { opacity: 1; pointer-events: auto; }
  .fcm-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
    max-height: 80%; display: flex; flex-direction: column;
    background: var(--m-bg); color: var(--m-ink); font-family: var(--m-body);
    border-radius: 34px 34px 0 0; box-shadow: var(--m-shadow-lg);
    transform: translateY(105%); transition: transform .32s cubic-bezier(.3, .8, .3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .fcm-sheet.fcm-show { transform: translateY(0); }
  .fcm-sheet-grip { display: flex; justify-content: center; padding: 10px 0 4px; flex: none; }
  .fcm-sheet-grip span { width: 40px; height: 5px; border-radius: 999px; background: var(--m-line-2); }
  .fcm-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 20px 10px; flex: none; }
  .fcm-sheet-head h3 {
    margin: 0; flex: 1; min-width: 0; font-family: var(--m-head); font-weight: 400;
    font-size: 24px; line-height: 1.12; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fcm-sheet-actions .fcm-sheet-head h3 { font-size: 22px; }
  .fcm-sheet-body {
    overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
    padding: 4px 12px 30px; display: flex; flex-direction: column; gap: 2px;
  }
  .fcm-sheet-body::-webkit-scrollbar { display: none; }
  .fcm-ghost {
    min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
    color: var(--m-accent); font: 400 14px var(--m-head); cursor: pointer; flex: none;
  }
  .fcm-ghost:active { background: var(--m-accent-100); }
  .fcm-empty { padding: 26px 10px; text-align: center; font-size: 13.5px; color: var(--m-ink-3); }

  .fcm-action {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px;
    border: 0; border-radius: 999px; background: none; cursor: pointer; text-align: left;
    font: 600 15px var(--m-body); color: var(--m-ink);
  }
  .fcm-action .fcm-ic { font-size: 19px; }
  .fcm-action:active { background: var(--m-n200); }
  .fcm-action.fcm-danger { color: var(--m-accent-800); }
  .fcm-action[disabled] { opacity: .45; }
  .fcm-action-sub { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--m-ink-3); }

  .fcm-person {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px;
    border: 0; border-radius: 22px; background: transparent; cursor: pointer; text-align: left;
    font-family: var(--m-body); color: var(--m-ink);
  }
  .fcm-person.fcm-on { background: var(--m-accent-100); }
  .fcm-person:active { background: var(--m-n200); }
  .fcm-person-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--m-card); display: grid; place-items: center; }
  .fcm-person-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fcm-person-text { flex: 1; min-width: 0; line-height: 1.25; }
  .fcm-person-name { display: block; font-weight: 700; font-size: 15px; }
  .fcm-person-sub { display: block; font-size: 12.5px; color: var(--m-ink-2); }
  .fcm-person-check { color: var(--m-accent); font-size: 18px; display: flex; }

  .fcm-notif {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px;
    border: 0; border-radius: 22px; background: transparent; cursor: pointer; text-align: left;
    font-family: var(--m-body); color: var(--m-ink);
  }
  .fcm-notif.fcm-unread { background: var(--m-accent-100); }
  .fcm-notif-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }
  .fcm-nt-approval { background: var(--m-accent-200); color: var(--m-accent-800); }
  .fcm-nt-fraud { background: var(--m-accent-300); color: var(--m-accent-900); }
  .fcm-nt-briefing { background: var(--m-sage-200); color: var(--m-sage-800); }
  .fcm-nt-mission { background: var(--m-n200); color: var(--m-ink-5); }
  .fcm-nt-group { background: var(--m-sage-100); color: var(--m-sage-800); }
  .fcm-notif-text { flex: 1; min-width: 0; line-height: 1.3; }
  .fcm-notif-top { display: flex; gap: 8px; justify-content: space-between; }
  .fcm-notif-title { font-weight: 600; font-size: 14px; }
  .fcm-unread .fcm-notif-title { font-weight: 700; }
  .fcm-notif-time { font-size: 11.5px; color: var(--m-ink-3); flex: none; }
  .fcm-notif-body {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; color: var(--m-ink-2); margin-top: 1px;
  }
  .fcm-notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m-accent); flex: none; margin-top: 6px; }

  /* A mission report opened from a notification reads as a sheet too. */
  #notifReportModal { align-items: flex-end !important; padding: 0 !important; background: rgba(46, 43, 37, .45) !important; }
  #notifReportModal > div {
    max-width: none !important; max-height: 88vh !important;
    border-radius: 34px 34px 0 0 !important; background: var(--m-bg) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #notifReportModal > div > div:first-child { border-bottom: 0 !important; padding: 20px 20px 8px !important; }
  #notifReportModal > div > div:first-child > div:first-child { font: 400 20px/1.2 var(--m-head) !important; color: var(--m-ink) !important; }
  #notifReportModal .markdown-body { padding: 8px 20px 28px !important; font-size: 15px !important; color: var(--m-ink) !important; }

  /* --- push banner (a notification arriving while the page is open) ------ */
  .fcm-banner {
    position: fixed; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 98;
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer;
    border-radius: 26px; background: var(--m-card); color: var(--m-ink); box-shadow: var(--m-shadow-lg);
    font-family: var(--m-body);
    transform: translateY(calc(-100% - 20px - env(safe-area-inset-top, 0px)));
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.15);
  }
  .fcm-banner.fcm-show { transform: translateY(0); }
  .fcm-banner-ic {
    width: 38px; height: 38px; flex: none; padding: 4px; box-sizing: border-box;
    border-radius: 12px; background: var(--m-dark);
  }
  .fcm-banner-ic img { width: 100%; height: 100%; display: block; }
  .fcm-banner-text { flex: 1; min-width: 0; line-height: 1.3; display: flex; flex-direction: column; }
  .fcm-banner-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--m-ink-3); }
  .fcm-banner-title { font-weight: 700; font-size: 14px; }
  .fcm-banner-body { font-size: 13px; color: var(--m-ink-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* --- dialog ------------------------------------------------------------ */
  .fcm-dialog-wrap {
    position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px;
    background: rgba(46, 43, 37, .5); opacity: 0; transition: opacity .2s;
  }
  .fcm-dialog-wrap.fcm-show { opacity: 1; }
  .fcm-dialog {
    width: min(440px, 100%); display: flex; flex-direction: column; gap: 13px;
    padding: 20px; border-radius: 32px; background: var(--m-bg); color: var(--m-ink);
    box-shadow: var(--m-shadow-lg); font-family: var(--m-body);
    transform: scale(.92); transition: transform .25s cubic-bezier(.3, .9, .3, 1.2);
  }
  .fcm-dialog-wrap.fcm-show .fcm-dialog { transform: scale(1); }
  .fcm-dialog-title { font: 400 22px/1.2 var(--m-head); }
  .fcm-dialog-body { font-size: 14px; line-height: 1.5; opacity: .85; }
  .fcm-dialog-actions { display: flex; flex-direction: column-reverse; gap: 9px; margin-top: 9px; }
  .fcm-input {
    width: 100%; min-height: 48px; padding: 6px 16px; border-radius: 999px;
    border: 1px solid var(--m-line); background: var(--m-sunk); color: var(--m-ink);
    font: 400 16px var(--m-body); caret-color: var(--m-accent); outline: none;
  }
  .fcm-input:focus { border-color: var(--m-accent); }

  /* Buttons (the design system's .btn): Caprasimo 14px pills. */
  .fcm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 46px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    font: 400 14px/1.2 var(--m-head); white-space: nowrap;
    border: 1px solid transparent; background: transparent; color: var(--m-ink);
  }
  .fcm-btn .fcm-ic { font-size: 16px; }
  .fcm-btn-primary { background: var(--m-accent); color: var(--m-bg); }
  .fcm-btn-primary:active { background: var(--m-accent-hover); }
  .fcm-btn-danger { background: var(--m-accent-800); }
  :root[data-theme="dark"] .fcm-btn-danger { background: #b0472e; color: #fff; }
  .fcm-btn-secondary { border-color: rgba(32, 30, 29, .16); }
  :root[data-theme="dark"] .fcm-btn-secondary { border-color: var(--m-line-2); }
  .fcm-btn-secondary:active { background: rgba(32, 30, 29, .07); }
  .fcm-btn[disabled] { opacity: .45; }

  /* --- toast ------------------------------------------------------------- */
  .fcm-toast {
    position: fixed; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); z-index: 99;
    display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
    padding: 12px 18px; border-radius: 999px;
    background: var(--m-dark); color: #f9f4ed; box-shadow: var(--m-shadow-lg);
    font: 600 14px var(--m-body); pointer-events: none;
    opacity: 0; transform: translate(-50%, 16px); transition: transform .3s, opacity .3s;
  }
  .fcm-toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fcm-toast .fcm-ic { font-size: 16px; color: #ccdbb2; }
  .fcm-toast.fcm-show { opacity: 1; transform: translate(-50%, 0); }
  .fcm-toast.fcm-toast-high { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  /* Pages' own toasts (#toast.toast) take the same pill. */
  html.fcm-on .toast {
    left: 50% !important; right: auto !important; bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100% - 32px); white-space: normal !important; text-align: center;
    padding: 12px 18px !important; border-radius: 999px !important; border: 0 !important;
    background: var(--m-dark) !important; color: #f9f4ed !important;
    font: 600 14px/1.35 var(--m-body) !important; box-shadow: var(--m-shadow-lg) !important;
    transform: translate(-50%, 16px) !important;
  }
  html.fcm-on .toast.show { transform: translate(-50%, 0) !important; }

  /* --- shared page parts ------------------------------------------------- */
  /* Phone pages scroll on a sand ground with 18px gutters. */
  html.fcm-bar-on main { background: var(--m-bg) !important; }
}

/* ── shared page parts ───────────────────────────────────────────────────
   .fcm-only: phone-only markup a page carries (hidden everywhere else).
   .fcm-desk: markup the phone layout replaces. */
@media (min-width: 768px) { .fcm-only { display: none !important; } }
html:not(.fcm-on) .fcm-only { display: none !important; }

@media (max-width: 767px) {
  html.fcm-on .fcm-desk { display: none !important; }
  @keyframes fcm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes fcm-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

  html.fcm-on .fcm-tag {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; border: 0;
    font: 400 11px/1.45 var(--m-body); letter-spacing: .02em;
  }
  html.fcm-on .fcm-tag-sage { background: var(--m-sage-100); color: var(--m-sage-800); }
  html.fcm-on .fcm-tag-accent { background: var(--m-accent-100); color: var(--m-accent-800); }
  html.fcm-on .fcm-tag-neutral { background: var(--m-n200); color: var(--m-ink-5); }
  html.fcm-on .fcm-tag-outline { border: 1px solid var(--m-accent); color: var(--m-accent); }
  html.fcm-on .fcm-tag-danger { background: #fde3dc; color: #8f2f1c; }
  :root[data-theme="dark"] .fcm-tag-danger { background: #3a1a12; color: #f3a58f; }
  html.fcm-on .fcm-tag-live { font-weight: 700; gap: 6px; }
  html.fcm-on .fcm-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-sage-600); animation: fcm-pulse 1.6s infinite; }
  html.fcm-on .fcm-btn-sm { min-height: 40px; font-size: 13px; padding: 0 14px; }
  html.fcm-on .fcm-btn-sm .fcm-ic { font-size: 15px; }
  html.fcm-on .fcm-note { font-size: 13.5px; color: var(--m-ink-2); padding: 4px 2px; }
  html.fcm-on .fcm-kicker { font: 700 10.5px var(--m-body); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3); }

  /* A swipeable row that bleeds to the screen edges. */
  html.fcm-on .fcm-strip {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -18px; padding: 2px 18px 4px; scroll-padding: 0 18px;
  }
  html.fcm-on .fcm-strip::-webkit-scrollbar { display: none; }
  html.fcm-on .fcm-stack { display: flex; flex-direction: column; gap: 8px; }

  html.fcm-on .fcm-agent-card {
    flex: none; width: 132px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border-radius: 24px; border: 1px solid var(--m-line); background: var(--m-card);
    color: var(--m-ink); text-decoration: none; font-family: var(--m-body);
  }
  html.fcm-on .fcm-agent-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
  html.fcm-on .fcm-agent-face img { width: 100%; height: 100%; object-fit: cover; }
  html.fcm-on .fcm-agent-name { font-weight: 700; font-size: 14px; }
  html.fcm-on .fcm-agent-role { font-size: 11.5px; line-height: 1.3; color: var(--m-ink-2); min-height: 30px; }
  html.fcm-on .fcm-agent-card .fcm-tag { align-self: flex-start; }

  html.fcm-on .fcm-feed-card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border-radius: 22px; background: var(--m-card); border: 1px solid var(--m-line); font-family: var(--m-body);
  }
  html.fcm-on .fcm-feed-top { display: flex; align-items: center; gap: 10px; }
  html.fcm-on .fcm-feed-face { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--m-sunk); font-weight: 700; }
  html.fcm-on .fcm-feed-face img { width: 100%; height: 100%; object-fit: cover; }
  html.fcm-on .fcm-feed-name { font-weight: 700; font-size: 14px; flex: 1; text-transform: capitalize; color: var(--m-ink); }
  html.fcm-on .fcm-feed-top .fcm-tag { text-transform: capitalize; }
  html.fcm-on .fcm-feed-goal {
    font-size: 13.5px; line-height: 1.4; color: var(--m-ink-5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html.fcm-on .fcm-feed-meta { display: flex; gap: 14px; font-size: 12px; color: var(--m-ink-2); }
  html.fcm-on .fcm-feed-time { margin-left: auto; }

  /* Cards on a phone: neutral-100 on the sand ground, hairline, 32px corners. */
  html.fcm-on .fcm-card {
    display: flex; flex-direction: column; gap: 12px; padding: 18px;
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: 32px;
  }
  html.fcm-on .fcm-h4 { font: 400 18px/1.12 var(--m-head); color: var(--m-ink); margin: 0; letter-spacing: -.015em; }
}

/* ── Operations (finchat_dashboard.html) ─────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #opsMain { padding: 6px 18px 32px !important; }
  html.fcm-on #opsMain > div { gap: 22px !important; }
  html.fcm-on .fcm-ops-live { display: flex; align-items: center; gap: 8px; }

  html.fcm-on #intStrip { gap: 10px !important; }
  html.fcm-on #intStrip > div {
    display: flex; flex-direction: column; gap: 2px; padding: 14px; min-width: 0;
    border-radius: 22px; background: var(--m-card); border: 1px solid var(--m-line);
  }
  html.fcm-on #opsMain .fc-kicker { font: 700 10.5px var(--m-body); letter-spacing: .08em; color: var(--m-ink-3); }
  html.fcm-on #intStrip .fc-stat { font-size: 24px; line-height: 1.2; margin-top: 4px !important; color: var(--m-ink) !important; }
  html.fcm-on #intStrip .text-\[10px\] { font-size: 11.5px; color: var(--m-ink-2); }
  html.fcm-on #intSolana { font: 600 15px/1.2 var(--m-body); margin-top: 4px !important; color: var(--m-ink) !important; }
  html.fcm-on #intLastAnchor { font-size: 14px; line-height: 1.2; margin-top: 4px !important; color: var(--m-ink) !important; }

  /* Section cards. */
  html.fcm-on #memCard, html.fcm-on #queueCard, html.fcm-on #debateCard {
    padding: 18px !important; border-radius: 32px !important; box-shadow: none !important;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
  }
  html.fcm-on #opsMain h2, html.fcm-on #opsMain h3 {
    font: 400 18px/1.12 var(--m-head) !important; color: var(--m-ink) !important;
    text-transform: none !important; letter-spacing: -.015em !important; margin: 0 !important;
  }
  html.fcm-on #opsMain h2 > .material-symbols-outlined,
  html.fcm-on #opsMain h3 > .material-symbols-outlined { display: none; }
  /* Section title rows: title, then its subtitle under it. */
  html.fcm-on #memCard > div:first-child, html.fcm-on #pulseSection > div:first-child, html.fcm-on #debateCard > div:first-child {
    flex-direction: column; align-items: flex-start !important; gap: 0 !important; margin-bottom: 12px !important;
  }
  html.fcm-on #opsMain .text-xs.text-\[\#8c7a6b\] { font-size: 12px; color: var(--m-ink-2); }

  html.fcm-on #memCard .grid { gap: 8px !important; }
  html.fcm-on #memCard .grid > div { padding: 12px !important; border-radius: 18px !important; border: 0 !important; background: var(--m-sunk) !important; }
  html.fcm-on #memCard .fc-stat { font-size: 24px; line-height: 1.2; color: var(--m-ink) !important; margin-top: 0 !important; }
  html.fcm-on #memCard .text-\[10px\] { font-size: 11.5px; color: var(--m-ink-2); }
  html.fcm-on #memCard > div:last-child { margin-top: 12px !important; gap: 6px !important; }
  html.fcm-on #memTopEntities span {
    margin: 0 6px 6px 0 !important; padding: 3px 10px !important; border: 0 !important;
    background: var(--m-n200) !important; color: var(--m-ink-5); font-size: 11px !important;
  }

  html.fcm-on #pulseSection > div:first-child { margin-bottom: 10px !important; }
  html.fcm-on #agentsGrid { display: none !important; }

  html.fcm-on #queueRow { gap: 22px !important; }
  html.fcm-on #queueCard h3 { margin-bottom: 12px !important; }
  html.fcm-on #queueCard .grid { gap: 8px !important; }
  html.fcm-on #queueCard .grid > div { padding: 12px !important; border-radius: 18px !important; border: 0 !important; background: var(--m-sunk) !important; }
  html.fcm-on #queueCard .grid > div:nth-child(1) { background: var(--m-sage-100) !important; }
  html.fcm-on #queueCard .grid > div:nth-child(2) { background: var(--m-accent-100) !important; }
  html.fcm-on #queueCard .fc-kicker { color: var(--m-ink-2); }
  html.fcm-on #queueCard .fc-stat { font-size: 26px; line-height: 1.2; margin-top: 0 !important; color: var(--m-ink) !important; }
  html.fcm-on #qActive { color: var(--m-sage-800) !important; }
  html.fcm-on #qWaiting { color: var(--m-accent-700) !important; }
  html.fcm-on #queueCard > div:last-child { font-size: 11.5px; color: var(--m-ink-2); margin-top: 12px !important; }

  /* The briefing is the one dark card on the page. */
  html.fcm-on #briefCard {
    padding: 20px !important; border-radius: 32px !important; border: 0 !important; box-shadow: none !important;
    background: var(--m-dark) !important; color: #eee7db; gap: 10px;
  }
  html.fcm-on #briefCard::before {
    content: ''; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px;
    border-radius: 50%; background: #643312; opacity: .55; pointer-events: none;
  }
  html.fcm-on #briefCard > .absolute, html.fcm-on #briefCard .text-\[36px\] { display: none; }
  html.fcm-on #briefCard > div { position: relative; }
  html.fcm-on #briefCard .uppercase {
    text-transform: none; letter-spacing: .02em; font: 400 11px/1.45 var(--m-body) !important;
    padding: 3px 10px !important; border: 0 !important; background: var(--m-accent-100) !important; color: var(--m-accent-800) !important;
  }
  html.fcm-on #briefCard .fc-h3 { font-size: 22px !important; line-height: 1.15; color: #f9f4ed !important; margin-top: 10px !important; }
  html.fcm-on #briefCard p { font-size: 13.5px !important; line-height: 1.5 !important; color: #eee7db !important; margin-top: 10px !important; }
  html.fcm-on #briefCard code { display: none; }
  html.fcm-on #briefCard > div:last-child { border: 0 !important; padding: 0 !important; margin-top: 4px !important; }
  html.fcm-on #briefCard button, html.fcm-on #debateBtn {
    width: 100%; justify-content: center; min-height: 46px; border-radius: 999px !important; box-shadow: none !important;
    background: var(--m-accent) !important; color: var(--m-bg) !important; font: 400 14px/1.2 var(--m-head) !important;
  }
  html.fcm-on #briefCard button .material-symbols-outlined, html.fcm-on #debateBtn .material-symbols-outlined { display: none; }
  html.fcm-on #briefCard button .fcm-ic, html.fcm-on #debateBtn .fcm-ic { font-size: 16px; }

  /* Council: question, panel chips, then the button. */
  html.fcm-on #debateCard > div:last-child { gap: 12px !important; }
  html.fcm-on #debateCard > div:last-child > div:first-child { display: contents; }
  html.fcm-on #debateGoal {
    order: 1; min-height: 48px; padding: 12px 14px !important; border-radius: 20px !important;
    border: 1px solid var(--m-line) !important; background: var(--m-bg) !important; font-size: 16px !important; color: var(--m-ink);
  }
  html.fcm-on #debateCard > div:last-child > div:nth-child(2) { order: 2; gap: 8px !important; }
  html.fcm-on #debateBtn { order: 3; }
  html.fcm-on #debateResult { order: 4; }
  html.fcm-on #debateCard > div:last-child > div:nth-child(2) > span:first-child { width: 100%; font-size: 10.5px !important; color: var(--m-ink-3) !important; letter-spacing: .08em; }
  html.fcm-on #debateCard label {
    min-height: 40px; padding: 0 14px 0 6px; gap: 6px !important; border-radius: 999px;
    border: 1px solid var(--m-line); background: transparent; color: var(--m-ink);
    font: 600 13px var(--m-body);
  }
  html.fcm-on #debateCard label:has(input:checked) { border-color: var(--m-accent-400); background: var(--m-accent-100); color: var(--m-accent-800); }
  html.fcm-on #debateCard label input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  html.fcm-on #debateCard label img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  html.fcm-on #debateCard label .text-\[\#8c7a6b\] { font-weight: 400; color: inherit !important; opacity: .8; }
  html.fcm-on #debateProgress { width: 100%; margin: 0 !important; }

  /* The feed sits on the page, not in a card. */
  html.fcm-on #activityCard { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  html.fcm-on #activityCard > div:first-child { margin-bottom: 8px !important; align-items: baseline !important; }
}

/* ── Agents (finchat_agents.html) ────────────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #agentsMain { padding: 6px 18px 32px !important; }
  html.fcm-on #agentsMain > div { gap: 18px !important; }
  html.fcm-on #agentsMain h2.text-lg { display: none; }
  html.fcm-on #agentList { margin: 0 -18px !important; padding: 4px 18px 6px !important; gap: 10px !important; scroll-padding: 0 18px !important; scroll-snap-type: x mandatory !important; }
  html.fcm-on #agentList .agent-card {
    width: 112px; flex: none !important; flex-direction: column; align-items: flex-start; gap: 8px !important;
    padding: 12px !important; border-radius: 24px !important; box-shadow: none !important;
    border: 2px solid transparent !important; background: var(--m-card) !important; color: var(--m-ink) !important;
  }
  html.fcm-on #agentList .agent-card.is-selected { border-color: var(--m-accent) !important; background: var(--m-accent-100) !important; }
  html.fcm-on #agentList .agent-card > span:first-child { width: 52px; height: 52px; border: 0; }
  html.fcm-on #agentList .agent-card .text-base { font-size: 14px; }
  html.fcm-on #agentList .agent-card .text-xs { font-size: 11.5px; line-height: 1.3; color: var(--m-ink-2) !important; margin-top: 4px; }
  html.fcm-on #agentList .agent-card .text-xs > span { display: none; }

  html.fcm-on #configCard {
    padding: 20px !important; gap: 18px !important; border-radius: 32px !important; box-shadow: none !important;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important; animation: none !important;
  }
  html.fcm-on .fcm-cfg-head { display: flex; gap: 12px; align-items: center; }
  html.fcm-on .fcm-cfg-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
  html.fcm-on .fcm-cfg-kicker { font-size: 12px; color: var(--m-ink-2); }
  html.fcm-on .fcm-cfg-name { font: 400 24px/1.1 var(--m-head); color: var(--m-ink); }
  html.fcm-on #configCard h3 { font: 700 15px var(--m-body) !important; color: var(--m-ink) !important; margin-bottom: 8px !important; }
  html.fcm-on #riskToggleContainer {
    display: flex !important; width: 100% !important; padding: 4px !important; gap: 4px !important; margin-bottom: 8px !important;
    border-radius: 999px; background: var(--m-bg) !important; border: 1px solid var(--m-line) !important; box-shadow: none !important;
  }
  html.fcm-on #riskToggleContainer .risk-btn {
    flex: 1; min-height: 40px; padding: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    background: transparent !important; color: var(--m-ink-2) !important; font: 700 14px var(--m-body) !important;
  }
  html.fcm-on #riskToggleContainer .risk-btn.active { background: var(--m-inv) !important; color: var(--m-on-inv) !important; }
  html.fcm-on #riskDesc, html.fcm-on #configCard p { font-size: 12.5px !important; line-height: 1.45; color: var(--m-ink-2) !important; }
  html.fcm-on #modelPicker {
    min-height: 48px; padding: 0 16px !important; border-radius: 999px !important;
    border: 1px solid var(--m-line) !important; background-color: var(--m-bg) !important; font-size: 15px !important; color: var(--m-ink) !important;
  }
  /* Traits before the audit trail, and on the card itself rather than in a well. */
  html.fcm-on #cfgGrid { gap: 18px !important; }
  html.fcm-on #cfgGrid > div:nth-child(2) { order: -1; }
  html.fcm-on #cfgGrid > div:nth-child(2) > div { padding: 0 !important; gap: 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  html.fcm-on #cfgGrid > div:nth-child(2) > div > div { gap: 2px !important; }
  html.fcm-on #cfgGrid > div:nth-child(2) .text-xs { font-size: 12.5px; color: var(--m-ink); }
  html.fcm-on #configCard input[type=range] { height: 30px; accent-color: var(--m-accent); background: transparent !important; }
  html.fcm-on #configCard input[type=range]::-webkit-slider-runnable-track { background: var(--m-line); }
  html.fcm-on #configCard input[type=range]::-webkit-slider-thumb { background: var(--m-accent); border-color: var(--m-card); }
  html.fcm-on #auditLogsList {
    max-height: 150px !important; padding: 12px !important; gap: 6px !important;
    border-radius: 20px !important; border: 0 !important; box-shadow: none !important; background: var(--m-sunk) !important;
  }
  html.fcm-on #auditLogsList > div { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; }
  html.fcm-on #auditLogsList .text-xs { font-size: 12.5px; font-weight: 400; color: var(--m-ink); }
  html.fcm-on #auditLogsList .text-\[11px\], html.fcm-on #auditLogsList .text-\[10px\] { font-size: 12px; color: var(--m-ink-3); text-align: left; padding: 0; }
  html.fcm-on #auditLogsList .material-symbols-outlined { display: none; }
  html.fcm-on #cfgFooter { gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  html.fcm-on #cfgFooter button {
    flex: 1; justify-content: center; min-height: 46px; padding: 0 18px !important; border-radius: 999px !important; box-shadow: none !important;
    font: 400 14px/1.2 var(--m-head) !important;
  }
  html.fcm-on #cfgFooter button:first-child { background: transparent !important; border: 1px solid rgba(32, 30, 29, .16) !important; color: var(--m-ink) !important; }
  html.fcm-on #cfgFooter button:last-child { background: var(--m-accent) !important; color: var(--m-bg) !important; border: 0 !important; }
}

/* ── Chat (finchat_chat.html) ────────────────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #chatShell, html.fcm-on #chatShell main, html.fcm-on #chatShell section { background: var(--m-bg) !important; }
  html.fcm-on .fcm-lic { display: flex; }
  html.fcm-on #chatHeader .material-symbols-outlined,
  html.fcm-on #composerTools .material-symbols-outlined { display: none; }

  /* Header: menu · agent (opens the picker) · bell · ⋯ */
  html.fcm-on #chatHeader {
    height: auto !important; min-height: 0; z-index: 30 !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 10px !important; gap: 8px !important;
    background: var(--m-bg) !important; border-bottom: 0 !important;
  }
  html.fcm-on #chatHeader > .flex-1, html.fcm-on #chatHeader > .relative.hidden,
  html.fcm-on #branchBtn, html.fcm-on #mindMapBtn, html.fcm-on #topbarUserIcon { display: none !important; }
  html.fcm-on #chatHeader #navToggle, html.fcm-on #chatHeader #notifBell, html.fcm-on #chatMoreBtn {
    width: 44px !important; height: 44px !important; flex: none; display: grid !important; place-items: center;
    border-radius: 50% !important; border: 1px solid var(--m-line) !important;
    background: var(--m-card) !important; color: var(--m-ink-5) !important; font-size: 20px;
  }
  html.fcm-on #chatHeader > .relative { flex: none; }
  html.fcm-on #notifBadge {
    top: -3px !important; right: -3px !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important;
    background: var(--m-accent) !important; color: #f9f4ed !important; font: 700 11px/16px var(--m-body) !important;
    border: 2px solid var(--m-bg) !important; box-sizing: border-box;
  }
  html.fcm-on #chatIdentity {
    flex: 1; min-width: 0; gap: 10px !important; padding: 2px 4px; border-radius: 999px; cursor: pointer;
  }
  html.fcm-on #chatIdentity:active { background: var(--m-n200); }
  html.fcm-on #chatHeader #topbarAvatar { width: 40px !important; height: 40px !important; background: var(--m-card) !important; }
  html.fcm-on #chatHeader #topbarName { font-size: 18px !important; line-height: 1.15 !important; color: var(--m-ink) !important; }
  html.fcm-on .fcm-chev { display: flex; font-size: 14px; color: var(--m-ink-3); flex: none; }
  html.fcm-on #chatHeader #topbarDesc { font-size: 12px !important; line-height: 1.15; color: var(--m-ink-2) !important; }

  /* Messages */
  html.fcm-on #messages { padding: 4px 18px 16px !important; }
  html.fcm-on .msg-group { margin-bottom: 18px; }
  html.fcm-on .msg-group.user .msg-avatar-space { display: none; }
  html.fcm-on .msg-group.user .msg-row { max-width: 85% !important; }
  html.fcm-on .msg-group.user .bubble:not(.flagged):not(.warned) {
    background: var(--m-sunk) !important; color: var(--m-ink) !important; border: 0 !important;
    border-radius: 22px 22px 6px 22px !important; padding: 11px 16px !important;
    font-size: 15px !important; line-height: 1.45 !important;
  }
  html.fcm-on .user .bubble.markdown-body a { color: var(--m-accent-700) !important; }
  html.fcm-on .msg-group.user .hash-tag, html.fcm-on .msg-group.user .chain-status, html.fcm-on .msg-group.user .read-receipt { display: none; }
  html.fcm-on .msg-time { font: 400 11px var(--m-body) !important; color: var(--m-ink-3) !important; }
  html.fcm-on .msg-footer { padding: 0 !important; gap: 6px !important; }

  /* An agent's reply has no bubble: avatar, name + time, the text, then the
     proof hash and copy. The footer dissolves (display:contents) so its time
     can sit beside the name. */
  html.fcm-on .msg-group.bot .msg-row { max-width: 100% !important; width: 100%; gap: 10px !important; }
  html.fcm-on .msg-group.bot .msg-avatar-space { width: 30px !important; padding-top: 2px; }
  html.fcm-on .msg-group.bot .msg-avatar-space .avatar { width: 30px !important; height: 30px !important; border: 0 !important; }
  html.fcm-on .msg-group.bot .msg-content { flex: 1; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px !important; row-gap: 6px !important; }
  html.fcm-on .msg-group.bot .msg-content > * { flex: 0 0 100%; min-width: 0; }
  html.fcm-on .msg-group.bot .msg-content > .msg-sender { flex: 0 0 auto; order: -2; font-size: 13.5px !important; padding: 0 !important; margin: 0 !important; color: var(--m-ink); }
  html.fcm-on .msg-group.bot .msg-footer { display: contents; }
  html.fcm-on .msg-group.bot .msg-footer > * { flex: 0 0 auto; }
  html.fcm-on .msg-group.bot .msg-footer > .msg-time { order: -1; }
  html.fcm-on .msg-group.bot .bubble:not(.flagged):not(.warned) {
    background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
    font-size: 15px !important; line-height: 1.55 !important; color: var(--m-ink) !important;
  }
  html.fcm-on .msg-group.bot .bubble .markdown-body, html.fcm-on .msg-group.bot .bubble.markdown-body { font-size: 15px; }
  html.fcm-on .hash-tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px !important; border: 0 !important; border-radius: 999px !important;
    background: var(--m-sage-100) !important; color: var(--m-sage-800) !important; font: 400 11px var(--m-body) !important;
  }
  html.fcm-on .msg-copy { width: 32px !important; height: 32px !important; border-radius: 50% !important; opacity: 1 !important; color: var(--m-ink-3) !important; }
  html.fcm-on .msg-copy .material-symbols-outlined { font-size: 15px !important; }
  html.fcm-on .date-divider span { font-size: 11px; color: var(--m-ink-3); }

  /* Welcome: left-aligned, two suggestion cards a row. */
  html.fcm-on .chat-hero {
    align-items: flex-start !important; text-align: left !important; justify-content: flex-start !important;
    margin: 18px 0 8px !important; padding: 0 !important; max-width: none !important; width: 100%;
  }
  html.fcm-on .chat-hero > div:first-child {
    width: 72px !important; height: 72px !important; margin-bottom: 18px !important;
    border: 0 !important; box-shadow: var(--m-shadow-md) !important; background: var(--m-card) !important;
  }
  html.fcm-on .chat-hero h1 {
    font-size: 34px !important; line-height: 1.05 !important; font-weight: 400 !important; letter-spacing: -.015em !important;
    margin-bottom: 8px !important; color: var(--m-ink) !important;
  }
  html.fcm-on .chat-hero p { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--m-ink-2) !important; max-width: none !important; margin-bottom: 18px !important; text-wrap: pretty; }
  html.fcm-on .chat-hero .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html.fcm-on .chat-hero .grid > div {
    justify-content: flex-start !important; gap: 8px; padding: 14px !important; border-radius: 24px !important;
    border: 1px solid var(--m-line) !important; background: var(--m-card) !important; box-shadow: none !important;
  }
  html.fcm-on .chat-hero .grid > div:active { background: var(--m-accent-100) !important; border-color: var(--m-accent-300) !important; }
  html.fcm-on .chat-hero .grid > div > div:first-child > div:first-child {
    width: 36px !important; height: 36px !important; margin-bottom: 8px !important; border-radius: 50% !important;
    background: var(--m-accent-100) !important; color: var(--m-accent-700) !important; transform: none !important;
  }
  html.fcm-on .chat-hero .grid .material-symbols-outlined { font-size: 17px !important; }
  html.fcm-on .chat-hero .grid > div > div:first-child > div:last-child { font-size: 14px !important; line-height: 1.25; margin: 0 !important; color: var(--m-ink) !important; }
  html.fcm-on .chat-hero .grid > div > div:last-child { font-size: 12.5px !important; line-height: 1.35 !important; color: var(--m-ink-2) !important; margin: 0 !important; }

  /* Composer */
  html.fcm-on #composerWrap {
    padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(to top, var(--m-bg) 70%, transparent) !important;
  }
  html.fcm-on #composerBox {
    border-radius: 28px !important; padding: 4px 8px 8px; box-shadow: var(--m-shadow-md) !important;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
  }
  html.fcm-on #composerBox:focus-within { border-color: var(--m-accent-300) !important; }
  html.fcm-on #fcmModeChips { display: none; }
  html.fcm-on #fcmModeChips.has { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
  html.fcm-on #fcmModeChips .fcm-ic { font-size: 11px; }
  html.fcm-on #msgInput {
    font-size: 16px !important; line-height: 1.45 !important; padding: 12px 10px 6px !important;
    min-height: 0 !important; max-height: 120px; color: var(--m-ink) !important;
  }
  html.fcm-on #composerTools { gap: 2px !important; padding: 0 !important; }
  html.fcm-on #agentPickerBtn {
    height: 40px; padding: 3px 8px 3px 3px !important; gap: 2px !important;
    border: 1px solid var(--m-line) !important; background: var(--m-bg) !important; color: var(--m-ink-2) !important; font-size: 14px;
  }
  html.fcm-on #agentPickerAvatar { width: 32px !important; height: 32px !important; }
  html.fcm-on #attachBtn, html.fcm-on #micBtn {
    width: 44px !important; height: 44px !important; color: var(--m-ink-2) !important; font-size: 19px;
  }
  html.fcm-on #ctxBtn { display: none !important; }
  html.fcm-on #micBtn.fc-rec { background: var(--m-accent-100) !important; color: var(--m-accent-700) !important; }
  html.fcm-on #micBtn.fc-busy { opacity: .55; }
  html.fcm-on #webToggle, html.fcm-on #studyToggle {
    width: 44px !important; height: 44px !important; padding: 0 !important; gap: 0 !important; justify-content: center; flex: none;
    border-radius: 50% !important; border: 1px solid var(--m-line) !important; background: transparent !important;
    color: var(--m-ink-2) !important; font-size: 19px;
  }
  html.fcm-on #studyToggle { margin-left: 4px; }
  html.fcm-on #webToggle.on { border-color: var(--m-sage-400) !important; background: var(--m-sage-200) !important; color: var(--m-sage-800) !important; }
  html.fcm-on #studyToggle.on { border-color: var(--m-accent-400) !important; background: var(--m-accent-200) !important; color: var(--m-accent-800) !important; }
  html.fcm-on #sendBtn { width: 46px !important; height: 46px !important; margin-left: 6px; background: var(--m-accent) !important; color: #f9f4ed !important; font-size: 20px; }
  html.fcm-on #composerDisclaimer { display: none !important; }
  /* Toasts clear a pinned composer (Chat, an open group thread). */
  html.fcm-on body:has(#composerWrap) .toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; }

  /* In-app rename / delete dialog, in the design's dialog shape. */
  html.fcm-on .fc-cmodal { background: rgba(46, 43, 37, .5) !important; backdrop-filter: none; padding: 24px; }
  html.fcm-on .fc-cmodal-card { width: 100% !important; border-radius: 32px !important; padding: 20px !important; background: var(--m-bg) !important; border: 0 !important; }
  html.fcm-on .fc-cmodal-title { font-size: 22px !important; color: var(--m-ink) !important; }
  html.fcm-on .fc-cmodal-msg { font-size: 14px !important; color: var(--m-ink) !important; opacity: .85; }
  html.fcm-on .fc-cmodal-input { min-height: 48px; border-radius: 999px !important; font-size: 16px !important; background: var(--m-sunk) !important; border-color: var(--m-line) !important; }
  html.fcm-on .fc-cmodal-actions { flex-direction: column-reverse; align-items: stretch; gap: 9px !important; }
  html.fcm-on .fc-cmodal-btn { min-height: 46px; font: 400 14px var(--m-head) !important; }
  html.fcm-on .fc-cmodal-cancel { background: transparent !important; border: 1px solid rgba(32, 30, 29, .16) !important; color: var(--m-ink) !important; }
  html.fcm-on .fc-cmodal-ok:not(.danger) { background: var(--m-accent) !important; color: var(--m-bg) !important; }
}

/* ── Group Chat (finchat_groupchat.html) ─────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #groupListCol { background: var(--m-bg) !important; padding: 6px 18px 32px; overflow-y: auto; }
  html.fcm-on #groupListCol > div:first-child { padding: 0 8px 4px !important; font-size: 10.5px !important; letter-spacing: .12em !important; color: var(--m-ink-3) !important; }
  html.fcm-on #groupList { flex: none !important; overflow: visible !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
  html.fcm-on #groupList > * + * { margin-top: 0 !important; }
  html.fcm-on .gc-row {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 8px !important;
    border-radius: 22px !important; background: transparent !important; color: var(--m-ink) !important;
  }
  html.fcm-on .gc-row:active, html.fcm-on .gc-row.is-active { background: var(--m-n200) !important; }
  html.fcm-on .gc-stack { display: flex; flex: none; min-width: 62px; }
  html.fcm-on .gc-stack > * + * { margin-left: -14px; }
  html.fcm-on .gc-row-text { flex: 1; line-height: 1.25; }
  html.fcm-on .gc-row-name { font-size: 15px !important; }
  html.fcm-on .gc-row-last { font-size: 13px !important; opacity: 1 !important; color: var(--m-ink-2); margin-top: 0 !important; }
  html.fcm-on .fcm-gc-help {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px;
    padding: 18px; border-radius: 28px; background: var(--m-sunk);
  }
  html.fcm-on .fcm-gc-help-ic { font-size: 24px; color: var(--m-ink-3); display: flex; }
  html.fcm-on .fcm-gc-help-title { font-weight: 700; font-size: 16px; color: var(--m-ink); }
  html.fcm-on .fcm-gc-help p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--m-ink-5); text-wrap: pretty; }
  html.fcm-on .fcm-gc-help code { font-family: var(--mono); font-size: 12px; }
  html.fcm-on .fcm-gc-help .fcm-btn { min-height: 44px; }

  /* Thread */
  html.fcm-on #gcMain { background: var(--m-bg) !important; }
  html.fcm-on #chatPane > div:first-child {
    padding: 6px 18px 10px !important; gap: 6px !important; border: 0 !important; background: var(--m-bg) !important;
  }
  html.fcm-on #grpBack, html.fcm-on #grpName, html.fcm-on #grpName + button,
  html.fcm-on #chatPane > div:first-child > button[onclick="deleteGroup()"] { display: none !important; }
  html.fcm-on #memberChips { gap: 6px !important; }
  html.fcm-on #memberChips > span {
    padding: 3px 8px 3px 3px !important; gap: 5px !important; border: 0 !important; border-radius: 999px;
    background: var(--m-n200) !important; color: var(--m-ink-5); font: 400 11px/1.45 var(--m-body) !important;
  }
  html.fcm-on #memberChips button { opacity: .6; }
  html.fcm-on #memberChips .material-symbols-outlined, html.fcm-on .gc-time .material-symbols-outlined { font-size: 14px !important; }
  html.fcm-on #chatPane button[onclick="openTaskModal()"] .material-symbols-outlined { font-size: 15px !important; }
  html.fcm-on #grpInput:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.fcm-on #grpSendBtn .material-symbols-outlined { display: none; }
  html.fcm-on #grpSendBtn .fcm-ic { font-size: 20px; }
  html.fcm-on #chatPane button[onclick="openAddAgent()"] {
    width: 32px !important; height: 32px !important; border: 1px dashed var(--m-line-2) !important;
    background: none !important; color: var(--m-ink-2);
  }
  html.fcm-on #chatPane button[onclick="openTaskModal()"] {
    min-height: 36px; padding: 0 12px !important; border-radius: 999px !important;
    border: 1px solid rgba(32, 30, 29, .16) !important; background: transparent !important; color: var(--m-ink) !important;
    font: 400 12.5px var(--m-head) !important;
  }
  html.fcm-on #grpMessages { padding: 6px 18px 16px !important; display: flex; flex-direction: column; gap: 16px; }
  html.fcm-on #grpMessages > * + * { margin-top: 0 !important; }
  html.fcm-on .gc-msg.gc-user > :first-child, html.fcm-on .gc-msg.gc-user .gc-name { display: none; }
  html.fcm-on .gc-msg.gc-user .gc-col { max-width: 85% !important; }
  html.fcm-on .gc-msg.gc-user .gc-bubble {
    background: var(--m-sunk) !important; color: var(--m-ink) !important; border: 0 !important;
    padding: 11px 16px !important; border-radius: 22px 22px 6px 22px !important; font-size: 15px !important; line-height: 1.45 !important;
  }
  html.fcm-on .gc-msg.gc-bot { gap: 10px !important; max-width: 92%; }
  html.fcm-on .gc-msg.gc-bot > :first-child { width: 30px !important; height: 30px !important; border: 0 !important; }
  html.fcm-on .gc-msg.gc-bot .gc-col { max-width: 100% !important; display: flex; flex-direction: column; gap: 3px; }
  html.fcm-on .gc-msg.gc-bot .gc-name { font-size: 12.5px !important; color: var(--m-accent-700) !important; margin: 0 !important; }
  html.fcm-on .gc-msg.gc-bot .gc-bubble {
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
    padding: 10px 14px !important; border-radius: 6px 22px 22px 22px !important; font-size: 14.5px !important; line-height: 1.45 !important;
  }
  html.fcm-on .gc-time { font: 400 11px var(--m-body) !important; color: var(--m-ink-3) !important; }
  html.fcm-on #grpTyping { padding: 0 18px 6px !important; font-size: 12px !important; color: var(--m-ink-3) !important; }
  html.fcm-on #gcComposer { padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  html.fcm-on #gcComposer > div:first-child {
    align-items: flex-end; gap: 6px !important; padding: 5px 5px 5px 16px !important;
    border-radius: 26px !important; background: var(--m-card) !important; border: 1px solid var(--m-line) !important; box-shadow: var(--m-shadow-md);
  }
  html.fcm-on #grpInput { font-size: 16px !important; line-height: 1.4 !important; padding: 11px 0 !important; max-height: 110px; color: var(--m-ink); }
  html.fcm-on #grpSendBtn { width: 44px !important; height: 44px !important; background: var(--m-accent) !important; }
  html.fcm-on #gcComposer > div:last-child { font-size: 11px !important; color: var(--m-ink-3) !important; padding: 0 10px !important; margin-top: 6px !important; }
  html.fcm-on body.gc-thread .toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; }

  /* New-group and assign-task dialogs rise as sheets. */
  html.fcm-on #createModal, html.fcm-on #taskModal { align-items: flex-end !important; padding: 0 !important; background: rgba(46, 43, 37, .45) !important; }
  html.fcm-on #createModal > div, html.fcm-on #taskModal > div {
    max-width: none !important; border-radius: 34px 34px 0 0 !important; border: 0 !important;
    background: var(--m-bg) !important; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.fcm-on #createModal .fc-h2, html.fcm-on #taskModal .fc-h2 { font-size: 24px; }
  html.fcm-on #newGrpName, html.fcm-on #taskAgent, html.fcm-on #taskGoal {
    min-height: 48px; border-radius: 20px !important; font-size: 16px !important; background: var(--m-card) !important;
  }
  html.fcm-on #agentPicker { max-height: 40vh !important; }
  html.fcm-on #agentPicker label { min-height: 52px; border-radius: 22px !important; background: var(--m-card) !important; }
  html.fcm-on #createGrpBtn, html.fcm-on #taskModal button[onclick="submitTask()"] {
    min-height: 46px; background: var(--m-accent) !important; font: 400 14px var(--m-head) !important;
  }
}

/* ── Reports (finchat_reports.html) ──────────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #reportsMain > div { padding: 6px 18px 32px !important; }
  /* The bar carries the title; the intro line stays. */
  html.fcm-on #reportsMain > div > div:first-child { margin-bottom: 18px !important; }
  html.fcm-on #reportsMain > div > div:first-child .text-\[13px\], html.fcm-on #reportsMain .fc-h1 { display: none !important; }
  html.fcm-on #reportsMain .fc-sub { font-size: 14px; color: var(--m-ink-2); margin: 0 !important; }
  html.fcm-on #reportsMain .card {
    padding: 18px !important; border-radius: 32px !important; background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
  }
  html.fcm-on #reportsMain .card:first-of-type { margin-bottom: 18px !important; }
  html.fcm-on #reportsMain .font-bold.text-sm { font-size: 15px !important; color: var(--m-ink); }
  html.fcm-on #reportsMain .material-symbols-outlined[style*="--accent"] { color: var(--m-accent-700) !important; }
  html.fcm-on #reportsMain .card:first-of-type > div:last-child { gap: 8px !important; }
  html.fcm-on #kindPicker {
    flex-wrap: nowrap !important; width: calc(100% + 36px); margin: 0 -18px; padding: 0 18px;
    overflow-x: auto; scrollbar-width: none;
  }
  html.fcm-on #kindPicker::-webkit-scrollbar { display: none; }
  html.fcm-on .kind-tab {
    flex: none; min-height: 40px; padding: 0 14px !important; white-space: nowrap;
    border: 1px solid var(--m-line) !important; background: var(--m-card) !important; color: var(--m-ink) !important;
    font: 600 13px var(--m-body) !important;
  }
  html.fcm-on .kind-tab .material-symbols-outlined { display: none; }
  html.fcm-on .kind-tab.active { background: var(--m-inv) !important; border-color: var(--m-inv) !important; color: var(--m-on-inv) !important; }
  html.fcm-on #daysSel, html.fcm-on #genBtn { flex: 1; min-height: 46px; justify-content: center; border-radius: 999px !important; font: 400 14px var(--m-head) !important; }
  html.fcm-on #daysSel { padding: 0 16px !important; border: 1px solid rgba(32, 30, 29, .16) !important; background-color: transparent !important; color: var(--m-ink); text-align: center; }
  html.fcm-on #genBtn { background: var(--m-accent) !important; color: var(--m-bg) !important; }
  html.fcm-on #reportsMain > div > .mb-2 { margin-bottom: 10px !important; }
  html.fcm-on #list { gap: 10px !important; }
  html.fcm-on #list .card > div:first-child { margin-bottom: 14px !important; align-items: baseline !important; }
  html.fcm-on #list .card > div:first-child > .font-bold { font-size: 16px; }
  html.fcm-on #list .card > div:first-child > .text-xs { font-size: 11.5px; color: var(--m-ink-3) !important; }
  html.fcm-on #reportsMain .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  html.fcm-on #reportsMain .stat { min-width: 0; padding: 12px 10px; border: 0; border-radius: 18px; background: var(--m-sunk); }
  html.fcm-on #reportsMain .stat-n { font-size: 24px; line-height: 1.1; }
  html.fcm-on #reportsMain .stat-l { font-size: 11.5px; line-height: 1.25; font-weight: 400; color: var(--m-ink-2); margin-top: 2px; }
  html.fcm-on #reportsMain .bars-title { font-size: 12.5px; color: var(--m-ink-2); }
  html.fcm-on #reportsMain .bars { gap: 8px; }
  html.fcm-on #reportsMain .bar-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; }
  html.fcm-on #reportsMain .bar-label { width: auto; font-size: 13px; }
  html.fcm-on #reportsMain .bar-track { background: var(--m-sunk); }
  html.fcm-on #reportsMain .bar-fill { background: var(--m-ink-5); }
  html.fcm-on #reportsMain .bar-val { min-width: 0; font-size: 13px; font-weight: 400; color: var(--m-ink-2); }
  html.fcm-on #reportsMain .rep-details { border-top: 0; padding-top: 0; margin-top: 8px; }
  html.fcm-on #reportsMain .rep-details > summary { min-height: 40px; font-size: 13.5px; color: var(--m-ink); }
  html.fcm-on #reportsMain .text-\[11px\] { font-size: 11.5px; color: var(--m-ink-3) !important; }
}

/* ── Knowledge (finchat_knowledge.html) ──────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on #knowledgeMain > div { padding: 6px 18px 32px !important; }
  html.fcm-on #knowledgeMain > div > div:first-child { flex-direction: column; align-items: stretch !important; gap: 20px !important; margin-bottom: 20px !important; }
  html.fcm-on #knowledgeMain > div > div:first-child .text-\[13px\] { display: none !important; }
  html.fcm-on #knowledgeMain .fc-h1 { font-size: 26px; line-height: 1.1; margin: 0 !important; }
  html.fcm-on #knowledgeMain .fc-sub { font-size: 13.5px; color: var(--m-ink-2); margin-top: 6px !important; }
  html.fcm-on #knowledgeMain > div > div:first-child > div:last-child { gap: 8px !important; }
  html.fcm-on #knowledgeMain .kbtn {
    flex: 1; justify-content: center; min-height: 44px; padding: 0 12px !important; white-space: nowrap;
    border-radius: 999px; font: 400 14px var(--m-head) !important;
    background: var(--m-accent) !important; color: var(--m-bg) !important;
  }
  html.fcm-on #knowledgeMain .kbtn.ghost { background: transparent !important; border: 1px solid rgba(32, 30, 29, .16) !important; color: var(--m-ink) !important; }
  html.fcm-on #knowledgeMain .kbtn .material-symbols-outlined { font-size: 15px !important; }
  html.fcm-on #knowledgeMain .card {
    padding: 18px !important; border-radius: 32px !important; background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
  }
  html.fcm-on #knowledgeMain .material-symbols-outlined[style*="--accent"] { color: var(--m-ink) !important; }
  html.fcm-on #vitals { gap: 10px !important; margin-bottom: 20px !important; }
  html.fcm-on #vitals .card { padding: 14px !important; border-radius: 22px !important; }
  html.fcm-on #vitals .text-xs.font-semibold { font-size: 12.5px; color: var(--m-ink) !important; white-space: nowrap; gap: 6px !important; }
  html.fcm-on #vitals .material-symbols-outlined { font-size: 14px !important; }
  html.fcm-on #vitals .stat-num { font-size: 28px; line-height: 1.2; margin-top: 0 !important; }
  html.fcm-on #vitals .text-xs.mt-1 { font-size: 12px; color: var(--m-ink-2) !important; margin-top: 0 !important; }
  html.fcm-on #knowledgeMain .font-bold.text-sm { font-size: 15px !important; color: var(--m-ink); }
  html.fcm-on #growthLabel { font-size: 11.5px !important; color: var(--m-ink-3) !important; }
  html.fcm-on #growthFilter, html.fcm-on #patternFilter {
    flex-wrap: nowrap !important; gap: 6px !important; margin: 0 -18px 12px !important; padding: 0 18px;
    overflow-x: auto; scrollbar-width: none;
  }
  html.fcm-on #growthFilter::-webkit-scrollbar, html.fcm-on #patternFilter::-webkit-scrollbar { display: none; }
  html.fcm-on #knowledgeMain .fchip {
    flex: none; min-height: 36px; padding: 0 12px; white-space: nowrap;
    border: 1px solid var(--m-line); background: var(--m-card); color: var(--m-ink); font: 700 12.5px var(--m-body);
  }
  html.fcm-on #knowledgeMain .fchip[aria-pressed="true"] { background: var(--m-inv); border-color: var(--m-inv); color: var(--m-on-inv); }
  html.fcm-on #knowledgeMain .fchip .n { font-weight: 400; opacity: .75; }
  html.fcm-on #growthChart path[fill] { fill: var(--m-sunk); opacity: 1; }
  html.fcm-on #growthChart path[stroke] { stroke: var(--m-ink-5); }
  html.fcm-on #knowledgeMain > div > .mb-2 { margin-bottom: 10px !important; }
  html.fcm-on #stores { gap: 10px !important; margin-bottom: 20px !important; }
  html.fcm-on #stores .card { padding: 16px !important; border-radius: 24px !important; gap: 6px; }
  html.fcm-on #stores .material-symbols-outlined { font-size: 20px !important; color: var(--m-ink) !important; }
  html.fcm-on #knowledgeMain .chip { font-size: 11px; letter-spacing: .02em; font-weight: 400; padding: 3px 10px; }
  html.fcm-on #knowledgeMain .chip-live { background: var(--m-sage-100); color: var(--m-sage-800); }
  html.fcm-on #stores .stat-num { font-size: 26px; margin-top: 0 !important; }
  html.fcm-on #stores .stat-num span { font-family: var(--m-head); font-size: 16px; font-weight: 400; color: var(--m-ink-2) !important; }
  html.fcm-on #stores .font-bold.text-sm { font-size: 14.5px !important; margin-top: 0 !important; }
  html.fcm-on #stores .text-xs { font-size: 13px; color: var(--m-ink-2) !important; margin-top: 0 !important; }
  html.fcm-on #stores .text-\[11px\] { font-size: 12px; gap: 4px 12px !important; padding-top: 8px; margin-top: 4px !important; border-top-color: var(--m-n200) !important; }
  html.fcm-on #knowledgeMain .grid.xl\:grid-cols-2 { gap: 20px !important; }
  html.fcm-on #knowledgeMain .card > p.text-xs { font-size: 12px; color: var(--m-ink-2) !important; margin-top: 2px; }
  html.fcm-on #inference .stat-num { font-size: 22px; }
  html.fcm-on #inference .text-xs, html.fcm-on #agents .text-sm { font-size: 13px; }
  html.fcm-on #knowledgeMain [style*="height:7px"] { background: var(--m-sunk) !important; }
  html.fcm-on #knowledgeMain [style*="height:7px"] > div { background: var(--m-ink-5) !important; }
  html.fcm-on #inference .font-semibold ~ div [style*="height:7px"] > div { background: var(--m-accent) !important; }
  html.fcm-on #agents .agent-row { margin: 0 0 12px !important; padding: 0 !important; }
  html.fcm-on #agents .agent-row .font-semibold { font-weight: 700; font-size: 14px; }
  html.fcm-on #agents .agent-row .text-\[11px\] { font-size: 12px; color: var(--m-ink-2) !important; }
  html.fcm-on #knowledgeMain .abadge { background: var(--m-n200); color: var(--m-ink-5); font-weight: 400; font-size: 11px; letter-spacing: .02em; }
}

/* ── Settings (finchat_settings.html) ────────────────────────────────────── */
@media (max-width: 767px) {
  /* The bar has the title and bell; the header keeps only unsaved changes. */
  html.fcm-on .set-head { padding: 0 18px !important; border: 0 !important; gap: 0 !important; }
  html.fcm-on .set-head > #navToggle, html.fcm-on .set-head > div:nth-child(2), html.fcm-on .set-head .relative { display: none !important; }
  html.fcm-on .set-savebar { margin: 0; width: 100%; }
  html.fcm-on #dirtyState { width: 100%; gap: 8px !important; padding: 4px 0 10px; }
  html.fcm-on #dirtyState .sb { flex: 1; }
  html.fcm-on .set-root { background: var(--m-bg); }
  html.fcm-on .set-nav {
    padding: 6px 18px 0 !important; gap: 8px !important; border: 0 !important;
    scrollbar-width: none; flex: none;
  }
  html.fcm-on .set-nav::-webkit-scrollbar { display: none; }
  html.fcm-on .set-nav > div { gap: 8px !important; }
  html.fcm-on .set-nav-btn {
    min-height: 40px; padding: 0 16px; border: 1px solid var(--m-line); background: var(--m-card);
    color: var(--m-ink); font: 600 13.5px var(--m-body);
  }
  html.fcm-on .set-nav-btn.active { background: var(--m-inv); border-color: var(--m-inv); color: var(--m-on-inv); }
  html.fcm-on .set-nav-btn .dot { display: none; }
  html.fcm-on .set-content { padding: 18px 18px 32px !important; }
  html.fcm-on .set-inner { gap: 18px; }
  html.fcm-on .set-sec-head .kicker { font: 700 10.5px var(--m-body); letter-spacing: .12em; color: var(--m-accent-700); margin-bottom: 0; }
  html.fcm-on .set-sec-head h2 { font-size: 22px; line-height: 1.15; margin: 0; }
  html.fcm-on .set-sec-head p { font-size: 13.5px; line-height: 1.5; color: var(--m-ink-2); margin-top: 6px; }
  /* Notifications: "Send test" drops to the end, full width. */
  html.fcm-on .set-title-row { display: contents; }
  html.fcm-on #testBtn { order: 10; min-height: 46px; width: 100%; }
  html.fcm-on .set-card { border-radius: 28px; background: var(--m-card); border-color: var(--m-line); }
  html.fcm-on #channelsCard { padding: 2px 16px; }
  html.fcm-on #channelsCard .set-row { padding: 14px 0; border-bottom-color: var(--m-n200); }
  html.fcm-on .set-row .rt { font-size: 14.5px; font-weight: 700; }
  html.fcm-on .set-row .rd { font-size: 12.5px; color: var(--m-ink-2); }
  html.fcm-on .set-root .tgl { width: 52px; height: 32px; background: var(--m-line); }
  html.fcm-on .set-root .tgl::after { top: 3px; left: 3px; width: 26px; height: 26px; box-shadow: var(--m-shadow-sm); }
  html.fcm-on .set-root .tgl.on { background: var(--m-sage-500); }
  html.fcm-on .set-root .tgl.on::after { left: 23px; }
  html.fcm-on .set-root .tgl.locked { opacity: .7; }
  html.fcm-on .chan-input { max-width: none; min-height: 46px; font-size: 16px; background: var(--m-bg); border-color: var(--m-line); }
  html.fcm-on #eventChips { gap: 8px !important; }
  html.fcm-on .evchip { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 13px; font-weight: 600; border-color: var(--m-line); color: var(--m-ink-2); }
  html.fcm-on .evchip.on { color: var(--m-sage-800); background: var(--m-sage-100); border-color: var(--m-sage-400); }
  html.fcm-on .set-root .sb { min-height: 46px; padding: 0 18px; font: 400 14px var(--m-head); }
  html.fcm-on .set-root .sb-primary { background: var(--m-accent); color: var(--m-bg); }
  html.fcm-on .set-root .sb-secondary { border-color: rgba(32, 30, 29, .16); color: var(--m-ink); }
  html.fcm-on .set-root .sb-ghost, html.fcm-on .set-root .sb-danger { color: var(--m-accent-800); }
  /* Appearance: each choice is a full-width segmented pill under its label. */
  html.fcm-on .set-row:has(> .set-seg) { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  html.fcm-on .set-seg { display: flex; padding: 4px; gap: 4px; border: 0; background: var(--m-sunk); }
  html.fcm-on .set-seg button { flex: 1; min-height: 38px; border-radius: 999px; font: 600 13.5px var(--m-body); color: var(--m-ink); }
  html.fcm-on .set-seg button + button { border-left: 0; }
  html.fcm-on .set-seg button.on { background: var(--m-card); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }
  html.fcm-on .set-root .stag-on { background: var(--m-sage-100); color: var(--m-sage-800); }
  html.fcm-on .set-stat { border-radius: 22px; background: var(--m-card); border-color: var(--m-line); }
  html.fcm-on .set-toast { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--m-dark); color: #f9f4ed; font: 600 14px var(--m-body); padding: 12px 18px; }
  html.fcm-on .dlg { border-radius: 32px; padding: 20px; background: var(--m-bg); }
  html.fcm-on .dlg-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ── Planning (finchat_planning.html) ────────────────────────────────────── */
@media (max-width: 767px) {
  html.fcm-on .pl-main { background: var(--m-bg) !important; }
  html.fcm-on .pl-wrap { padding: 6px 18px 32px; }
  html.fcm-on .pl-eyebrow { display: none; }
  html.fcm-on .pl-h1 { font: 400 28px/1.1 var(--m-head); letter-spacing: -.015em; margin: 0; color: var(--m-ink); }
  html.fcm-on .pl-sub { font-size: 13.5px; line-height: 1.5; color: var(--m-ink-2); margin-top: 8px; text-wrap: pretty; }
  html.fcm-on .pl-choices { gap: 14px; margin-top: 14px; }
  /* The design's choice cards are text-first; the preview drawings go. */
  html.fcm-on .pl-art { display: none; }
  html.fcm-on .pl-choice { border-radius: 32px; border-color: var(--m-line); background: var(--m-card); box-shadow: none; }
  html.fcm-on .pl-choice:active { background: var(--m-accent-100); }
  html.fcm-on .pl-choice-body { padding: 18px; gap: 10px; }
  html.fcm-on .pl-choice h2 { font: 400 20px/1.15 var(--m-head); gap: 12px; color: var(--m-ink); }
  html.fcm-on .pl-choice h2 .material-symbols-outlined {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex: none;
    background: var(--m-accent-100); color: var(--m-accent-700) !important;
  }
  html.fcm-on #plGoBoards h2 .material-symbols-outlined { background: var(--m-sage-100); color: var(--m-sage-800) !important; }
  html.fcm-on #plGoQueues h2 .material-symbols-outlined { background: var(--m-sunk); color: var(--m-ink-5) !important; }
  html.fcm-on .pl-choice p { font-size: 13.5px; line-height: 1.45; color: var(--m-ink-5); }
  html.fcm-on .pl-points { margin: 0; gap: 6px; }
  html.fcm-on .pl-points li { font-size: 12.5px; line-height: 1.4; color: var(--m-ink-2); gap: 8px; }
  html.fcm-on .pl-points li .material-symbols-outlined { font-size: 15px; color: var(--m-accent) !important; margin-top: 1px; }
  html.fcm-on .pl-cta { padding-top: 2px; }
  html.fcm-on .pl-cta b { font-size: 13.5px; color: var(--m-accent-700) !important; }
  html.fcm-on .pl-cta .material-symbols-outlined { font-size: 16px; }
  html.fcm-on .pl-card { border-radius: 32px; padding: 18px; border-color: var(--m-line); background: var(--m-card); box-shadow: none; }
  html.fcm-on .pl-card h3 { font: 400 18px/1.15 var(--m-head); color: var(--m-ink); }
  html.fcm-on .pl-card h3 .material-symbols-outlined { color: var(--m-accent-700) !important; }
  html.fcm-on .pl-seg { width: 100%; border-radius: 999px; padding: 4px; gap: 4px; border: 0; background: var(--m-sunk); }
  html.fcm-on .pl-seg button { flex: 1; justify-content: center; min-height: 38px; border-radius: 999px; font-size: 12.5px; color: var(--m-ink); }
  html.fcm-on .pl-seg button .material-symbols-outlined { display: none; }
  html.fcm-on .pl-seg button.on { background: var(--m-card); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }
  html.fcm-on #plAiText { border-radius: 20px; font-size: 16px; background: var(--m-bg); }
  html.fcm-on #plAiBuild { min-height: 46px; border-radius: 999px; justify-content: center; background: var(--m-accent); font: 400 14px var(--m-head); }
  html.fcm-on .pl-row { border-radius: 22px; border-color: var(--m-line); background: var(--m-card); padding: 10px 10px 10px 12px; }
  html.fcm-on .pl-row-ico { border-radius: 50%; }
  html.fcm-on .pl-toast { border-radius: 999px; background: var(--m-dark); color: #f9f4ed; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Neural Map (finchat_neuralmap.html) ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Its header holds working tools, so it stays: search + New node in one
     row, everything else behind the bar's "⋯" (see the page's script). */
  /* header#… to match the specificity of the hide rule above it (later wins). */
  html.fcm-bar-on header#nmHeader {
    display: flex !important; flex-wrap: nowrap; gap: 8px !important; min-height: 0 !important;
    padding: 6px 18px 10px !important; border: 0 !important; background: var(--m-bg) !important;
  }
  html.fcm-on #nmHeader > #navToggle, html.fcm-on #nmHeader > h1, html.fcm-on #mapStats, html.fcm-on #nmHeader > .w-px,
  html.fcm-on #nmHeader .nm-grow, html.fcm-on #nmHeader > div:has(> #notifBell), html.fcm-on #topbarUserIcon,
  html.fcm-on #nmTools > :not(#addNodeBtn) { display: none !important; }
  html.fcm-on #nmHeader > div:has(> #searchInput) { max-width: none !important; flex: 1; min-width: 0 !important; }
  /* The page's own phone rule gives the tools a full-width row; only New node is left in it. */
  html.fcm-on #nmTools { display: contents !important; }
  html.fcm-on #searchInput { min-height: 44px; font-size: 16px !important; padding-left: 40px !important; border-radius: 999px; }
  html.fcm-on #addNodeBtn { flex: none; width: auto !important; height: 44px !important; white-space: nowrap; padding: 0 16px !important; background: var(--m-accent) !important; color: var(--m-bg) !important; border: 0; font: 400 14px var(--m-head) !important; }
  html.fcm-on #addNodeBtn .nm-tlabel { display: inline !important; }
  html.fcm-on #mapTabs { padding: 0 18px 10px !important; border: 0 !important; gap: 8px !important; background: var(--m-bg) !important; scrollbar-width: none; }
  html.fcm-on #mapTabs::-webkit-scrollbar { display: none; }
}

/* A page's own bell is redundant under the bar (its badge moved there). */
@media (max-width: 767px) {
  html.fcm-bar-on #notifBell:not([data-fcm-bell]) { display: none !important; }
}