/* ═══════════════════════════════════════════════════════════
   /assistant — in-app archive assistant chat UI (EVE-3107)
   ═══════════════════════════════════════════════════════════ */

/* ─── Viewport lock (EVE-3433) ───────────────────────────────────────────
   The composer has to stay pinned in view like any chat UI, so the page
   itself must never scroll — only `.assistant-messages` does.

   This used to be `height: calc(100dvh - 2rem)` on `.assistant-page`, which
   silently assumed the page was the only thing in the viewport. It isn't:
   `/assistant` renders inside `.main` > `.layout-content-reveal` > `.content`,
   under a `.topbar`, and `.main` carries 2rem top + 5rem bottom padding
   (airy.css). Measured at 1440x900 that left the document 151px taller than
   the viewport — a page scrollbar, with the composer below the fold.

   So instead of guessing the chrome above and below, lock the shell to the
   viewport and let the page flex into whatever is left. Anything that
   appears above it (banners, a taller topbar) now shrinks the chat instead
   of pushing it off-screen. Mirrors the `:has(#emails-page)` lock in
   webapp.css. */
html:has(.assistant-page),
body:has(.assistant-page),
.app-shell:has(.assistant-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.main:has(.assistant-page) {
    min-height: 0;
    overflow: hidden;
    /* Reclaim `.main`'s tall bottom padding for the chat; `.assistant-shell`
       supplies the bottom gutter. The mobile tab-bar reserve is re-added in
       the max-width: 768px block below. */
    padding-bottom: 0;
}

.main:has(.assistant-page) .layout-content-reveal,
.main:has(.assistant-page) .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.main:has(.assistant-page) .content {
    overflow: hidden;
}

/* No auto margins, no `max-width`, no horizontal padding of its own — this one
   rule was BOTH assistant bugs in EVE-3466, and the second one is why the
   margins can never come back:

   1. Misalignment. Every other page flows straight from `.main`'s left content
      edge; `.main` already caps the measure at 1280px (airy.css) and supplies
      the gutter. A second centred, inset container here sat the assistant
      ~24px right of the topbar directly above it.

   2. The panel resizing itself when a conversation started. `.content` is a
      column flex container (the EVE-3433 lock, above), so the cross axis here
      is horizontal — and per CSS Flexbox §8.1 an `auto` cross-axis margin
      DISABLES `align-self: stretch`. `.assistant-page` therefore sized to
      fit-content instead of filling `.main`, which means its width was the
      max-content width of whatever was inside it. Measured at 1600x1000: the
      welcome state's suggestion chips made it 968px, the first two chat
      bubbles collapsed it to 752px, and a longer conversation re-widened it to
      1168px. The whole panel — sidebar, header, composer — slid and resized on
      every message. Removing the auto margins restores stretch: 1168px in
      every state.

   Heights were never involved; the viewport lock above was working. */
.assistant-page {
    padding: 1.25rem 0 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: page-fade-in 300ms ease forwards;
}

.assistant-page__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.assistant-page__head h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.assistant-page__head h1 i {
    color: var(--color-brand-accent);
}

.assistant-page__head p {
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0;
}

/* ─── Shell: sidebar + main, side by side on desktop ─────────────────────── */

.assistant-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
}

.assistant-sidebar,
.assistant-main {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 24px);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.assistant-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.assistant-sidebar__header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.assistant-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: var(--color-brand-gradient);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.assistant-new-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary, 0 12px 25px rgba(37, 99, 235, 0.25));
}

.assistant-new-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.assistant-conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.assistant-conversation-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.assistant-conversation-row:hover {
    background: var(--color-surface-muted);
}

.assistant-conversation-row.is-active {
    background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-primary) 25%, transparent);
}

.assistant-conversation-row__title {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.assistant-conversation-row__meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.assistant-sidebar-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.assistant-sidebar-empty i {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

/* ─── Main column ──────────────────────────────────────────────────────── */

.assistant-main__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    min-height: 3.25rem;
}

.assistant-main__back {
    display: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
}

.assistant-main__title {
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.assistant-hub-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.assistant-hub-status--reconnecting {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
}

.assistant-hub-status--offline {
    background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    color: var(--color-text-secondary);
}

/* ─── Messages ─────────────────────────────────────────────────────────── */

.assistant-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    scroll-behavior: smooth;
}

.assistant-message {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    gap: 0.35rem;
}

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

.assistant-message--assistant,
.assistant-message--error {
    align-self: flex-start;
    align-items: flex-start;
}

.assistant-message__bubble {
    border-radius: 18px;
    padding: 0.75rem 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9375rem;
}

.assistant-message--user .assistant-message__bubble {
    background: var(--color-brand-gradient);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.assistant-message--assistant .assistant-message__bubble {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    border-bottom-left-radius: 6px;
    /* The answer is real markup now (EVE-3466), so the block elements carry the
       spacing. Leaving `pre-wrap` on would double every gap: the `\n\n` between
       two paragraphs would render as blank lines *and* as the <p> margin. */
    white-space: normal;
}

/* ─── Markdown inside an answer (EVE-3466) ───────────────────────────────
   Models format their answers in markdown whether or not we ask, and the
   bubble used to print it raw. `AssistantMarkdownRenderer` renders and
   sanitises it; these rules keep it looking like chat prose rather than an
   article — tight vertical rhythm, first/last child flush with the bubble
   padding, and nothing that can widen the bubble past its 78% max. */

.assistant-message--assistant .assistant-message__bubble > :first-child { margin-top: 0; }
.assistant-message--assistant .assistant-message__bubble > :last-child { margin-bottom: 0; }

.assistant-message--assistant .assistant-message__bubble p {
    margin: 0 0 0.65rem;
}

.assistant-message--assistant .assistant-message__bubble h1,
.assistant-message--assistant .assistant-message__bubble h2,
.assistant-message--assistant .assistant-message__bubble h3,
.assistant-message--assistant .assistant-message__bubble h4,
.assistant-message--assistant .assistant-message__bubble h5,
.assistant-message--assistant .assistant-message__bubble h6 {
    /* A chat bubble is not a document: cap every heading at a hair above body
       size so an answer that opens with `# Summary` doesn't shout. */
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4;
    margin: 1rem 0 0.4rem;
}

.assistant-message--assistant .assistant-message__bubble ul,
.assistant-message--assistant .assistant-message__bubble ol {
    margin: 0 0 0.65rem;
    padding-left: 1.35rem;
}

.assistant-message--assistant .assistant-message__bubble li { margin: 0.15rem 0; }
.assistant-message--assistant .assistant-message__bubble li > p { margin: 0; }

.assistant-message--assistant .assistant-message__bubble li > ul,
.assistant-message--assistant .assistant-message__bubble li > ol {
    margin: 0.15rem 0 0.25rem;
}

.assistant-message--assistant .assistant-message__bubble code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.875em;
    padding: 0.12em 0.35em;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    /* A long token (a message-id, a URL) must wrap rather than push the bubble
       wider than the message column. */
    word-break: break-word;
}

.assistant-message--assistant .assistant-message__bubble pre {
    margin: 0 0 0.65rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
    overflow-x: auto;
}

.assistant-message--assistant .assistant-message__bubble pre code {
    padding: 0;
    background: none;
    /* Inside a scrollable <pre>, wrapping would defeat the scroller. */
    word-break: normal;
    white-space: pre;
}

.assistant-message--assistant .assistant-message__bubble blockquote {
    margin: 0 0 0.65rem;
    padding: 0.1rem 0 0.1rem 0.8rem;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-secondary);
}

.assistant-message--assistant .assistant-message__bubble hr {
    margin: 0.85rem 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    opacity: 1;
}

.assistant-message--assistant .assistant-message__bubble a:not(.assistant-cite) {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

/* Tables: the one construct that can overflow horizontally, so the bubble
   gets a scroller instead of the whole message stream growing a scrollbar. */
.assistant-message--assistant .assistant-message__bubble table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 0.65rem;
    border-collapse: collapse;
    font-size: 0.9em;
}

.assistant-message--assistant .assistant-message__bubble th,
.assistant-message--assistant .assistant-message__bubble td {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.assistant-message--assistant .assistant-message__bubble th {
    font-weight: 700;
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
}

.assistant-message--error .assistant-message__bubble {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-bottom-left-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.assistant-message__bubble i.assistant-message__error-icon {
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.assistant-message__meta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding: 0 0.25rem;
}

/* ── Citations (EVE-3184) ───────────────────────────────────────────────
   Inline superscript markers plus a source list under the answer, so a claim
   can be traced back to the message it came from in one click. */

.assistant-cite {
    display: inline-block;
    /* Space on the left only, and no min-width: a symmetric margin or a box wider
       than its digit leaves the marker visibly detached from the punctuation that
       follows it ("… price 1 ."). */
    margin-left: 0.15em;
    padding: 0.05em 0.35em;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
    color: var(--color-brand-accent);
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: super;
    /* The bubble is pre-wrap; keep the marker glued to the word it follows. */
    white-space: nowrap;
}

.assistant-cite:hover,
.assistant-cite:focus-visible {
    background: var(--color-brand-accent);
    color: #fff;
}

.assistant-sources {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    max-width: 100%;
}

.assistant-sources__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}

.assistant-sources__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 0;
}

.assistant-sources__item:hover,
.assistant-sources__item:focus-visible {
    background: var(--color-surface-muted);
}

.assistant-sources__num {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
    color: var(--color-brand-accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.assistant-sources__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Subjects and address lists are arbitrarily long — clamp rather than let one
   source push the whole thread wide. */
.assistant-sources__subject,
.assistant-sources__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-sources__subject {
    font-size: 0.8125rem;
    font-weight: 600;
}

.assistant-sources__meta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.assistant-sources__item i {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.assistant-message__retry {
    align-self: flex-start;
    margin-top: 0.35rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.assistant-message__retry:hover {
    background: var(--color-surface-muted);
}

.assistant-message__cta {
    align-self: flex-start;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-link);
    text-decoration: none;
}

.assistant-message__cta:hover {
    text-decoration: underline;
}

/* ─── Tool trail — "show the work" ─────────────────────────────────────── */

.assistant-tool-trail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
    max-width: 100%;
}

.assistant-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    width: fit-content;
    max-width: 100%;
}

.assistant-tool-chip i {
    color: var(--color-brand-accent);
    flex-shrink: 0;
}

.assistant-tool-chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-tool-chip--running i {
    animation: assistant-spin 900ms linear infinite;
}

.assistant-tool-chip--error {
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    color: var(--color-danger);
}

.assistant-tool-chip--error i {
    color: var(--color-danger);
}

@keyframes assistant-spin {
    to { transform: rotate(360deg); }
}

/* ─── Typing / thinking indicator ─────────────────────────────────────── */

.assistant-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.2rem;
}

.assistant-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: assistant-bounce 1.1s ease-in-out infinite;
}

.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }

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

@media (prefers-reduced-motion: reduce) {
    .assistant-tool-chip--running i,
    .assistant-typing span {
        animation: none !important;
    }
}

/* ─── Welcome / empty conversation state ──────────────────────────────── */

.assistant-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 0.5rem;
    overflow-y: auto;
}

.assistant-welcome__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--color-brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.assistant-welcome h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.assistant-welcome p {
    color: var(--color-text-secondary);
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}

.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    max-width: 560px;
}

.assistant-suggestion-chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}

.assistant-suggestion-chip:hover {
    border-color: var(--color-brand-primary);
    transform: translateY(-1px);
}

/* ─── Composer ─────────────────────────────────────────────────────────── */

.assistant-composer {
    border-top: 1px solid var(--color-border);
    padding: 0.85rem 1.25rem 1rem;
    flex-shrink: 0;
}

.assistant-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.6rem;
}

.assistant-banner--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.assistant-banner--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.assistant-banner a {
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
}

.assistant-composer__form {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0.5rem 0.6rem 0.5rem 1rem;
    transition: border-color 150ms ease;
}

.assistant-composer__form:focus-within {
    border-color: var(--color-brand-primary);
}

.assistant-composer__input {
    flex: 1;
    resize: none;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-height: 200px;
    padding: 0.4rem 0;
    font-family: inherit;
}

.assistant-composer__input:focus {
    outline: none;
}

.assistant-composer__input::placeholder {
    color: var(--color-text-muted);
}

.assistant-composer__input:disabled {
    opacity: 0.6;
}

.assistant-composer__send,
.assistant-composer__stop {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 150ms ease, opacity 150ms ease;
}

.assistant-composer__send {
    background: var(--color-brand-gradient);
    color: #fff;
}

.assistant-composer__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.assistant-composer__send:not(:disabled):hover {
    transform: scale(1.06);
}

.assistant-composer__stop {
    background: var(--color-danger);
    color: #fff;
}

.assistant-composer__stop:hover {
    transform: scale(1.06);
}

.assistant-composer__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding: 0 0.25rem;
}

.assistant-composer__foot--over {
    color: var(--color-danger);
    font-weight: 600;
}

/* ─── Gated states (upgrade / no key / error / loading) ───────────────── */

.assistant-gate {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 24px);
    box-shadow: var(--shadow-sm);
}

.assistant-gate .empty-state {
    max-width: 460px;
}

.assistant-gate .empty-state__icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
    color: var(--color-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin: 0 auto 0.75rem;
}

.assistant-gate .empty-state__icon--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.assistant-skeleton-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
}

.assistant-skeleton-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 24px);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ─── Mobile: single column, list <-> chat swap ───────────────────────── */

@media (max-width: 900px) {
    .assistant-page {
        padding: 1rem 0.85rem 0;
    }

    .assistant-shell,
    .assistant-skeleton-shell {
        grid-template-columns: 1fr;
    }

    .assistant-sidebar.assistant-mobile-hide,
    .assistant-main.assistant-mobile-hide {
        display: none;
    }

    .assistant-main__back {
        display: inline-flex;
    }

    .assistant-message {
        max-width: 90%;
    }

    .assistant-composer {
        padding: 0.75rem 0.85rem 0.9rem;
    }
}

/* The mobile tab bar is position:fixed and overlays the bottom of the
   viewport, so the locked shell has to reserve room for it or the composer
   sits underneath it (measured: composer bottom 732px vs tab bar top 701px
   before EVE-3433). MainLayout's scoped mobile padding shorthand is
   `!important` and loads after this file, so this rule needs both higher
   specificity and the same importance. Apply it only at the width where the
   tab bar actually renders (mobile.css shows it below 768px, not 900px).

   Concretely, the rule to beat is
   `@media (max-width: 768px) { ::deep .main { padding: 1rem 1rem !important } }`
   in MainLayout.razor.css, which the scoped-CSS build emits as
   `[b-zw429bpra0] .main` — specificity (0,2,0), identical to a bare
   `.main:has(.assistant-page)`, and App.razor loads the scoped bundle (line 39)
   after this file (line 35). So matching its `!important` alone would still
   lose on source order; the extra `.app-shell` is what outranks it. */
@media (max-width: 768px) {
    .app-shell .main:has(.assistant-page) {
        /* The +8px matches the breathing room mobile.css already reserves for
           every other page (`calc(56px + env(...) + 8px)`), so the composer
           doesn't sit flush against the tab bar. */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
}

/* ─── Dark mode ────────────────────────────────────────────────────────── */

:root[data-theme='dark'] .assistant-message--assistant .assistant-message__bubble {
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme='dark'] .assistant-composer__form {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme='dark'] .assistant-tool-chip {
    background: rgba(255, 255, 255, 0.03);
}

/* The sources panel sits on the assistant bubble, which is already a light
   overlay in dark mode — match it rather than punching a bright card through. */
:root[data-theme='dark'] .assistant-sources {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme='dark'] .assistant-sources__item:hover,
:root[data-theme='dark'] .assistant-sources__item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme='dark'] .assistant-conversation-row.is-active {
    background: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
}