/* Styles for the Varra chat page. Split out of index.html, which had
   grown past 2,000 lines with markup, styling and behaviour in one
   file. Loaded by index.html; nothing else references it. */

:root {
    --void: #0a0a0b;
    --panel: #131315;
    --panel-2: #19191c;
    --sidebar: #0e0e10;
    --line: #232326;
    --ink: #edeff0;
    --muted: #868b90;
    --muted-2: #57595e;
    --accent: #6d28d9;
    --accent-bright: #a78bfa;
    --accent-dim: #4c2d86;
    --bubble: #1c1530;
    --font-display: 'Chakra Petch', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  }
  * { box-sizing: border-box; }

  /* Scrollbars, themed rather than left to the browser. Applied to every
     scrollable region at once (sidebar, message thread, the upgrade
     modal) so none of them can drift back to the OS default and sit as a
     grey slab against the dark UI. Firefox takes the two standard
     properties; Chrome/Safari/Edge need the -webkit pseudo-elements, so
     both are declared. */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dim) transparent;
  }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--accent-dim);
    border-radius: 4px;
    /* A transparent border with background-clip keeps the thumb from
       touching the track edges - it reads as a floating bar rather than
       a filled gutter. */
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
  html, body { height: 100%; }
  html { background: var(--void); }
  body {
    margin: 0;
    background: var(--void);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }

  #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; }

  .app { position: relative; z-index: 1; display: flex; height: 100vh; }

  /* ---- Sidebar ---- */
  .sidebar {
    width: 272px;
    flex: none;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.2s ease;
  }
  .sidebar-head { padding: 20px 18px 14px; }
  .brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
  }
  .brand .dot { width: 7px; height: 7px; background: var(--accent-bright); border-radius: 50%; }
  .new-chat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 10px 13px;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .new-chat-btn:hover { border-color: var(--accent-dim); background: var(--panel-2); }
  .new-chat-btn svg { flex: none; color: var(--accent-bright); }

  .conv-list { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
  .conv-list-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 14px 8px 8px;
  }
  .conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13.5px;
    position: relative;
  }
  .conv-item:hover { background: var(--panel); color: var(--ink); }
  .conv-item.active { background: var(--panel-2); color: var(--ink); }
  .conv-item .title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conv-item .del {
    flex: none;
    opacity: 0;
    color: var(--muted-2);
    padding: 2px;
    border-radius: 4px;
    line-height: 0;
  }
  .conv-item .ren {
    flex: none;
    opacity: 0;
    color: var(--muted-2);
    padding: 2px;
    border-radius: 4px;
    line-height: 0;
  }
  .conv-item:hover .ren { opacity: 1; }
  .conv-item .ren:hover { color: var(--accent-bright); background: var(--void); }
  .conv-item:hover .del { opacity: 1; }
  .rename-input {
    flex: 1;
    min-width: 0;
    background: var(--void);
    border: 1px solid var(--accent-dim);
    border-radius: 4px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: 2px 6px;
  }
  .rename-input:focus { outline: none; border-color: var(--accent-bright); }
  .conv-item .del:hover { color: #e0645c; background: var(--void); }
  .empty-convs { padding: 10px 8px; font-size: 12.5px; color: var(--muted-2); line-height: 1.6; }

  /* ---- Mode picker (sidebar) ---- */
  .mode-search-wrap { position: relative; padding: 0 8px 6px; }
  .mode-search-icon {
    position: absolute;
    left: 18px;
    top: 8px;
    color: var(--muted-2);
    pointer-events: none;
  }
  .mode-search {
    width: 100%;
    padding: 7px 9px 7px 29px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 12.5px;
    -webkit-appearance: none;
    appearance: none;
  }
  .mode-search::placeholder { color: var(--muted-2); }
  .mode-search:focus { outline: none; border-color: var(--accent-dim); }
  .mode-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  .mode-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
  }
  .mode-item:hover { background: var(--panel); color: var(--ink); }
  .mode-item.active { background: var(--panel-2); color: var(--ink); }
  .mode-item .tick {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--muted-2);
  }
  .mode-item.active .tick { background: var(--accent-bright); }
  .mode-item .mode-text { flex: 1; min-width: 0; }
  .mode-item .mode-label { font-weight: 500; }
  .mode-item .mode-blurb {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted-2);
    margin-top: 1px;
  }
  .mode-item.active .mode-blurb { color: var(--muted); }
  .mode-empty { padding: 8px 10px; font-size: 12px; color: var(--muted-2); }
  .mode-chev {
    flex: none;
    color: var(--muted-2);
    line-height: 0;
    margin-top: 3px;
  }
  .mode-item:hover .mode-chev { color: var(--accent-bright); }
  .mode-less {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .mode-less:hover { color: var(--accent-bright); }

  .sidebar-foot {
    padding: 10px;
    border-top: 1px solid var(--line);
    position: relative;
  }

  /* ---- Account panel (bottom-left) ---- */
  .account-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
  }
  .account-btn:hover { background: var(--panel); }
  .account-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
  }
  .account-info { flex: 1; min-width: 0; }
  .account-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .account-plan {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  .signin-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
  }
  .signin-btn:hover { border-color: var(--accent-dim); background: var(--panel); }

  .account-menu {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 6px);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .account-menu.open { display: block; }
  .account-menu button {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
  }
  .account-menu button:hover { background: var(--panel); }
  .account-menu button.danger { color: #e0645c; }
  .usage-readout {
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .usage-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 5px;
  }
  .usage-total {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    color: var(--ink);
    margin: 0;
  }
  .usage-split {
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted-2);
    margin: 4px 0 0;
  }

  /* ---- Auth modal ---- */
  .auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .auth-overlay.open { display: flex; }
  .auth-box {
    width: 100%;
    max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
  }
  .auth-box h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .auth-box .sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
  .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .google-btn:hover { border-color: var(--accent-dim); background: var(--panel); }
  .auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .auth-field { margin-bottom: 14px; }
  .auth-field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 6px;
  }
  .auth-field input {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .auth-field input:focus { outline: none; border-color: var(--accent-dim); }
  .auth-error {
    font-size: 12.5px;
    color: #e0645c;
    margin: -4px 0 14px;
    display: none;
  }
  .auth-error.show { display: block; }
  /* The other half of .auth-error: the line that carries a reply worth
     reading rather than a failure. Same box, same rhythm, accent instead
     of red - "a link is on its way" and "password updated" are the two
     places this flow ends well, and neither should look like an error. */
  .auth-ok {
    font-size: 12.5px;
    color: var(--accent-bright);
    margin: -4px 0 14px;
    display: none;
  }
  .auth-ok.show { display: block; }
  .auth-submit {
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }
  .auth-submit:hover:not(:disabled) { background: #8b5cf6; }
  .auth-submit:disabled { opacity: 0.5; cursor: default; }
  .auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--muted);
  }
  .auth-switch button {
    background: none;
    border: none;
    color: var(--accent-bright);
    cursor: pointer;
    font-size: 12.5px;
    padding: 0;
  }
  /* Under the submit button, not competing with it: the same
     button-as-link treatment as .auth-switch, one step quieter, because
     it is the way out of a form most people will never need. */
  .auth-forgot { text-align: center; margin: 12px 0 0; }
  .auth-forgot button {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    text-decoration: underline;
  }
  .auth-forgot button:hover { color: var(--accent-bright); }
  .auth-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
  }

  /* ---- Upgrade modal ---- */
  .upgrade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 60;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
  }
  .upgrade-overlay.open { display: flex; }
  .upgrade-box {
    width: 100%;
    max-width: 920px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px;
    position: relative;
  }
  .upgrade-box h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--ink);
    text-align: center;
  }
  .upgrade-box .sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 28px;
    text-align: center;
  }
  .upgrade-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
  }
  .plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } }
  .plan-card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .plan-badge {
    position: absolute;
    top: -10px;
    left: 18px;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
  }
  .plan-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    margin: 4px 0 2px;
  }
  .plan-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: var(--ink);
    margin: 6px 0 2px;
  }
  .plan-price span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    color: var(--muted);
  }
  .plan-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 16px;
    min-height: 34px;
  }
  .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
  }
  .plan-features li {
    font-size: 12.5px;
    color: var(--ink);
    padding: 6px 0 6px 20px;
    position: relative;
    line-height: 1.4;
  }
  .plan-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent-bright);
    font-weight: 700;
  }
  .plan-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    cursor: not-allowed;
  }
  .plan-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    opacity: 0.9;
  }
  .plan-note {
    font-size: 11px;
    color: var(--muted-2);
    text-align: center;
    margin: 20px 0 0;
  }

  /* ---- Main column ---- */
  .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

  .topbar {
    flex: none;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .export-btn {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .export-btn:hover { border-color: var(--accent-dim); color: var(--ink); }
  @media (max-width: 520px) { .export-btn .label { display: none; } }

  .menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
  }
  .topbar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scroller { flex: 1; overflow-y: auto; }
  .thread { max-width: 720px; margin: 0 auto; padding: 28px 24px 12px; }

  .empty-state {
    max-width: 560px;
    margin: 10vh auto 0;
    padding: 0 24px;
    text-align: center;
  }
  .empty-state .mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .empty-state .mark .accent { color: var(--accent-bright); }
  .empty-state p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
  }

  .msg { margin-bottom: 26px; display: flex; flex-direction: column; }
  .msg.user { align-items: flex-end; }
  .msg.varra, .msg.error { align-items: flex-start; }

  .msg .role {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-2);
    margin-bottom: 6px;
  }
  .msg.varra .role { color: var(--accent-bright); }
  .msg.error .role, .msg.error .bubble { color: #e0645c; }

  .msg .bubble { font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
  .msg.user .bubble {
    background: var(--bubble);
    border: 1px solid var(--accent-dim);
    padding: 11px 15px;
    border-radius: 12px 12px 2px 12px;
    max-width: 78%;
  }
  .msg.varra .bubble, .msg.error .bubble { max-width: 82%; }

  /* Phase one of the wait: nothing has arrived yet. The mark count and
     the tempo both come from the depth stop the person chose (see
     addThinking in app.js) - more work asked for reads as more marks,
     moving more deliberately. --think-tempo is set per message. */
  .thinking { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; }
  .thinking-marks { display: inline-flex; gap: 4px; }
  .thinking-marks span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-bright);
    animation: pulse var(--think-tempo, 1.1s) infinite ease-in-out;
  }
  /* Delays are a fraction of the tempo rather than fixed, so the wave
     stays a wave at every speed instead of bunching up when slow. */
  .thinking-marks span:nth-child(2) { animation-delay: calc(var(--think-tempo, 1.1s) * 0.14); }
  .thinking-marks span:nth-child(3) { animation-delay: calc(var(--think-tempo, 1.1s) * 0.28); }
  .thinking-marks span:nth-child(4) { animation-delay: calc(var(--think-tempo, 1.1s) * 0.42); }
  .thinking-marks span:nth-child(5) { animation-delay: calc(var(--think-tempo, 1.1s) * 0.56); }
  .thinking-name {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  @keyframes pulse { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

  /* ---- Input ---- */
  .input-wrap { flex: none; padding: 10px 24px 22px; }
  .input-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 10px 10px 16px;
  }
  .input-inner:focus-within { border-color: var(--accent-dim); }
  textarea {
    flex: 1;
    resize: none;
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    max-height: 200px;
    padding: 6px 0;
  }
  textarea::placeholder { color: var(--muted-2); }
  .send-btn {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    border: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .send-btn:hover:not(:disabled) { background: #8b5cf6; }
  .send-btn:disabled { opacity: 0.4; cursor: default; }

  .memory-btn {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .memory-btn:hover { border-color: var(--accent-dim); color: var(--ink); }
  .memory-btn.on {
    border-color: var(--accent);
    color: var(--accent-bright);
    background: rgba(109, 40, 217, 0.12);
  }
  @media (max-width: 480px) { .memory-btn span.label { display: none; } }

  .notes-btn {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .notes-btn:hover { border-color: var(--accent-dim); color: var(--ink); }
  .notes-btn.on {
    border-color: #e0645c;
    color: #e0645c;
    background: rgba(224, 101, 92, 0.1);
  }
  @media (max-width: 620px) {
    .notes-btn span.label { display: none; }
  }

  /* Job-reference row: sits above the input the same way attach-strip
     does, so showing it never reflows the input row itself. */
  .notes-setup {
    max-width: 720px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    flex-wrap: wrap;
  }
  .notes-setup label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    flex: none;
  }
  .notes-setup input {
    flex: 1;
    min-width: 140px;
    height: 34px;
    background: var(--void);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: 0 10px;
  }
  .notes-setup input:focus { outline: none; border-color: var(--accent-bright); }
  .notes-setup button {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .notes-setup button:hover { border-color: var(--accent-dim); color: var(--ink); }
  .notes-setup .notes-start {
    border-color: #e0645c;
    color: #e0645c;
    background: rgba(224, 101, 92, 0.1);
  }

  /* Response-depth slider: left = fastest, right = most thorough. Stops
     come from /api/effort-levels so they can't drift from what the engine
     accepts. */
  .depth-wrap {
    max-width: 720px;
    margin: 0 auto 8px;
    padding: 0 4px;
  }
  .depth-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .depth-legend {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-2);
    flex: none;
    user-select: none;
  }
  .depth-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    background: transparent;
    cursor: pointer;
    min-width: 90px;
  }
  .depth-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent-dim), var(--accent-bright));
  }
  .depth-slider::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent-dim), var(--accent-bright));
  }
  .depth-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--accent);
    transition: transform 0.12s ease;
  }
  .depth-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--accent);
    transition: transform 0.12s ease;
  }
  .depth-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
  .depth-slider:hover::-moz-range-thumb { transform: scale(1.15); }
  .depth-slider:focus-visible { outline: none; }
  .depth-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  .depth-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  .depth-slider:disabled { opacity: 0.45; cursor: default; }
  .depth-name {
    font-family: var(--font-mono);
    color: var(--accent-bright);
    margin-right: 7px;
    user-select: none;
  }
  .depth-blurb {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted-2);
    min-height: 15px;
  }
  @media (max-width: 640px) {
    .depth-legend { display: none; }
  }

  .msg.notes .role { color: var(--muted-2); }
  .msg.notes .bubble { color: var(--muted); font-style: italic; }
  .input-hint {
    max-width: 720px;
    margin: 8px auto 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--muted-2);
    text-align: center;
  }

  @media (max-width: 860px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; margin-left: -272px; box-shadow: 0 0 0 2000px rgba(0,0,0,0); }
    .sidebar.open { margin-left: 0; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
    .menu-btn { display: block; }
    .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39; }
    .scrim.open { display: block; }
  }

/* Notice at the point of collection: the sign-in form is where an email and
   password are handed over, so the policy is linked from it directly rather
   than only from the company site. */
.auth-legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: center;
}
.auth-legal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-legal a:hover { color: var(--accent); }

.account-legal {
  display: block;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted-2);
  text-decoration: none;
}
.account-legal:hover { color: var(--accent); }

/* Hidden until the first click. Irreversible actions should take two. */
.delete-confirm { display: none; padding: 10px; margin-top: 6px; border: 1px solid var(--danger, #b4436c); }
.delete-confirm.open { display: block; }
.delete-confirm p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.delete-actions { display: flex; gap: 8px; }
.delete-actions button { flex: 1; font-size: 12px; padding: 6px 8px; }
.delete-error { color: var(--danger, #b4436c); margin: 8px 0 0; min-height: 1em; }
/* Same inline-panel shape as the delete confirmation, in a neutral
   border rather than the danger one - changing a password is a normal
   thing to do, not a destructive one. */
.password-panel { display: none; padding: 10px; margin-top: 6px; border: 1px solid var(--line, #2a2f3a); }
.password-panel.open { display: block; }
.password-panel p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.password-panel .auth-field { margin-bottom: 10px; }
.password-ok { color: var(--accent, #6d28d9); margin: 8px 0 0; min-height: 1em; }
/* Hidden until the server asks for a fresh sign-in; app.js sets the
   display. Declared after .password-panel.open so that opening the panel
   does not reveal it - a descendant of an open panel is still governed
   by its own display value, and this one starts none. */
.reauth-link {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent, #6d28d9);
}
.reauth-link.show { display: inline-block; }

/* Mirrors .password-panel exactly - same container, same open/closed rule -
   because it is the same kind of thing in the same menu, and a second
   visual language for it would only be noise. */
.reference-panel { display: none; padding: 10px; margin-top: 6px; border: 1px solid var(--line, #2a2f3a); }
.reference-panel.open { display: block; }
.reference-panel p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.reference-panel .auth-field { margin-bottom: 10px; }
.reference-panel select {
  width: 100%;
  padding: 7px 8px;
  background: var(--panel, #131315);
  color: var(--ink);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 6px;
  font-size: 13px;
}
.ref-list { margin-top: 10px; border-top: 1px solid var(--line, #2a2f3a); padding-top: 8px; }
.ref-list:empty { display: none; }
.ref-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.ref-row + .ref-row { border-top: 1px solid var(--line, #2a2f3a); }
.ref-row .ref-key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--accent-bright, #a78bfa);
  white-space: nowrap;
}
.ref-row .ref-val { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.45; }
/* An icon-only control still needs a name for a screen reader; the button
   carries aria-label and this only hides the glyph from the tree. */
.ref-row .ref-del {
  width: auto;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted-2, #57595e);
  flex: 0 0 auto;
}
.ref-row .ref-del:hover { color: #e0645c; background: none; }
.ref-mode-head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2, #57595e);
  margin: 10px 0 2px;
}
.ref-mode-head:first-child { margin-top: 0; }

/* ============================================================
   Answer rendering and attachments.

   Everything here is appended deliberately: the drop-zone and
   rich-text rules override earlier declarations at equal
   specificity (.input-inner.drag-over vs .input-inner:focus-within,
   .bubble.rich vs .msg .bubble), so position in the cascade is what
   makes them win. Moving this block above the rules it overrides
   silently turns it off.
   ============================================================ */

/* ---- Answer rendering ----
   Varra's contract is two fields, a short headline ("label") and one or
   two sentences of elaboration ("detail"). They used to be joined with an
   em dash into one flat string; keeping them apart lets the headline
   carry the weight and the elaboration read as elaboration. */
.msg .bubble.rich { white-space: normal; }
.msg .bubble.rich .answer-label {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.msg .bubble.rich .answer-detail {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}
/* A one-field answer (no detail) is the whole message, so it should not
   be styled as a headline waiting for a body that never comes. */
.msg .bubble.rich .answer-label:only-child {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
}

/* Inline formatting. Varra's fields are prose, not documents, so this is
   deliberately small: the things that do show up in a sentence — a bold
   figure, a unit or part number in backticks, a link a web search
   returned — and nothing else. */
.msg .bubble.rich strong { font-weight: 600; color: var(--ink); }
.msg .bubble.rich em { font-style: italic; }
.msg .bubble.rich code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--accent-bright);
  white-space: nowrap;
}
.msg .bubble.rich a {
  color: var(--accent-bright);
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-dim);
  overflow-wrap: anywhere;
}
.msg .bubble.rich a:hover { text-decoration-color: var(--accent-bright); }
.msg .bubble.rich ul, .msg .bubble.rich ol { margin: 6px 0 0; padding-left: 20px; }
.msg .bubble.rich li { margin: 2px 0; }

/* Phase two of the wait: text is arriving. The caret marks the edge of
   what has actually been received, so a slow answer reads as being
   written rather than as having stalled. Removed on the done event, and
   on a failed stream, so it can never blink over a finished message. */
.msg .bubble.composing > :last-child::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--accent-bright);
  animation: caret-blink 1.05s infinite;
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* A stored turn that carried an image. The bytes are not replayed from
   history (see _display_parts), so this is a marker, not a thumbnail. */
.attach-marker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

/* An image sent in this session, shown in its own message. */
.msg .sent-image {
  display: block;
  max-width: min(260px, 60vw);
  max-height: 220px;
  width: auto;
  border-radius: 10px 10px 2px 10px;
  border: 1px solid var(--accent-dim);
  margin-bottom: 7px;
  object-fit: cover;
}

/* ---- Attach button ---- */
.attach-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.attach-btn:hover { border-color: var(--accent-dim); color: var(--ink); }
.attach-btn.has-file { border-color: var(--accent); color: var(--accent-bright); }
@media (max-width: 620px) { .attach-btn span.label { display: none; } }

/* ---- Drag states ----
   Two levels on purpose. `drag-armed` is the whole window: a file is
   being dragged somewhere over the page, so the box wakes up and says
   where to aim. `drag-over` is the box itself: full glow, and the copy
   commits to what will happen on release. The difference between "a file
   is in flight" and "you are on target" is the part that makes a drop
   zone feel like it is tracking you. */
.input-inner {
  transition: border-color 0.18s ease, box-shadow 0.22s ease,
              background-color 0.22s ease, transform 0.18s ease;
}
.input-inner.drag-armed {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 26px rgba(109, 40, 217, 0.14);
}
.input-inner.drag-over {
  border-color: var(--accent-bright);
  background: var(--bubble);
  box-shadow: 0 0 0 1px var(--accent-bright), 0 0 30px rgba(167, 139, 250, 0.28),
              0 10px 40px rgba(109, 40, 217, 0.3);
  transform: translateY(-2px);
}
/* The sweep only runs while a file is actually over the target, so it
   reads as a response to the pointer rather than idle decoration. */
.input-inner.drag-over::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(167, 139, 250, 0.16) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: drop-sweep 1.5s linear infinite;
}
.input-inner { position: relative; }
@keyframes drop-sweep {
  from { background-position: 140% 0; }
  to { background-position: -60% 0; }
}

/* Copy shift. The hint line under the box is reused rather than adding an
   overlay, so nothing covers the input and there is no layout jump. */
.input-hint.drop-copy { color: var(--accent-bright); letter-spacing: 0.08em; }
.input-hint.reject-copy { color: #e0645c; }
.input-inner.reject { border-color: #e0645c; box-shadow: 0 0 0 1px #e0645c; animation: reject-shake 0.32s ease; }
@keyframes reject-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---- Attachment chip ---- */
.attach-strip {
  max-width: 720px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}
.attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  background: var(--panel);
  max-width: 100%;
  overflow: hidden;
}
.attach-chip img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  display: block;
}
.attach-chip .chip-text { min-width: 0; }
.attach-chip .chip-name {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.attach-chip .chip-meta {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.attach-chip .chip-remove {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--muted-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.attach-chip .chip-remove:hover { color: #e0645c; background: var(--panel-2); }

/* Resizing a phone photo down under the upload cap takes a beat on a
   slow device. The shimmer says the chip is busy rather than broken. */
.attach-chip.working::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(167, 139, 250, 0.22) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: chip-shimmer 1.1s linear infinite;
}
@keyframes chip-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* background.js already bails out under this; the UI should agree with
   it. State still changes — colour and border carry the same
   information — only the movement stops. */
@media (prefers-reduced-motion: reduce) {
  .input-inner,
  .input-inner.drag-over,
  .input-inner.reject { transition: none; transform: none; animation: none; }
  .input-inner.drag-over::after,
  .attach-chip.working::before { animation: none; }
  .thinking-marks span { animation-duration: 2.4s; }
  .msg .bubble.composing > :last-child::after { animation: none; opacity: 1; }
}