/* ── Legacy variable aliases (tokens.css owns the source values) ─────
   Existing class names use these legacy var names; we re-alias them onto
   the design-v2 tokens so Phase 1 ships visually closer to the new
   palette without rewriting every reference. */
:root {
    --bg-primary:    var(--paper-0);
    --bg-secondary:  var(--paper-2);
    --bg-tertiary:   var(--paper-2);
    --bg-hover:      var(--paper-3);
    --text-primary:  var(--ink-0);
    --text-secondary: var(--ink-2);
    --text-muted:    var(--ink-3);
    --border:        var(--rule);
    --accent:        var(--ink-0);
    --accent-hover:  var(--ink-1);
    --accent-light:  rgba(24,24,27,0.08);
    /* Confidence dots — design v2 collapses the 4-level yellow/orange
       distinction into a single amber. Legacy class names still resolve. */
    --yellow:        var(--amber);
    --orange:        var(--amber);
    /* Layout (legacy widths kept; --sb-w in tokens.css is the new target) */
    --sidebar-width: 280px;
    --rail-width:    56px;
    --header-height: 56px;
    /* Shape — re-alias to tokens.css scale */
    --shadow-sm:     var(--shadow-1);
    --shadow-md:     var(--shadow-2);
}

/* ── Utility ─────────────────────────────────────────────────────── */
.mobile-only { display: none; }
@media (max-width: 768px) {
    .mobile-only { display: inline-flex; }
}

/* ── Reset / Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    /* Use dvh on supporting browsers so the layout shrinks when the
       Android/iOS soft keyboard appears, instead of pushing the input
       bar below the visible area. The 100vh line is a fallback for
       older browsers. */
    height: 100vh;
    height: 100dvh;
}
body {
    font-family: var(--sans);
    font-feature-settings: "ss01", "cv11";
    background: var(--bg-primary);
    color: var(--ink-1);
    display: flex;
    overflow: hidden;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-secondary); border-color: var(--bg-hover); }
.btn-primary {
    background: var(--accent); border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-sm { font-size: 12px; padding: 5px 12px; }
.btn-icon {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 18px; padding: 4px;
    transition: color 0.15s;
}
.btn-icon:hover { color: var(--text-primary); }
.btn-tiny { font-size: 14px; padding: 0 4px; opacity: 0; transition: opacity 0.15s; }

/* ── Sidebar (design v2) ─────────────────────────────────────────────
   Fixed-width sidebar (--sb-w = 264px on desktop). Mobile: slides off-
   canvas via `.sidebar.collapsed` (width 0). The rail/half-collapsed
   desktop mode is gone — design v2 has a single sidebar shape. */
.sidebar {
    width: var(--sb-w);
    min-width: var(--sb-w);
    background: var(--paper-0);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.sidebar:not(.resizing) { transition: width 0.15s, min-width 0.15s; }

/* Desktop resize handle preserved */
.sidebar-resize-handle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    z-index: 50;
    transition: background 0.12s;
}
.sidebar-resize-handle:hover,
.sidebar.resizing .sidebar-resize-handle { background: var(--paper-2); }
.sidebar.resizing { user-select: none; }
@media (max-width: 768px) { .sidebar-resize-handle { display: none; } }

/* ── Brand block ──────────────────────────────────────────────────── */
.sidebar-head {
    padding: 16px 14px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--ink-0);
    color: var(--paper-0);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.brand-text { min-width: 0; }
.brand-name {
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink-0);
    margin-bottom: 2px;
}
.brand-sub {
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Icon button (reused across sidebar + topbar + drift) ────────── */
.icon-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink-0); }

/* ── Primary actions: new query / quick chat / + folder ──────────── */
.sidebar-actions {
    padding: 12px 12px 8px;
    display: flex; flex-direction: column; gap: 6px;
    flex-shrink: 0;
}
.primary-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--ink-0);
    color: var(--paper-0);
    border-radius: 8px;
    border: 0;
    font-family: inherit;
    font-weight: 450;
    font-size: 13px;
    width: 100%;
    cursor: pointer;
    justify-content: space-between;
    transition: background 0.15s;
}
.primary-btn:hover { background: #2a2a2a; }
.primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.primary-btn.small { width: auto; padding: 7px 12px; font-size: 12.5px; }
.primary-btn kbd { font-size: 9.5px; padding: 1px 4px; }

.quick-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 450;
    font-size: 12.5px;
    width: 100%;
    color: var(--ink-1);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.quick-btn:hover { background: var(--paper-3); border-color: var(--rule-2); }
.quick-btn svg { color: var(--warm-glyph); }
.quick-btn kbd {
    margin-left: auto;
    background: transparent;
    color: var(--ink-3);
    border-color: var(--rule);
    font-size: 9.5px;
}

/* Gray explanatory text under the two primary mode buttons. Tight
   line-height + ink-3 keeps it visually subordinate. */
.btn-hint {
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.35;
    padding: 2px 6px 4px;
    margin-top: -2px;
}

.link-btn {
    background: none; border: 0;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit; font-size: 12px;
    padding: 4px 4px;
    align-self: flex-start;
    transition: color 0.12s;
}
.link-btn:hover { color: var(--ink-0); text-decoration: underline; }

.folder-input { display: flex; gap: 6px; }
.folder-input input {
    flex: 1; padding: 6px 10px; background: var(--paper-0);
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    color: var(--ink-1); font-size: 13px; font-family: inherit;
}

/* ── Folder tree ──────────────────────────────────────────────────── */
.tree {
    flex: 1; overflow-y: auto; padding: 6px 8px 12px;
    scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent;
}
.tree::-webkit-scrollbar { width: 6px; }
.tree::-webkit-scrollbar-thumb { background: var(--paper-3); border-radius: 3px; }
.tree::-webkit-scrollbar-thumb:hover { background: var(--rule-2); }

.folder { margin-bottom: 6px; }
.folder-nested { margin-left: 12px; margin-bottom: 4px; }
.folder-head {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.folder-head svg { color: var(--ink-4); flex-shrink: 0; }
.folder-head .count {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}
.folder-head.muted { color: var(--ink-4); }
.folder-head .btn-tiny { opacity: 0; transition: opacity 0.15s; }
.folder-head:hover .btn-tiny { opacity: 1; }

.conv-list { padding: 2px 0 4px; list-style: none; margin: 0; }
.conv {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px 7px 22px;
    font-size: 13px;
    color: var(--ink-2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.conv:hover { background: var(--paper-2); color: var(--ink-0); }
.conv:hover .btn-tiny { opacity: 1; }
.conv.active {
    background: var(--ink-0);
    color: var(--paper-0);
}
.conv.active .conf-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.4); }
.conv-title {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.conv-ts {
    font-family: var(--mono);
    font-size: 10.5px;
    color: currentColor; opacity: 0.55;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Drop-target highlight for drag-drop conversation organising */
.drop-target { background: var(--paper-3) !important; border-radius: var(--radius-sm); }

/* ── Confidence dot (sidebar conversations) ──────────────────────── */
.conf-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-3);
    flex-shrink: 0;
}
.conf-dot.conf-green   { background: var(--green); }
.conf-dot.conf-amber   { background: var(--amber); }
.conf-dot.conf-red     { background: var(--red); }
.conf-dot.conf-neutral { background: var(--paper-3); }

/* ── Sidebar footer: user card + sublinks + feedback row ─────────── */
.sidebar-foot {
    padding: 10px;
    border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 6px;
    flex-shrink: 0;
}
.user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.user:hover { background: var(--paper-2); }
.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--paper-3);
    color: var(--ink-1);
    display: grid; place-items: center;
    font-weight: 500;
    font-size: 13px;
    flex-shrink: 0;
}
.user-meta { flex: 1; min-width: 0; }
.user-name {
    font-size: 13px; color: var(--ink-1); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-sub {
    font-size: 11px; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-sublinks {
    display: flex; gap: 12px;
    padding: 0 6px;
}
.sidebar-textlink {
    font-size: 11px;
    color: var(--ink-3);
    text-decoration: none;
    cursor: pointer;
    padding: 2px 0;
    transition: color 0.12s;
}
.sidebar-textlink:hover { color: var(--ink-0); text-decoration: underline; }

.feedback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 2px 4px 0;
}
.feedback-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    font-size: 11.5px;
    font-family: inherit;
    color: var(--ink-2);
    background: var(--paper-1);
    border: 1px solid var(--rule);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feedback-btn:hover { background: var(--paper-2); color: var(--ink-0); border-color: var(--rule-2); }
.feedback-btn .fb-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.feedback-bug .fb-dot { background: var(--red); }
.feedback-imp .fb-dot { background: var(--green); }

/* ── Chat area + Topbar (design v2) ──────────────────────────────── */
.chat-area {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; background: var(--paper-1);
}

.topbar {
    height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-1);
    flex-shrink: 0;
}
.crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    min-width: 0; flex: 1;
}
.crumb {
    color: var(--ink-1); font-weight: 450;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.crumb.muted { color: var(--ink-3); font-weight: 400; }
.crumb-sep { color: var(--ink-4); flex-shrink: 0; }
.top-actions { display: flex; gap: 6px; flex-shrink: 0; }

.ghost-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink-1);
    border: 1px solid var(--rule);
    background: var(--paper-0);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ghost-btn:hover:not(:disabled) { border-color: var(--rule-2); background: var(--paper-2); }
.ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ghost-btn.small { padding: 4px 10px; font-size: 12px; }

.sidebar-toggle { font-size: 22px; }
@media (min-width: 769px) { .sidebar-toggle { display: none !important; } }

/* Legacy control-group / select bits — kept for the rare admin form
   that still uses them. Modal Settings ports to design tokens in
   Phase 8. */
.control-group { display: flex; flex-direction: column; gap: 2px; }
.control-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 600;
    padding-left: 2px;
}
.tier-select,
.control-select {
    padding: 5px 10px; background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px;
    cursor: pointer; font-family: inherit; appearance: auto;
}
.control-select:focus { outline: none; border-color: var(--accent); }

/* Messages container */
.messages-container {
    flex: 1; overflow-y: auto; padding: 24px 20px;
    display: flex; flex-direction: column; gap: 24px;
    scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}

.welcome {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    color: var(--text-secondary);
}
.welcome h2 {
    font-family: var(--serif);
    font-size: 36px; color: var(--ink-0);
    margin-bottom: 12px; font-weight: 400;
    letter-spacing: -0.012em; line-height: 1.2;
}
.welcome p { font-size: 16px; max-width: 480px; line-height: 1.6; }
.welcome-sub { margin-top: 8px; color: var(--text-muted); font-size: 14px; }

/* Message styling */
.message { max-width: 820px; width: 100%; margin: 0 auto; }
.message-user .message-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 18px; border-radius: 20px;
    margin-left: auto; max-width: 75%; width: fit-content;
    font-size: 14px; line-height: 1.6;
}
/* Final prompt sent to models (right-aligned under user bubble) */
.final-prompt {
    margin: 6px 0 0 auto; max-width: 75%; width: fit-content;
    text-align: left;
}
.final-prompt-toggle {
    background: none; border: none; padding: 2px 0;
    font-size: 11px; color: var(--text-muted);
    letter-spacing: 0.02em; cursor: pointer;
    font-family: inherit;
}
.final-prompt-toggle:hover { color: var(--text-secondary); }
.final-prompt-body {
    margin: 4px 0 0; padding: 10px 14px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--mono);
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap; word-break: break-word;
    max-height: 320px; overflow-y: auto;
}
.message-assistant .message-content {
    padding: 4px 4px;
    font-size: 14.5px; line-height: 1.75;
    color: var(--text-primary);
}

/* Markdown in messages */
.message-content h1, .message-content h2, .message-content h3 {
    margin: 18px 0 8px; color: var(--text-primary); letter-spacing: -0.01em;
}
.message-content h1 { font-size: 20px; }
.message-content h2 { font-size: 17px; }
.message-content h3 { font-size: 15px; font-weight: 600; }
.message-content p,
.verdict-body p,
.point-detail p { margin: 8px 0; }
.message-content ul, .message-content ol,
.verdict-body ul, .verdict-body ol,
.point-detail ul, .point-detail ol { margin: 8px 0; padding-left: 24px; }
.message-content li, .verdict-body li, .point-detail li { margin: 6px 0; line-height: 1.6; }
/* Phase 10 bullet hierarchy — per operator request:
   L1 square · L2 smaller dot (filled) · L3 dash · L4 small middle-dot. */
.message-content ul,
.verdict-body ul,
.point-detail ul { list-style-type: square; }
.message-content ul ul,
.verdict-body ul ul,
.point-detail ul ul { list-style-type: disc; }
.message-content ul ul ul,
.verdict-body ul ul ul,
.point-detail ul ul ul { list-style-type: '–  '; }
.message-content ul ul ul ul,
.verdict-body ul ul ul ul,
.point-detail ul ul ul ul { list-style-type: '·  '; }
.message-content ol, .verdict-body ol, .point-detail ol { list-style-type: decimal; }
.message-content ol ol, .verdict-body ol ol, .point-detail ol ol { list-style-type: lower-alpha; }
.message-content ol ol ol, .verdict-body ol ol ol, .point-detail ol ol ol { list-style-type: lower-roman; }
.message-content li > ul, .message-content li > ol,
.verdict-body li > ul, .verdict-body li > ol,
.point-detail li > ul, .point-detail li > ol { margin: 4px 0; }
.message-content code {
    background: var(--bg-tertiary); padding: 2px 6px;
    border-radius: 4px; font-size: 13px; font-family: var(--mono);
}
.message-content pre {
    background: var(--bg-secondary); padding: 14px;
    border-radius: var(--radius-sm); overflow-x: auto; margin: 10px 0;
    border: 1px solid var(--border);
}
.message-content pre code { background: none; padding: 0; }
.message-content strong { color: var(--text-primary); font-weight: 600; }
.message-content a { color: var(--accent); text-decoration: none; }
.message-content a:hover { text-decoration: underline; }
.message-content blockquote {
    border-left: 3px solid var(--accent); padding-left: 14px;
    color: var(--text-secondary); margin: 10px 0;
}
/* Phase 10: clearer table treatment — applied to every markdown-rendered
   surface (legacy `.message-content`, the design-v2 `.verdict-body`, and
   `.point-detail`). Light gray outline, light gray header row, content-
   size bold left-aligned header text, light gray horizontal row dividers,
   no vertical cell rules. */
.message-content table,
.verdict-body table,
.point-detail table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
    font-size: inherit;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}
.message-content th, .message-content td,
.verdict-body th, .verdict-body td,
.point-detail th, .point-detail td {
    padding: 10px 14px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.message-content thead th,
.verdict-body thead th,
.point-detail thead th {
    background: var(--paper-2);
    color: var(--ink-0);
    font-weight: 600;
    /* Header font size matches body content (per operator). */
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}
.message-content tbody tr:last-child td,
.verdict-body tbody tr:last-child td,
.point-detail tbody tr:last-child td {
    border-bottom: 0;
}
.message-content tbody td,
.verdict-body tbody td,
.point-detail tbody td {
    color: var(--ink-1);
}
/* Drop the legacy row-hover so the table reads calmer. */

/* Overall confidence badge */
.overall-confidence-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; margin-bottom: 10px;
    border-radius: var(--radius); font-size: 13px;
    border: 1px solid var(--border);
}
.overall-confidence-badge.overall-green { background: rgba(47,158,79,0.08); border-color: rgba(47,158,79,0.30); }
.overall-confidence-badge.overall-yellow { background: rgba(184,134,11,0.06); border-color: rgba(184,134,11,0.25); }
.overall-confidence-badge.overall-orange { background: rgba(212,118,10,0.06); border-color: rgba(212,118,10,0.25); }
.overall-confidence-badge.overall-red { background: rgba(209,69,59,0.06); border-color: rgba(209,69,59,0.25); }
.overall-dot { font-size: 14px; }
.overall-label { font-weight: 600; }
.overall-reason {
    flex: 1; color: var(--text-secondary); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Inline confidence markers */
.inline-confidence {
    font-size: 10px; vertical-align: middle; margin-right: 2px;
    cursor: help; position: relative; top: -1px;
}

/* Analysis section */
.analysis-section { margin-top: 10px; max-width: 820px; }
.analysis-toggle { margin-top: 4px; }
.analysis-details {
    margin-top: 8px; background: var(--bg-secondary); border-radius: var(--radius);
    padding: 18px; border: 1px solid var(--border);
}
.analysis-details h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin-bottom: 10px; font-weight: 600;
}
.analysis-meta {
    margin-top: 12px; font-size: 12px; color: var(--text-muted);
    padding-top: 8px; border-top: 1px solid var(--border);
}

/* Confidence */
.confidence-section { margin-bottom: 16px; }
.confidence-point {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.confidence-point:last-child { border-bottom: none; }
.confidence-dot { font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.confidence-green { color: var(--green); }
.confidence-yellow { color: var(--yellow); }
.confidence-orange { color: var(--orange); }
.confidence-red { color: var(--red); }
.confidence-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.confidence-text { color: var(--text-primary); line-height: 1.4; }
.confidence-reason { font-size: 11px; color: var(--text-muted); }
.confidence-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.source-link {
    font-size: 11px; color: var(--accent); text-decoration: none;
    background: var(--accent-light); padding: 3px 10px;
    border-radius: 12px; border: 1px solid rgba(74,74,74,0.15);
    transition: background 0.15s;
}
.source-link:hover { background: rgba(74,74,74,0.15); text-decoration: underline; }

/* Raw responses */
.raw-responses { margin-bottom: 12px; }
.model-response {
    margin: 4px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.model-response summary {
    padding: 8px 12px; cursor: pointer; font-weight: 600;
    font-size: 13px; color: var(--accent);
}
.model-response summary:hover { background: var(--bg-tertiary); }
.model-response-content {
    padding: 12px; font-size: 13px; line-height: 1.6;
    border-top: 1px solid var(--border);
    max-height: 300px; overflow-y: auto;
}

.errors-section { margin-bottom: 12px; }
.error-item { font-size: 12px; color: var(--orange); padding: 2px 0; }
.error-model { font-weight: 600; }

/* ── Status Panel (loading) ──────────────────────────────────────── */
.status-panel {
    max-width: 820px; width: 100%; margin: 0 auto;
    padding: 20px 4px;
}
.status-header {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--text-secondary);
    margin-bottom: 14px; font-weight: 500;
}
.status-models {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 18px; background: var(--bg-secondary);
    border-radius: var(--radius); border: 1px solid var(--border);
}
.status-model-line {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; padding: 4px 0;
    transition: opacity 0.3s;
}
.status-model-name { font-weight: 500; color: var(--text-primary); min-width: 120px; }
.status-model-detail { color: var(--text-muted); font-size: 12px; }
.status-querying .status-model-name { color: var(--text-secondary); }
.status-done .status-model-name { color: var(--text-primary); }
.status-error .status-model-name { color: var(--red); }
.status-icon { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
.status-check { color: var(--green); font-weight: 700; }
.status-fail { color: var(--red); font-weight: 700; }

.loading-spinner {
    width: 18px; height: 18px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.loading-spinner-sm {
    width: 14px; height: 14px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Live Analysis pane ──────────────────────────────────────────── */
.live-analysis {
    max-width: 820px; width: 100%; margin: 0 auto 18px;
    padding: 14px 16px; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.live-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.live-phase {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    min-width: 0; flex: 1;
}
.live-phase-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.live-cost {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    padding: 4px 10px; background: var(--bg-primary);
    border: 1px solid var(--border); border-radius: 12px;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.live-cost-amount { font-weight: 500; color: var(--text-primary); }
.live-cost-tokens { color: var(--text-muted); font-size: 11px; }

.btn-answer-now {
    background: var(--accent); color: white; border: none;
    padding: 5px 12px; border-radius: 14px;
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.btn-answer-now:hover { opacity: 0.9; }
.btn-answer-now:active { transform: translateY(1px); }

.live-clarifications {
    display: flex; flex-direction: column; gap: 8px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #4a90e2);
    border-radius: 8px;
    background: var(--bg-primary);
}
.live-clarifications-header {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 2px;
}
.live-clarifications-hint {
    font-weight: 400; color: var(--text-muted); font-size: 11px;
}
.live-clarification {
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-secondary);
    display: flex; flex-direction: column; gap: 6px;
}
.live-clarification.is-submitted { opacity: 0.6; }
.live-clarification-q {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    font-size: 13px;
}
.live-clarification-model {
    font-size: 11px; color: var(--text-muted);
    font-family: var(--mono);
}
.live-clarification-text { color: var(--text-primary); }
.live-clarification-why {
    font-size: 11px; color: var(--text-muted); font-style: italic;
}
.live-clarification-answer {
    display: flex; gap: 6px; align-items: center;
}
.live-clarification-input {
    flex: 1; min-width: 0;
    padding: 5px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-primary); color: var(--text-primary);
}
.live-clarification-submitted {
    font-size: 12px; color: var(--text-muted);
}
.live-clarification-submitted span:nth-child(2) {
    color: var(--text-primary); font-weight: 500;
}

.live-rounds {
    display: flex; flex-direction: column; gap: 6px;
}
.live-round {
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-primary); overflow: hidden;
}
.live-round-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer;
    font-size: 13px; font-weight: 500;
    user-select: none;
}
.live-round-header:hover { background: var(--bg-secondary); }
.live-caret {
    display: inline-block; width: 14px; font-size: 10px;
    color: var(--text-muted); flex-shrink: 0;
}
.live-round-label { color: var(--text-primary); flex-shrink: 0; }
.live-round-meta {
    font-size: 11px; color: var(--text-muted);
    padding: 1px 6px; background: var(--bg-secondary);
    border-radius: 8px; flex-shrink: 0;
}
.live-round-summary {
    margin-left: auto; font-size: 12px;
    color: var(--text-secondary); font-weight: 400;
}
.live-round-body {
    padding: 6px 10px 10px 18px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 4px;
}

.live-model {
    border-radius: 6px; transition: background 0.15s;
}
.live-model:hover { background: var(--bg-secondary); }
.live-model-header {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; cursor: pointer;
    font-size: 12px;
}
.live-model-icon {
    width: 16px; text-align: center; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.live-model-name {
    font-weight: 500; color: var(--text-primary);
    min-width: 110px; flex-shrink: 0;
}
.live-model-meta {
    margin-left: auto; display: flex; gap: 8px;
    font-size: 11px; color: var(--text-muted);
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.live-meta-item { white-space: nowrap; }
.live-meta-cost { color: var(--text-secondary); font-weight: 500; }

.live-model-querying .live-model-name { color: var(--text-secondary); }
.live-model-done .live-model-name { color: var(--text-primary); }
.live-model-error .live-model-name { color: var(--red); }

.live-model-body {
    padding: 6px 12px 10px 32px; font-size: 12px;
    color: var(--text-secondary); line-height: 1.5;
    max-height: 400px; overflow-y: auto;
    border-left: 2px solid var(--border); margin-left: 10px;
}
.live-model-text p { margin: 0 0 6px; }
.live-model-text pre {
    font-size: 11px; padding: 6px 10px;
    background: var(--bg-secondary); border-radius: 4px;
    overflow-x: auto;
}
.live-model-error { color: var(--red); font-family: var(--mono); }

.live-judge {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px;
}
.live-judge-icon {
    width: 16px; text-align: center; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.live-judge-label { font-weight: 500; color: var(--text-primary); }
.live-judge-detail { display: inline-flex; align-items: center; gap: 4px; }

.live-dispute {
    margin-top: 6px; border: 1px solid var(--orange);
    border-radius: 6px; background: var(--bg-secondary);
}
.live-dispute-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; cursor: pointer;
    font-size: 12px; color: var(--text-primary);
    user-select: none;
}
.live-dispute-flag { color: var(--orange); }
.live-dispute-topic { font-weight: 500; }
.live-dispute-body {
    padding: 4px 12px 10px 28px; font-size: 12px;
    color: var(--text-secondary);
}
.live-dispute-majority {
    margin-bottom: 6px; padding: 4px 8px;
    background: var(--bg-primary); border-radius: 4px;
}

.live-adversarial {
    margin-top: 6px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-primary);
}
.live-adversarial.adv-changed { border-color: var(--yellow); }
.live-adversarial.adv-held { border-color: var(--green); }
.live-adv-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
}
.live-adv-icon {
    width: 16px; text-align: center; flex-shrink: 0;
}
.live-adv-model { font-weight: 500; color: var(--text-primary); }
.live-adv-meta {
    margin-left: auto; display: flex; gap: 8px;
    font-size: 11px; color: var(--text-muted);
    font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.status-arrow { color: var(--yellow); font-weight: 700; }
.live-adv-body {
    padding: 6px 0 0; font-size: 12px;
    color: var(--text-secondary); line-height: 1.5;
}
.live-adv-revised { margin-bottom: 4px; }
.live-adv-held-note { color: var(--green); font-size: 11px; }
.live-adv-reasoning {
    font-style: italic; color: var(--text-muted);
    margin-top: 3px;
}
.live-adv-sources {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.live-adv-sources a {
    font-size: 10px; padding: 1px 6px;
    background: var(--bg-secondary); border-radius: 8px;
    color: var(--accent); text-decoration: none;
}
.live-adv-sources a:hover { text-decoration: underline; }

/* ── Quick-mode assistant badges ─────────────────────────────────── */
.quick-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; margin-bottom: 6px;
    font-size: 11px; font-weight: 500;
    border-radius: 10px; width: fit-content;
}
.quick-pending {
    background: rgba(252, 211, 77, 0.15);
    color: var(--yellow); border: 1px solid var(--yellow);
}
.quick-final {
    background: rgba(34, 197, 94, 0.12);
    color: var(--green); border: 1px solid var(--green);
}
.quick-alert {
    background: rgba(239, 68, 68, 0.12);
    color: var(--red); border: 1px solid var(--red);
}
.quick-badge-note { color: var(--text-muted); font-weight: 400; }

/* Quick-chat rail button removed in Phase 2 — replaced by .quick-btn in
   the design-v2 sidebar actions block. */

@media (max-width: 768px) {
    .live-analysis { padding: 10px 12px; }
    .live-round-body { padding-left: 10px; }
    .live-model-body { padding-left: 18px; margin-left: 6px; }
}

/* ── Input bar ───────────────────────────────────────────────────── */
.input-bar {
    padding: 14px 20px 18px; border-top: 1px solid var(--border);
    background: var(--bg-primary);
    display: flex; gap: 10px; align-items: flex-end;
    /* Bumped from 860 to accommodate the Quick-mode model dropdown +
       conversation-level Summarize / Verify ghost buttons that sit to
       the right of Send. */
    max-width: 1180px; width: 100%; margin: 0 auto;
}
.model-picker {
    height: 44px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 22px;
    background: var(--paper-0); color: var(--ink-0);
    font-size: 12px; min-width: 130px; max-width: 170px;
    /* Avoid the textarea's growing height from shrinking us. */
    align-self: flex-end;
}
.model-picker:disabled { opacity: 0.55; cursor: not-allowed; }
.composer-actions {
    display: flex; gap: 6px; align-items: flex-end;
}
.composer-actions .ca-btn {
    /* Same chrome as the existing .ghost-btn but slightly tighter. */
    height: 44px; padding: 0 12px;
    border-radius: 22px; align-self: flex-end;
    white-space: nowrap;
}
.composer-actions .ca-btn .ca-label {
    /* Hide labels on narrow viewports; the icon + tooltip stay. */
    margin-left: 6px;
}
@media (max-width: 1000px) {
    .composer-actions .ca-btn .ca-label { display: none; }
}
@media (max-width: 720px) {
    .composer-actions { display: none; }
    .model-picker { min-width: 100px; max-width: 130px; }
}
.input-textarea {
    flex: 1; padding: 12px 18px; background: var(--bg-primary);
    border: 1px solid var(--border); border-radius: 24px;
    color: var(--text-primary); font-size: 14px; font-family: inherit;
    resize: none; min-height: 44px; max-height: 150px; line-height: 1.5;
    box-shadow: var(--shadow-sm);
}
.input-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.input-textarea:disabled { opacity: 0.5; }
.btn-send {
    height: 44px; padding: 0 22px; font-size: 14px;
    border-radius: 22px; font-weight: 500;
}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; backdrop-filter: blur(2px);
}
.modal {
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius); width: 520px; max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-md);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.modal-header h2 {
    /* Phase 9: sans for legibility, matching the new modal-title. */
    font-family: var(--sans);
    font-size: 20px; font-weight: 500;
    letter-spacing: -0.018em; color: var(--ink-0);
}
.modal-body {
    padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}
.modal-footer {
    padding: 14px 22px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
}

.pref-group { display: flex; flex-direction: column; gap: 5px; }
.pref-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.pref-group select, .pref-group input[type="text"], .pref-group input[type="number"] {
    padding: 8px 12px; background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px;
    font-family: inherit;
}
.pref-group select:focus, .pref-group input:focus {
    outline: none; border-color: var(--accent);
}
.pref-hint { font-size: 12px; color: var(--text-muted); }

.custom-pref-row { display: flex; gap: 6px; margin-top: 4px; }
.pref-key { width: 35%; }
.pref-value { flex: 1; }

/* ── Topic drift banner (design v2) ─────────────────────────────── */
.drift-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px 10px 18px;
    background: var(--amber-soft);
    border-bottom: 1px solid var(--amber-line);
    font-size: 12.5px;
    color: var(--ink-1);
    flex-shrink: 0;
}
.drift-icon {
    width: 26px; height: 26px;
    background: var(--paper-0);
    border: 1px solid var(--amber-line);
    border-radius: 7px;
    display: grid; place-items: center;
    color: var(--amber);
    flex-shrink: 0;
}
.drift-text { flex: 1; min-width: 0; }
.drift-banner .ghost-btn.small { flex-shrink: 0; }

/* ── Validation badge ───────────────────────────────────────────── */
.validation-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; margin-top: 10px;
    border-radius: var(--radius); font-size: 13px;
    border: 1px solid var(--border);
}
.validation-green { background: rgba(47,158,79,0.08); border-color: rgba(47,158,79,0.30); }
.validation-yellow { background: rgba(184,134,11,0.06); border-color: rgba(184,134,11,0.25); }
.validation-orange { background: rgba(212,118,10,0.06); border-color: rgba(212,118,10,0.25); }
.validation-red { background: rgba(209,69,59,0.06); border-color: rgba(209,69,59,0.25); }
.validation-icon { font-weight: 700; font-size: 16px; }
.validation-verdict { flex: 1; color: var(--text-secondary); }

/* Validation details */
.validation-details {
    margin-top: 8px; padding: 14px 18px;
    background: var(--bg-secondary); border-radius: var(--radius);
    border: 1px solid var(--border); font-size: 13px;
}
.validation-details h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin-bottom: 6px; font-weight: 600;
}
.validation-corrections { margin-bottom: 10px; }
.correction-item { color: var(--orange); padding: 2px 0; line-height: 1.5; }
.validation-additional { color: var(--text-secondary); line-height: 1.6; }
.validation-additional p { margin: 4px 0; }

/* Analysis buttons row */
.analysis-buttons { display: flex; gap: 6px; margin-top: 6px; }
.btn-validate { background: var(--bg-primary); border-color: var(--yellow); color: var(--yellow); }
.btn-validate:hover { background: rgba(184,134,11,0.06); }
.btn-validate:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Confidence tooltips ────────────────────────────────────────── */
.confidence-dot-wrap {
    position: relative; flex-shrink: 0; cursor: help;
}
.confidence-tooltip {
    display: none; position: absolute; left: 20px; top: -8px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    width: 280px; z-index: 50; box-shadow: var(--shadow-md);
    font-size: 12px;
}
.confidence-dot-wrap:hover .confidence-tooltip { display: block; }
.tooltip-level { font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.tooltip-reason { color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
.tooltip-sources { display: flex; flex-direction: column; gap: 2px; }
.tooltip-sources a { color: var(--accent); font-size: 11px; text-decoration: none; }
.tooltip-sources a:hover { text-decoration: underline; }

/* ── Preferences divider/section ────────────────────────────────── */
.pref-divider { border-top: 1px solid var(--border); margin: 4px 0; }
.pref-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pref-row-inline { display: flex; gap: 12px; }
.pref-row-inline .pref-group { flex: 1; }

/* ── Auth pages (login, signup, setup) ──────────────────────────── */
.auth-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px; overflow: auto;
    background: var(--bg-secondary);
}
.auth-card {
    width: 100%; max-width: 380px; padding: 32px 28px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; gap: 18px;
}
.auth-logo {
    font-family: var(--serif);
    font-size: 22px; font-weight: 400; color: var(--ink-0);
    letter-spacing: -0.01em;
}
.auth-title {
    font-family: var(--serif);
    font-size: 28px; font-weight: 400; letter-spacing: -0.012em;
    color: var(--ink-0);
}
.auth-subtitle {
    font-size: 13px; color: var(--text-secondary); margin-top: -10px;
}
.auth-form {
    display: flex; flex-direction: column; gap: 14px;
}
.auth-error {
    font-size: 13px; color: var(--red);
    background: rgba(209,69,59,0.06); border: 1px solid rgba(209,69,59,0.2);
    border-radius: var(--radius-sm); padding: 8px 12px;
}

/* ── Admin panel ─────────────────────────────────────────────────── */
.modal-wide { width: 760px; max-width: 95vw; }

.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.stat-card {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.stat-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 600;
}
.stat-value {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.02em;
}

.admin-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-table th {
    text-align: left; padding: 8px 10px; font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.admin-table td {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.admin-table tr:last-child td { border-bottom: none; }

.invite-form {
    display: flex; gap: 8px; margin: 8px 0;
}
.invite-form .pref-value, .invite-form .pref-key {
    padding: 8px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-primary);
    color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.invite-form .pref-key { width: 70px; }

/* ── Mobile / PWA ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Mobile drawer: sidebar is off-canvas by default and slid in via the
       hamburger button in the topbar. `.sidebar.collapsed` hides it. */
    .sidebar {
        position: fixed; z-index: 100;
        height: 100vh;
        height: 100dvh;
        box-shadow: 0 0 24px rgba(0,0,0,0.18);
    }
    .sidebar.collapsed {
        width: 0; min-width: 0; border: none; box-shadow: none;
        overflow: hidden;
    }
    .sidebar.collapsed > * { display: none; }
    .message-user .message-content { max-width: 90%; }
    .topbar { padding: 0 12px; }
    .control-select { font-size: 12px; padding: 4px 6px; }
    .input-bar { padding: 10px 12px 14px; }
    .input-textarea { padding: 10px 14px; font-size: 16px; /* prevents iOS zoom */ }
    .messages-container { padding: 16px 12px; }
    .message-assistant .message-content { padding: 4px 0; }
    .modal { width: 95vw; max-height: 90vh; border-radius: 12px; }
    .pref-row-inline { flex-direction: column; gap: 8px; }
    .welcome h2 { font-size: 22px; }
    .welcome p { font-size: 14px; }
    /* Drift banner: stack the dismiss controls under the text on narrow
       widths so the message stays readable. */
    .drift-banner {
        flex-wrap: wrap;
        padding: 10px 14px;
    }
    .drift-text { flex: 1 1 100%; }
}

/* Safe area insets for notch/rounded-corner phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .topbar { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
    .input-bar { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .sidebar-head { padding-top: calc(16px + env(safe-area-inset-top)); }
}

/* Dark theme dropped in Phase 1 — design v2 is light-only. */

/* ── Pre-query clarifier modal ──────────────────────────────────────────── */
.modal-clarify { width: min(640px, 92vw); max-height: 90vh; }
.modal-clarify .modal-body { display: flex; flex-direction: column; gap: 14px; }

.clarify-reason {
    font-size: 13px; color: var(--text-secondary); font-style: italic;
    margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border);
}

.clarify-branches {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px 12px; background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.clarify-branches-label {
    font-size: 12px; color: var(--text-muted); margin-right: 4px;
}
.clarify-branch-chip {
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
    background: rgba(47,158,79,0.12); color: var(--text-primary);
}

.clarify-question {
    padding: 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-secondary);
}
.clarify-question-prompt {
    font-size: 14px; font-weight: 600; margin-bottom: 10px;
    color: var(--text-primary);
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
}
.clarify-multi-hint {
    font-size: 11px; font-weight: 400; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
.clarify-options {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.clarify-option-chip {
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    background: var(--bg-primary); border: 1px solid var(--border);
    font-size: 13px; color: var(--text-primary); font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.clarify-option-chip:hover { background: var(--bg-hover); }
.clarify-option-chip.selected {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.clarify-freetext {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; background: var(--bg-primary);
    color: var(--text-primary);
}

.clarify-warning {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(232,136,26,0.08);
    border: 1px solid rgba(232,136,26,0.25);
    font-size: 13px; color: var(--text-primary);
}

.clarify-profile-editor {
    padding-top: 12px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 12px;
}
.clarify-override-toggle label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.clarify-override-toggle input[type="checkbox"] { cursor: pointer; }

/* ── Taste profile editor (shared between Global Settings and clarifier) ── */
.taste-profile-editor {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 8px;
}
.taste-branch {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px; background: var(--bg-secondary);
}
.taste-branch-path {
    display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
    flex-wrap: wrap;
}
.taste-path-seg { display: inline-flex; align-items: center; gap: 4px; }
.taste-path-input {
    width: 120px; padding: 4px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-primary); color: var(--text-primary);
    font-family: inherit;
}
.taste-path-sep { color: var(--text-muted); font-size: 14px; }

.taste-stance {
    display: flex; gap: 6px; align-items: center; margin-top: 6px;
    flex-wrap: wrap;
}
.taste-stance > label {
    font-size: 12px; color: var(--text-muted); width: 48px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.taste-chip {
    padding: 3px 10px; border-radius: 999px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-primary);
}
.taste-favor { background: rgba(47,158,79,0.12); }
.taste-avoid { background: rgba(209,69,59,0.12); }
.taste-chip-input {
    padding: 4px 10px; font-size: 12px; font-family: inherit;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    width: 110px; background: var(--bg-primary); color: var(--text-primary);
}

.btn-xs {
    font-size: 11px; padding: 2px 8px; line-height: 1.6;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    cursor: pointer; font-family: inherit;
}
.btn-xs:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-xs.btn-danger { color: rgba(224,85,69,0.9); }
.btn-xs.btn-danger:hover { background: rgba(224,85,69,0.1); }
.btn-tiny {
    font-size: 14px; padding: 0 4px; line-height: 1;
    background: none; border: none; color: var(--text-muted); cursor: pointer;
}
.btn-tiny:hover { color: var(--text-primary); }

/* ── Discovery prototype ─────────────────────────────────────────────── */
/* ── Image attach + preview ──────────────────────────────────────────── */
.btn-attach {
    /* Phase 10: now houses an SVG icon instead of an emoji — match
       the design's .icon-btn size for visual consistency. */
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 8px;
    background: var(--paper-0);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-grid; place-items: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-attach:hover { background: var(--paper-2); color: var(--ink-0); border-color: var(--rule-2); }

/* Image thumbnails inside user message bubbles */
.message-images {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px; max-width: 75%; margin-left: auto;
}
.message-image-thumb {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
}
.message-image-thumb:hover { opacity: 0.85; }

.image-preview-strip {
    display: flex; gap: 8px; padding: 8px 16px 0;
    overflow-x: auto; flex-shrink: 0;
}
.image-preview-thumb {
    position: relative; width: 64px; height: 64px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
    border: 1px solid var(--border);
}
.image-preview-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.image-preview-remove {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    font-size: 12px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; line-height: 1;
}
.image-preview-remove:hover { background: rgba(224,85,69,0.9); }

.btn-discover {
    /* Phase 10: SVG icon button matching .btn-attach. */
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 8px;
    background: var(--paper-0);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-grid; place-items: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-discover:hover:not(:disabled) { background: var(--paper-2); color: var(--ink-0); border-color: var(--rule-2); }
.btn-discover:disabled { opacity: 0.4; cursor: not-allowed; }

.discovery-panel {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-secondary); margin: 0 16px 8px;
    max-height: 50vh; overflow-y: auto; font-size: 13px;
}
.discovery-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--bg-secondary); z-index: 1;
}
.discovery-title { display: flex; align-items: center; gap: 6px; }
.discovery-error { color: rgba(224,85,69,0.9); }

.discovery-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.discovery-table th {
    text-align: left; padding: 6px 8px; font-weight: 600;
    border-bottom: 1px solid var(--border); color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
    position: sticky; top: 34px; background: var(--bg-secondary);
}
.discovery-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.discovery-table tr:hover { background: var(--bg-tertiary); }
.discovery-address { font-size: 11px; color: var(--text-muted); }
.discovery-notable { max-width: 200px; }
.discovery-fit { max-width: 150px; font-style: italic; color: var(--text-secondary); }
.discovery-source-link {
    color: var(--accent); text-decoration: none; font-size: 11px;
    word-break: break-all;
}
.discovery-source-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .modal-clarify { width: 96vw; }
    .taste-path-input { width: 90px; }
    .taste-chip-input { width: 90px; }
    .discovery-panel { margin: 0 8px 8px; }
    .discovery-table { font-size: 11px; }
    .discovery-notable, .discovery-fit { max-width: 120px; }
}

/* Phase 2: feedback affordance moved into the sidebar-foot block; rules
   live in §"Sidebar footer". The legacy .sidebar-feedback / .btn-feedback
   / .sidebar-feedback-collapsed / .btn-feedback-dot classes were retired
   alongside the rail/collapsed sidebar mode. */

/* ── Feedback modal ──────────────────────────────────────────────── */
.modal-feedback { width: 480px; max-width: 92vw; }
.modal-feedback .modal-header h2 { font-size: 16px; }
/* Phase 8: keep the title in the dark ink-0 colour from Phase 1 so it
   reads as the design's serif treatment; the kind-specific coloring
   lives in the eyebrow + dot now. */
.modal-feedback .modal-header h2 { color: var(--ink-0); }

/* Phase 8 — Design v2 modal eyebrow inside the legacy .modal-overlay
   chrome (used by feedback). Mirrors the design's eyebrow rule but
   scoped so the dispute popup's .modal-eyebrow rule stays distinct. */
.modal-feedback .modal-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}
.modal-feedback .modal-eyebrow.fb-eb-bug { color: var(--red); }
.modal-feedback .modal-eyebrow.fb-eb-imp { color: var(--green); }

/* Mono meta-row in the feedback modal body — "Will be posted to ...
   labels: from:user-feedback, type:bug". */
.fb-meta {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--rule);
    font-size: 10.5px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.fb-meta span {
    color: var(--ink-2);
    padding: 1px 4px;
    background: var(--paper-2);
    border-radius: 3px;
}
.fb-meta .sep { background: transparent; color: var(--ink-4); padding: 0 2px; }

.feedback-body-input {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.feedback-body-input:focus {
    outline: none;
    border-color: var(--accent);
}

.feedback-error {
    background: rgba(209,69,59,0.08);
    border: 1px solid rgba(209,69,59,0.25);
    color: var(--red);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 8px;
}
.feedback-success {
    background: rgba(47,158,79,0.08);
    border: 1px solid rgba(47,158,79,0.25);
    color: var(--green);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13px;
}
.feedback-success a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
}

.feedback-submit { color: #fff; }
.feedback-submit-bug {
    background: var(--red);
    border-color: var(--red);
}
.feedback-submit-bug:hover { background: var(--red); border-color: var(--red); filter: brightness(0.9); }
.feedback-submit-improvement {
    background: var(--green);
    border-color: var(--green);
}
.feedback-submit-improvement:hover { background: var(--green); border-color: var(--green); filter: brightness(0.9); }

/* Mono utility — used by inline numeric runs (.stats-glance.mono,
   .stage-time.mono, .cite.mono, .point-n, .src-n, kbd hints, etc.).
   Design v2 expects this to exist; the legacy stylesheet didn't have it. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════
 * DESIGN V2 — PHASE 3: answer-first conversation view
 * Sections: question-block, pipeline-chip, quick-first, verdict-block,
 * validation-strip, answer-actions, points-block, sources-block, stats.
 * ════════════════════════════════════════════════════════════════════ */

/* The messages container is the design's content scroller — wider than
   the original 820 px spec so the conversation uses more horizontal
   real estate (user feedback Phase 9). */
.messages-container {
    max-width: 1180px; width: 100%;
    margin: 0 auto;
    padding: 40px 56px 80px;
    /* Phase 10: bumped from 36 → 52 so turns are clearly separated. */
    gap: 52px;
}

/* Each turn (.message) drops its 820 max-width — container owns it now. */
.message { max-width: none; width: 100%; margin: 0; }
.message-user .message-content,
.message-assistant .message-content { background: transparent; padding: 0; max-width: none; margin: 0; }
/* Phase 10: bumped from 18 px so sections read distinctly. */
.answer-stack { display: flex; flex-direction: column; gap: 28px; }

/* ── User turn (chat bubble, Phase 9 polish) ─────────────────────── */
.user-turn {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.user-meta {
    font-size: 11px;
    color: var(--ink-3);
    padding: 0 8px;
}
.user-bubble {
    background: var(--paper-2);
    color: var(--ink-0);
    padding: 12px 18px;
    border-radius: 18px;
    max-width: min(75%, 720px);
    width: fit-content;
    font-size: 14.5px;
    line-height: 1.55;
    /* keep whitespace from the input so multi-line questions read right */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.user-images { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 75%; }
.user-image {
    background: var(--paper-1);
    border: 1px solid var(--rule);
    padding: 6px;
    border-radius: 10px;
    max-width: 220px;
}
.user-image-thumb { display: block; width: 100%; max-width: 208px; border-radius: 6px; }
.user-image-caption {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--ink-3);
    padding: 0 2px;
}
.user-image-caption .sep { color: var(--ink-4); }
.user-turn .final-prompt {
    align-self: flex-end;
    max-width: 75%;
}

/* ── Question block ──────────────────────────────────────────────── */
.question-block { display: flex; flex-direction: column; gap: 14px; }
.eyebrow {
    display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap;
}
.ey-label {
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}
.ey-meta { font-size: 11.5px; color: var(--ink-3); }
.question {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--ink-0);
    margin: 0;
    text-wrap: pretty;
}
.q-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.q-image {
    border: 1px dashed var(--rule-2);
    padding: 6px;
    border-radius: 10px;
    background: var(--paper-2);
    max-width: 280px;
}
.q-image-thumb { display: block; width: 100%; max-width: 268px; border-radius: 6px; }
.q-image-caption {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--ink-3);
    padding: 0 4px;
}
.q-image-caption .sep { color: var(--ink-4); }

/* ── Pipeline chip ───────────────────────────────────────────────── */
.pipeline-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    font-size: 12px;
    color: var(--ink-2);
    align-self: flex-start;
    max-width: 100%;
}
.pc-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-2);
    grid-column: 1; grid-row: 1 / span 2;
}
.pipeline-chip[data-shape="wide-hypothesis"] .pc-dot { background: var(--shape-wide); }
.pipeline-chip[data-shape="narrow"]          .pc-dot { background: var(--green); }
.pipeline-chip[data-shape="creative"]        .pc-dot { background: var(--shape-creative); }
.pc-label   { color: var(--ink-1); font-weight: 450; grid-column: 2; grid-row: 1; }
.pc-detail  {
    color: var(--ink-3); grid-column: 2; grid-row: 2; line-height: 1.45;
    text-wrap: pretty;
}
.pc-rounds  {
    font-size: 11px; color: var(--ink-3);
    grid-column: 3; grid-row: 1 / span 2;
    align-self: center; padding-left: 8px;
    border-left: 1px solid var(--rule);
}

/* ── Resume banner (partial / errored runs) ──────────────────────── */
.resume-banner {
    padding: 14px 18px;
    background: #fff8ee;            /* amber-tinted paper */
    border: 1px solid #f0d4a3;
    border-left: 3px solid #d97706;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.resume-banner[data-status="cancelled"] {
    background: var(--paper-2);
    border-color: var(--rule);
    border-left-color: var(--ink-3);
}
.resume-banner[data-status="running"] {
    background: #f0f8ff;
    border-color: #c0d8f0;
    border-left-color: #2563eb;
}
.rb-head {
    display: flex; align-items: baseline; gap: 10px;
}
.rb-icon { font-size: 14px; line-height: 1; }
.rb-title { font-weight: 500; color: var(--ink-1); font-size: 13.5px; }
.rb-detail {
    color: var(--ink-2);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.5;
}
.rb-detail.rb-info {
    font-family: var(--mono, monospace);
    font-size: 11.5px;
    color: var(--ink-3);
}
.rb-actions {
    display: flex; gap: 10px; margin-top: 4px;
    flex-wrap: wrap;
}
.rb-resume, .rb-discard {
    font: inherit;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-0);
    color: var(--ink-1);
    cursor: pointer;
    transition: background 80ms, border-color 80ms;
}
.rb-resume {
    background: #d97706;
    color: white;
    border-color: #b45309;
    font-weight: 500;
}
.rb-resume:hover:not(:disabled) {
    background: #b45309;
}
.rb-resume:disabled, .rb-discard:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.rb-discard:hover:not(:disabled) {
    background: var(--paper-2);
    border-color: var(--ink-3);
}

/* ── Quick first response card ───────────────────────────────────── */
.quick-first {
    position: relative;
    padding: 16px 18px 18px 20px;
    background: var(--warm-bg);
    border: 1px solid var(--warm-line);
    border-radius: var(--radius);
    border-left-width: 3px;
}
.qf-head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.qf-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 10px 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--warm-ink);
    background: var(--warm-pill);
    border: 1px solid var(--warm-border);
}
.qf-badge svg { color: var(--warm-glyph); }
.qf-model { font-weight: 400; opacity: 0.85; }
.qf-time  { color: var(--warm-glyph); opacity: 0.9; }
.qf-note  { font-size: 11.5px; color: var(--warm-ink); opacity: 0.7; }

/* ── Verdict card ────────────────────────────────────────────────── */
.verdict-block {
    position: relative;
    padding: 28px;
    background: var(--paper-0);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
/* Phase 10: colored left band only on point cards (claim-level RAG)
   — removed from the verdict-block at operator request to reduce
   visual noise; verdict still carries the .conf-pill in the head. */
.point.conf-band-green { border-left: 3px solid var(--green); }
.point.conf-band-amber { border-left: 3px solid var(--amber); }
.point.conf-band-red   { border-left: 3px solid var(--red); }

.verdict-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.verdict-eyebrow {
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
.verdict-eyebrow .spark { color: var(--ink-2); }

.conf-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid;
}
.conf-pill.conf-green { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.conf-pill.conf-amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.conf-pill.conf-red   { background: var(--red-soft);   color: var(--red);   border-color: var(--red-line);   }
.conf-pill .conf-dot.conf-on-pill { width: 7px; height: 7px; }
.conf-pill.conf-green .conf-dot { background: var(--green); }
.conf-pill.conf-amber .conf-dot { background: var(--amber); }
.conf-pill.conf-red   .conf-dot { background: var(--red); }

.verdict-headline {
    /* Phase 9: dropped Instrument Serif here — its narrow width hurts
       readability on long headlines. Inter Tight at weight 500 reads
       cleaner and stays consistent with the body. */
    font-family: var(--sans);
    font-size: 24px;
    line-height: 1.32;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--ink-0);
    margin-bottom: 10px;
    text-wrap: pretty;
}
.verdict-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    /* Phase 9: was 60ch — wider to use the new horizontal real estate. */
    max-width: 85ch;
    text-wrap: pretty;
}
.verdict-body p { margin: 0 0 10px; }
.verdict-body p:last-child { margin-bottom: 0; }
.verdict-reason {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.55;
}
.verdict-reason .mono {
    font-size: 10.5px;
    color: var(--ink-4);
    letter-spacing: 0.04em;
    margin-right: 3px;
}

/* ── Validation strip ────────────────────────────────────────────── */
.validation-strip {
    padding: 12px 16px;
    border: 1px solid;
    border-radius: var(--radius);
    display: flex; flex-direction: column; gap: 6px;
}
.validation-strip.val-green  { background: var(--green-soft); border-color: var(--green-line); }
.validation-strip.val-yellow,
.validation-strip.val-amber  { background: var(--amber-soft); border-color: var(--amber-line); }
.validation-strip.val-red    { background: var(--red-soft);   border-color: var(--red-line); }
.vs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-icon {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--paper-0);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.val-green  .vs-icon { color: var(--green); border: 1px solid var(--green-line); }
.val-yellow .vs-icon,
.val-amber  .vs-icon { color: var(--amber); border: 1px solid var(--amber-line); }
.val-red    .vs-icon { color: var(--red);   border: 1px solid var(--red-line); }
.vs-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.val-green  .vs-label { color: var(--green); }
.val-yellow .vs-label,
.val-amber  .vs-label { color: var(--amber); }
.val-red    .vs-label { color: var(--red); }
.vs-verdict { font-size: 13px; color: var(--ink-1); }
.vs-additional {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
    padding-left: 28px;
}
.vs-additional-label {
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.04em;
    margin-right: 3px;
}
.vs-corrections {
    margin: 6px 0 0 28px;
    padding: 0;
    list-style: disc inside;
    font-size: 12.5px;
    color: var(--ink-1);
}
.vs-corrections li { padding: 2px 0; }

/* ── Answer actions row ──────────────────────────────────────────── */
.answer-actions {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px;
    flex-wrap: wrap;
}
.answer-actions .ghost-btn:disabled {
    opacity: 0.6;
    cursor: default;
    color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
}
.aa-spacer { flex: 1; }
.link-btn {
    font-size: 12px;
    color: var(--ink-1);
    text-decoration: underline;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 3px;
    padding: 2px 0;
    background: none; border: 0; cursor: pointer;
    font-family: inherit;
}
.link-btn:hover { text-decoration-color: var(--ink-2); color: var(--ink-0); }

/* ── Section heads (Supporting points, Sources, etc.) ────────────── */
.section-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.section-head h3 {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.section-sub { font-size: 12px; color: var(--ink-3); }
.count-inline {
    color: var(--ink-3); font-weight: 400;
    font-family: var(--mono); font-size: 12px;
}

/* ── Supporting points ───────────────────────────────────────────── */
.points { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.point {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 16px 18px 16px 16px;
    background: var(--paper-0);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: border-color 0.15s;
}
.point:hover { border-color: var(--rule-2); }
.point-n {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.04em;
    margin-top: 3px;
}
.point-body { min-width: 0; }
.point-claim {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-0);
    font-weight: 450;
    margin-bottom: 4px;
    text-wrap: pretty;
}
.point-detail {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* Citation superscripts inside claims */
.cite {
    font-size: 9.5px;
    color: var(--ink-3);
    margin-left: 2px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    vertical-align: super;
    line-height: 1.5;
}

/* ── Sources block ───────────────────────────────────────────────── */
.source-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    list-style: none; margin: 0; padding: 0;
}
@media (max-width: 760px) { .source-list { grid-template-columns: 1fr; } }
.source-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px 10px 0;
    border-bottom: 1px dashed var(--rule);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s, padding 0.12s;
}
.source-list li:hover { background: var(--paper-2); padding-left: 8px; }
.src-n { font-size: 11px; color: var(--ink-4); margin-top: 2px; flex-shrink: 0; }
.src-body { flex: 1; min-width: 0; }
.src-title { font-size: 13.5px; color: var(--ink-0); line-height: 1.4; text-wrap: pretty; }
.src-meta {
    font-size: 11.5px; color: var(--ink-3); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.src-meta .sep { margin: 0 5px; color: var(--ink-4); }
.src-go { color: var(--ink-3); margin-top: 3px; flex-shrink: 0; }
.source-list li:hover .src-go { color: var(--ink-0); }

/* ── Run details ─────────────────────────────────────────────────── */
.stats {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-0);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.stats[open] { box-shadow: var(--shadow-1); }
.stats-summary {
    list-style: none;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}
.stats-summary::-webkit-details-marker { display: none; }
.stats-summary:hover { background: var(--paper-2); }
.stats-label {
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}
.stats-glance {
    flex: 1;
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-chev { color: var(--ink-3); transition: transform 0.2s; }
.stats[open] .stats-chev { transform: rotate(180deg); }

.stats-body {
    padding: 16px 18px 20px;
    border-top: 1px solid var(--rule);
    display: flex; flex-direction: column;
    gap: 22px;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 22px;
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label {
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.stat-value {
    font-size: 15px; color: var(--ink-0);
    font-family: var(--mono); font-weight: 400;
}
.stats-section-head { margin-bottom: 10px; }
.stats-section-title {
    font-size: 12px;
    color: var(--ink-1);
    font-weight: 500;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 2px;
}
.stats-section-sub { font-size: 11.5px; color: var(--ink-3); }

/* Pipeline-stages timeline (Phase 4 will populate live SSE data) */
.stages { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.stage {
    display: grid; grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 4px 0;
}
.stage-marker {
    display: flex; flex-direction: column; align-items: center;
    width: 22px; padding-top: 2px;
}
.stage-tick {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-line);
    display: grid; place-items: center;
    font-size: 10px;
    flex-shrink: 0;
}
.stage-running .stage-tick {
    background: var(--amber-soft); color: var(--amber);
    border-color: var(--amber-line);
}
.stage-error .stage-tick {
    background: var(--red-soft); color: var(--red);
    border-color: var(--red-line);
}
.stage-line {
    flex: 1; width: 1px; min-height: 12px;
    background: var(--rule);
    margin-top: 2px;
}
.stage-body { padding-bottom: 8px; }
.stage-row {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 12.5px;
}
.stage-name { color: var(--ink-1); font-weight: 450; flex: 1; }
.stage-time, .stage-cost {
    font-size: 11px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.stage-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* First-pass closeness rows */
.closeness { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; }
.closeness li {
    display: grid;
    grid-template-columns: 22px minmax(130px, 1fr) 1fr 44px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--ink-1);
}
.closeness .rank { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.closeness .cl-bar {
    height: 6px;
    background: var(--paper-3);
    border-radius: 99px;
    overflow: hidden;
}
.closeness .cl-fill {
    height: 100%;
    background: var(--ink-1);
    border-radius: 99px;
}
.closeness li:first-child .cl-fill { background: var(--green); }
.closeness .cl-pct {
    font-size: 11.5px; color: var(--ink-2); text-align: right;
    font-variant-numeric: tabular-nums;
}
.cl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Per-model usage table */
.per-model {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.per-model th, .per-model td {
    padding: 8px 0;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}
.per-model th {
    font-weight: 500;
    color: var(--ink-3);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.per-model td { color: var(--ink-1); }
.per-model td.num, .per-model th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .messages-container { padding: 32px 16px 60px; gap: 32px; }
    .question { font-size: 28px; }
    .verdict-block { padding: 20px 18px 20px 22px; }
    .verdict-headline { font-size: 22px; }
    .point { grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 14px 14px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
 * DESIGN V2 — PHASE 9: round results panel
 * Always-visible (not collapsed) summary of the convergence run's
 * agreement / disagreement / clarifications / per-provider quality.
 * Sits between answer-actions and points-block.
 * ════════════════════════════════════════════════════════════════════ */
.round-results {
    display: flex; flex-direction: column;
    /* Phase 10: 14 → 20 px so sections breathe. */
    gap: 20px;
    padding: 22px 24px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* Stats strip (cost · time · rounds · models · sources). */
.rr-stats {
    display: flex; flex-wrap: wrap; gap: 0;
    font-size: 12px;
    color: var(--ink-3);
    align-items: center;
}
.rr-stat {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 0 14px;
    border-right: 1px solid var(--rule-2);
}
.rr-stat:first-child { padding-left: 0; }
.rr-stat:last-child { border-right: 0; padding-right: 0; }
.rr-stat-label {
    font-size: 10.5px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rr-stat-val {
    font-size: 13px;
    color: var(--ink-0);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Summary pill row. */
.rr-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px 4px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 450;
    border: 1px solid;
}
.rr-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rr-pill.rr-agreed   { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.rr-pill.rr-disputed { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); cursor: pointer; transition: background 0.12s; }
.rr-pill.rr-disputed:hover { background: var(--amber-line); }
.rr-pill.rr-clarif   { background: var(--paper-1); color: var(--ink-2); border-color: var(--rule); }

/* Lists of items (agreement / disagreement / clarifications). */
.rr-section { display: flex; flex-direction: column; gap: 6px; }
.rr-section-head {
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}
.rr-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-1);
}
.rr-list li { position: relative; padding-left: 14px; }
.rr-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rr-list-agreed   li::before { background: var(--green); }
.rr-list-disputed li::before { background: var(--amber); }
.rr-list-clarif   li::before { background: var(--ink-3); }
.rr-list-clarif li {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: baseline;
    font-size: 12.5px;
}
.rr-clarif-model { font-size: 10.5px; color: var(--ink-3); }
.rr-clarif-q { color: var(--ink-1); }
.rr-clarif-a { color: var(--ink-2); font-style: italic; }
.rr-inline-link {
    background: none; border: 0;
    color: var(--amber);
    font-size: 11.5px;
    cursor: pointer;
    padding: 0 4px;
    text-decoration: underline;
    text-decoration-color: var(--amber-line);
    text-underline-offset: 2px;
}
.rr-inline-link:hover { color: var(--ink-0); }

/* Per-provider quality strip. */
.rr-quality {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px;
    color: var(--ink-2);
}
.rr-quality li {
    display: flex; gap: 12px; flex-wrap: wrap;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dashed var(--rule);
}
.rr-quality li:last-child { border-bottom: 0; }
.rr-q-name {
    font-weight: 500; color: var(--ink-1);
    min-width: 120px;
}
.rr-q-metric { display: inline-flex; gap: 4px; align-items: baseline; }
.rr-q-label {
    font-size: 9.5px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .round-results { padding: 14px 14px; }
    .rr-stat { padding: 0 10px; }
    .rr-q-name { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════
 * DESIGN V2 — PHASE 6: dispute popup
 * .dispute-link amber pill on a point with disagreement → opens .modal
 * inside .modal-backdrop with positions + resolution.
 * ════════════════════════════════════════════════════════════════════ */
.dispute-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 4px;
    padding: 4px 11px 4px 8px;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--amber);
    background: var(--amber-soft);
    border: 1px solid var(--amber-line);
    border-radius: 99px;
    letter-spacing: 0.005em;
    transition: background 0.15s;
    cursor: pointer;
    align-self: flex-start;
}
.dispute-link:hover { background: var(--amber-line); }

/* New modal chrome lives inside .modal-backdrop, separate from the
   legacy .modal-overlay path used by feedback/settings. */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20,20,20,0.32);
    display: grid; place-items: center;
    z-index: 100;
    padding: 24px;
    /* Alpine x-transition.opacity drives the fade — no CSS animation. */
}
.modal-backdrop .modal {
    width: 100%; max-width: 560px;
    background: var(--paper-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    /* Reset the inherited legacy .modal sizing so design rules win. */
    max-height: 80vh;
    display: flex; flex-direction: column;
    border: 0;
}
.modal-backdrop .modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
}
.modal-backdrop .modal-eyebrow {
    font-size: 10.5px;
    color: var(--amber);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}
.modal-backdrop .modal-title {
    /* Phase 9: sans for legibility, consistent with verdict-headline. */
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-0);
    letter-spacing: -0.015em;
    text-wrap: pretty;
    margin: 0;
}
.modal-backdrop .modal-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
}
.modal-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }

.dispute-section { margin-bottom: 18px; }
.dispute-section:last-of-type { margin-bottom: 0; }
.dispute-topic {
    font-size: 13.5px;
    color: var(--ink-1);
    font-weight: 500;
    margin-bottom: 6px;
}

.positions { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.positions li {
    padding: 10px 0;
    border-top: 1px solid var(--rule);
}
.positions li:first-child { border-top: 0; padding-top: 0; }
.pos-name {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
    font-family: var(--mono);
}
.pos-stance { font-size: 14px; line-height: 1.55; color: var(--ink-1); text-wrap: pretty; }

.resolution {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--paper-2);
    border-radius: var(--radius);
}
.res-label {
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}
.resolution p { margin-top: 5px; font-size: 13.5px; color: var(--ink-1); line-height: 1.55; }

/* ── Model statistics ──────────────────────────────────────────────── */

/* Floating "Model statistics" pill, bottom-right of the viewport.
   Discreet by default; lifts on hover. Hidden on narrow screens —
   the mobile input bar already lives in the same corner. */
.model-stats-link {
    position: fixed;
    right: 16px;
    bottom: 12px;
    z-index: 50;
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    background: var(--paper-0);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.model-stats-link:hover {
    color: var(--ink-0);
    border-color: var(--rule-2);
    box-shadow: var(--shadow-2);
}
@media (max-width: 720px) {
    .model-stats-link { display: none; }
}

.modal-model-stats { width: min(1040px, 96vw); max-height: 88vh; }
.modal-model-stats .modal-body { gap: 12px; }

.model-stats-coverage {
    margin-top: -4px;
    font-size: 11px;
    color: var(--ink-3);
}

.model-stats-loading {
    padding: 20px 0;
    text-align: center;
    color: var(--ink-3);
    font-style: italic;
}

.model-stats-empty {
    padding: 20px 16px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}

.model-stats-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.model-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.model-stats-table thead th {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: help;  /* hover for column-meaning tooltip */
}
.model-stats-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-1);
    white-space: nowrap;
}
.model-stats-table tbody tr:last-child td { border-bottom: none; }
.model-stats-table tbody tr:hover { background: var(--paper-2); }

.ms-col-provider { font-weight: 500; color: var(--ink-0); }
.ms-col-n,
.ms-col-pct,
.ms-col-cost {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.model-stats-table thead .ms-col-n,
.model-stats-table thead .ms-col-pct,
.model-stats-table thead .ms-col-cost {
    text-align: right;
}

/* ── Inline conversation summary bubble ───────────────────────────── */
/* Rendered alongside user/assistant messages when the user clicks
   Summarize (or Verify-in-consensus, which generates one first). One
   per conversation — server replaces the prior row on regen. The
   .stale class appears when more messages have been added since the
   summary was generated; the .sb-refresh button kicks off a regen. */
.summary-bubble {
    margin: 24px 0 32px;
    padding: 18px 22px;
    background: var(--paper-1);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-2);
    border-radius: var(--radius);
    max-width: 820px;
    width: 100%;
}
.summary-bubble.stale {
    border-left-color: var(--amber);
    background: var(--amber-soft, var(--paper-1));
}
.sb-head {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.sb-label { color: var(--ink-1); font-weight: 600; }
.sb-meta  { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.sb-refresh {
    margin-left: auto;
    font-size: 11px;
    color: var(--amber);
    text-transform: none;
    letter-spacing: 0;
}
.sb-body {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-1);
}
.sb-body p   { margin: 0 0 10px; }
.sb-body p:last-child { margin-bottom: 0; }
.sb-body ul,
.sb-body ol  { margin: 6px 0 12px 20px; }
.sb-body li  { margin-bottom: 4px; }

/* ── Timeline restructure (Round 1 → Judge → Agreements → Round 2) ──
 * The post-run answer view now leads with the engine's pipeline as a
 * stack of collapsible <details>; the final-synthesis verdict-block
 * sits below as the visible answer. Each panel mirrors the live-view
 * layout so the live and reloaded views look the same.
 */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 22px;
}
.round-panel {
    background: var(--paper-1);
    border: 1px solid var(--paper-3);
    border-radius: 6px;
    overflow: hidden;
}
.round-panel[open] {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 13.5px;
}
.rp-head::-webkit-details-marker { display: none; }
.rp-status {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rp-status.rp-done   { color: var(--green); }
.rp-status.rp-error  { color: var(--red); }
.rp-status.rp-running { color: var(--amber); }
.rp-status.rp-pending { color: var(--ink-3); }
.rp-label {
    font-weight: 500;
    color: var(--ink-1);
}
.rp-meta {
    margin-left: auto;
    display: inline-flex;
    gap: 10px;
    color: var(--ink-3);
    font-size: 12px;
}
.rp-chev {
    color: var(--ink-3);
    transition: transform .15s ease;
}
.round-panel[open] .rp-chev { transform: rotate(180deg); }
.rp-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--paper-2);
}
.rp-models {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rp-models thead th {
    text-align: left;
    padding: 8px 10px;
    color: var(--ink-3);
    font-weight: 500;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--paper-2);
}
.rp-models td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--paper-2);
    vertical-align: top;
}
.rp-models tr:last-child td { border-bottom: 0; }
.rp-models .num { text-align: right; }
.rp-model-status { width: 22px; }
.rp-model-error td { background: rgba(220,53,69,0.04); }
.rp-raw summary {
    cursor: pointer;
    list-style: none;
}
.rp-raw summary::-webkit-details-marker { display: none; }
.rp-raw[open] > summary { color: var(--ink-1); font-weight: 500; }
.rp-raw-body {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--paper-2);
    border-left: 2px solid var(--paper-3);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    line-height: 1.55;
    max-height: 520px;
    overflow: auto;
}
.rp-raw-error {
    color: var(--red);
    font-family: var(--mono);
    font-size: 12px;
    white-space: pre-wrap;
}
.rp-raw-reasoning {
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 12.5px;
    font-style: italic;
}

.rp-judge { padding: 4px 0; }
.rp-judge-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.rp-judge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 12px;
    color: var(--ink-1);
}
.rp-judge-pill.conf-green  { background: rgba(40,167,69,0.10); color: var(--green); }
.rp-judge-pill.conf-amber  { background: rgba(255,193,7,0.12);  color: #8a6300; }
.rp-judge-pill.conf-red    { background: rgba(220,53,69,0.10); color: var(--red); }
.rp-judge-conf { color: var(--ink-3); font-size: 12px; }
.rp-judge-synth {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-1);
}

.rp-agreements .rp-section { margin-bottom: 14px; }
.rp-agreements .rp-section:last-child { margin-bottom: 0; }
.rp-section-head {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.rp-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
}
.rp-list li { margin-bottom: 4px; }
.rp-list-disputed li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.rp-inline-link {
    background: none;
    border: 0;
    color: var(--amber);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.rp-inline-link:hover { text-decoration: underline; }
.rp-clarif-model { color: var(--ink-3); margin-right: 6px; font-size: 11.5px; }
.rp-quality {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rp-quality li {
    display: flex;
    gap: 12px;
    align-items: baseline;
}
.rp-q-name { width: 90px; color: var(--ink-1); }
.rp-q-metric {
    background: none;
    border: 0;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ink-3);
    font-family: var(--mono);
}
.rp-q-metric:hover { background: var(--paper-2); color: var(--ink-1); }
.rp-q-label { color: var(--ink-3); margin-right: 4px; }

.rp-topic-summary {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ink-2);
}
.rp-topic-label { color: var(--ink-3); margin-right: 4px; }
.point-judge-provisional {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--paper-2);
    border: 1px dashed var(--paper-3);
    border-radius: 4px;
    opacity: 0.85;
}
.pjp-head {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.pjp-positions {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pjp-positions li {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.pjp-model { color: var(--ink-3); min-width: 90px; }
.pjp-stance { color: var(--ink-1); }

/* ── Compiled prompt (three-panel disclosure under user bubble) ── */
.compiled-prompt-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.cp-panel {
    border: 1px solid var(--paper-3);
    border-radius: 4px;
    overflow: hidden;
}
.cp-panel-head {
    padding: 6px 10px;
    background: var(--paper-2);
    color: var(--ink-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cp-panel-body {
    margin: 0;
    padding: 10px 12px;
    background: var(--paper-1);
    color: var(--ink-1);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow: auto;
}

/* ── Per-point sources toggle ── */
.point-sources {
    margin-top: 8px;
}
.point-sources-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    color: var(--ink-3);
    font-size: 12px;
    user-select: none;
    padding: 3px 8px;
    border: 1px solid var(--paper-3);
    border-radius: 999px;
    background: var(--paper-1);
}
.point-sources-toggle::-webkit-details-marker { display: none; }
.point-sources-toggle:hover { color: var(--ink-1); background: var(--paper-2); }
.point-sources[open] > .point-sources-toggle {
    color: var(--ink-1);
    background: var(--paper-2);
}
.point-source-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}
.point-source-list li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
}
.point-source-list li:hover { background: var(--paper-2); }
.point-source-list .src-title {
    color: var(--ink-1);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.point-source-list .src-meta { color: var(--ink-3); font-size: 11.5px; }

/* ── Stop button (composer; replaces Send while isLoading) ── */
.btn-stop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--red);
    background: var(--paper-1);
    color: var(--red);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.btn-stop:hover:not(:disabled) {
    background: rgba(220,53,69,0.06);
}
.btn-stop:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ── Check with GPT Pro button ── */
.btn-gpt-pro {
    position: relative;
}
.btn-gpt-pro .btn-hint {
    margin-left: 6px;
    color: var(--ink-3);
    font-size: 10.5px;
    border-left: 1px solid var(--paper-3);
    padding-left: 6px;
}

/* ── Stats-detail modal ── */
.modal-stats-detail {
    max-width: 720px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}
.modal-stats-detail .modal-body {
    overflow: auto;
    padding-right: 8px;
}
.msd-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--paper-3);
    margin-bottom: 12px;
    font-size: 12px;
}
.msd-tot {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
}
.msd-tot-label { color: var(--ink-3); }
.msd-tot-val { color: var(--ink-1); font-weight: 500; }
.msd-group {
    margin-bottom: 10px;
    border: 1px solid var(--paper-3);
    border-radius: 4px;
    overflow: hidden;
}
.msd-group summary {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.msd-group summary::-webkit-details-marker { display: none; }
.msd-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.msd-dot.conf-green  { background: var(--green); }
.msd-dot.conf-amber  { background: var(--amber); }
.msd-dot.conf-red    { background: var(--red); }
.msd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.msd-list li {
    padding: 8px 12px;
    border-top: 1px solid var(--paper-2);
}
.msd-claim {
    color: var(--ink-1);
    line-height: 1.5;
}
.msd-just {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1.5;
}

/* ── Resume banner — colour by status — added so cancel/error paths
 * read at a glance; existing markup uses :data-status="msg.status".
 */
.resume-banner[data-status="cancelled"] {
    border-left: 3px solid var(--amber);
}
.resume-banner[data-status="error"] {
    border-left: 3px solid var(--red);
}