/* Assistant refinement layer — minimal. Loaded AFTER styles.css.
   Keeps the original palette, brand icon and layout; only quiets the surface:
   solid fills instead of gradients, calmer messages, self-hosted font.
   No selector, id or class that app.js / templates rely on is renamed.
   Remove this one <link> in base.html to roll back. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/Vazirmatn-var.woff2') format('woff2');
    font-weight: 100 900; font-display: swap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ── solid, single-accent surfaces (no gradient text or fills) ── */
.grad-title, :root[data-theme="light"] .grad-title {
    background: none; -webkit-text-fill-color: currentColor; color: var(--text); font-weight: 800;
}
.primary-btn, .send-btn, .side-item-primary, .side-avatar, .wiz-next, .ui-btn-primary, .lnk-btn.solid {
    background: var(--accent-2); color: #fff;
}
.primary-btn:hover, .side-item-primary:hover, .wiz-next:hover, .ui-btn-primary:hover { filter: brightness(1.1); }
.bar-fill, .wiz-bar > span { background: var(--accent); }
.lnk-btn.solid { border: none; }
.side-item.active { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.side-item.active .ic { color: var(--accent); }

/* ── sidebar ── */
.side-user-logout { background: transparent; border-color: var(--border); color: var(--muted); }
.side-user-logout:hover { color: #f87171; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.conv-row { border: 0; border-radius: 8px; }
.conv-row:hover { background: var(--panel-2); border: 0; }
.conv-row.active { background: var(--panel-2); border: 0; }
.conv-row.active .conv-item { color: var(--text); font-weight: 700; }

/* ── welcome ── */
.chip, .sug { border-radius: 10px; background: transparent; }
.chip:hover, .sug:hover { background: var(--panel-2); color: var(--text); border-color: var(--accent); }

/* ── messages: assistant writes on the page, the user speaks in a bubble ── */
.msg { animation: none; margin: 18px 0; }
.msg.user .avatar { display: none; }
.msg.user .bubble { border: 0; box-shadow: none; border-radius: 14px 14px 4px 14px; padding: 10px 16px; }
.msg.assistant .bubble { background: transparent; border: 0; box-shadow: none; padding: 2px 4px 0; line-height: 2; flex: 1 1 auto; min-width: 0; }
.msg.assistant .avatar { background: transparent; color: var(--accent); }

/* ── composer ── */
.composer { border-top: 0; padding-top: 6px; }
.composer-input { border-radius: 14px; }
.send-btn, .attach-btn { border-radius: 12px; }

/* ── modal, toasts ── */
.ui-modal { backdrop-filter: none; animation: none; }
.ui-modal-card { animation: none; }
.ui-toast { border-radius: 10px; }

/* ── light theme: neutral greys instead of lavender tints ── */
:root[data-theme="light"] {
    --bg: #f6f7f9;
    --panel-2: #f0f1f4;
    --user-bg: #eceef3;
    --border: rgba(20,24,40,.14);
}

/* ── numbers read as data, not decoration ── */
.stat-val, .acc-stats .stat b { color: var(--text); }
.stat-val { direction: ltr; unicode-bidi: isolate; text-align: right; font-variant-numeric: tabular-nums; }
.bar-num { font-variant-numeric: tabular-nums; }
.rc-count { background: var(--panel-2); color: var(--text); }

/* ── admin review queue: action sized to its label, not a full-width slab ── */
.review-card .primary-btn { width: auto; padding: 9px 18px; }
.review-card, .acc-card, .stat { box-shadow: none; }

/* answer separators: hairline, not a slab */
.bubble hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }

/* ── streaming: instant programmatic scroll (smooth scroll raced the stream) ── */
.chat { scroll-behavior: auto; }
/* before the first token: a quiet "thinking" pulse instead of a lone caret */
.bubble.typing:empty::after {
    content: ""; display: inline-block; width: 36px; height: 8px; vertical-align: middle;
    background: radial-gradient(circle, var(--muted) 3.5px, transparent 4px) 0 50% / 12px 8px repeat-x;
    animation: think 1.1s ease-in-out infinite;
}
@keyframes think { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble.typing:empty::after { animation: none; opacity: .6; } }

/* ── responsive ── */
/* a long question shouldn't stretch the bubble across the whole column */
.msg.user .bubble { max-width: min(80%, 640px); }
/* drawer must not slide across the screen when a tablet rotates past the breakpoint */
html.resizing .side, html.resizing .sheet { transition: none !important; }
/* touch devices: native overlay scrolling, no permanent scrollbar track */
@media (hover: none) {
    .chat, .convlist, .sheet-body { scrollbar-width: none; }
    .chat::-webkit-scrollbar, .convlist::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
    /* answer text gets the full width: avatar sits above it instead of beside it */
    .msg.assistant { flex-direction: column; gap: 4px; }
    .msg.assistant .avatar { width: 26px; height: 26px; margin-top: 0; }
    .msg.assistant .bubble { padding: 0; }
    .msg.user .bubble { max-width: 88%; }
    .msg { margin: 14px 0; }
    /* composer: give the input the room, shrink the round buttons */
    .composer { gap: 6px; padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .send-btn, .attach-btn { width: 42px; height: 42px; }
    .composer-input { padding: 10px 14px; }
    .welcome { margin-top: 3vh; }
    .welcome-title { font-size: 1.4rem; }
    .chips { gap: 6px; }
    .chip { padding: .45rem .75rem; font-size: .84rem; }
    .guest-banner { margin: 8px 10px; font-size: .86rem; }
    .guest-banner .primary-btn { width: 100%; }
    .scroll-bottom { bottom: 84px; }
    .notif-panel { width: min(300px, calc(100vw - 20px)); }
}
/* short landscape phones: keep the composer and the answer both visible */
@media (max-height: 480px) and (orientation: landscape) {
    .shell-main > .topbar { padding-block: 6px; }
    .welcome { margin-top: 1vh; }
    .welcome-emoji, .how-to { display: none; }
    .composer { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}
/* very wide screens: keep reading measure, give the sidebar a little more room */
@media (min-width: 1600px) {
    .side { flex-basis: 300px; width: 300px; }
}
/* tables in answers: never break words mid-letter ("stri ng"); scroll sideways instead */
.bubble th, .bubble td { overflow-wrap: normal; word-break: normal; min-width: 7em; }
.bubble td { max-width: 22em; }
/* desktop: the chat scrolls full-width (scrollbar at the window edge, wheel works
   anywhere), while the text keeps an 880px reading column */
.shell-main .chat { max-width: none; padding-inline: max(16px, calc((100% - 880px) / 2)); }
@media (max-width: 640px) { .shell-main .chat { padding-inline: 12px; } }

/* ── admin actions: visible progress and a confirmation pulse ── */
.is-busy { cursor: progress; opacity: .85; }
.btn-spin { display: inline-block; width: .9em; height: .9em; margin-inline-end: .45em; vertical-align: -0.12em;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.just-saved { animation: saved 1.4s ease-out; }
@keyframes saved { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.rc-msg, .c-msg, .e-msg { min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation: none; border-top-color: currentColor; opacity: .6; } .just-saved { animation: none; } }
/* an answered review item stays fully readable (it can still be updated); the green
   label and border say it's done. Inactive corrections/docs keep the dimmed look. */
#review-list .review-card.resolved { opacity: 1; border-color: rgba(52,211,153,.35); }