/* ── Theme tokens ──────────────────────────────────────────────────────────
       Both modes take the studio kit's MINT brand pair (tokens.brand.css in
       nexus-core/src/studio): deep emerald on light, pale mint on dark — each
       accent carries its own --accent-ink because white text fails on the pale
       dark-mode mint. Glass tokens are the kit's recipe verbatim: dark glass is
       a lit edge over a 5% fill; light glass is a dense white frost (no
       luminance headroom on a cream page). The chrome (header/dock/drawer) is
       now translucent, so the sidebar-* text tokens follow the page's own ink,
       not the retired navy. JS resolves System / Light / Dark and stamps
       data-theme on <html> — every value lives in exactly two blocks. */
    :root, :root[data-theme="light"] {
      --bg:              #F2EDE5;
      --surface:         #FFFFFF;
      --border:          #E0D9CF;
      --sidebar-bg:      #F2EDE5;
      --sidebar-border:  rgba(9,9,11,0.1);
      --sidebar-entry:   rgba(9,9,11,0.04);
      --sidebar-heading: #1A2535;
      --sidebar-sub:     #5C6E82;
      --sidebar-text:    rgba(26,37,53,0.65);
      --user-bg:         #0F4C3B;
      --user-bg-hover:   #0B3B2E;
      --user-text:       #FFFFFF;
      --ai-bg:           #FFFFFF;
      --ai-text:         #1A2535;
      --text-primary:    #1A2535;
      --text-secondary:  #5C6E82;
      --text-muted:      #9BAAB8;
      --accent:          #047857;
      --accent-ink:      #FFFFFF;
      --accent-soft:     rgba(4,120,87,0.08);
      --accent-border:   rgba(4,120,87,0.35);
      --danger:          #C0392B;
      --warn-bg:         #FFF8E1;
      --warn-border:     #F6C90E;
      --warn-text:       #7A5A00;
      --green:           #16a34a;
      --amber-text:      #b45309;
      --purple-text:     #7c3aed;
      --input-focus:     rgba(4,120,87,0.14);
      --tab-active:      #FFFFFF;
      --tab-inactive:    rgba(255,255,255,0.35);
      --bg-primary:      #FFFFFF;
      --surface-hover:   rgba(0,0,0,0.04);
      --overlay:         rgba(26,37,53,0.45);
      --shadow-soft:     rgba(26,37,53,0.05);
      --glass-fill:      rgba(255,255,255,0.66);
      --glass-edge:      rgba(255,255,255,0.85);
      --glass-sheen:     rgba(255,255,255,0.95);
      --glass-blur:      18px;
      --glass-chrome:    rgba(252,248,241,0.72);
      --shadow-card:     0 1px 2px rgba(9,9,11,0.04), 0 10px 30px -22px rgba(9,9,11,0.3);
      --bottom-nav-h:    60px;
      --safe-bottom:     env(safe-area-inset-bottom, 0px);
    }
    :root[data-theme="dark"] {
      --bg:              #201F1D;
      --surface:         #2B2A27;
      --border:          #3B3936;
      --sidebar-bg:      #262522;
      --sidebar-border:  rgba(255,255,255,0.07);
      --sidebar-entry:   rgba(255,255,255,0.05);
      --sidebar-heading: #EDEAE4;
      --sidebar-sub:     #A8A69F;
      --sidebar-text:    rgba(200,196,188,0.85);
      --user-bg:         #1F4A3A;
      --user-bg-hover:   #285D49;
      --user-text:       #ECFDF5;
      --ai-bg:           #2B2A27;
      --ai-text:         #EDEAE4;
      --text-primary:    #EDEAE4;
      --text-secondary:  #A8A69F;
      --text-muted:      #75726B;
      --accent:          #6EE7B7;
      --accent-ink:      #04160F;
      --accent-soft:     rgba(110,231,183,0.13);
      --accent-border:   rgba(110,231,183,0.45);
      --danger:          #E06A5A;
      --warn-bg:         #383021;
      --warn-border:     #8A6D1F;
      --warn-text:       #E8C877;
      --green:           #4ADE80;
      --amber-text:      #F0B45C;
      --purple-text:     #BBA0F5;
      --input-focus:     rgba(110,231,183,0.16);
      --tab-active:      #EDEAE4;
      --tab-inactive:    #75726B;
      --bg-primary:      #2B2A27;
      --surface-hover:   rgba(255,255,255,0.06);
      --overlay:         rgba(0,0,0,0.6);
      --shadow-soft:     rgba(0,0,0,0.3);
      --glass-fill:      rgba(255,255,255,0.05);
      --glass-edge:      rgba(255,255,255,0.11);
      --glass-sheen:     rgba(255,255,255,0.14);
      --glass-blur:      16px;
      --glass-chrome:    rgba(28,27,25,0.62);
      --shadow-card:     0 0 0 0 transparent;
      --bottom-nav-h:    60px;
      --safe-bottom:     env(safe-area-inset-bottom, 0px);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: var(--bg);
      height: 100dvh;
      display: flex;
      flex-direction: column;
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
    }

    /* ── Header ── */
    header {
      background: var(--sidebar-bg);
      padding: 12px 20px;
      padding-top: max(12px, env(safe-area-inset-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 12px;
    }
    .header-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--sidebar-heading);
      letter-spacing: -0.015em;
    }
    .header-subtitle {
      font-size: 0.65rem;
      color: var(--sidebar-sub);
      font-weight: 300;
      margin-top: 1px;
    }
    .header-actions { display: flex; gap: 8px; align-items: center; }
    .btn-sm {
      font-size: 0.7rem;
      color: var(--sidebar-sub);
      border: 1px solid rgba(255,255,255,0.12);
      background: transparent;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: color 0.15s, border-color 0.15s;
    }
    .btn-sm:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
    .btn-sm.danger:hover { color: #e87; border-color: rgba(220,80,80,0.4); }

    /* ── Main layout ── */
    .app-body {
      flex: 1;
      display: flex;
      min-height: 0;
      position: relative;
    }

    /* ── Tab panels ── */
    .tab-panel {
      display: none;
      flex: 1;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .tab-panel.active { display: flex; }

    /* ── Bottom navigation ── */
    .bottom-nav {
      height: calc(var(--bottom-nav-h) + var(--safe-bottom));
      padding-bottom: var(--safe-bottom);
      background: var(--sidebar-bg);
      border-top: 1px solid var(--sidebar-border);
      display: flex;
      flex-shrink: 0;
    }
    .nav-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 6px 4px;
      color: var(--tab-inactive);
      transition: color 0.15s;
      font-family: 'DM Sans', sans-serif;
    }
    .nav-btn.active { color: var(--tab-active); }
    .nav-btn:hover { color: rgba(255,255,255,0.7); }
    .nav-icon { font-size: 1.1rem; line-height: 1; }
    .nav-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
    .nav-btn.active .nav-icon { filter: drop-shadow(0 0 6px rgba(75,139,204,0.7)); }

    /* ──────────────────────────────────────────
       CHAT TAB
    ────────────────────────────────────────── */
    #chat-area {
      flex: 1;
      overflow-y: auto;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      scroll-behavior: smooth;
    }
    #chat-area::-webkit-scrollbar { width: 4px; }
    #chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .msg-row { display: flex; }
    .msg-row.user { justify-content: flex-end; }
    .msg-row.ai   { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
    .bubble {
      max-width: 88%;
      padding: 10px 14px;
      font-size: 0.875rem;
      line-height: 1.65;
      white-space: pre-wrap;
    }
    .bubble.user {
      background: var(--user-bg);
      color: var(--user-text);
      border-radius: 16px 16px 4px 16px;
      font-weight: 300;
    }
    .bubble.ai {
      background: var(--ai-bg);
      color: var(--ai-text);
      border-radius: 16px 16px 16px 4px;
      border: 1px solid var(--border);
      box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    }
    .bubble.ai.typing::after {
      content: '▋';
      animation: blink 0.7s step-start infinite;
      color: var(--text-muted);
      font-size: 0.8em;
    }
    @keyframes blink { 50% { opacity: 0; } }

    /* #151: live "what I'm doing" line inside the typing bubble, and the
       folded "What I did" note above the finished answer. */
    .act-line {
      font-size: 0.78rem; color: var(--text-muted); font-style: italic;
      animation: actpulse 1.4s ease-in-out infinite;
    }
    @keyframes actpulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
    .act-log {
      max-width: 88%; margin: 2px 0 4px; padding: 4px 10px;
      font-size: 0.74rem; color: var(--text-muted);
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); border-radius: 10px;
    }
    .act-log summary { cursor: pointer; user-select: none; }
    .act-log div { margin: 3px 0 3px 4px; }

    /* v0.7.0: markdown inside AI bubbles */
    .bubble.ai p { margin: 0 0 .55em; }
    .bubble.ai p:last-child { margin-bottom: 0; }
    .bubble.ai h3, .bubble.ai h4 { margin: .6em 0 .3em; font-size: .95em; }
    .bubble.ai ul, .bubble.ai ol { margin: .2em 0 .55em; padding-left: 1.2em; }
    .bubble.ai li { margin: .15em 0; }
    .bubble.ai code {
      font-size: .85em; padding: 1px 5px; border-radius: 5px;
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bubble.ai pre.md-code {
      font-size: .8em; padding: 8px 10px; border-radius: 8px; overflow-x: auto;
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); margin: .4em 0;
    }
    .bubble.ai a { color: var(--text-primary); }

    /* #152: source chips under an answer + the library rows */
    .source-row {
      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
      margin-top: 6px; max-width: 88%;
    }
    .source-lbl { font-size: .78rem; }
    .source-chip {
      font-size: .72rem; padding: 3px 10px; border-radius: 999px;
      border: none; background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      color: var(--text-primary); cursor: pointer;
      /* Ingest manifest titles carry a long descriptive tail — one line,
         ellipsized, act name first; the full title lives in the tooltip. */
      max-width: min(16rem, 60vw); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .source-chip:disabled { opacity: .65; cursor: default; }
    .lib-row {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: .6rem; width: 100%; text-align: left; padding: 9px 12px;
      margin-bottom: 6px; border-radius: 10px; cursor: pointer;
      border: none; background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      color: inherit; font-size: .82rem;
    }
    .lib-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
    .lib-row-meta { color: var(--text-muted); font-size: .7rem; white-space: nowrap; }

    /* v0.8.23: the Library index — shelves with counts and jump links */
    .lib-index { display: flex; flex-wrap: wrap; gap: 6px; margin: .2rem 0 1rem; outline: none; }
    .lib-index-topics { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-left: .6rem;
      border-left: 2px solid var(--accent-border); }
    .lib-index-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px;
      padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text-primary); font-size: .78rem; cursor: pointer; }
    .lib-index-chip:hover, .lib-index-chip:focus-visible { border-color: var(--accent-border); background: var(--accent-soft); }
    .lib-index-topic { font-size: .74rem; }
    .lib-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px;
      background: var(--accent-soft); color: var(--text-secondary); font-size: .7rem; text-align: center; }
    .lib-shelf { margin-bottom: 1.2rem; }
    .lib-shelf-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem;
      font-size: .86rem; color: var(--text-primary); margin: 1rem 0 .5rem; scroll-margin-top: 8px; outline: none; }
    .lib-topic-head { font-size: .78rem; color: var(--text-secondary); margin: .8rem 0 .4rem;
      scroll-margin-top: 8px; outline: none; }
    .lib-back { border: none; background: none; color: var(--text-muted); font-size: .72rem; cursor: pointer; padding: 4px 6px; }
    .lib-act-secs { margin: -2px 0 8px 12px; font-size: .78rem; }
    .lib-act-secs summary { cursor: pointer; color: var(--text-secondary); padding: 4px 0; min-height: 28px; }
    .lib-act-sec-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto;
      border-left: 2px solid var(--border); padding-left: 8px; margin-top: 4px; }
    .lib-sec { text-align: left; border: none; background: none; color: inherit; font-size: .76rem;
      padding: 6px 4px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
    .lib-sec:hover, .lib-sec:focus-visible { background: var(--surface-hover); }
    .lib-panel-head { font-size: .8rem; color: var(--text-muted); margin: 1rem 0 .4rem; }

    /* v0.7.5: rendered markdown inside the library document viewer */
    .lib-doc-body h3, .lib-doc-body h4 { margin: .9em 0 .35em; color: var(--text-primary, inherit); }
    .lib-doc-body p { margin: 0 0 .6em; }
    .lib-doc-body ul, .lib-doc-body ol { margin: .2em 0 .6em; padding-left: 1.2em; }
    .lib-doc-body a { color: var(--text-primary); }
    .lib-doc-body pre.md-code, .lib-doc-body code {
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); border-radius: 6px; padding: 1px 5px;
    }
    .lib-doc-body pre.md-code { padding: 8px 10px; overflow-x: auto; }

    /* #175: Law library search (the box, the results) and the reader (one
       panel for chips, shelf rows, search hits and the section rail). Every
       colour is a token so both themes and the contrast rules hold. */
    .lib-search {
      display: flex; gap: 6px; padding: 10px 12px 8px; flex-shrink: 0;
      border-bottom: 1px solid var(--border); background: var(--surface);
    }
    .lib-search .form-input { flex: 1; min-width: 0; padding: 8px 10px; }
    .lib-search .btn-sm, .corpus-panel .btn-sm { color: var(--text-secondary); border-color: var(--border); }
    .lib-search .btn-sm:hover, .corpus-panel .btn-sm:hover { color: var(--text-primary); border-color: var(--accent-border); }
    .lib-search .btn-sm:focus-visible, .corpus-panel .btn-sm:focus-visible,
    .lib-hit:focus-visible, .corpus-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .lib-hits { list-style: none; margin: 0; padding: 0; }
    .lib-hit { flex-direction: column; align-items: stretch; gap: .3rem; }
    .lib-hit-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
    .lib-hit-title { font-weight: 600; color: var(--text-primary); }
    .lib-hit-snip { font-size: .76rem; line-height: 1.45; color: var(--text-secondary); }
    .lib-hit-snip b { color: var(--text-primary); background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); border-radius: 3px; padding: 0 2px; }
    .lib-hit-meta { font-size: .68rem; color: var(--text-muted); }
    .corpus-panel {
      position: fixed; inset: 0; z-index: 310; overflow-y: auto;
      background: var(--bg-primary); padding: 0 1rem 3rem;
    }
    .corpus-sticky {
      position: sticky; top: 0; z-index: 1; background: var(--bg-primary);
      max-width: 640px; margin: 0 auto; padding: 1rem 0 .5rem;
      border-bottom: 1px solid var(--border);
    }
    .corpus-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
    .corpus-title { font-size: 1rem; font-weight: 600; margin: 0; min-width: 0; color: var(--text-primary); }
    .corpus-title:focus { outline: none; }
    .corpus-body { max-width: 640px; margin: .8rem auto 0; }
    .corpus-panel .lib-doc-body { font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
    .corpus-muted { color: var(--text-muted); }
    .corpus-meta { font-size: .72rem; margin-bottom: .8rem; }
    .corpus-hitnav {
      display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
      margin-top: .5rem; font-size: .74rem; color: var(--text-secondary);
    }
    .corpus-hitnav-q { font-weight: 600; color: var(--text-primary); }
    .corpus-hitnav .btn-sm:disabled { opacity: .5; cursor: default; }
    .corpus-rail {
      display: flex; gap: 4px; overflow-x: auto; margin-top: .5rem;
      padding-bottom: 4px; scrollbar-width: thin;
    }
    .corpus-rail-btn {
      flex: none; font-size: .68rem; padding: 3px 9px; border-radius: 999px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text-secondary); cursor: pointer; font-family: inherit;
    }
    .corpus-rail-btn.has-hit { border-color: var(--accent-border); color: var(--text-primary); }
    .corpus-rail-btn.current { background: var(--accent); color: var(--accent-ink); border-color: var(--text-primary); }
    mark.corpus-hit { background: var(--warn-bg); color: var(--warn-text); border-radius: 3px; padding: 0 1px; }
    mark.corpus-hit.current { outline: 2px solid var(--warn-border); }

    /* #123: support-ticket notice delivered in the chat */
    .support-note {
      max-width: 88%; margin: 4px 0 8px; padding: 10px 14px;
      font-size: 0.82rem; line-height: 1.5; border-radius: 12px;
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); border: none;
      color: var(--text-primary, inherit);
    }

    .bubble-meta {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 4px;
      margin-left: 2px;
      flex-wrap: wrap;
    }
    .copy-btn, .speak-btn, .save-card-btn {
      font-size: 0.63rem;
      color: var(--text-muted);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'DM Sans', sans-serif;
      transition: color 0.15s, background 0.15s;
    }
    .copy-btn:hover { color: var(--text-secondary); background: var(--surface-hover); }
    .copy-btn.copied { color: var(--green); }
    .speak-btn:hover, .speak-btn.playing { color: var(--text-primary); background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
    .save-card-btn:hover { color: var(--purple-text); background: rgba(168,85,247,0.07); }
    .rag-badge {
      font-size: 0.6rem;
      color: var(--sidebar-sub);
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      border: 1px solid color-mix(in srgb, var(--accent) 17%, transparent);
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: 500;
    }
    .wa-badge {
      font-size: 0.6rem;
      color: var(--warn-text);
      background: var(--warn-bg);
      border: 1px solid var(--warn-border);
      padding: 1px 7px;
      border-radius: 4px;
      font-weight: 600;
    }
    .bubble.wa {
      border-left: 3px solid #f59e0b;
      padding-left: 10px;
    }

    /* Session doc badge */
    #docBadgeBar { padding: 6px 16px 0; display: none; }
    .doc-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
      color: var(--text-primary);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.72rem;
      font-weight: 500;
    }
    .doc-badge-remove {
      cursor: pointer; opacity: 0.6; font-size: 0.9em;
      background: none; border: none; color: inherit; padding: 0;
    }
    .doc-badge-remove:hover { opacity: 1; }

    /* PII warning banner */
    #piiBanner {
      display: none;
      margin: 6px 16px 0;
      background: var(--warn-bg);
      border: 1px solid var(--warn-border);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.78rem;
      color: var(--warn-text);
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #piiBanner.visible { display: flex; }
    .pii-text { flex: 1; min-width: 180px; }
    .pii-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .pii-btn {
      font-size: 0.72rem;
      padding: 4px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      border: 1px solid;
      transition: background 0.15s;
    }
    .pii-btn.edit   { background: var(--surface); color: var(--warn-text); border-color: var(--warn-border); }
    .pii-btn.send   { background: var(--warn-text); color: #fff; border-color: transparent; }
    .pii-btn.edit:hover { background: var(--warn-bg); }
    .pii-btn.send:hover { opacity: 0.85; }

    /* Input area */
    .input-area {
      padding: 10px 16px 14px;
      background: var(--bg);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .input-shell {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px 10px 16px;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .input-shell:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--input-focus); }
    #userInput {
      flex: 1;
      border: none;
      outline: none;
      resize: none;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      font-weight: 300;
      line-height: 1.55;
      color: var(--text-primary);
      background: transparent;
      max-height: 120px;
      overflow-y: auto;
    }
    #userInput::placeholder { color: var(--text-muted); }
    .input-right { display: flex; gap: 5px; align-items: flex-end; flex-shrink: 0; }
    .btn-upload, .btn-mic {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--text-muted);
      border-radius: 8px;
      padding: 6px 9px;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
      align-self: flex-end;
    }
    .btn-upload:hover { color: var(--text-primary); border-color: var(--accent-border); }
    .btn-mic:hover { color: #dc2626; border-color: rgba(220,38,38,0.4); }
    .btn-mic.recording {
      color: #dc2626; border-color: rgba(220,38,38,0.5);
      background: rgba(220,38,38,0.06);
      animation: pulse 1.2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
    #sendBtn {
      background: var(--user-bg);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 7px 16px;
      font-size: 0.8rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      flex-shrink: 0;
      align-self: flex-end;
      transition: background 0.15s, opacity 0.15s;
    }
    #sendBtn:hover:not(:disabled) { background: var(--user-bg-hover); }
    #sendBtn:disabled { opacity: 0.38; cursor: not-allowed; }
    .input-hint { font-size: 0.64rem; color: var(--text-muted); margin-top: 6px; padding-left: 2px; font-weight: 300; }

    /* ──────────────────────────────────────────
       ASSESS TAB
    ────────────────────────────────────────── */
    .assess-container {
      flex: 1;
      overflow-y: auto;
      padding: 20px 16px;
    }
    .assess-container::-webkit-scrollbar { width: 4px; }
    .assess-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .assess-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.1rem;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .assess-subtitle { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 20px; }

    .assess-progress {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .assess-progress-bar {
      height: 100%;
      background: var(--accent);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .assess-step { display: none; }
    .assess-step.active { display: block; }

    .assess-question {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 6px;
      line-height: 1.4;
    }
    .assess-hint {
      font-size: 0.73rem;
      color: var(--text-secondary);
      margin-bottom: 14px;
      line-height: 1.45;
    }
    .assess-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .assess-option {
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      cursor: pointer;
      font-size: 0.85rem;
      font-family: 'DM Sans', sans-serif;
      text-align: left;
      color: var(--text-primary);
      transition: border-color 0.15s, background 0.15s;
      line-height: 1.4;
    }
    .assess-option:hover { border-color: var(--text-primary); background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
    .assess-option.selected { border-color: var(--text-primary); background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); color: var(--text-primary); font-weight: 500; }
    .assess-nav { display: flex; gap: 10px; margin-top: 8px; }
    .assess-btn {
      padding: 9px 20px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: opacity 0.15s;
    }
    .assess-btn.primary { background: var(--user-bg); color: #fff; }
    .assess-btn.secondary { background: transparent; border: 1.5px solid var(--border); color: var(--text-secondary); }
    .assess-btn:disabled { opacity: 0.38; cursor: not-allowed; }
    .assess-btn.primary:not(:disabled):hover { background: var(--user-bg-hover); }

    .assess-result {
      display: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-top: 12px;
    }
    .assess-result.visible { display: block; }
    .assess-result-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
    .assess-result-item { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.45; }
    .assess-result-item strong { color: var(--text-primary); }
    .assess-draft-btn {
      margin-top: 14px;
      width: 100%;
      padding: 10px;
      background: var(--user-bg);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.85rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }
    .assess-draft-btn:hover { background: var(--user-bg-hover); }

    /* ──────────────────────────────────────────
       GUIDE TAB
    ────────────────────────────────────────── */
    .guide-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    .guide-container::-webkit-scrollbar { width: 4px; }
    .guide-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .guide-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .guide-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1rem;
      color: var(--text-primary);
    }
    .guide-section-label {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
      margin-top: 16px;
    }
    .guide-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .guide-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
      position: relative;
    }
    .guide-card:hover { border-color: var(--accent-border); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .guide-card-tag {
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .guide-card-title { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); line-height: 1.35; }
    .guide-card-body { font-size: 0.73rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; display: none; }
    .guide-card.expanded .guide-card-body { display: block; }
    .guide-card-del {
      position: absolute;
      top: 6px; right: 8px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.7rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.15s;
      padding: 2px;
    }
    .guide-card:hover .guide-card-del { opacity: 1; }
    .guide-card-del:hover { color: var(--danger); }
    .guide-empty { font-size: 0.78rem; color: var(--text-muted); padding: 12px 0; }

    /* ──────────────────────────────────────────
       LIBRARY TAB
    ────────────────────────────────────────── */
    .library-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .lib-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }
    .lib-tab {
      flex: 1;
      padding: 11px 4px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
      color: var(--text-muted);
      border-bottom: 2px solid transparent;
      background: transparent;
      border-left: none;
      border-right: none;
      border-top: none;
      font-family: 'DM Sans', sans-serif;
      transition: color 0.15s, border-color 0.15s;
    }
    .lib-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
    .lib-pane { display: none; flex: 1; flex-direction: column; min-height: 0; }
    .lib-pane.active { display: flex; }
    .lib-pane-inner { flex: 1; overflow-y: auto; padding: 12px; }
    .lib-pane-inner::-webkit-scrollbar { width: 4px; }
    .lib-pane-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .lib-upload-area {
      margin-bottom: 12px;
      border: 1.5px dashed var(--border);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .lib-upload-area:hover { border-color: var(--text-primary); background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
    .lib-upload-label { font-size: 0.8rem; color: var(--text-secondary); }
    .lib-upload-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }

    .lib-doc-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 6px;
    }
    .lib-doc-info { flex: 1; min-width: 0; }
    .lib-doc-name {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lib-doc-meta { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }
    .lib-doc-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .lib-doc-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 3px 7px;
      font-size: 0.65rem;
      cursor: pointer;
      color: var(--text-muted);
      transition: color 0.15s, border-color 0.15s;
      font-family: 'DM Sans', sans-serif;
    }
    .lib-doc-btn:hover { color: var(--text-primary); border-color: var(--accent-border); }
    .lib-doc-btn.del:hover { color: var(--danger); border-color: rgba(192,57,43,0.35); }
    .lib-note {
      font-size: 0.72rem;
      color: var(--text-secondary);
      background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
      border-radius: 8px;
      padding: 10px 12px;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .lib-empty { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 24px 0; }

    /* ──────────────────────────────────────────
       ADMIN TAB
    ────────────────────────────────────────── */
    .admin-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    .admin-container::-webkit-scrollbar { width: 4px; }
    .admin-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .admin-section { margin-bottom: 24px; }
    .admin-section-title {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    /* Prompt modules */
    .prompt-module {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 8px;
      transition: border-color 0.15s;
    }
    .prompt-module.enabled { border-left: 3px solid var(--accent); }
    .prompt-module.locked { border-left: 3px solid var(--text-muted); }
    .pm-header { display: flex; align-items: center; gap: 10px; }
    .pm-info { flex: 1; min-width: 0; }
    .pm-title { font-size: 0.84rem; font-weight: 500; color: var(--text-primary); }
    .pm-desc { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
    .pm-toggle {
      position: relative;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }
    .pm-toggle input { opacity: 0; width: 0; height: 0; }
    .pm-slider {
      position: absolute; inset: 0;
      background: var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .pm-slider::after {
      content: '';
      position: absolute;
      width: 14px; height: 14px;
      background: #fff;
      border-radius: 50%;
      top: 3px; left: 3px;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .pm-toggle input:checked + .pm-slider { background: var(--accent); }
    .pm-toggle input:checked + .pm-slider::after { transform: translateX(16px); }
    .pm-toggle input:disabled + .pm-slider { cursor: not-allowed; opacity: 0.6; }
    .pm-edit-btn {
      font-size: 0.67rem;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 3px 8px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      flex-shrink: 0;
    }
    .pm-edit-btn:hover { color: var(--text-primary); border-color: var(--accent-border); }
    .pm-body { display: none; margin-top: 10px; }
    .pm-body.open { display: block; }
    .pm-textarea {
      width: 100%;
      min-height: 100px;
      font-size: 0.78rem;
      font-family: 'DM Sans', monospace;
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px;
      resize: vertical;
      outline: none;
      line-height: 1.5;
    }
    .pm-textarea:focus { border-color: var(--accent-border); }
    .pm-save-btn {
      margin-top: 6px;
      padding: 6px 14px;
      background: var(--user-bg);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 0.75rem;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
    }

    /* Staff profile form */
    .form-group { margin-bottom: 12px; }
    .form-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .form-input {
      width: 100%;
      padding: 8px 12px;
      font-size: 0.85rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--text-primary);
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      outline: none;
      transition: border-color 0.15s;
    }
    .form-input:focus { border-color: var(--accent-border); }
    .form-save-btn {
      width: 100%;
      padding: 10px;
      background: var(--user-bg);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.85rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      cursor: pointer;
      margin-top: 4px;
    }
    .form-save-btn:hover { background: var(--user-bg-hover); }
    .form-saved {
      font-size: 0.72rem;
      color: var(--green);
      text-align: center;
      margin-top: 6px;
      display: none;
    }

    /* Audit log */
    .audit-entry {
      padding: 8px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 7px;
      margin-bottom: 5px;
    }
    .audit-time { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; }
    .audit-summary { font-size: 0.78rem; color: var(--text-primary); margin-top: 2px; line-height: 1.4; }
    .audit-provider { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }

    /* ──────────────────────────────────────────
       DOCUMENT VIEWER MODAL
    ────────────────────────────────────────── */
    .viewer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15,25,35,0.65);
      z-index: 200;
      align-items: center;
      justify-content: center;
    }
    .viewer-overlay.open { display: flex; }
    .viewer-panel {
      background: var(--surface);
      border-radius: 12px;
      width: min(92vw, 900px);
      height: 86vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 80px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .viewer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .viewer-filename {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 70%;
    }
    .viewer-close {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 5px 12px;
      cursor: pointer;
      font-size: 0.75rem;
      color: var(--text-muted);
      font-family: 'DM Sans', sans-serif;
    }
    .viewer-close:hover { color: var(--danger); }
    .viewer-body { flex: 1; overflow: hidden; }
    .viewer-body iframe { width: 100%; height: 100%; border: none; }
    .viewer-body pre {
      width: 100%; height: 100%; overflow: auto;
      padding: 20px; font-size: 0.82rem; line-height: 1.7;
      white-space: pre-wrap; color: var(--text-primary);
      background: var(--bg); margin: 0;
    }
    .viewer-unsupported {
      display: flex; align-items: center; justify-content: center;
      height: 100%; font-size: 0.875rem; color: var(--text-muted);
      flex-direction: column; gap: 12px;
    }
    .viewer-download {
      font-size: 0.8rem; color: var(--text-primary); text-decoration: none;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); padding: 7px 16px; border-radius: 6px;
    }

    /* Drop overlay */
    .drop-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      border: 3px dashed color-mix(in srgb, var(--accent) 48%, transparent);
      z-index: 100;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: var(--text-primary);
      font-weight: 500;
      pointer-events: none;
    }
    .drop-overlay.active { display: flex; }

    /* Utilities */
    .hidden { display: none !important; }

    /* ── Ledger ── */
    .ledger-container { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
    .ledger-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
    }
    .ledger-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:600; color:var(--text-primary); }
    #ledger-list { flex:1; overflow-y:auto; padding:10px 14px; }
    .ledger-entry {
      background:var(--surface); border:1px solid var(--border);
      border-radius:8px; padding:10px 12px; margin-bottom:8px;
    }
    .ledger-meta { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
    .ledger-time { font-size:0.68rem; color:var(--text-muted); font-weight:500; font-variant-numeric:tabular-nums; }
    .ledger-type {
      font-size:0.63rem; font-weight:600; padding:1px 6px; border-radius:4px;
      text-transform:uppercase; letter-spacing:0.04em;
    }
    .ledger-type.query  { background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--accent); }
    .ledger-type.draft  { background:rgba(22,163,74,0.10);  color:var(--green); }
    .ledger-type.assess { background:rgba(245,158,11,0.12); color:var(--amber-text); }
    .ledger-type.manual { background:rgba(124,58,237,0.10); color:var(--purple-text); }
    .ledger-ref { font-size:0.65rem; color:var(--text-secondary); font-family:'Courier New',monospace; margin-left:auto; }
    .ledger-summary { font-size:0.8rem; color:var(--text-primary); line-height:1.4; }
    .save-ledger-btn {
      font-size:0.68rem; color:var(--text-muted); background:transparent;
      border:1px solid var(--border); padding:3px 8px; border-radius:5px;
      cursor:pointer; font-family:'DM Sans',sans-serif; transition:color 0.15s;
    }
    .save-ledger-btn:hover { color:var(--text-primary); }

    /* ── PII tokens (clickable reveal) ── */
    .pii-token {
      display: inline-block;
      background: color-mix(in srgb, var(--accent) 11%, transparent);
      color: var(--text-primary);
      border: 1px solid color-mix(in srgb, var(--accent) 27%, transparent);
      border-radius: 4px;
      padding: 0 5px;
      font-size: 0.82em;
      font-family: 'DM Mono', 'Courier New', monospace;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .pii-token:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
    .pii-token.revealed {
      background: rgba(22,163,74,0.10);
      color: var(--green);
      border-color: rgba(22,163,74,0.3);
      cursor: default;
    }

    /* ── Settings drawer ── */
    .settings-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: 400;
    }
    .settings-overlay.open { display: block; }
    .settings-drawer {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: min(380px, 94vw);
      background: var(--surface);
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 40px rgba(0,0,0,0.28);
    }
    .settings-header {
      background: var(--sidebar-bg);
      padding: 14px 20px;
      padding-top: max(14px, env(safe-area-inset-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .settings-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--sidebar-heading);
    }
    .settings-close {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--sidebar-sub);
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      transition: color 0.15s, border-color 0.15s;
    }
    .settings-close:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
    .settings-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    .settings-body .admin-container { padding: 0 0 60px; }


/* ── Polish layer (2026-07-30): studio kit palette × Claude-app calm ────────── */

/* Centred, breathing reading column — the Claude signature */
#chat-area { max-width: 780px; margin: 0 auto; width: 100%; padding: 20px 16px; gap: 14px; }
.tab-panel > .ledger-container,
.tab-panel > .library-container { max-width: 780px; margin: 0 auto; width: 100%; }

/* Bubbles: soft, quiet, readable */
.bubble { font-size: 0.92rem; line-height: 1.7; padding: 12px 16px; }
.bubble.user { border-radius: 18px 18px 6px 18px;
  box-shadow: 0 1px 2px rgba(6,44,32,0.22); font-weight: 400; }
.bubble.ai { border-radius: 6px 18px 18px 18px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(26,37,53,0.05); }

/* Buttons: one consistent shape, honest hover */
.btn-sm { border-radius: 8px; transition: background .15s ease, border-color .15s ease, color .15s ease; }

/* Inputs: calm focus ring in the kit's accent */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft); }

/* Bottom nav is restyled wholesale in the Claude-dock layer at the end. */

/* Cards */
.ledger-entry { border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 12px 14px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(26,37,53,0.04); }

/* Header: a touch of depth, brand navy kept */
header { box-shadow: 0 1px 0 rgba(0,0,0,0.12); }

/* Viewer modal panel breathing room */
.viewer-panel { border-radius: 14px; }
.viewer-body pre { font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.9rem; line-height: 1.7; }

/* Welcome chips: surface cards on the cream, not dark slabs */
#chatWelcome .btn-sm { background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary); box-shadow: 0 1px 2px rgba(26,37,53,0.05); }
#chatWelcome .btn-sm:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ── Debug panel (5 taps on the header title) ─────────────────────────────── */
#debugPanel {
  position: fixed; inset: 8vh 4vw; z-index: 4000;
  background: var(--surface, #FFFFFF); color: var(--text-primary, #1A2535);
  border: 1px solid var(--border, #E3DCCF); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(26, 37, 53, 0.28);
  display: flex; flex-direction: column; overflow: hidden;
  font-size: 0.78rem;
}
#debugPanel .dbg-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border, #E3DCCF);
}
#debugPanel .dbg-info {
  padding: 0.5rem 0.9rem; font-family: monospace; font-size: 0.68rem;
  color: var(--text-secondary, #5A6577); border-bottom: 1px solid var(--border, #E3DCCF);
  word-break: break-word;
}
#debugPanel .dbg-actions {
  display: flex; gap: 0.5rem; padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border, #E3DCCF); flex-wrap: wrap;
}
#debugPanel .dbg-log { overflow-y: auto; padding: 0.5rem 0.9rem 0.9rem; flex: 1; }
#debugPanel .dbg-row {
  font-family: monospace; font-size: 0.68rem; padding: 0.14rem 0;
  border-bottom: 1px dotted var(--border, #E3DCCF); word-break: break-word;
}
#debugPanel .dbg-t { color: var(--text-secondary, #5A6577); }
#debugPanel .dbg-e { font-weight: 700; }
#debugBanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3900;
  display: flex; justify-content: center; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.8rem; font-size: 0.78rem;
  background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid var(--warn-border);
}

/* ── Claude-dock layer (2026-07-31): pill navigation + composer + theming ──── */

/* Smooth the light↔dark flip */
body, header, .bottom-nav, .bubble, .input-shell, .settings-drawer {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Bottom bar → floating pill dock in the content's own colours (the old bar
   was a navy OS-style tab strip; this is the Claude chip row) */
.bottom-nav {
  height: auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 8px 10px calc(8px + var(--safe-bottom));
  display: flex;
  justify-content: center;
  gap: 6px;
}
.nav-btn {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  background: transparent;
}
.nav-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.nav-btn.active {
  color: var(--text-primary);
  background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  border-color: var(--accent-border);
}
.nav-btn.active .nav-icon { filter: none; }
.nav-icon  { font-size: 1rem; }
.nav-label {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Composer: one rounded Claude-style card — icons quiet, send is a filled
   circle with an up arrow */
.input-area { background: var(--bg); border-top: none; padding: 6px 16px 10px; }
.input-shell {
  border-radius: 22px;
  padding: 10px 10px 10px 18px;
  box-shadow: 0 1px 3px var(--shadow-soft);
}
.btn-upload, .btn-mic {
  border: none;
  background: transparent;
  font-size: 1rem;
  padding: 7px;
  border-radius: 50%;
}
.btn-upload:hover { background: var(--surface-hover); }
.btn-mic:hover    { background: rgba(220,38,38,0.08); }
#sendBtn {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Appearance control — the Claude-style System / Light / Dark segmented pills */
.appearance-row { display: flex; gap: 6px; }
.appearance-opt {
  flex: 1;
  padding: 9px 4px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.appearance-opt .ao-icon { font-size: 1rem; }
.appearance-opt:hover { border-color: var(--accent-border); }
.appearance-opt.selected {
  border-color: var(--text-primary);
  background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text-primary);
}

/* Theme button in the header (guests have no settings drawer) */
#themeBtn { font-size: 0.85rem; padding: 5px 10px; }

/* Dark-mode touch-ups where a token alone isn't enough */
:root[data-theme="dark"] .bubble.ai { box-shadow: 0 1px 6px rgba(0,0,0,0.25); }
:root[data-theme="dark"] .guide-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
:root[data-theme="dark"] .viewer-overlay { background: rgba(0,0,0,0.7); }

/* ── Mint glass layer (2026-07-31): studio mint accent × glassmorphism ──────
   Ported from the nexus-core studio kit (tokens.mode.css / components.css).
   The glass recipe is a translucent fill + lit edge + inset sheen behind a
   backdrop blur; the ambient accent wash on <body> is what the frost actually
   refracts — over a flat opaque page the blur has nothing to do. */

/* Ambient wash — two soft mint pools; content panes are transparent, so the
   wash shows through the chat column and behind every pane of chrome. */
body {
  background:
    radial-gradient(1100px 520px at 88% -12%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(900px 620px at -12% 112%,
      color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    var(--bg);
}

/* Chrome: header + dock are frosted panes. Denser fill than a resting card —
   text sits directly on them, so the wash must stay behind the ink. */
header, .bottom-nav {
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}
header { border-bottom: 1px solid var(--glass-edge); box-shadow: none; }
:root[data-theme="dark"] header { box-shadow: none; }
.bottom-nav { border-top: 1px solid var(--glass-edge); }

/* Composer: resting glass card — fill, edge, sheen, blur */
.input-area { background: transparent; }
.input-shell {
  background: var(--glass-fill);
  border: 1.5px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-card);
}
.input-shell:focus-within {
  border-color: var(--accent-border);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 0 0 3px var(--input-focus);
}

/* Drawer + debug panel frost the app content behind them — the one place the
   glass gets real parallax, since the whole page slides under the drawer. */
.settings-drawer, #debugPanel {
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}
.settings-header { background: transparent; border-bottom: 1px solid var(--sidebar-border); }

/* The chrome now sits on page colours in both modes — the white-on-navy
   button treatment from the retired solid header would vanish in light mode. */
.btn-sm { border-color: var(--border); }
.btn-sm:hover { color: var(--text-primary); border-color: var(--text-muted); }
.settings-close { border-color: var(--border); }
.settings-close:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Send button carries the brand: mint fill, per-mode ink (white text fails
   on the pale dark-mode mint — the kit pairs every accent with its own ink). */
#sendBtn { background: var(--accent); color: var(--accent-ink); }
#sendBtn:hover:not(:disabled) { background: var(--accent); filter: brightness(0.93); }

/* Blue-era leftovers: badge borders derive from the accent, whatever it is */
.rag-badge { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.doc-badge { border-color: color-mix(in srgb, var(--accent) 24%, transparent); }

/* No backdrop-filter (old WebViews): translucent chrome over moving content
   is unreadable, so fall back to opaque surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header, .bottom-nav, .settings-drawer, #debugPanel { background: var(--bg); }
  .input-shell { background: var(--surface); }
}

/* ── Composer v2 (2026-07-31): Claude-app stack — text above, buttons below ──
   The shell flips to a column: full-width textarea on top, then a button row
   with + (attachment menu) on the left and mic + send on the right. */
.input-shell {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px 10px 14px;
}
#userInput { width: 100%; height: auto; }
.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-left, .input-right { display: flex; gap: 6px; align-items: center; }
.btn-mic, #sendBtn { align-self: center; }

/* The + : quiet round button, same size as send so the row reads as one family */
.plus-wrap { position: relative; }
.btn-plus {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-plus:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Attachment menu pops up over the composer as a small glass sheet */
.plus-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 216px;
  z-index: 300;
  padding: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 12px 36px rgba(0,0,0,0.22);
}
.plus-menu.open { display: block; }
.plus-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none; border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.plus-menu button:hover { background: var(--surface-hover); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plus-menu { background: var(--surface); }
}

/* ── Dock pill + textarea growth fix (2026-07-31) ───────────────────────────
   #userInput still carried `flex: 1` from the old ROW composer; in the column
   shell that means flex-basis:0, which silently overrides the height the
   auto-grow JS sets — the field stayed one line and scrolled instead of
   expanding. flex:none lets the inline height win. */
#userInput { flex: none; }

/* The tabs live in ONE lozenge, like the Claude "Auto" pill: a single glass
   capsule floating on the wash, active segment tinted mint. The bar behind
   it goes transparent — the capsule is the dock now. */
.bottom-nav {
  background: transparent;
  border-top: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 2px;
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-card);
}
.nav-btn { padding: 7px 14px; border: none; }
.nav-btn.active { background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); color: var(--text-primary); border: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill { background: var(--surface); }
}

/* ── Council pill (2026-07-31): second capsule in the dock ──────────────────
   The council selector moves out of the header and sits beside the tabs
   capsule — same glass recipe, accent ink, native <select> underneath so
   mobile still gets the platform picker. Only guests and clients mount it —
   a client runs two tab segments and a guest none, so the row has room. */
.bottom-nav { flex-wrap: wrap; }
.council-pill {
  appearance: none;
  -webkit-appearance: none;
  max-width: 150px;
  padding: 9px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-card);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.council-pill:focus { outline: none; border-color: var(--accent-border); }
/* Dropdown options paint on the platform sheet, not the glass — keep them legible */
.council-pill option { background: var(--surface); color: var(--text-primary); font-weight: 500; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .council-pill { background: var(--surface); }
}

/* ── Follow-up suggestion chips (2026-07-31): the model's NEXT block ──────── */
.suggest-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 88%; }
.suggest-chip {
  border: none;
  background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.suggest-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ── Update toast (2026-07-31): a deploy landed while the app was open ────── */
#updateToast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 18px);
  z-index: 3800;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 12px 36px rgba(0,0,0,0.25);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 500;
}
#updateToast button {
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #updateToast { background: var(--surface); }
}

/* ── Drawers, nav sheet, attachments (2026-07-31) ────────────────────────────
   Two drawer buttons, one per top corner: chats left, settings right. The
   dock pill stops being a segmented switch and becomes a control that opens
   a sheet — every destination stays visible, locked ones greyed with the
   reason, so the app never hides what it can do. Same glass recipe
   throughout; the sheet and drawers use the chrome tokens so they read as
   part of the shell rather than modals dropped on top of it. */

/* Header: title centred between the two corner buttons */
.header-titles { flex: 1; min-width: 0; text-align: center; }
.header-titles .header-subtitle { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.hdr-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  cursor: pointer;
}
.hdr-icon:hover { border-color: var(--accent-border); color: var(--text-primary); }
.header-actions { flex: 0 0 auto; }

/* Left drawer — same overlay mechanics as settings, mirrored */
.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 400;
}
.drawer-overlay.open { display: block; }
.drawer-left {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: 8px 0 40px rgba(0,0,0,0.28);
}
.drawer-body { flex: 1; overflow-y: auto; padding: 14px; }
.drawer-new {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: none;
  border-radius: 12px;
  background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.drawer-new:hover { background: var(--accent); color: var(--accent-ink); }
.drawer-section-title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 8px 2px;
}
.sess-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.sess-row:hover { background: var(--surface-hover); }
.sess-row.current { background: var(--surface);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
.sess-main { flex: 1; min-width: 0; }
.sess-title {
  font-size: 0.82rem; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sess-when { font-size: 0.68rem; color: var(--text-muted); }
.sess-del {
  flex: 0 0 auto;
  border: none; background: none;
  color: var(--text-muted);
  font-size: 0.85rem; cursor: pointer;
  padding: 2px 4px;
}
.sess-del:hover { color: var(--danger, #b91c1c); }
.drawer-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 14px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  font-size: 0.7rem; color: var(--text-muted);
}

/* Dock pill: now one control that names the current view */
.nav-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-card);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
}
.nav-pill .nav-label { font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: inherit; }
.nav-caret { font-size: 0.9rem; line-height: 1; opacity: 0.65; }

/* Bottom sheet — the Select-mode pattern: icon, title, eyebrow, tick */
.sheet-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 500;
}
.sheet-overlay.open { display: block; }
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: 6px 14px calc(18px + var(--safe-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.28);
}
.sheet-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0 12px;
}
.sheet-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.sheet-close {
  position: absolute; left: 0; top: 10px;
  border: none; background: none;
  font-size: 1rem; color: var(--text-muted); cursor: pointer;
  padding: 4px 8px;
}
.sheet-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
.sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
.sheet-row:last-child { border-bottom: none; }
.sheet-row:hover { background: var(--surface-hover); }
.sheet-row-icon { font-size: 1.15rem; flex: 0 0 auto; width: 22px; text-align: center; }
.sheet-row-main { flex: 1; min-width: 0; }
.sheet-row-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
/* the eyebrow: what this view is for, in one line */
.sheet-row-eyebrow { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.sheet-check { flex: 0 0 auto; color: var(--text-primary); font-size: 0.95rem; }
/* Locked rows stay listed and stay unselectable — greyed, no hover, no tap */
.sheet-row.locked { cursor: default; opacity: 0.45; }
.sheet-row.locked:hover { background: none; }
.sheet-row.locked .sheet-row-title { color: var(--text-muted); font-weight: 500; }
.sheet-foot { padding: 12px 2px 0; font-size: 0.75rem; color: var(--text-muted); }
.sheet-foot .btn-sm { width: 100%; padding: 10px; }

/* Records: device-held files and voice notes */
.att-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.att-row:last-child { border-bottom: none; }
.att-icon { font-size: 1rem; flex: 0 0 auto; }
.att-main { flex: 1; min-width: 0; }
.att-name { font-size: 0.83rem; color: var(--text-primary); word-break: break-word; }
.att-when { font-size: 0.68rem; color: var(--text-muted); }
.att-text { font-size: 0.8rem; color: var(--text-primary); white-space: pre-wrap;
  margin-top: 2px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr-icon, .nav-pill { background: var(--surface); }
}

/* A section the app just pointed someone at (e.g. the Meeting Companion from
   the welcome screen) — a brief accent outline, both themes via the token. */
.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; transition: outline-color .6s; }


/* Feedback-interview bar: slim, just above the composer (tester feedback 2026-10-03). */
.ivbar { display:flex; align-items:center; gap:.4rem; margin:0 0 6px; padding:4px 6px 4px 10px;
         border-radius:999px; background:var(--accent-soft); border:1px solid var(--accent-border);
         font-size:.74rem; line-height:1.2; }
.ivbar-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ivbar-btn { font-size:.72rem; padding:3px 10px; border-radius:999px; border:1px solid var(--accent-border);
             background:var(--accent); color:var(--accent-ink); cursor:pointer; }
.ivbar-btn.ghost { background:transparent; color:inherit; }
/* The mic while speech is being turned into text. */
.btn-mic.transcribing { animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .btn-mic.transcribing { animation:none; } }


/* Under each answer: ⋯ More folds the less-used actions; sources fold behind
   one 📚 toggle (tester feedback 2026-10-03). */
.meta-more { display:inline-flex; flex-wrap:wrap; gap:6px; }
.meta-more[hidden] { display:none; }
.source-toggle { font-size:.7rem; padding:2px 8px; border-radius:999px; border:1px solid var(--accent-border);
                 background:transparent; color:inherit; cursor:pointer; }
.source-row[hidden] { display:none; }

/* Records must fit a phone: nothing may push the panel wider than the screen. */
#panel-ledger { max-width:100vw; overflow-x:hidden; }
#panel-ledger .ledger-container, #panel-ledger .ledger-container * { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
#panel-ledger .ledger-header { flex-wrap:wrap; gap:6px; }
#panel-ledger .ledger-header > span:last-child { display:flex; flex-wrap:wrap; gap:6px; }