/* ============================================================================
   KIBO v2 — Chat page (global: markdown is injected via MarkupString)
   Extracted from app.css (monolith split). Token-based, see _tokens.css.
   ============================================================================ */

/* ── Chat ────────────────────────────────────────────────────────────────── */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    /* Anchors the lazy-load spinner overlays (KBW-0095/0064). */
    position: relative;
}


/* ── Empty state: welcome centered ──────────────────────────────────────── */
.chat-container.chat-empty {
    justify-content: center;
    gap: 1.25rem;
    padding-bottom: 4rem;
}
.chat-container.chat-empty .chat-messages {
    display: none;
}
.chat-container.chat-empty .chat-input-bar {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.chat-welcome {
    text-align: center;
    padding: 0 1rem;
    animation: fadeInUp 0.35s ease;
}
.chat-welcome-title {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0 0 0.4rem;
    color: var(--text-primary);
}
.chat-welcome-sub {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Daily pill (KBW-0154) ───────────────────────────────────────────────────
   Sits under the composer inside the centred welcome stack, at the composer's own width so the two
   read as one composition. The generous top margin is load-bearing: closer in, the card reads as
   help text belonging to the textarea rather than as a separate thing worth reading.
   Appears a beat after the greeting, so the eye lands on "where do I type" first. */
.daily-pill {
    max-width: 700px;
    width: 100%;
    margin: 2.25rem auto 0;
    padding: 0.85rem 1rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface-2);
    animation: fadeInUp 0.35s ease 0.15s backwards;
}
.daily-pill.is-busy { opacity: .6; }

.daily-pill-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.daily-pill-title {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

/* Level as three dots rather than a word: "pro" printed on a basic tip reads as condescension,
   but a reader who wants to know where they are still can. */
.daily-pill-level { display: flex; gap: 3px; flex-shrink: 0; }
.daily-pill-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border);
}
.daily-pill-dot.on { background: var(--accent); }

.daily-pill-x {
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.daily-pill-x:hover { color: var(--text-primary); }

.daily-pill-body {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
/* The line the reader acts on, so it carries the accent and does not blend into the explanation. */
.daily-pill-action {
    margin: 0.45rem 0 0;
    padding-left: 0.6rem;
    border-left: 2px solid var(--accent);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.daily-pill-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.daily-pill-nav { display: flex; align-items: center; gap: 0.35rem; }
.daily-pill-arrow {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    width: 22px; height: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.daily-pill-arrow:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.daily-pill-arrow:disabled { opacity: .35; cursor: default; }
.daily-pill-count { font-size: 0.75rem; color: var(--text-muted); }
.daily-pill-link  { font-size: 0.8rem; color: var(--accent); text-decoration: none; }
.daily-pill-link:hover { text-decoration: underline; }

/* What is left after dismissing: an undo that outlives a toast, because noticing the mistake means
   looking back at the empty spot. Goes away with the empty state itself. */
.daily-pill-muted {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.daily-pill-undo {
    border: 0;
    background: none;
    padding: 0;
    color: var(--accent);
    font-size: 0.8rem;
    cursor: pointer;
}
.daily-pill-undo:hover { text-decoration: underline; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
}

/* Chat font variants */
.chat-messages.font-sans    { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.chat-messages.font-system  { font-family: system-ui, sans-serif; }
.chat-messages.font-dyslexic { font-family: 'OpenDyslexic', cursive; }

/* Chat size variants */
.chat-messages.size-medium .message-bubble { font-size: 1.05rem; }
.chat-messages.size-large  .message-bubble { font-size: 1.15rem; }

.message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.message-user  { align-self: flex-end;  align-items: flex-end; }
.message-bot   { align-self: flex-start; align-items: flex-start; }

.message-bubble {
    padding: 0.65rem 0.9rem;
    border-radius: 16px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
}

/* Markdown content inside bot bubbles */
.message-markdown { white-space: normal; }
.message-markdown p  { margin: 0 0 0.4rem; }
.message-markdown p:last-child { margin-bottom: 0; }
.message-markdown ul, .message-markdown ol { margin: 0.25rem 0 0.4rem 1.25rem; padding: 0; }
.message-markdown li { margin-bottom: 0.1rem; }
.message-markdown code { background: var(--code-bg); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.88em; }
.message-markdown pre { background: var(--pre-bg); color: var(--pre-fg); border-radius: 8px; padding: 0.75rem 1rem; overflow-x: auto; margin: 0.4rem 0; }
.message-markdown pre code { background: none; padding: 0; color: inherit; font-size: 0.85em; }
.message-markdown h1,.message-markdown h2,.message-markdown h3 { font-weight: 600; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
.message-markdown h1 { font-size: 1.1rem; }
.message-markdown h2 { font-size: 1rem; }
.message-markdown h3 { font-size: 0.95rem; }
.message-markdown strong { font-weight: 600; }
.message-markdown blockquote { border-left: 3px solid var(--border); margin: 0.4rem 0; padding-left: 0.75rem; color: var(--text-secondary); }

.message-user .message-bubble {
    background: var(--bubble-user-bg);
    color: var(--bubble-user-fg);
    border-bottom-right-radius: 6px;
}

.message-bot .message-bubble {
    background: var(--bubble-bot-bg);
    color: var(--bubble-bot-fg);
    border: 1px solid var(--bubble-line);
    border-bottom-left-radius: 6px;
}

.message-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 0 2px;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-row { display: flex; align-items: center; gap: 6px; }
.typing-avatar { width: 1rem; height: 1rem; flex-shrink: 0; }
.typing-indicator { display: flex; gap: 4px; align-items: center; padding: 0.55rem 0.9rem; }
.typing-indicator span { width: 6px; height: 6px; background: var(--ink-soft); border-radius: 50%; animation: bounce 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }

@keyframes bounce {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

.processing-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.1rem 1rem 0.5rem;
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: fade-status 0.3s ease-in;
}
@keyframes fade-status {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── Model selector bar ──────────────────────────────────────────────────── */
.chat-model-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 1rem 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.model-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.model-chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.model-chip.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.model-chip-mult {
    opacity: 0.75;
    font-size: 0.72rem;
}

.model-chip.active .model-chip-mult {
    opacity: 0.9;
}


/* ── Input bar ───────────────────────────────────────────────────────────── */
.chat-input-bar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 1rem 0.5rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    flex: 1;
    min-width: 0;
}
.chat-input-bar.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}


/* ── Input row (textarea + send) ─────────────────────────────────────────── */
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}


/* ── Toolbar row ─────────────────────────────────────────────────────────── */
.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-toolbar-left  { display: flex; align-items: center; gap: 0.25rem; }
.chat-toolbar-right { display: flex; align-items: center; gap: 0.25rem; }


/* ── (+) button ──────────────────────────────────────────────────────────── */
.plus-menu-wrapper {
    position: relative;
}
.btn-plus {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border-input);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s, border-color .15s, background .15s;
}
.btn-plus:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.btn-plus.active               { color: var(--accent); border-color: var(--accent); }
.btn-plus:disabled             { opacity: .45; cursor: default; }

.plus-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 0.3rem 0;
    z-index: 200;
}
.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.85rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.plus-menu-item:hover { background: var(--paper); }


/* ── Index drop zone ─────────────────────────────────────────────────────── */
.chat-bottom-wrapper {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
/* Index drop-zone moved to the sidebar — see .sidebar-dropzone above. */
.chat-container.chat-empty .chat-input-bar { border-radius: 12px; border: 1px solid var(--border); }


/* ── Attach chips ────────────────────────────────────────────────────────── */
.attach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
}
.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.45rem;
    border-radius: 99px;
    background: var(--paper);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-chip svg { flex-shrink: 0; }
.attach-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.1rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
}
.attach-chip-remove:hover { color: var(--text-primary); }

/* Sliding lazy-load spinner (KBW-0095). Overlaid on the message list rather than inserted into it:
   in-flow it changed the list height on every load, shifting the messages under the reader. */
.chat-loading-older {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    pointer-events: none;
}
.chat-loading-top    { top: 0; }
.chat-loading-bottom { bottom: 0; }

/* In-chat search bar (KBW-0064). Sits above the message list, like a find bar. */
.chat-search-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface-2);
    flex-shrink: 0;
}
.chat-search-input { flex: 1; min-width: 0; }
.chat-search-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 3.5rem;
    text-align: center;
}

/* Flash the message a jump landed on, so the eye can find it without a permanent marker. */
/* --amber-soft is defined for both themes, so the flash stays visible in dark mode too. */
@keyframes kibo-msg-hit {
    from { box-shadow: 0 0 0 3px var(--amber-soft); }
    to   { box-shadow: 0 0 0 3px transparent; }
}
.message.msg-hit .message-bubble { animation: kibo-msg-hit 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .message.msg-hit .message-bubble { animation: none; outline: 2px solid var(--accent); }
}

/* Search matches inside the message bubbles (KBW-0064). All hits get the soft tint; the one the
   counter is pointing at gets the full accent, so N/M has an on-screen counterpart. */
/* The colour must be explicit, not inherited: user bubbles have white text, which would land on the
   light amber tint and be unreadable. --amber-text tracks the theme, so both are legible. */
mark.kibo-hl {
    background: var(--amber-soft);
    color: var(--amber-text);
    border-radius: 3px;
    padding: 0 1px;
}
/* --amber is a light amber in both themes, so the active one needs dark text in both. */
mark.kibo-hl.kibo-hl-active {
    background: var(--amber);
    color: #3A2708;
}

/* Linked-project pill in the prompt area (KBW-0024). */
.chat-project-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.15rem 0.4rem 0.15rem 0.5rem;
    border-radius: 99px;
    background: var(--accent-soft, var(--paper));
    border: 1px solid var(--accent, var(--border));
    color: var(--accent-strong, var(--text-secondary));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
.chat-project-pill svg { flex-shrink: 0; opacity: 0.85; }
.chat-project-pill-code { letter-spacing: 0.02em; }
.chat-project-pill-x {
    background: none;
    border: none;
    padding: 0 0.1rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}
.chat-project-pill-x:hover { opacity: 1; }

.chat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-input);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    /* Auto-grow up to ~4 rows, then scroll internally instead of eating the screen (KBW-0056).
       Same strategy as .comment-textarea: native field-sizing where supported, and the shared
       kiboTextareaResize JS (which reads this max-height) as the fallback everywhere else. */
    field-sizing: content;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color .15s;
}
.chat-input:focus { border-color: var(--accent); }

.btn-send {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.btn-send:hover:not(:disabled)  { background: var(--accent-hover); }
.btn-send:disabled               { background: var(--accent-disabled); cursor: default; }

/* Stop-generating state — the send button turns into an ink square while the
   assistant is thinking; clicking it aborts the in-flight request. */
.btn-send.btn-stop       { background: var(--ink); color: var(--card); }
.btn-send.btn-stop:hover { background: var(--ink-soft); }

.btn-mic {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border-input);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, border-color .15s, background .15s;
}
.btn-mic:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.btn-mic:disabled              { opacity: .45; cursor: default; }
.btn-mic.recording             { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.08); }
.btn-mic.recording::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    animation: mic-pulse 1.2s ease-out infinite;
    pointer-events: none;
}
@keyframes mic-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.6); opacity: 0;  }
}
.spin { animation: kibo-spin .8s linear infinite; }
@keyframes kibo-spin { to { transform: rotate(360deg); } }

/* Transient mic / speech-to-text feedback under the input bar */
.chat-mic-hint {
    margin: 0.4rem 0.25rem 0;
    font-size: 0.78rem;
    color: #ef4444;
    text-align: right;
}


/* ── Thinking steps ──────────────────────────────────────────────────────── */
.thinking-steps   { font-size: 0.78rem; color: var(--text-secondary); max-width: 100%; }
.thinking-summary { cursor: pointer; color: var(--text-muted); font-style: italic; }
.thinking-step    { padding: 2px 0 2px 6px; border-left: 2px solid var(--border); margin-top: 2px; }


/* ── Action trace ────────────────────────────────────────────────────────── */
.action-trace         { font-size: 0.8rem; margin-bottom: 0.25rem; }
.action-trace-summary {
    cursor: pointer; color: var(--ink-soft); font-size: 0.8rem;
    list-style: none; display: inline-flex; align-items: center; gap: 0.3rem;
    -webkit-user-select: none; user-select: none;
}
.action-trace-row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0.3rem; padding: 0.18rem 0.5rem;
    border-left: 2px solid var(--border); margin: 0.15rem 0;
    font-family: var(--font-mono);
}
.action-trace-error   { border-left-color: var(--alert); }
.action-trace-plugin  { color: var(--accent); font-weight: 600; font-size: 0.75rem; }
.action-trace-name    { color: var(--ink); font-size: 0.75rem; }
.action-trace-params  { color: var(--ink-soft); font-size: 0.72rem; flex: 1; }
.action-trace-result  { color: var(--ink-soft); font-size: 0.72rem; font-style: italic; }
.action-trace-error .action-trace-result { color: var(--alert-text); }


/* ── Choices (radio / checkbox) ─────────────────────────────────────────── */
.choices-group    { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.choice-btn {
    background: var(--human-soft);
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 0.3rem 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.choice-btn:hover { background: var(--accent); color: #fff; }
.choice-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.choice-btn-confirm { border-radius: 6px; font-weight: 600; }
.choice-check {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.88rem; cursor: pointer;
    background: var(--human-soft);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
}
.choice-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }


/* ── Compose (email draft) ───────────────────────────────────────────────── */
.compose-group   { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; width: 100%; }
.compose-from    { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.compose-from select { font-size: 0.85rem; padding: 0.2rem 0.4rem; border-radius: 6px;
                        border: 1px solid var(--border-input); background: var(--bg-surface-2);
                        color: var(--text-primary); cursor: pointer; }
.compose-label   { color: var(--text-muted); white-space: nowrap; }
.compose-busy    { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.compose-meta    { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--text-muted); padding: 0.4rem 0.6rem; background: var(--bg-surface-2); border-radius: 8px; }
.compose-subject { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.compose-subject-input { flex: 1; font-size: 0.88rem; font-family: inherit; padding: 0.4rem 0.6rem;
                   border: 1px solid var(--border-input); border-radius: 8px; outline: none;
                   background: var(--bg-surface-2); color: var(--text-primary); transition: border-color .15s; }
.compose-subject-input:focus { border-color: var(--accent); }
.compose-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.compose-attachment-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem;
                   padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--bg-surface-2);
                   border: 1px solid var(--border-input); color: var(--text-primary); }
.compose-body    { width: 100%; resize: none; border: 1px solid var(--border-input); border-radius: 10px;
                   padding: 0.55rem 0.75rem; font-size: 0.88rem; font-family: inherit; line-height: 1.45;
                   outline: none; background: var(--bg-surface-2); color: var(--text-primary);
                   overflow-y: auto; scrollbar-width: none; field-sizing: content;
                   min-height: 4rem; max-height: 300px; transition: border-color .15s; display: block; }
.compose-body::-webkit-scrollbar { display: none; }
.compose-body:focus { border-color: var(--accent); }
.compose-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.compose-send    { border-radius: 8px !important; font-weight: 600; font-size: 0.85rem; }
.compose-status  { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.choice-btn-secondary { background: var(--bg-surface-2) !important; color: var(--text-primary) !important;
                         border: 1px solid var(--border) !important; border-radius: 8px !important; font-size: 0.85rem; }
.choice-btn-danger    { background: transparent !important; color: var(--text-muted) !important;
                         border: 1px solid var(--border) !important; border-radius: 8px !important; font-size: 0.85rem; }
.choice-btn-danger:hover { color: var(--alert-text) !important; border-color: var(--alert) !important; }

/* ── Form card (schema-driven confirm/edit, 10_InteractionModel) ──────────── */
.form-card        { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; width: 100%;
                    background: var(--human-soft); border: 1.5px solid var(--border);
                    border-radius: 8px; padding: 0.7rem 0.8rem; }
.form-card-row    { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.form-card-label  { color: var(--text-muted); white-space: nowrap; }
.form-card-readonly { color: var(--text-primary); font-weight: 500; }
.form-card-input  { flex: 1; font-size: 0.88rem; padding: 0.25rem 0.4rem; border-radius: 6px;
                    border: 1px solid var(--border-input); background: var(--bg-surface-2); color: var(--text-primary); }
.form-card-check  { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; cursor: pointer; }
.form-card-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.2rem; }


/* ── Time + toolbar row ──────────────────────────────────────────────────── */
.msg-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.2rem;
    min-height: 22px;
    width: 100%;
}

/* Toolbar: hidden until message hover, then semi-transparent */
.msg-toolbar {
    display: flex;
    gap: 0.125rem;
    opacity: 0;
    transition: opacity .15s;
}
.message-bot:hover .msg-toolbar,
.msg-toolbar:has(.active),
.msg-toolbar:has(.active-neg) { opacity: 1; }

.msg-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 4px;
    color: var(--text-secondary);
    opacity: 0.65;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .12s, background .12s, color .12s;
    -webkit-user-select: none;
    user-select: none;
}
.msg-toolbar-btn:hover {
    opacity: 1;
    background: var(--bg-surface-2);
    color: var(--text-primary);
}
.msg-toolbar-btn.active     { color: var(--accent); opacity: 1; }
.msg-toolbar-btn.active-neg { color: var(--alert);  opacity: 1; }

/* Comment box after thumbs-down */
.msg-comment-box { margin-top: 0.5rem; width: 100%; }

.comment-textarea {
    width: 100%;
    resize: none;
    border: 1px solid var(--border-input);
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.3;
    outline: none;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    overflow-y: auto;
    scrollbar-width: none;
    field-sizing: content;
    min-height: calc(1.3em + 0.9rem);
    max-height: 100px;
    transition: border-color .15s;
    display: block;
}
.comment-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.comment-textarea::placeholder { color: var(--text-secondary); opacity: 1; }

.msg-comment-actions { display: flex; gap: 0.375rem; margin-top: 0.375rem; }


/* ── Report button ──────────────────────────────────────────────────────────── */
.btn-report {
    display: flex; align-items: center; gap: 0.35rem;
    height: 28px;
    padding: 0 0.6rem;
    border-radius: 99px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
.btn-report:hover { color: var(--accent); border-color: var(--accent); }
.btn-report-label { white-space: nowrap; }

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../assets/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../assets/OpenDyslexic-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../assets/OpenDyslexic-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../assets/OpenDyslexic-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ── Memory v2 — chat ref-bar (links/previews below a reply) ───────────────── */
.ref-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .4rem 0 .1rem;
}
.ref-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .22rem .55rem;
    font-size: .8rem;
    line-height: 1.2;
    color: var(--accent);
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.ref-chip:hover {
    background: var(--bg-surface);
    border-color: var(--accent);
}
.ref-chip-icon  { font-size: .85rem; line-height: 1; }
.ref-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── Shared ref-preview modal (chat + graph) ──────────────────────────────── */
.ref-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}
.ref-modal {
    position: relative;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(640px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    padding: 1.1rem 1.25rem 1.35rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.ref-modal-close {
    position: absolute;
    top: .5rem;
    right: .6rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.ref-modal-close:hover { color: var(--text-primary); }
.ref-modal-loading,
.ref-modal-empty   { padding: 1.5rem .5rem; color: var(--text-muted); text-align: center; }
.ref-modal-header  { margin-bottom: .8rem; padding-right: 1.5rem; }
.ref-modal-kind {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.ref-modal-title   { display: block; font-size: 1.1rem; font-weight: 600; margin-top: .15rem; }
.ref-modal-meta    { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ref-modal-meta th {
    text-align: left;
    vertical-align: top;
    width: 7.5rem;
    padding: .25rem .6rem .25rem 0;
    color: var(--text-muted);
    font-weight: 500;
}
.ref-modal-meta td { padding: .25rem 0; word-break: break-word; }
.ref-modal-section       { margin-top: 1rem; }
.ref-modal-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .35rem; }

/* ── Document sharing panel ──────────────────────────────────────────────── */
.ref-share-list  { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ref-share-row   { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.ref-share-who   { flex: 1; color: var(--text-primary); }
.ref-share-role  { color: var(--text-muted); font-size: .78rem; }
.ref-share-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.ref-share-remove:hover { color: var(--alert, #c0392b); }
.ref-share-add   { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ref-share-add select { font-size: .82rem; padding: .2rem .35rem; border-radius: 6px;
                        border: 1px solid var(--border-input); background: var(--bg-surface-2); color: var(--text-primary); }
.ref-share-btn   { font-size: .82rem; padding: .25rem .6rem; border-radius: 6px; cursor: pointer;
                   border: 1px solid var(--border); background: var(--human-soft); color: var(--text-primary); }
.ref-share-btn:disabled { opacity: .5; cursor: default; }
.ref-modal-body-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .88rem;
    margin: 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .7rem .8rem;
}
.ref-modal-chunk      { margin-bottom: .7rem; padding-bottom: .7rem; }
.ref-modal-chunk-head { font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
.ref-modal-chunk-body { font-size: .85rem; white-space: pre-wrap; word-break: break-word; color: var(--text-muted); }

/* Single-chunk navigator: a dropdown picks one fragment at a time so the preview
   stays within one viewport instead of dumping the whole document. */
.ref-modal-chunk-select {
    width: 100%;
    margin-bottom: .7rem;
    padding: .4rem .6rem;
    font-size: .85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface-2);
    color: var(--text-primary);
}

/* The selected chunk, when it matched the user's query — highlighted so the
   relevant passage is visually distinct from the rest of the document. */
.ref-modal-chunk-match {
    border-left: 3px solid var(--accent, #7c5cff);
    background: var(--bg-surface-2);
    border-radius: 8px;
    padding: .55rem .7rem;
    border-bottom: none;
}
.ref-modal-chunk-match .ref-modal-chunk-body { color: var(--text-primary); }
.ref-modal-chunk-badge {
    display: inline-block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--accent, #7c5cff);
    margin-bottom: .25rem;
}
.ref-modal-download {
    float: right;
    margin-top: -.1rem;
    font-size: .78rem;
    padding: .3rem .7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
}
.ref-modal-download:hover:not(:disabled) { background: var(--bg-surface-3, var(--border)); }
.ref-modal-download:disabled { opacity: .6; cursor: default; }

/* ── Phone: keep content clear of the fixed edge grips ────────────────────────────
   The left drawer handle and the right dock toggle are position:fixed, ~28px wide, centred
   vertically — so they float over anything the chat centres against the viewport. Narrow the
   empty-state input and widen the message padding so bubbles and the composer don't run under them. */
@media (max-width: 640px) {
    .chat-container.chat-empty .chat-input-bar { max-width: 340px; }
    /* Same width as the composer it sits under, for the same reason — and clear of the two fixed
       side handles the rule above is narrowing everything against. */
    .daily-pill { max-width: 340px; margin-top: 1.5rem; }
    .chat-messages { padding: 1.25rem 1.5rem; }

    /* Composer controls are microscopic on a phone — grow them to comfortable thumb
       targets (KBW-0069). */
    .btn-send { width: 50px; height: 50px; }
    .btn-send svg { width: 24px; height: 24px; }
    .btn-mic  { width: 46px; height: 46px; }
    .btn-mic svg { width: 22px; height: 22px; }
    .btn-plus { width: 40px; height: 40px; }
    .btn-plus svg { width: 20px; height: 20px; }
}