/* ── Variables ────────────────────────────────────────────────────── */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f8;
    --bg-tertiary: #efefef;
    --bg-hover: #e5e5e5;
    --text-primary: #0d0d0d;
    --text-secondary: #6c6c6c;
    --text-muted: #9a9a9a;
    --border: #e5e5e5;
    --accent: #4a4a4a;
    --accent-hover: #2a2a2a;
    --accent-light: rgba(74,74,74,0.08);
    /* Confidence indicator colors (used for confidence dots, badges and
       inline markers — independent of the neutral gray UI accent). */
    --green: #2f9e4f;
    --yellow: #b8860b;
    --orange: #d4760a;
    --red: #d1453b;
    --sidebar-width: 280px;
    --rail-width: 56px;
    --header-height: 56px;
    --radius: 16px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

/* ── 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: 'Inter', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    overflow: hidden;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 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 ─────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.sidebar.collapsed { width: var(--rail-width); min-width: var(--rail-width); }
/* When the user is actively dragging the resize handle we suppress the
   width transition for a smooth, real-time drag. */
.sidebar:not(.resizing) { transition: width 0.15s, min-width 0.15s; }

/* Resize handle on the right edge of the sidebar */
.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(--accent-light);
}
.sidebar.resizing { user-select: none; }

/* ── Sidebar top rail (always visible) ─────────────────────────── */
.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px 8px;
    border-bottom: 1px solid var(--border);
}
.rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 36px;
}
.rail-logo {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    font-family: inherit;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    user-select: none;
    margin-left: 4px;
}
.rail-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.rail-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar.collapsed .rail-header { justify-content: center; }
.sidebar.collapsed .rail-header .rail-logo { margin-left: 0; }
.sidebar.collapsed .rail-header .rail-toggle { display: none; }

.rail-newchat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
    text-align: left;
    width: 100%;
}
.rail-newchat:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.rail-newchat:hover .rail-icon { color: var(--text-primary); }
.rail-label { white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .rail-newchat { justify-content: center; padding: 8px 0; }

/* Collapsed-state stand-alone expand button (shown below logo when collapsed).
   In the collapsed rail, the toggle moves under the logo so the layout reads
   top-down: logo → expand → new chat. */
.sidebar.collapsed .sidebar-top {
    align-items: center;
}
.sidebar.collapsed .rail-header {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sidebar.collapsed .rail-header .rail-toggle {
    display: flex;
}

.sidebar-actions { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sidebar-actions-row { display: flex; gap: 6px; }
.sidebar-actions-row .btn { flex: 1; }

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

.sidebar-tree {
    flex: 1; overflow-y: auto; padding: 8px 0;
    scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent;
}

/* Tree items */
.tree-folder {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
}
.tree-folder:hover { background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.tree-folder:hover .btn-tiny { opacity: 1; }
.tree-toggle { font-size: 10px; width: 14px; text-align: center; }
.tree-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-children { padding-left: 16px; }

.tree-conv {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px 7px 18px;
    cursor: pointer; font-size: 13px; color: var(--text-secondary);
    border-radius: var(--radius-sm); margin: 1px 6px;
    transition: background 0.1s;
}
.tree-conv:hover { background: var(--bg-tertiary); }
.tree-conv:hover .btn-tiny { opacity: 1; }
.tree-conv.active { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 500; }
.conv-date {
    font-size: 11px; color: var(--text-muted);
    flex-shrink: 0; min-width: 38px;
    font-variant-numeric: tabular-nums;
}
.conv-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tree-section { margin-top: 8px; }
.tree-section-label {
    padding: 6px 14px; font-size: 11px; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.05em; font-weight: 600;
}

.drop-target { background: var(--accent-light) !important; border-radius: var(--radius-sm); }

/* Sidebar footer (always visible, even when collapsed) */
.sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.sidebar.collapsed .sidebar-footer { padding: 10px 4px; align-items: center; }
.sidebar-footer .btn-icon {
    font-size: 16px;
    padding: 6px;
    color: var(--text-secondary);
}
.sidebar-footer .btn-icon:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}
.sidebar-footer-actions {
    display: flex; align-items: center; gap: 10px;
}
.sidebar.collapsed .sidebar-footer-actions {
    flex-direction: column; justify-content: center;
}
.sidebar-textlink {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.12s;
}
.sidebar-textlink:hover {
    color: var(--text-primary);
    text-decoration: underline;
}
.sidebar-signout {
    margin-top: 4px;
    padding: 2px 4px;
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.12s;
}
.sidebar-signout:hover { color: var(--text-secondary); text-decoration: underline; }
.sidebar-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 6px;
    font-size: 13px; color: var(--text-secondary);
}
.user-badge {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-name {
    flex: 1; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--accent-light); color: var(--accent);
    padding: 2px 6px; border-radius: 4px; font-weight: 700;
}
.user-tag-muted {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--bg-tertiary); color: var(--text-muted);
    padding: 2px 6px; border-radius: 4px; font-weight: 700;
}

/* ── Chat Area ───────────────────────────────────────────────────── */
.chat-area {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; background: var(--bg-primary);
}

.chat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; border-bottom: 1px solid var(--border);
    min-height: var(--header-height); background: var(--bg-primary);
}
.chat-title {
    flex: 1; font-weight: 600; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: right; color: var(--text-secondary);
}
.chat-controls { display: flex; align-items: flex-end; gap: 10px; }

.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); }

.sidebar-toggle { font-size: 22px; }

/* 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-size: 28px; color: var(--accent); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.02em; }
.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;
}
.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 { margin: 8px 0; }
.message-content ul, .message-content ol { margin: 8px 0; padding-left: 24px; }
.message-content li { margin: 6px 0; line-height: 1.6; }
/* Different bullet styles per nesting level */
.message-content ul { list-style-type: square; }
.message-content ul ul { list-style-type: circle; }
.message-content ul ul ul { list-style-type: disc; }
.message-content ul ul ul ul { list-style-type: '–  '; }
.message-content ol { list-style-type: decimal; }
.message-content ol ol { list-style-type: lower-alpha; }
.message-content ol ol ol { list-style-type: lower-roman; }
.message-content li > ul, .message-content li > ol { margin: 4px 0; }
.message-content code {
    background: var(--bg-tertiary); padding: 2px 6px;
    border-radius: 4px; font-size: 13px; font-family: 'Consolas', 'SF Mono', 'Menlo', monospace;
}
.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;
}
.message-content table {
    border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13px;
}
.message-content th, .message-content td {
    padding: 10px 14px; border: 1px solid var(--border); text-align: left;
}
.message-content th {
    background: var(--bg-secondary); font-weight: 600; color: var(--text-primary);
}
.message-content td { color: var(--text-secondary); }
.message-content tr:hover td { background: var(--bg-secondary); }

/* 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;
}
.live-cost-amount { font-weight: 600; 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-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);
}
.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: monospace; }

.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);
}
.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 ───────────────────────────────────────── */
.rail-quickchat {
    margin-top: 2px;
}
.rail-quickchat .rail-icon { color: var(--yellow); }

@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;
    max-width: 860px; width: 100%; margin: 0 auto;
}
.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 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.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 ─────────────────────────────────────────── */
.drift-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; background: rgba(212,118,10,0.06);
    border-bottom: 1px solid rgba(212,118,10,0.2);
    font-size: 13px; color: var(--orange);
}
.drift-banner span { flex: 1; }

/* ── 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-size: 18px; font-weight: 700; color: var(--accent);
    letter-spacing: -0.02em;
}
.auth-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.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) {
    .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;
        /* Hide everything inside so no fragments leak past the 0-width clip */
        overflow: hidden;
    }
    .sidebar.collapsed .sidebar-top,
    .sidebar.collapsed .sidebar-footer { display: none; }
    .message-user .message-content { max-width: 90%; }
    .chat-header { padding: 8px 12px; gap: 8px; }
    .chat-controls { gap: 4px; }
    .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; }
}

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

/* ── Dark Theme ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --bg-tertiary: #2a2a2a;
        --bg-hover: #333333;
        --text-primary: #ececec;
        --text-secondary: #a0a0a0;
        --text-muted: #6b6b6b;
        --border: #2a2a2a;
        --accent: #c0c0c0;
        --accent-hover: #e0e0e0;
        --accent-light: rgba(192,192,192,0.10);
        --green: #4cc06b;
        --yellow: #d4a017;
        --orange: #e8881a;
        --red: #e05545;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    }

    body { -webkit-font-smoothing: antialiased; }
    .btn-primary { color: #0d0d0d; }
    .message-user .message-content { background: var(--bg-tertiary); }
    .message-content pre { border-color: var(--border); }
    .message-content tr:hover td { background: rgba(255,255,255,0.03); }
    .modal-overlay { background: rgba(0,0,0,0.6); }
    .confidence-point { border-bottom-color: rgba(255,255,255,0.06); }
    .overall-confidence-badge.overall-green { background: rgba(76,192,107,0.12); border-color: rgba(76,192,107,0.30); }
    .overall-confidence-badge.overall-yellow { background: rgba(212,160,23,0.12); border-color: rgba(212,160,23,0.3); }
    .overall-confidence-badge.overall-orange { background: rgba(232,136,26,0.12); border-color: rgba(232,136,26,0.3); }
    .overall-confidence-badge.overall-red { background: rgba(224,85,69,0.12); border-color: rgba(224,85,69,0.3); }
    .validation-green { background: rgba(76,192,107,0.12); border-color: rgba(76,192,107,0.30); }
    .validation-yellow { background: rgba(212,160,23,0.12); border-color: rgba(212,160,23,0.3); }
    .validation-orange { background: rgba(232,136,26,0.12); border-color: rgba(232,136,26,0.3); }
    .validation-red { background: rgba(224,85,69,0.12); border-color: rgba(224,85,69,0.3); }
    .source-link { background: rgba(192,192,192,0.10); border-color: rgba(192,192,192,0.20); }
    .drift-banner { background: rgba(232,136,26,0.1); border-bottom-color: rgba(232,136,26,0.25); }
    .btn-validate { background: var(--bg-secondary); }
    .input-textarea { box-shadow: none; }
    .auth-error { background: rgba(224,85,69,0.10); border-color: rgba(224,85,69,0.3); }
    .user-badge { color: #0d0d0d; }
    .user-tag { color: var(--text-primary); background: rgba(192,192,192,0.15); }
    .clarify-branch-chip { background: rgba(76,192,107,0.14); }
    .clarify-option-chip { background: var(--bg-tertiary); border-color: var(--border); }
    .clarify-option-chip.selected { background: var(--accent); color: #fff; }
    .clarify-branches { background: var(--bg-tertiary); }
    .clarify-question { background: var(--bg-tertiary); }
    .clarify-warning { background: rgba(232,136,26,0.12); border-color: rgba(232,136,26,0.3); }
    .taste-chip.taste-favor { background: rgba(76,192,107,0.14); }
    .taste-chip.taste-avoid { background: rgba(224,85,69,0.14); }
    .taste-branch { background: var(--bg-tertiary); }
}

/* ── 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 ─────────────────────────────────────────────── */
.btn-discover {
    padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--bg-secondary); border: 1px solid var(--border);
    cursor: pointer; font-size: 16px; line-height: 1;
}
.btn-discover:hover { background: var(--bg-tertiary); }

.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; }
}