/* OgmaLane brand tokens (fixed) */
:root {
  --navy: #243B55;
  --navy-deep: #16273C;
  --navy-deeper: #0F1C2E;
  --persimmon: #FB923C;
  --persimmon-dark: #EA7A1F;
  --gray: #E2E8F0;
  --ink: #1E293B;
  --ink-soft: #55657A;
  --card: #FFFFFF;
  --line: #D4DCE7;
  --ok: #34D399;
  --warn: #F59E0B;
  --err: #EF4444;
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--gray); }
h1, h2, h3 { font-family: var(--font-head); margin: 0; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.hidden { display: none !important; }

/* ---------------- login ---------------- */
.login-screen {
  position: fixed; inset: 0; background: radial-gradient(ellipse at 30% 20%, #2C4767 0%, var(--navy-deep) 60%);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.login-card { background: var(--navy-deeper); border: 1px solid #2E4560; border-radius: 12px; padding: 40px 44px; width: 400px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.login-logo { display: flex; gap: 16px; align-items: center; margin-bottom: 30px; }
.login-brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: #7E93AC; }
.login-card h1 { color: #fff; font-size: 26px; }
.login-sub { color: #7E93AC; font-size: 13px; }
.login-card label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #7E93AC; margin: 16px 0 6px; text-transform: uppercase; }
.login-card input { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid #33506F; background: #182A40; color: #EDF2F8; font-size: 15px; font-family: var(--font-body); }
.login-card input:focus { outline: none; border-color: var(--persimmon); }
.login-error { margin-top: 14px; color: #FCA5A5; font-size: 13px; }
.login-card .btn-primary { margin-top: 24px; }

/* ---------------- layout ---------------- */
/* Adapt down to a floor, then stop: below min-width the shell keeps its size
   and the page scrolls horizontally (native, no JS) instead of squeezing the
   fixed 250px sidebar into the content. See docs/DECISIONS.md §7. */
.app { display: flex; height: 100vh; min-width: 960px; }
/* Subspace routes add the Inbox⇄Workspace switcher to the topbar; give the shell a
   higher floor so it stops shrinking (page scrolls) before the switcher can overlap
   the AI badge on the right. */
.app.subspace { min-width: 1140px; }
.sidebar { width: 250px; flex-shrink: 0; color: var(--gray); display: flex; flex-direction: column;
  /* §26 — subtle grid texture over the navy, matching the sibling Ogma app */
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 26px 26px; }
.sidebar-head { display: flex; gap: 12px; align-items: center; padding: 22px 20px 18px; border-bottom: 1px solid #24384F; }
.sidebar-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; font-weight: 600; }
.sidebar-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: #6E86A1; margin-top: 3px; }
#nav { padding: 14px 0; flex-grow: 0; }
#nav a { display: flex; align-items: center; gap: 10px; padding: 11px 20px; color: #A9BBD0; text-decoration: none; font-family: var(--font-head); font-size: 14.5px; font-weight: 500; border-left: 3px solid transparent; }
#nav a:hover { color: #fff; background: rgba(255,255,255,.03); }
#nav a.active { color: #fff; border-left-color: var(--persimmon); background: rgba(251,146,60,.08); }
#nav a.active .nav-dot { background: var(--persimmon); box-shadow: 0 0 8px rgba(251,146,60,.8); }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #56708D; flex-shrink: 0; }
.nav-status { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--persimmon); }
.sidebar-engine { margin-top: auto; padding: 18px 20px; border-top: 1px solid #24384F; }
.engine-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: #6E86A1; margin-bottom: 10px; }
.engine-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: #8CA2BC; padding: 3px 0; }
.engine-row .mono { color: var(--gray); font-size: 10px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-row .mode-mock { color: var(--warn); }
.engine-row .mode-live { color: var(--ok); }
.sidebar-foot { padding: 14px 20px; border-top: 1px solid #24384F; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #8CA2BC; }
.link-btn { background: none; border: none; color: var(--persimmon); font-family: var(--font-mono); font-size: 11px; cursor: pointer; padding: 0; }

/* min-width: 0 lets this flex item shrink below its content's min-content
   width (flex items default to min-width:auto). Without it, wide unbreakable
   content pushes .main past the available space and overflows the shell even
   above the min-width floor — the other half of the §7 squeeze. */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 30px; display: flex; justify-content: space-between; align-items: center; }
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.topbar-back:hover { border-color: var(--persimmon); color: var(--persimmon-dark); background: #FFF7F0; }
.topbar-back:active { transform: translateY(1px); }
.topbar-back svg { display: block; }
.topbar h1 { font-size: 22px; }
.page-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; padding: 5px 12px; border-radius: 20px; }
.badge.live { background: #D8F5E7; color: #0B7A4B; }
.badge.mock { background: #FEF0DC; color: #B45309; }
/* §26 — maker's mark (OgmaLane), always visible top-right, just left of the AI badge */
.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ogmalane-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); }
.ogmalane-mark svg { display: block; }
.ogmalane-word { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .005em; }
.content { flex: 1; overflow-y: auto; padding: 26px 30px 60px; }

/* ---------------- shared components ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.card-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: 14px; text-transform: uppercase; }
.card-kicker .k-status { float: right; color: var(--persimmon); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.stat .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-soft); text-transform: uppercase; }
.stat .stat-value { font-family: var(--font-head); font-size: 30px; font-weight: 700; margin-top: 4px; }
.stat .stat-value.accent { color: var(--persimmon-dark); }
.stat .stat-value.red { color: var(--err); }
.stat .stat-sub { font-size: 11.5px; color: var(--ink-soft); }

.btn-primary { background: var(--persimmon); color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .06em; cursor: pointer; }
.btn-primary:hover { background: var(--persimmon-dark); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px; font-family: var(--font-head); font-weight: 500; font-size: 13.5px; cursor: pointer; }
.btn-secondary:hover { border-color: var(--navy); }
.btn-ghost { background: transparent; color: var(--persimmon); border: 1px solid rgba(251,146,60,.5); border-radius: 8px; padding: 9px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; cursor: pointer; }
.btn-ghost:hover { background: rgba(251,146,60,.12); }
.btn-block { width: 100%; }
.btn-danger { background: none; border: 1px solid var(--line); color: var(--err); border-radius: 8px; padding: 7px 12px; font-family: var(--font-head); font-weight: 500; font-size: 12.5px; cursor: pointer; }

input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff;
}
input:focus, textarea:focus { outline: none; border-color: var(--persimmon); }
/* Match the app's persimmon accent instead of the browser-default blue calendar glyph. */
input[type=date] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.search-input { width: 100%; padding: 13px 16px; font-size: 15px; }

table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 10px; border-bottom: 1px solid #EDF1F7; font-size: 14px; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover td { background: #F6F8FB; }
/* §29 — long lists scroll inside their own card. The card kicker sits outside
   this container so it stays put; where the list is a table, the column header
   row is made sticky so you keep the labels while scrolling.
   §37 — de-scoped from #client-list so Inbox Triage reuses this exact rule
   rather than growing a second, near-identical one. */
.scroll-list { max-height: 58vh; overflow-y: auto; }
#client-list.scroll-list table.data th { position: sticky; top: 0; z-index: 1; background: var(--card);
  border-bottom: none; box-shadow: inset 0 -1px 0 var(--line); }

.terminal { background: var(--navy-deeper); border-radius: 10px; padding: 16px 18px; font-family: var(--font-mono); font-size: 11.5px; color: #9FB6CE; max-height: 260px; overflow-y: auto; }
.terminal .t-head { color: #E2E8F0; letter-spacing: .16em; font-size: 10px; margin-bottom: 10px; }
.terminal .t-line { padding: 1.5px 0; white-space: pre-wrap; word-break: break-word; }
.terminal .t-ts { color: #56708D; margin-right: 8px; }

.tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; border-radius: 4px; padding: 2px 7px; }
.tag.in { background: #DBEAFE; color: #1D4ED8; }
.tag.out { background: #E2E8F0; color: #47586E; }
.tag.noise { background: #FEE2E2; color: #B91C1C; }
.tag.conf-high { background: #D8F5E7; color: #0B7A4B; }
.tag.conf-mid { background: #FEF0DC; color: #B45309; }

/* minmax(0,1fr) — not 1fr — so a column can shrink below its content's
   min-content width; otherwise a card with long unbreakable lines (the email
   timeline) blows its track out and starves the other card into a narrow
   sliver. This is the actual cause of the "synthesis card squeezed" look (§7). */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Grid items also default to min-width:auto — keep them from overflowing their
   track when they contain long unbreakable lines (email snippets ellipsis-clip). */
.two-col > * { min-width: 0; }
/* Stack to one column before the columns get squeezed narrow (§7): with the
   250px sidebar + content padding, two comfortable columns need a wide shell.
   Keep minmax(0,…) here too so the stacked column can shrink to fit. */
@media (max-width: 1200px) { .two-col { grid-template-columns: minmax(0, 1fr); } }


.md { line-height: 1.55; font-size: 14.5px; }
.md h1, .md h2, .md h3 { margin: 14px 0 6px; font-size: 16px; }
.md ul { margin: 6px 0; padding-left: 22px; }
.md blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding: 2px 12px; color: var(--ink-soft); }
.md code { font-family: var(--font-mono); font-size: 12.5px; background: #F1F5F9; padding: 1px 5px; border-radius: 4px; }
.md .cite { color: var(--persimmon-dark); font-weight: 600; cursor: default; }

.suggestion-banner { border: 1px solid #FCD9B6; background: #FFF7ED; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; }
.suggestion-banner .s-title { font-family: var(--font-head); font-weight: 600; color: #9A3412; margin-bottom: 4px; }
.suggestion-banner .s-actions { margin-top: 10px; display: flex; gap: 10px; }

.msg-item { padding: 12px 4px; border-bottom: 1px solid #EDF1F7; cursor: pointer; }
.msg-item:hover { background: #F6F8FB; }
.msg-item .m-top { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.msg-item .m-subject { font-weight: 600; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item .m-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }
.msg-item .m-snippet { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item.selected { background: #FFF3E6; }
/* §32 — unread mirrors the mailbox's \Seen flag (display only, never written back) */
.msg-item.unread .m-subject { font-weight: 700; color: var(--navy-deep); }
.unread-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--persimmon); align-self: center; }

.inbox-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .inbox-grid { grid-template-columns: 1fr; } }
.inbox-search { display: flex; gap: 8px; margin-bottom: 10px; }
.inbox-search .search-input { flex: 1; padding: 10px 13px; font-size: 14px; }
.inbox-search button { flex-shrink: 0; }
.inbox-ai-toggle { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--ink); margin-bottom: 14px; cursor: pointer; }
.inbox-ai-hint { color: var(--ink-soft); font-size: 12px; }
/* §37 — the unread-first toggle sits beside AI Advanced Search, same control
   language. Disabled (greyed) while a query is active: sorting applies to the
   browse queue, and search results are a ranked set. */
.inbox-toggles { display: flex; gap: 26px; flex-wrap: wrap; }
.inbox-toggles .inbox-ai-toggle.is-disabled { opacity: .45; cursor: default; }
/* §37 — #inbox-list's scroll behaviour comes from .scroll-list, added only past
   the 25-row threshold, so a short inbox renders inline like a short client list.
   Its *height* differs from the Clients list on purpose: Inbox Triage is the only
   card on its page, so the queue fills the viewport instead of taking 58vh, and
   bigger screens simply show more rows with no breakpoints to maintain. 290px is
   the measured chrome above it (list starts 245px down) plus the card's own
   padding; max() keeps a usable queue on a short window. The vh line is a
   fallback for browsers without dvh. */
#inbox-list.scroll-list { max-height: max(320px, calc(100vh - 290px));
                          max-height: max(320px, calc(100dvh - 290px)); }

.email-view { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #FAFBFD; margin-bottom: 16px; }
.email-view .e-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.7; }
.email-view .e-body { white-space: pre-wrap; font-size: 14px; max-height: 300px; overflow-y: auto; }

.draft-area { width: 100%; min-height: 260px; font-size: 14px; line-height: 1.5; resize: vertical; }
.draft-notes { background: #F8FAFC; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); margin: 12px 0; }
.draft-notes > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; user-select: none; }
.draft-notes > summary::-webkit-details-marker { display: none; }
.draft-notes > summary::before { content: "▸ "; color: var(--persimmon-dark); }
.draft-notes[open] > summary::before { content: "▾ "; }
.draft-notes-body { margin-top: 8px; line-height: 1.5; }
.source-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.source-card:hover { border-color: var(--persimmon); }
.source-card .s-label { font-weight: 600; }
.source-card .s-excerpt { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
.source-card .s-n { font-family: var(--font-mono); color: var(--persimmon-dark); margin-right: 6px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(15,28,46,.55); display: flex; align-items: center; justify-content: center; z-index: 40; }
.modal { background: #fff; border-radius: 12px; width: min(760px, 92vw); max-height: 86vh; overflow-y: auto; padding: 26px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal h2 { margin-bottom: 4px; font-size: 18px; }
.modal .modal-close { float: right; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-soft); }

.toast { position: fixed; bottom: 26px; right: 26px; background: var(--navy-deeper); color: #fff; padding: 13px 20px; border-radius: 10px; font-size: 14px; z-index: 60; box-shadow: 0 12px 32px rgba(0,0,0,.3); border-left: 4px solid var(--persimmon); max-width: 420px; }
.toast.error { border-left-color: var(--err); }

.empty { color: var(--ink-soft); font-size: 14px; padding: 24px 0; text-align: center; }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 8px; }
.spinner.dark { border-color: rgba(36,59,85,.25); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 5px; }
.form-grid input { width: 100%; }
/* full-width cell inside the 2-col grid (e.g. the signature block) */
.form-grid .form-wide { grid-column: 1 / -1; }
.form-grid textarea { width: 100%; display: block; resize: vertical;
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ai-maint { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-grid select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; font-family: var(--font-body); font-size: 14px; }
.model-hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }

/* ---------------- meters (§35) ----------------
   One bar shared by the knowledge-base context budget and the mail-sync
   progress. Segments are laid out with flex so several can stack inside the
   same track (KB used + space reserved for everything else). */
.meter { display: flex; height: 9px; border-radius: 999px; background: #EDF1F7;
  border: 1px solid var(--line); overflow: hidden; }
.meter > div { height: 100%; transition: width .45s ease; }
.meter-fill { background: var(--ok); }
.meter.warn .meter-fill { background: var(--warn); }
.meter.danger .meter-fill { background: var(--err); }
.meter.busy .meter-fill { background: var(--persimmon); }
/* the slice that must stay free for retrieved emails, history and the answer */
.meter-reserve { background-image: repeating-linear-gradient(45deg,
  #C3D0E2 0 3px, #E8EEF6 3px 6px); }
/* before a sync knows its own size, the bar says so instead of showing 0% */
.meter.indeterminate { background-image: repeating-linear-gradient(45deg,
  #FBD3AE 0 8px, #EDF1F7 8px 16px); background-size: 200% 100%;
  animation: meter-slide 1.1s linear infinite; }
@keyframes meter-slide { to { background-position: -32px 0; } }

.meter-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 7px; }
.meter-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--ink-soft); text-transform: uppercase; }
.meter-value { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.meter-value.warn { color: #B45309; }
.meter-value.danger { color: var(--err); }
.meter-foot { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.meter-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: 12px; color: var(--ink-soft); }
.meter-legend span { display: inline-flex; align-items: center; gap: 6px; }
.meter-swatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }

/* knowledge-base context budget — sits under the re-sync row on Sources */
.kb-budget { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.kb-budget.danger .meter-title { color: var(--err); }

/* mail sync progress — sits under the Sync mail controls in Settings */
.sync-progress { margin-top: 14px; }
.sync-progress .meter-foot { font-family: var(--font-mono); font-size: 11.5px; }
.sync-idle { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.sync-idle.failed { color: var(--err); }

/* ---------------- chat ---------------- */
.chat-modelbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-modelbar .chat-model-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-soft); }
.chat-modelbar select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fff; font-family: var(--font-body); font-size: 13.5px; }
.chat-modelbar .chat-model-hint { flex: 1 1 220px; min-width: 180px; font-size: 12px; color: var(--ink-soft); }

.chat-thread { height: min(58vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 4px; }
.chat-empty { margin: auto; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.6; max-width: 460px; }

.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-msg.chat-user { align-self: flex-end; align-items: flex-end; }
.chat-msg.chat-assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble { border-radius: 14px; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; }
.chat-user .chat-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.chat-assistant .chat-bubble { background: #F4F7FB; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-assistant .chat-bubble .md { font-size: 14.5px; }
.chat-msg-model { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-soft); margin-top: 4px; padding-left: 4px; }
.chat-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px; }
.chat-error { color: var(--err); font-size: 14px; }

.chat-sources { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.chat-sources > summary { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--persimmon-dark); text-transform: uppercase; list-style: none; }
.chat-sources > summary::-webkit-details-marker { display: none; }
.chat-sources > summary::before { content: "▸ "; }
.chat-sources[open] > summary::before { content: "▾ "; }
.chat-sources .source-card { margin-top: 8px; background: #fff; }

.chat-inputbar { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.chat-inputbar textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; max-height: 160px; }
.chat-inputbar button { flex: 0 0 auto; }

/* ---------------- client workspace (§21/§22) ---------------- */
.workspace-body { display: flex; gap: 20px; align-items: flex-start; }
.workspace-main { flex: 1; min-width: 0; }         /* min-width:0 so long email lines don't blow out the row */
.workspace-aside { width: 430px; flex-shrink: 0; position: sticky; top: 0; }
.workspace-aside.collapsed { width: 48px; }
.workspace-aside.collapsed .asst { display: none; }
.workspace-aside:not(.collapsed) .asst-reopen { display: none; }
.asst { margin-bottom: 0; }
.asst-toggle { float: right; background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; margin-top: -2px; }
.asst-toggle:hover { color: var(--persimmon-dark); }
.asst-hint { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.45; }
.asst-hint-keys { color: var(--ink-soft); opacity: .8; }
.asst-thread { height: min(58vh, 580px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.asst-inputbar { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.asst-inputbar textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; max-height: 140px; }
.asst-inputbar button { flex: 0 0 auto; padding: 10px 16px; }
.asst-apply { margin-top: 10px; }
.asst-apply-btn { font-size: 12.5px; padding: 7px 12px; }
.asst-reopen { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 48px; padding: 14px 0; background: var(--navy-deep); color: #fff; border: none; border-radius: 10px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }
.asst-reopen span { writing-mode: vertical-rl; }
.asst-reopen:hover { background: var(--navy); }

/* inline email+draft workbench inside a timeline entry */
.tl-entry { border-bottom: 1px solid #EDF1F7; }
.tl-entry .msg-item { border-bottom: none; }
.tl-workbench { padding: 4px 4px 16px; }

/* reply block — draft with Copy right next to Regenerate (§23) */
/* §25 — target indicator on each reply workbench: a click-to-claim label that
   turns solid green when this is the email the assistant is answering. */
.wb-target-flag { display: block; width: 100%; text-align: left; border: 1px dashed var(--line); background: transparent; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-soft); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.wb-target-flag:hover { border-color: #9BE3C0; color: var(--ink); }
.wb-target-flag .wb-flag-on { display: none; }
.wb-target-flag .wb-flag-off { display: inline; }
.wb-active > .wb-target-flag { border-style: solid; border-color: #9BE3C0; background: #D8F5E7; color: #0B7A4B; cursor: default; }
.wb-active > .wb-target-flag .wb-flag-on { display: inline; }
.wb-active > .wb-target-flag .wb-flag-off { display: none; }
/* the active workbench container also gets a left accent so it reads at a glance */
.wb-active { border-left: 3px solid #16A06A; padding-left: 12px; border-radius: 2px; }

/* assistant panel: live line showing the current target email */
.asst-target { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); padding: 2px 0 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.asst-target strong { font-family: var(--font-body); color: var(--ink); }
.asst-target-dot { color: #16A06A; }
.asst-target-dot.off { color: var(--warn); }

.reply-block { margin-top: 14px; }
.reply-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.reply-meta { color: var(--ink-soft); font-size: 11px; }
.reply-foot { margin-top: 8px; color: var(--ink-soft); }
.reply-block .draft-area { min-height: 220px; }
.reply-block.reply-sent { color: var(--ink-soft); font-size: 12px; padding: 4px 2px; }

/* "Grounded on" citations as compact chips (ChatGPT-style) instead of full cards */
.cite-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.cite-chips-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); text-transform: uppercase; margin-right: 2px; }
.cite-chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); background: #F6F8FB; color: var(--ink); border-radius: 999px; padding: 3px 11px; font-family: var(--font-body); font-size: 12px; cursor: pointer; }
.cite-chip:hover { border-color: var(--persimmon); background: #FFF7F0; color: var(--persimmon-dark); }
.cite-chip-count { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--persimmon-dark); }

/* Precedent evidence chips (§24) — same shape, navy accent to read as "evidence" */
.prec-chip { background: #F0F4FA; border-color: #C9D6E8; color: var(--navy); }
.prec-chip:hover { border-color: var(--navy); background: #E7EEF8; color: var(--navy); }
.asst-draft-note { margin-top: 8px; font-size: 12.5px; color: var(--persimmon-dark); font-weight: 600; }
.asst-draft-fallback { margin-top: 8px; padding: 10px 12px; background: #F8FAFC; border: 1px dashed var(--line); border-radius: 8px; font-size: 12.5px; white-space: pre-wrap; font-family: var(--font-body); }

/* subspace switcher in the topbar — Inbox Triage ⇄ Client Workspace (§23) */
/* In a subspace the heading keeps a fixed width (constant sub-title, no shrink) and the
   back button reserves its slot, so the switcher's frame never moves — only the pill does. */
.topbar-left.subspace #page-heading { flex: 0 0 auto; }
.topbar-left.subspace #page-sub { white-space: nowrap; }
.subspace-switch { display: inline-flex; gap: 2px; padding: 3px; background: #EEF2F7; border: 1px solid var(--line); border-radius: 10px; }
.subspace-switch button { border: none; background: none; padding: 6px 13px; border-radius: 8px; font-family: var(--font-head); font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.subspace-switch button:hover { color: var(--ink); }
.subspace-switch button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(15,28,46,.12); }

@media (max-width: 1200px) {
  .workspace-body { flex-direction: column; }
  .workspace-aside, .workspace-aside.collapsed { width: 100%; position: static; }
  .workspace-aside.collapsed .asst { display: block; }   /* stacked: no point collapsing */
  .workspace-aside .asst-reopen { display: none; }
}