/* ==========================================================================
   App theme: the sidebar, composer and chat refresh, and dark mode.

   Loaded after style.css and app.html's own <style> block so it wins at equal
   specificity. Everything is scoped to body.app-body, the signed-in app; the
   landing page never loads this file.

   Dark mode is html[data-theme="dark"], set before first paint by the inline
   script in app.html's <head> from localStorage.app_theme ('light' unless
   it says 'dark'). The worksheet viewer is left alone on purpose: it has its own
   light/dark page toggle and follows only that.
   ========================================================================== */

/* ---------- Tokens ---------- */
body.app-body {
    --ui-bg: #f7f8fc;
    --ui-surface: #ffffff;
    --ui-surface-2: #f9f9fa;
    --ui-hover: #efeff1;
    --ui-active: #e7e8eb;
    --ui-border: #e5e7eb;
    --ui-border-strong: #d4d6db;
    --ui-text: #1f2937;
    --ui-text-strong: #0f172a;
    --ui-muted: #64748b;
    --ui-faint: #94a3b8;
    --ui-mark: #fde68a;
    --ui-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    --ui-ring: rgba(37, 99, 235, 0.08);
}
html[data-theme="dark"] { color-scheme: dark; background: #212121; }
/* Classic neutral greys, no blue cast: easy on the eyes and nothing in it
   competes with the worksheet. */
html[data-theme="dark"] body.app-body {
    --ui-bg: #212121;
    --ui-surface: #2a2a2a;
    --ui-surface-2: #181818;
    --ui-hover: #2f2f2f;
    --ui-active: #363636;
    --ui-border: #333333;
    --ui-border-strong: #3d3d3d;
    --ui-text: #e3e3e3;
    --ui-text-strong: #f5f5f5;
    --ui-muted: #a3a3a3;
    --ui-faint: #767676;
    --ui-mark: rgba(250, 204, 21, 0.3);
    --ui-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    --ui-ring: rgba(255, 255, 255, 0.06);
    --text-color: #e3e3e3;
    --primary-color: #4c8df6;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
body.app-body .app-sidebar { background: var(--ui-surface-2); border-right-color: var(--ui-border); }
body.app-body .sidebar-logo { color: var(--ui-text-strong); }

/* New worksheet: the one primary action, so it looks like one. */
body.app-body .sidebar-new-btn {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--ui-text-strong);
    font-weight: 600;
    padding: 9px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
}
body.app-body .sidebar-new-btn:hover { background: var(--ui-surface); border-color: var(--primary-color); color: var(--primary-color); }
body.app-body .sidebar-new-btn i { color: var(--primary-color); }

/* Search: a real box now, with the shortcut and a clear button. */
body.app-body .sidebar-search { margin-bottom: 8px; }
body.app-body .sidebar-search input {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 8px 52px 8px 34px;
    cursor: text;
    font-weight: 400;
    color: var(--ui-text);
    -webkit-appearance: none;
    appearance: none;
}
body.app-body .sidebar-search input::-webkit-search-cancel-button { display: none; }
body.app-body .sidebar-search input::placeholder { color: var(--ui-faint); }
body.app-body .sidebar-search input:hover { background: var(--ui-surface); border-color: var(--ui-border-strong); }
body.app-body .sidebar-search input:focus {
    background: var(--ui-surface);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ui-ring);
}
body.app-body .sidebar-search-icon { color: var(--ui-faint); left: 11px; }
body.app-body .sidebar-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ui-faint);
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    padding: 3px 5px;
    background: var(--ui-surface-2);
    pointer-events: none;
}
body.app-body .sidebar-search input:focus ~ .sidebar-search-kbd,
body.app-body .sidebar-search-clear:not(.hidden) ~ .sidebar-search-kbd { display: none; }
body.app-body .sidebar-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
body.app-body .sidebar-search-clear:hover { background: var(--ui-hover); color: var(--ui-text-strong); }
body.app-body .sidebar-search-clear.hidden { display: none; }
@media (hover: none) { body.app-body .sidebar-search-kbd { display: none; } }

/* Filter chips: one row that scrolls sideways rather than wrapping. */
body.app-body .sidebar-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -2px 6px;
    padding: 0 2px 2px;
}
body.app-body .sidebar-filters::-webkit-scrollbar { display: none; }
body.app-body .sidebar-filter {
    flex: none;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ui-muted);
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.app-body .sidebar-filter i { font-size: 0.62rem; margin-right: 2px; }
body.app-body .sidebar-filter:hover { background: var(--ui-hover); color: var(--ui-text); }
body.app-body .sidebar-filter.is-active {
    background: var(--ui-active);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-strong);
}

/* Rows: a coloured badge per kind, the age on the right, star on hover. */
body.app-body .sidebar-group-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-faint);
    padding: 14px 10px 6px;
}
body.app-body .sidebar-group-label:first-child { padding-top: 6px; }
body.app-body .sidebar-item {
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--ui-text);
    font-size: 0.86rem;
}
body.app-body .sidebar-item:hover { background: var(--ui-hover); }
body.app-body .sidebar-item.is-active { background: var(--ui-active); }
body.app-body .sidebar-item.is-active .sidebar-item-title { font-weight: 600; color: var(--ui-text-strong); }
body.app-body .sidebar-item.is-kbd { box-shadow: inset 0 0 0 2px var(--primary-color); }
body.app-body .sidebar-item-badge {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
}
body.app-body .sidebar-item-badge.is-create { background: #e8f0fe; color: #2563eb; }
body.app-body .sidebar-item-badge.is-solve  { background: #e3f6ee; color: #059669; }
body.app-body .sidebar-item-badge.is-upload { background: #fdf2e1; color: #d97706; }
body.app-body .sidebar-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.app-body .sidebar-item-title { flex: none; }
body.app-body .sidebar-item-snippet {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--ui-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.app-body .sidebar-item mark {
    background: var(--ui-mark);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
body.app-body .sidebar-item.has-snippet { align-items: flex-start; }
body.app-body .sidebar-item-age {
    flex: none;
    font-size: 0.68rem;
    color: var(--ui-faint);
    font-variant-numeric: tabular-nums;
}
body.app-body .sidebar-item-star { color: var(--ui-faint); }
body.app-body .sidebar-item-star:not(.is-starred) { display: none; }
body.app-body .sidebar-item:hover .sidebar-item-star { display: block; }
body.app-body .sidebar-item:hover .sidebar-item-age,
body.app-body .sidebar-item.is-starred .sidebar-item-age { display: none; }
body.app-body .sidebar-item-star.is-starred { color: #f59e0b; }
body.app-body .sidebar-searching {
    font-size: 0.75rem;
    color: var(--ui-muted);
    padding: 10px 10px;
}
body.app-body .sidebar-searching i { margin-right: 6px; }
body.app-body .sidebar-empty { color: var(--ui-faint); }

/* Account row */
body.app-body .sidebar-user .user-info:hover { background: var(--ui-hover); }
body.app-body .sidebar-user #user-name { color: var(--ui-text-strong); }
body.app-body .sidebar-user .nav-settings-btn { color: var(--ui-muted); }
body.app-body .sidebar-user .nav-settings-btn:hover { background: var(--ui-hover); color: var(--ui-text-strong); }

/* Appearance switch: its own row at the bottom of the sidebar. */
body.app-body .sidebar-appearance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 8px 6px 10px;
    font-size: 0.8rem;
    color: var(--ui-muted);
}
body.app-body .sidebar-appearance-label i { margin-right: 6px; font-size: 0.78rem; }
body.app-body .theme-switch {
    display: inline-flex;
    padding: 2px;
    border-radius: 9px;
    background: var(--ui-hover);
    gap: 2px;
}
body.app-body .theme-switch button {
    width: 30px; height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
    font-size: 0.78rem;
}
body.app-body .theme-switch button:hover { color: var(--ui-text-strong); }
body.app-body .theme-switch button.is-active {
    background: var(--ui-surface);
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Rail (collapsed sidebar / phone top bar) */
body.app-body .app-rail { background: var(--ui-surface-2); border-right-color: var(--ui-border); }
body.app-body .rail-btn { color: var(--ui-muted); }
body.app-body .rail-btn:hover { background: var(--ui-hover); color: var(--ui-text-strong); }
@media (max-width: 780px) {
    html[data-theme="dark"] body.sidebar-active .app-rail {
        background: rgba(24, 24, 24, 0.9);
        border-bottom-color: var(--ui-border);
    }
}

/* ==========================================================================
   Composer
   ========================================================================== */
body.app-body .composer-heading h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-text-strong);
}
body.app-body.sidebar-active .topic-input-container {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    border-radius: 24px;
    box-shadow: var(--ui-shadow);
}
body.app-body.sidebar-active .topic-input-container:focus-within {
    border-color: #c4c7cd;
    box-shadow: var(--ui-shadow);
}
body.app-body.sidebar-active #user-input { color: var(--ui-text-strong); background: transparent; }
body.app-body.sidebar-active #user-input::placeholder { color: var(--ui-faint); }
body.app-body .composer-icon-btn { color: var(--ui-muted); border-color: var(--ui-border); background: transparent; }
body.app-body .composer-icon-btn:hover,
body.app-body .composer-icon-btn[aria-expanded="true"] { background: var(--ui-hover); color: var(--primary-color); }
body.app-body .composer-send-btn:not(:disabled):not(.is-stopping):not(.upgrade-mode) {
    background: var(--ui-text-strong);
    color: var(--ui-surface);
    box-shadow: none;
}
body.app-body .composer-send-btn:not(:disabled):not(.is-stopping):not(.upgrade-mode):hover { opacity: 0.85; }
html[data-theme="dark"] body.app-body .composer-send-btn:disabled { background: #3d3d3d; color: #767676; }
body.app-body .composer-add-menu { background: var(--ui-surface); border-color: var(--ui-border); }
body.app-body .composer-add-item { color: var(--ui-text); }
body.app-body .composer-add-item:hover,
body.app-body .composer-add-item:focus-visible { background: var(--ui-hover); }
body.app-body .topic-sample-chip {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
    border-radius: 14px;
}
body.app-body .topic-sample-chip:hover {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-strong);
    background: var(--ui-hover);
}
body.app-body .topic-input-samples-label,
body.app-body #topic-samples-label { color: var(--ui-muted); }

/* ==========================================================================
   Chat
   ========================================================================== */
body.app-body .chat-msg-user {
    background: #2f6fe4;
    color: #fff;
    border-radius: 20px;
    padding: 10px 16px;
    box-shadow: none;
}
html[data-theme="dark"] body.app-body .chat-msg-user { background: #2b62c9; }
body.app-body .chat-msg-user-file { background: rgba(255, 255, 255, 0.18); }
body.app-body .chat-msg-pdf {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow);
    border-radius: 18px;
}
body.app-body .chat-msg-pdf:hover { border-color: var(--ui-border-strong); background: var(--ui-hover); box-shadow: var(--ui-shadow); }
body.app-body .chat-msg-pdf-name { color: var(--ui-text-strong); }
body.app-body .chat-msg-pdf-expand { color: var(--ui-faint); }
body.app-body .chat-msg-pdf:hover .chat-msg-pdf-expand { background: var(--ui-hover); }

/* ==========================================================================
   Dark mode: surfaces that do not read the tokens above
   ========================================================================== */
html[data-theme="dark"] body.app-body,
html[data-theme="dark"] body.app-body.generator-bg,
html[data-theme="dark"] body.app-body.sidebar-active {
    background: #212121 !important;
    background-attachment: fixed !important;
    color: var(--ui-text);
}
html[data-theme="dark"] body.app-body .sidebar-new-btn { box-shadow: none; }
html[data-theme="dark"] body.app-body .sidebar-item-badge { background: #2f2f2f; }
html[data-theme="dark"] body.app-body .sidebar-item-badge.is-create { color: #8ab4f8; }
html[data-theme="dark"] body.app-body .sidebar-item-badge.is-solve  { color: #81c995; }
html[data-theme="dark"] body.app-body .sidebar-item-badge.is-upload { color: #fdd663; }
html[data-theme="dark"] body.app-body .sidebar-skeleton {
    background: #2a2a2a;
}
html[data-theme="dark"] body.app-body .sidebar-user .user-plan.is-free { color: var(--ui-faint); }
html[data-theme="dark"] body.app-body .user-plan.is-pro { color: #8ab4f8; }

/* Trial card and the bar above the composer: flat surfaces, the accent only
   in the text, button and progress. */
body.app-body .sidebar-counter.is-trial,
body.app-body .upgrade-bar {
    background: #eef3fb;
    border-color: #d9e3f3;
}
body.app-body .trial-card-icon,
body.app-body .trial-card-cta,
body.app-body .upgrade-bar-cta { background: #2563eb; box-shadow: none; }
body.app-body .trial-card-fill { background: #2563eb; }
body.app-body .sidebar-counter.is-trial.warning,
body.app-body .upgrade-bar.warning {
    background: #fff4e8;
    border-color: #fbdcbc;
}
body.app-body .sidebar-counter.is-trial.warning .trial-card-icon,
body.app-body .sidebar-counter.is-trial.warning .trial-card-cta,
body.app-body .upgrade-bar.warning .upgrade-bar-cta { background: #ea580c; box-shadow: none; }
body.app-body .sidebar-counter.is-trial.warning .trial-card-fill { background: #ea580c; }

html[data-theme="dark"] body.app-body .sidebar-counter.is-trial,
html[data-theme="dark"] body.app-body .upgrade-bar {
    background: #2a2a2a;
    border-color: #3d3d3d;
    color: var(--ui-text);
}
html[data-theme="dark"] body.app-body .trial-card-title { color: var(--ui-text-strong); }
html[data-theme="dark"] body.app-body .trial-card-days,
html[data-theme="dark"] body.app-body .upgrade-bar-price { color: #8ab4f8; }
html[data-theme="dark"] body.app-body .trial-card-track { background: #3d3d3d; }
html[data-theme="dark"] body.app-body .sidebar-counter.is-trial.warning,
html[data-theme="dark"] body.app-body .upgrade-bar.warning {
    background: #2a2a2a;
    border-color: #5a4330;
    color: var(--ui-text);
}
html[data-theme="dark"] body.app-body .sidebar-counter.is-trial.warning .trial-card-title { color: var(--ui-text-strong); }
html[data-theme="dark"] body.app-body .sidebar-counter.is-trial.warning .trial-card-days,
html[data-theme="dark"] body.app-body .upgrade-bar.warning .upgrade-bar-price { color: #f0a35e; }
html[data-theme="dark"] body.app-body .sidebar-counter.is-trial.warning .trial-card-track { background: #3d3d3d; }
html[data-theme="dark"] body.app-body .sidebar-counter { color: var(--ui-muted); }

/* Menus, cards, notes, toasts */
html[data-theme="dark"] body.app-body .settings-dropdown,
html[data-theme="dark"] body.app-body .sidebar-user .settings-dropdown {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] body.app-body .settings-dropdown-item { color: var(--ui-text); }
html[data-theme="dark"] body.app-body .settings-dropdown-item:hover { background: var(--ui-hover); }
html[data-theme="dark"] body.app-body .settings-dropdown-item.danger { color: #f87171; }
html[data-theme="dark"] body.app-body .settings-dropdown-item.highlight { color: #8ab4f8; }
html[data-theme="dark"] body.app-body .chat-legacy-note {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-muted);
}
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton {
    background: var(--ui-surface);
    border-color: var(--ui-border);
}
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton-phase,
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton-meta { color: var(--ui-muted); }
html[data-theme="dark"] body .toast-notification {
    background: var(--ui-surface) !important;
    color: var(--ui-text-strong);
    border-color: var(--ui-border);
}
html[data-theme="dark"] body.app-body .file-preview-container .file-preview,
html[data-theme="dark"] body.app-body .solve-preview-card {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
    color: var(--ui-text);
}
html[data-theme="dark"] body.app-body .chat-load-indicator { color: var(--ui-faint); }
html[data-theme="dark"] body.app-body .composer-add-item-title { color: var(--ui-text-strong); }
html[data-theme="dark"] body.app-body .composer-add-item-icon { background: #363636; color: #8ab4f8; }

@media (max-width: 780px) {
    body.app-body .composer-heading h2 { font-size: 1.45rem; }
}

/* Plain page backgrounds, no gradients. */
body.app-body,
body.app-body.generator-bg,
body.app-body.sidebar-active { background: #f7f7f8 !important; }
html[data-theme="dark"] body.app-body,
html[data-theme="dark"] body.app-body.generator-bg,
html[data-theme="dark"] body.app-body.sidebar-active { background: #212121 !important; }
html[data-theme="dark"] body.app-body.sidebar-active .topic-input-container:focus-within { border-color: #4a4a4a; }
/* The viewer keeps its own look in dark mode, scrollbars included. */
html[data-theme="dark"] .pdf-viewer { color-scheme: light; }

/* ==========================================================================
   Generation card: flat colours, several small motions at once
   --------------------------------------------------------------------------
   A miniature page being written line by line, a spinner ring on its corner,
   the phase sliding in when it changes, the ✻ turning, the token count
   counting up (app.js) and a bar running along the bottom. No gradients,
   sheens or glossy sweeps.
   ========================================================================== */
body.app-body .chat-msg-pdf-skeleton {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow);
    border-radius: 18px;
}
body.app-body .chat-msg-pdf-skeleton::after { display: none; }
body.app-body .chat-msg-pdf-skeleton-icon {
    background: var(--ui-hover);
    border-radius: 12px;
    overflow: visible;
}
body.app-body .chat-msg-pdf-skeleton-icon::before { display: none; }
body.app-body .skel-page {
    width: 24px;
    height: 30px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid var(--ui-border-strong);
    box-sizing: border-box;
    padding: 5px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body.app-body .skel-page i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #2f6fe4;
    transform-origin: left center;
    transform: scaleX(0);
    animation: skelWrite 2.4s ease-in-out infinite;
}
body.app-body .skel-page i:nth-child(1) { width: 100%; }
body.app-body .skel-page i:nth-child(2) { width: 80%; animation-delay: 0.3s; }
body.app-body .skel-page i:nth-child(3) { width: 100%; animation-delay: 0.6s; }
body.app-body .skel-page i:nth-child(4) { width: 55%; animation-delay: 0.9s; }
@keyframes skelWrite {
    0%       { transform: scaleX(0); opacity: 1; }
    30%, 75% { transform: scaleX(1); opacity: 1; }
    90%, 100% { transform: scaleX(1); opacity: 0; }
}
body.app-body .skel-ring {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ui-surface);
    box-shadow: 0 0 0 2px var(--ui-surface);
    border: 2px solid var(--ui-border-strong);
    border-top-color: #2f6fe4;
    box-sizing: border-box;
    animation: skeletonSpin 0.9s linear infinite;
}
/* Library and upload placeholders: the same card, without the page motion. */
body.app-body .chat-msg-pdf-skeleton:not(.is-live) .skel-page i { animation-duration: 3.2s; }

body.app-body .chat-msg-pdf-skeleton-phase {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ui-text-strong);
    animation: none;
}
body.app-body .chat-msg-pdf-skeleton-phase.is-new { animation: skelPhaseIn 0.35s ease-out; }
@keyframes skelPhaseIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.app-body .chat-msg-pdf-skeleton-meta { color: var(--ui-muted); }
body.app-body .chat-msg-pdf-skeleton-name { color: var(--ui-text); }
body.app-body .chat-msg-pdf-skeleton-spinner { color: #2f6fe4; }
body.app-body .chat-msg-pdf-skeleton-tokens:not(:empty)::before,
body.app-body .chat-msg-pdf-skeleton-name:not(:empty)::before { color: var(--ui-faint); }

body.app-body .chat-msg-pdf-skeleton-progress { height: 3px; background: var(--ui-hover); }
body.app-body .chat-msg-pdf-skeleton-progress span {
    width: 30%;
    background: #2f6fe4;
    animation: skeletonSweep 1.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
body.app-body .chat-msg-pdf-skeleton-progress.is-determinate span { background: #2f6fe4; animation: none; }

body.app-body .chat-msg-pdf-skeleton-line {
    background: var(--ui-hover);
    animation: skelPulse 1.4s ease-in-out infinite;
}
@keyframes skelPulse { 50% { opacity: 0.5; } }

html[data-theme="dark"] body.app-body .skel-page { background: #3a3a3a; border-color: #4a4a4a; }
html[data-theme="dark"] body.app-body .skel-page i,
html[data-theme="dark"] body.app-body .skel-ring { border-top-color: #6c9ef8; }
html[data-theme="dark"] body.app-body .skel-page i { background: #6c9ef8; }
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton-spinner,
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton-progress span { color: #6c9ef8; }
html[data-theme="dark"] body.app-body .chat-msg-pdf-skeleton-progress span { background: #6c9ef8; }

@media (prefers-reduced-motion: reduce) {
    body.app-body .skel-page i { animation: none; transform: none; }
    body.app-body .skel-ring { animation-duration: 3s; }
    body.app-body .chat-msg-pdf-skeleton-phase.is-new { animation: none; }
}

/* The clock and the token count change many times a second, and Poppins
   has no fixed-width digits, so every new number was a different width and
   the name after them wiggled. Their figures use the system font's tabular
   digits instead: the width now changes only when a digit is added (9s to
   10s, ~999 to ~1.0k), a handful of times per worksheet. */
body.app-body .chat-msg-pdf-skeleton-elapsed,
body.app-body .chat-msg-pdf-skeleton-tokens {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* Phone top bar: [menu] [name] [light/dark] [new]. */
@media (max-width: 780px) {
    body.app-body .rail-theme { order: 1; }
    body.app-body #rail-new-btn { order: 2; }
}

body.app-body .sun-svg { display: block; margin: 0 auto; }