/* ══════════════════════════════════════════════════════════════════════
 * Members area tokens — Reflect-inspired, mirrors colors_and_type.css
 * ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Canvas */
  --bg:            #080808;
  --bg-card:       #0f0f0f;
  --bg-elevated:   #161616;
  --bg-deep:       #050505;

  /* Borders — Reflect-subtle */
  --border:        rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.10);

  /* Text — slightly cool off-white */
  --ink:           #f5f5f7;
  --body:          rgba(245,245,247,0.80);
  --muted:         rgba(245,245,247,0.45);
  --subtle:        rgba(245,245,247,0.25);

  /* In-app primary — GQ violet (only for GQ-branded elements: chat, Ask GQ, logo) */
  --primary:       #D946EF;
  --primary-dim:   rgba(217,70,239,0.12);
  --primary-glow:  rgba(217,70,239,0.20);

  /* CTA — green (primary actions, matches public site) */
  --cta:           #11ff99;
  --cta-dim:       rgba(17,255,153,0.10);
  --cta-glow:      rgba(17,255,153,0.25);

  /* Accent — neutral. Colour is reserved for state, brand and data;
     ambient chrome (tags, tabs, bars, meters) stays monochrome. */
  --accent:        rgba(245,245,247,0.62);
  --accent-dim:    rgba(255,255,255,0.06);

  /* Trading status — desaturated so only real signal reads as colour */
  --green:         #5fd6a0;
  --green-dim:     rgba(95,214,160,0.09);
  --red:           #e08a8a;
  --red-dim:       rgba(224,138,138,0.09);
  --yellow:        #7fb4e0;
  --yellow-dim:    rgba(127,180,224,0.09);
  --orange:        #5fd6a0;

  /* Radii */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* Fonts — aligned to design system */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', Georgia, serif;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1, "ss04" 1, "ss11" 1;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Utility classes ──────────────────────────────────────────────── */
.mono  { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "lnum" 1; }
.display { font-family: var(--font-display); }
.muted { color: var(--muted); }
.green { color: var(--green); }
.red   { color: var(--red); }
.yellow{ color: var(--yellow); }
.primary-color { color: var(--primary); }
.accent-color  { color: var(--accent); }

/* Section tag (Reflect signature) */
.section-tag {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  border-radius: var(--r-full); padding: 8px 16px; cursor: pointer;
  border: none; transition: all 0.15s; white-space: nowrap; text-decoration: none;
  letter-spacing: -0.005em;
}
.btn-primary, a.btn-primary { background: #fcfdff; color: #0a0a0a; }
.btn-primary:hover { background: #f1f7fe; color: #0a0a0a; }
.btn-white   { background: var(--ink); color: #0a0a0a; }
.btn-white:hover { background: #e8e8eb; }
.btn-ghost   { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.btn-danger  { background: transparent; color: var(--red); border: 1px solid rgba(248,113,113,0.25); }
.btn-danger:hover { background: var(--red-dim); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 14px; }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color .2s, transform .2s, background .2s;
}
.card-title {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--ink); margin-bottom: 14px; letter-spacing: -0.012em;
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; border-radius: var(--r-full);
  padding: 3px 10px; border: 1px solid transparent;
  letter-spacing: -0.003em;
}
.badge-green  { color: var(--green);   background: var(--green-dim);   border-color: rgba(17,255,153,0.2); }
.badge-red    { color: var(--red);     background: var(--red-dim);     border-color: rgba(248,113,113,0.2); }
.badge-purple { color: var(--primary); background: var(--primary-dim); border-color: rgba(217,70,239,0.25); }
.badge-amber  { color: var(--accent);  background: var(--accent-dim);  border-color: var(--border-strong); }
.badge-cyan   { color: var(--accent);  background: var(--accent-dim);  border-color: var(--border-strong); }
.badge-muted  { color: var(--muted);   background: rgba(255,255,255,0.04); border-color: var(--border); }

/* Input */
.input {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px 14px;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink); outline: none;
  transition: border-color 0.15s;
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: var(--subtle); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 12px 18px; z-index: 9999;
  font-family: var(--font-ui); box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  animation: toastIn 0.2s ease; min-width: 200px; max-width: 360px;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Selection */
::selection { background: rgba(245,245,247,0.85); color: #0a0a0a; }

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── Chat markdown (assistant replies) — ported from the v1 portal's .gqmd,
   remapped to v2 tokens. Rendered by mcMd() in gqchat.jsx. ─────────────── */
.gqmd{display:flex;flex-direction:column;gap:10px;font:400 16px/1.68 var(--font-body);color:var(--body);letter-spacing:0}
.gqmd>*:first-child{margin-top:0}
.gqmd h2,.gqmd h3,.gqmd h4,.gqmd h5{font-family:var(--font-ui);color:var(--ink);line-height:1.3;margin:4px 0 0;font-weight:600}
.gqmd h2{font-size:17px}
.gqmd h3{font-size:15px}
.gqmd h4,.gqmd h5{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.gqmd p{margin:0}
.gqmd ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;list-style:disc}
.gqmd ul ul{padding-left:16px;margin-top:4px;list-style:circle}
.gqmd li{margin:0;padding-left:2px}
.gqmd strong{color:var(--ink);font-weight:600}
.gqmd em{font-style:italic}
.gqmd code{font:400 13px/1.45 var(--font-mono);background:rgba(255,255,255,0.07);padding:1px 5px;border-radius:5px}
.gqmd hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.gqmd a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.gqmd .gqmd-tablewrap{overflow-x:auto;margin:2px 0;-webkit-overflow-scrolling:touch}
.gqmd table{border-collapse:collapse;width:100%;font-size:13.5px}
.gqmd th,.gqmd td{border-bottom:1px solid var(--border);padding:5px 8px;text-align:left;vertical-align:top}
.gqmd th{color:var(--ink);font-weight:600;white-space:nowrap}
.gqmd tr:last-child td{border-bottom:0}

/* Chat message motion + per-reply copy affordance (Claude-iOS-style polish) */
@keyframes gqMsgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.gq-msg{animation:gqMsgIn .18s ease}
/* Assistant reply action row — copy · retry · rate · share (ChatGPT-style) */
.gq-actions{display:flex;align-items:center;gap:20px;margin-top:12px;color:var(--muted)}
.gq-act{background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;display:inline-flex;opacity:.62;transition:opacity .15s,color .15s}
.gq-act svg{width:17px;height:17px;display:block}
.gq-act:hover{opacity:1;color:var(--body)}
.gq-act.on{color:var(--primary);opacity:1}
.gq-act.ok{color:var(--cta,#5dcaa5);opacity:1}
.gq-act.busy{color:var(--primary);animation:gqPulse 1s ease-in-out infinite}
@keyframes gqPulse{0%,100%{opacity:.35}50%{opacity:1}}
/* Citations — inline [V1]/[1] markers in a reply + the Sources row under it */
.gqmd .gq-cite-m,.gq-sources .gq-cite{font:600 10px/1 var(--font-ui);color:var(--cta,#5dcaa5);background:rgba(17,255,153,0.08);border:1px solid rgba(17,255,153,0.28);border-radius:4px;padding:1px 4px;white-space:nowrap}
.gqmd .gq-cite-m{margin-left:3px;vertical-align:super;font-size:9.5px;line-height:1}
.gq-sources{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.gq-sources-t{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:500 10.5px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gq-sources-t:hover{color:var(--body)}
.gq-sources-chev{display:inline-block;font-size:14px;line-height:1;transform:rotate(0deg);transition:transform .15s}
.gq-sources-chev.open{transform:rotate(90deg)}
.gq-sources-l{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.gq-sources-l li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;line-height:1.4;min-width:0}
.gq-sources .gq-cite{flex:none;padding:2px 5px}
.gq-src-t{color:var(--body);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.gq-src-t:hover{color:var(--ink);text-decoration:underline}
.gq-src-k{flex:none;color:var(--muted);font-size:11px}
/* Live-typing caret at the end of a streaming reply */
.gq-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--primary);border-radius:1px;animation:gqBlink 1.05s steps(1) infinite}
@keyframes gqBlink{50%{opacity:0}}
/* ── Composer (docs/design/CHAT-LAYOUT-v2-plan.md F5) ─────────────────────
   One bordered box: a growing textarea over a control row (＋ · model chips ·
   mic · send), then the trust line + "N models selected" under it. ────── */
.gq-cwrap{padding:10px 12px 12px;flex:none;position:relative}
.gq-composer{display:flex;flex-direction:column;gap:4px;background:#141317;border:1px solid rgba(217,70,239,0.42);border-radius:22px;padding:12px 10px 8px 12px;cursor:text;transition:border-color .15s,box-shadow .15s}
.gq-composer:focus-within{border-color:rgba(217,70,239,0.72);box-shadow:0 0 0 3px var(--primary-glow)}
.gq-composer.rec{border-color:rgba(224,138,138,0.6)}
.gq-cinput{display:block;width:100%;resize:none;background:none;border:0;outline:none;color:var(--ink);font:400 16px/1.45 var(--font-ui);padding:2px 6px 6px;max-height:146px;overflow-y:auto;scrollbar-width:thin}
.gq-cinput::placeholder{color:var(--subtle)}
.gq-crow{display:flex;align-items:center;gap:6px;min-width:0}
.gq-cbtn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,0.05);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:color .15s,background .15s}
.gq-cbtn svg{width:17px;height:17px}
.gq-cbtn:hover{color:var(--ink);background:rgba(255,255,255,0.08)}
.gq-cbtn.rec{color:var(--red);background:var(--red-dim)}
.gq-send{width:36px;height:36px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;background:rgba(255,255,255,0.06);color:var(--muted);transition:background .15s,color .15s,transform .1s}
.gq-send svg{width:17px;height:17px;stroke-width:2.4}
.gq-send.ready{background:var(--primary);color:#0a0a0a}
.gq-send:active{transform:scale(0.94)}
.gq-send:disabled{cursor:default}
/* Model chips — scroll sideways when the roster doesn't fit the 388 px rail */
.gq-chips{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px;margin:-2px 0}
.gq-chips::-webkit-scrollbar{display:none}
.gq-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9999px;background:rgba(255,255,255,0.05);border:1px solid var(--border-strong);color:var(--body);font:500 12.5px/1 var(--font-ui);cursor:pointer;white-space:nowrap;flex:none;scroll-snap-align:start;transition:background .15s,border-color .15s,color .15s}
.gq-chip:hover{border-color:rgba(255,255,255,0.2);color:var(--ink)}
.gq-chip.on{background:var(--primary-dim);border-color:rgba(217,70,239,0.5);color:var(--ink)}
.gq-chip.hint{border-style:dashed;border-color:rgba(217,70,239,0.55)}
.gq-chip-add{width:32px;padding:0;justify-content:center;color:var(--muted)}
.gq-chip-add svg{width:15px;height:15px}
.gq-chip-auto{padding:0;gap:0;overflow:visible}
.gq-chip-auto .gq-chip-main{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 4px 0 10px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:9999px 0 0 9999px}
.gq-chip-auto .gq-chip-chev{display:inline-flex;align-items:center;justify-content:center;height:100%;width:24px;padding:0;background:none;border:0;border-left:1px solid rgba(255,255,255,0.08);color:inherit;cursor:pointer;border-radius:0 9999px 9999px 0;opacity:.8}
.gq-chip-auto .gq-chip-chev svg{width:13px;height:13px}
.gq-chip-auto.on .gq-chip-chev{border-left-color:rgba(217,70,239,0.35)}
.gq-chip-ico{display:inline-flex;color:var(--primary)}
.gq-chip-ico svg{width:14px;height:14px}
.gq-mono{width:16px;height:16px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font:700 9.5px/1 var(--font-ui);color:#0a0a0a;flex:none}
.gq-mono.lg{width:26px;height:26px;border-radius:8px;font-size:13px}
.gq-trust{display:inline-flex;align-items:center;gap:6px;color:var(--subtle);font:400 11px/1.3 var(--font-ui);letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gq-trust-ico{display:inline-flex;flex:none}
.gq-trust-ico svg{width:13px;height:13px}
.gq-cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;min-height:22px;padding:0 4px}
.gq-mcount{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:2px 0;color:var(--muted);font:500 11.5px/1.3 var(--font-ui);cursor:pointer;white-space:nowrap;flex:none}
.gq-mcount:hover{color:var(--ink)}
.gq-mchev{font-size:10px;opacity:.7}
/* Full model menu — opens upward from the Auto chip's ▾ */
.gq-mwrap{position:relative}
.gq-mmenu{position:absolute;left:12px;bottom:calc(100% - 4px);z-index:60;min-width:260px;max-width:min(340px,86vw);max-height:56vh;overflow:auto;background:#161619;border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;cursor:default;text-align:left;white-space:normal}
.gq-mitem{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.gq-mitem:hover{background:rgba(255,255,255,0.05)}
.gq-mitem.on{background:rgba(217,70,239,0.12)}
.gq-mitem-foot{border-top:1px solid var(--border);border-radius:0 0 8px 8px;margin-top:4px}
.gq-mname{font:500 13px/1.3 var(--font-ui)}
.gq-msub{font:400 11px/1.35 var(--font-ui);color:var(--muted)}
/* Sheet (ui.jsx) — scrim + panel; bottom sheet on phone, centred card on desktop */
.gq-sheet-scrim{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:gqFade .18s ease both}
.gq-sheet-scrim.phone{align-items:flex-end;padding:0}
.gq-sheet{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,0.9);max-height:84vh;display:flex;flex-direction:column;outline:none;animation:gqPop .2s cubic-bezier(.22,.9,.3,1) both}
.gq-sheet.phone{width:100%;max-height:88vh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);animation:gqSlideUp .26s cubic-bezier(.22,.9,.3,1) both}
.gq-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.18);margin:8px auto 0}
.gq-sheet-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--border);flex:none}
.gq-sheet-title{font:600 14px/1.2 var(--font-ui);color:var(--ink);flex:1;min-width:0}
.gq-sheet-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(255,255,255,0.03);color:var(--muted);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.gq-sheet-x:hover{color:var(--ink)}
.gq-sheet-body{padding:10px 10px 12px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:2px}
.gq-sheet-lead{font:400 12.5px/1.5 var(--font-ui);color:var(--muted);padding:4px 6px 10px}
/* Sheet rows (checkbox / menu / thread rows) */
.gq-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 8px;min-height:52px;border-radius:10px;background:none;border:0;color:var(--ink);font-family:var(--font-ui);cursor:pointer;transition:background .15s}
.gq-row:hover{background:rgba(255,255,255,0.04)}
.gq-row.on{background:rgba(217,70,239,0.08)}
.gq-row:disabled{opacity:.45;cursor:default}
.gq-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gq-row-t{font:500 13.5px/1.3 var(--font-ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gq-row-s{font:400 11.5px/1.35 var(--font-ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gq-tick{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;color:#0a0a0a;flex:none}
.gq-tick.on{background:var(--primary);border-color:var(--primary)}
.gq-tick svg{width:13px;height:13px;stroke-width:3}
@keyframes gqFade{from{opacity:0}to{opacity:1}}
@keyframes gqPop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
@keyframes gqSlideUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gq-sheet,.gq-sheet.phone,.gq-sheet-scrim{animation:none}}
.gq-via{margin-top:8px;color:var(--subtle);font:400 11px/1.3 var(--font-ui)}
/* ── Coda (docs/design/CHAT-CODA-plan.md): GQ's one-line verdict + next step ── */
.gq-coda{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-top:10px;padding:8px 10px;border-left:2px solid rgba(217,70,239,0.45);background:rgba(217,70,239,0.05);border-radius:0 10px 10px 0;font:400 12.5px/1.45 var(--font-ui);color:var(--muted)}
.gq-coda-mark{flex:none;font:600 10px/1 var(--font-ui);letter-spacing:.08em;color:var(--cta);padding:3px 5px;border:1px solid rgba(217,70,239,0.35);border-radius:6px;transform:translateY(-1px)}
.gq-coda-text{flex:1 1 220px;min-width:0;font-style:italic}
.gq-coda-next{flex:none;appearance:none;border:1px solid var(--border);background:var(--panel,transparent);color:var(--ink);font:500 12px/1 var(--font-ui);padding:6px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.gq-coda-next:hover{border-color:var(--cta);color:var(--cta)}
.gq-coda-next:disabled{cursor:default;opacity:.6}
.gq-coda-next:disabled:hover{border-color:var(--border);color:var(--ink)}
.gq-coda-next.ran{color:var(--muted)}
/* ── Chat home (docs/design/CHAT-LAYOUT-v2-plan.md, PR 1) ──────────────────
   Header with live counts (.gq-head), the greeting hero + quick-action cards
   (.gq-home) shown until the user's first turn, then animated out. ─────── */
.gq-head{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--border);flex:none;min-width:0}
.gq-head-tile{width:38px;height:38px;border-radius:11px;background:var(--primary-dim);border:1px solid rgba(217,70,239,0.35);display:inline-flex;align-items:center;justify-content:center;flex:none}
.gq-head-txt{flex:1;min-width:0}
.gq-head-t{font:600 14px/1.2 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gq-head-s{margin-top:3px;font:400 11.5px/1.2 var(--font-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.gq-head-ib,.gq-head-add{height:34px;border-radius:9999px;background:rgba(255,255,255,0.04);border:1px solid var(--border-strong);color:var(--ink);cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.gq-head-ib{width:34px;padding:0;color:var(--muted)}
.gq-head-add{gap:5px;padding:0 12px 0 10px;font:500 12.5px var(--font-ui);white-space:nowrap}
.gq-head-ib:hover,.gq-head-add:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2);color:var(--ink)}
.gq-head-ib:active,.gq-head-add:active{transform:scale(.96)}
.gq-head-ib svg,.gq-head-add svg{width:16px;height:16px;display:block}
.gq-home{display:flex;flex-direction:column;gap:18px;padding:6px 0 2px;animation:gqHomeIn .32s cubic-bezier(.22,.9,.3,1) both}
.gq-home.out{animation:gqHomeOut .22s cubic-bezier(.22,.9,.3,1) both;pointer-events:none}
/* Typing on a touch device (iPad / phone web): clear the home so the composer owns a
   clean screen, like the native iPhone chat. Desktop keeps the home — no keyboard covers it.
   animation:none because gqHomeIn's fill-mode would pin opacity at 1; it replays on blur. */
.gq-home{transition:opacity .18s ease-out}
@media (pointer:coarse){.gq-home.composing{animation:none;opacity:0;pointer-events:none}}
@keyframes gqHomeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gqHomeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
.gq-hero h2{margin:0;font:700 26px/1.15 var(--font-ui);letter-spacing:-0.025em;color:var(--ink);text-wrap:balance}
.gq-hero p{margin:8px 0 0;font:400 15px/1.5 var(--font-ui);color:var(--muted);text-wrap:pretty}
.gq-home{container-type:inline-size}
.gq-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container (min-width:680px){.gq-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gq-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px;min-height:44px;border-radius:14px;cursor:pointer;color:var(--ink);font-family:var(--font-ui);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;transition:border-color .18s,background .18s,transform .12s}
.gq-card:hover{border-color:rgba(217,70,239,0.35);background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03))}
.gq-card:active{transform:scale(.98)}
.gq-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.gq-card-ico{width:44px;height:44px;border-radius:50%;background:var(--primary-dim);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;margin-bottom:9px}
.gq-card-ico svg{width:20px;height:20px}
.gq-card-t{font-size:15px;font-weight:600;letter-spacing:-0.01em;line-height:1.25}
.gq-card-s{font-size:12.5px;line-height:1.4;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.gq-home,.gq-home.out{animation:none}.gq-head-ib:active,.gq-head-add:active,.gq-card:active{transform:none}}
/* ── Continue where you left off (plan F4) — recent threads on the chat home,
   the same rows in the "Your conversations" sheet ───────────────────────── */
.gq-cont{display:flex;flex-direction:column;gap:8px}
.gq-cont-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.gq-cont-t{font:600 14px/1.3 var(--font-ui);color:var(--ink)}
.gq-cont-all{display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:4px 0;color:var(--primary);font:500 12.5px/1 var(--font-ui);cursor:pointer}
.gq-cont-all svg{width:14px;height:14px}
.gq-cont-l{display:flex;flex-direction:column;gap:8px}
.gq-trow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;min-height:60px;border-radius:14px;cursor:pointer;color:var(--ink);font-family:var(--font-ui);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);transition:border-color .18s,background .18s,transform .12s}
.gq-trow:hover{border-color:rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.025))}
.gq-trow:active{transform:scale(.99)}
.gq-trow:disabled{cursor:default}
.gq-trow.busy{opacity:.6}
.gq-trow-ico{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--body);display:inline-flex;align-items:center;justify-content:center;flex:none}
.gq-trow-ico svg{width:18px;height:18px}
.gq-trow-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gq-trow-t{font:600 14px/1.3 var(--font-ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gq-trow-s{font:400 12px/1.3 var(--font-ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gq-trow-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:7px;vertical-align:middle;position:relative;top:-1px}
.gq-trow-dot.off{background:var(--muted)}
.gq-trow-ago{font:400 12px/1 var(--font-ui);color:var(--muted);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.gq-trow-chev{display:inline-flex;color:var(--muted);flex:none}
.gq-trow-chev svg{width:16px;height:16px}
/* Chat-history row: ⋮ options button overlaid at the right (hover-revealed on
   desktop, always faintly visible so it's discoverable on touch). */
.gq-trow-wrap{position:relative}
.gq-trow-wrap .gq-trow{padding-right:40px}
.gq-trow-more{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;opacity:.5;transition:opacity .15s,background .15s,color .15s;z-index:2}
.gq-trow-wrap:hover .gq-trow-more,.gq-trow-more.open,.gq-trow-more:focus-visible{opacity:1}
.gq-trow-more:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.gq-trow-more:disabled{opacity:.25;cursor:default}
.gq-trow-more svg{width:18px;height:18px}
.gq-sheet .gq-trow{background:none;border-color:transparent;min-height:56px;border-radius:10px}
.gq-sheet .gq-trow:hover{background:rgba(255,255,255,0.04)}
.gq-search{width:100%;margin:2px 0 8px;background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;font:400 15px var(--font-ui);color:var(--ink);outline:none}
.gq-search:focus{border-color:rgba(217,70,239,0.5)}
.gq-search::placeholder{color:var(--subtle)}
@media (prefers-reduced-motion:reduce){.gq-trow:active{transform:none}}
/* ── Add menu + Settings sheet (plan F6/F7) ──────────────────────────── */
.gq-head-chev{display:inline-flex;margin-left:-2px;opacity:.7}
.gq-head-chev svg{width:13px;height:13px}
.gq-set{display:flex;flex-direction:column;gap:4px;padding:6px 4px 12px;border-bottom:1px solid var(--border)}
.gq-set:last-child{border-bottom:0;padding-bottom:4px}
.gq-set-h{display:flex;align-items:center;gap:8px;font:600 11px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 4px 6px}
.gq-set-n{font:500 11px/1 var(--font-mono);color:var(--subtle);letter-spacing:0;text-transform:none}
.gq-set-note{font:400 12px/1.5 var(--font-ui);color:var(--subtle);padding:2px 4px}
.gq-field{display:flex;flex-direction:column;gap:6px;padding:2px 4px}
.gq-field-l{font:400 12.5px/1.3 var(--font-ui);color:var(--body)}
.gq-select,.gq-input{width:100%;min-height:44px;background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:10px;padding:9px 12px;font:400 15px var(--font-ui);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.gq-select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.gq-select:focus,.gq-input:focus{border-color:rgba(217,70,239,0.5)}
.gq-input::placeholder{color:var(--subtle)}
.gq-set-acct{display:flex;align-items:center;gap:12px;padding:6px 8px}
.gq-dot{width:8px;height:8px;border-radius:50%;background:var(--subtle);flex:none}
.gq-dot.on{background:var(--cta);box-shadow:0 0 8px var(--cta-glow)}
/* ── Conversation polish (plan F8) ─────────────────────────────────────── */
.gq-panel{position:relative}
.gq-list{scroll-behavior:auto;overscroll-behavior:contain}
.gq-typing{align-self:flex-start;display:flex;gap:6px;align-items:center;padding:6px 2px;color:var(--muted)}
.gq-thinking{margin-left:6px;font-size:13px;color:var(--muted);letter-spacing:.01em;animation:gqBlink 1.4s ease-in-out infinite}
.gq-newpill{position:absolute;left:50%;transform:translateX(-50%);bottom:132px;z-index:5;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 14px 0 10px;border-radius:9999px;background:var(--bg-elevated);border:1px solid rgba(217,70,239,0.45);color:var(--ink);font:500 12.5px/1 var(--font-ui);cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.9);animation:gqPop .2s cubic-bezier(.22,.9,.3,1) both}
.gq-newpill svg{width:14px;height:14px;color:var(--primary)}
@media (prefers-reduced-motion:reduce){.gq-newpill{animation:none}}

/* ── Chat attachments (docs/design/INGEST-UX.md) ──────────────────────── */
.gq-att { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gq-att-img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-strong); flex: none; background: var(--bg-deep); }
.gq-att-ico { width: 40px; height: 40px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong); }
.gq-att-body { min-width: 0; }
.gq-att-name { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.gq-att-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gq-att-meta a { color: var(--primary); text-decoration: none; }
.gq-att-meta a:hover { text-decoration: underline; }

/* ── Briefs list rows (briefs.jsx BriefsPanel) — the shared desktop layout. The
   phone variant (two-line title, tag under the meta, ⋮ sheet) lives in
   mark-dash/mobile.css and only paints at phone widths. ──────────────────── */
.gqb-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--border);cursor:pointer;min-width:0}
.gqb-row:hover{background:rgba(255,255,255,0.02)}
.gqb-ico{flex:none}
.gqb-main{min-width:0;flex:1}
.gqb-t{font-size:13px;color:var(--ink);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gqb-m{font-size:11px;color:var(--subtle);margin-top:3px;line-height:1.4}
.gqb-tag{display:none}
.gqb-acts{display:flex;align-items:center;gap:8px;flex:none}
.gqb-badge{flex:none}
.gqb-more{display:none}

/* ── Tool checklist + Talk Mode (docs/design/VOICE-CONVERSATION-plan.md) ── */
.gq-steps{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin:2px 0 -2px}
.gq-steps-h{letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;opacity:.8;margin-right:2px}
.gq-step{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);color:var(--muted)}
.gq-step-m{width:11px;height:11px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;border:1.5px solid currentColor;border-top-color:transparent;animation:gqSpin .8s linear infinite}
.gq-step.done{color:var(--body)}
.gq-step.done .gq-step-m{border:0;animation:none;color:var(--green,#34d399);font-size:11px}
@keyframes gqSpin{to{transform:rotate(360deg)}}
.gq-cbtn:disabled{opacity:.35;cursor:default}
.gq-talkbtn.on{color:#fff;background:var(--accent,#d946ef)}
.gq-talk{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 8px;border-radius:18px;background:rgba(217,70,239,0.08);border:1px solid rgba(217,70,239,0.22)}
.gq-orb{position:relative;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;color:#fff}
.gq-orb-ring{position:absolute;inset:4px;border-radius:50%;background:rgba(217,70,239,0.28);transition:transform .08s linear}
.gq-orb-core{position:absolute;inset:8px;border-radius:50%;background:var(--accent,#d946ef);display:flex;align-items:center;justify-content:center}
.gq-orb-core svg{width:15px;height:15px}
.gq-talk.thinking .gq-orb-ring{animation:gqBlink 1.2s ease-in-out infinite}
.gq-talk.speaking .gq-orb-ring{animation:gqPulse 1.1s ease-in-out infinite}
@keyframes gqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.gq-talk-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.gq-talk-h{font-size:14px;color:var(--ink)}
.gq-talk-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gq-talk-end{border:1px solid rgba(255,255,255,0.14);background:transparent;color:var(--body);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.gq-talk-end:hover{background:rgba(255,255,255,0.06);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.gq-orb-ring,.gq-step-m{animation:none!important;transition:none}}

/* ── Scheduled: GQ Alerts card + editor (gqchat.jsx AlertsCard / AlertSheet) ── */
.gq-sched{align-self:stretch;max-width:520px;border:1px solid var(--border-strong,rgba(255,255,255,.1));border-radius:20px;overflow:hidden;background:rgba(255,255,255,0.02)}
.gq-sched-h{display:flex;align-items:center;gap:9px;padding:13px 16px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border,rgba(255,255,255,.06))}
.gq-sched-ico svg{width:16px;height:16px;display:block}
.gq-sched-n{margin-left:auto;font-size:11px;letter-spacing:0;color:var(--muted)}
.gq-sched-row{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;background:transparent;border:0;border-top:1px solid var(--border,rgba(255,255,255,.06));color:inherit;text-align:left;cursor:pointer;font:inherit}
.gq-sched-h + .gq-sched-row{border-top:0}
.gq-sched-row:hover{background:rgba(255,255,255,0.03)}
.gq-sched-t{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.gq-sched-title{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gq-sched-sub{font-size:13px;color:var(--muted)}
.gq-sched-row.off .gq-sched-title{color:var(--muted)}
.gq-sched-empty{padding:14px 16px;font-size:13.5px;color:var(--muted)}
.gq-af{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.gq-af-in{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.03);border:1px solid var(--border-strong,rgba(255,255,255,.1));border-radius:16px;padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;outline:none}
.gq-af-in:focus{border-color:rgba(217,70,239,.45)}
.gq-af-ta{resize:vertical;line-height:1.5;min-height:110px}
.gq-af-group{border:1px solid var(--border-strong,rgba(255,255,255,.1));border-radius:16px;overflow:hidden}
.gq-af-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;font-size:15px;color:var(--ink)}
.gq-af-row + .gq-af-row{border-top:1px solid var(--border,rgba(255,255,255,.06))}
.gq-af-row select,.gq-af-row input{background:transparent;border:0;color:var(--muted);font:inherit;font-size:15px;text-align:right;outline:none;color-scheme:dark;max-width:62%}
.gq-af-end{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.gq-af-end input{max-width:none}
.gq-af-never{font-size:15px}
.gq-af-clear{background:transparent;border:0;color:var(--primary,#d946ef);font:inherit;font-size:13px;cursor:pointer;padding:0}
.gq-af-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.gq-af-err{margin:0;font-size:13px;color:var(--red,#f87171)}
.gq-af-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:2px}
.gq-af-btn{border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--body);border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer}
.gq-af-btn:hover{background:rgba(255,255,255,0.05);color:var(--ink)}
.gq-af-btn:disabled{opacity:.45;cursor:default}
.gq-af-btn.primary{background:var(--primary,#d946ef);border-color:transparent;color:#0a0a0a;font-weight:600;margin-left:auto}
.gq-af-btn.danger{color:var(--red,#f87171)}