/* File role: root runtime tokens and generic light/dark mode variables. */
:root {
  --bg: #ffffff;
  --bg-strong: #f4f6f6;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --surface-soft: rgba(244, 247, 247, 0.78);
  --text: #0b0d10;
  --text-muted: #5c6a6c;
  --line: rgba(11, 13, 16, 0.08);
  --shadow: 0 24px 70px rgba(12, 20, 20, 0.12);
  --accent: #0fb5aa;
  --accent-rgb: 15, 181, 170;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --sidebar-width: 304px;
  --chat-column-max-width: 960px;
  --inspector-width: 340px;
  --chat-layout-width: var(--chat-column-max-width);
  --composer-max-width: 780px;
  --chat-avatar-rail: 64px;
  --chat-frame-max-width: calc(var(--chat-column-max-width) + var(--chat-avatar-rail));
  --app-viewport-height: 100vh;
  --browser-chrome-bg: var(--bg-gradient-end);
  --keyboard-inset: 0px;
  --touch-target-size: 44px;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-history: 18px;
  --radius-bubble-assistant: 22px;
  --radius-bubble-user: 20px;
  --radius-auth: 32px;
  --ease: 180ms ease;
  --hover-lift: -1px;
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-code: "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
  --heading-weight: 640;
  --heading-track: -0.035em;
  --title-weight: 500;
  --grid-rgb: 11, 13, 16;
  --grid-alpha: 0.03;
  --grid-size: 22px;
  --grid-mask: radial-gradient(circle at center, black 18%, transparent 82%);
  --user-bubble: #0b0d10;
  --user-bubble-rgb: 11, 13, 16;
  --orb-glow-rgb: 46, 230, 200;
  --bg-gradient-start: #ffffff;
  --bg-gradient-mid: #f4f7f7;
  --bg-gradient-end: #eaf1f0;
  --bg-accent-alpha: 0.14;
  --bg-orb-alpha: 0.18;
  --welcome-orb-bg: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.145), transparent 72%);
  --theme-overlay: none;
  --theme-overlay-opacity: 1;
  --theme-overlay-blend: normal;
  --mode-accent-alpha-shift: 0;
  --mode-orb-alpha-shift: 0;
  --mode-grid-presence: 0;
  --mode-grid-scale: 1;
  --mode-overlay: none;
  --mode-overlay-opacity: 0;
  --mode-orb-shell-filter: saturate(1.08) contrast(1.04);
  --mode-orb-filter: saturate(1.14) contrast(1.1);
  --mode-pill-active-bg: var(--accent-soft);
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(var(--accent-rgb), 0.1);
  --panel-blur: 24px;
  --surface-blur: 16px;
  --sidebar-bg: var(--surface-soft);
  --control-bg: var(--surface);
  --control-border: var(--line);
  --field-bg: var(--surface);
  --field-border: var(--line);
  --auth-card-bg: rgba(255, 255, 255, 0.9);
  --auth-card-shadow: 0 30px 80px rgba(21, 24, 20, 0.14);
  --auth-badge-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 240, 231, 0.72));
  --auth-badge-border: rgba(var(--accent-rgb), 0.12);
  --auth-badge-color: rgba(15, 120, 112, 0.92);
  --settings-card-bg: #fbfdfc;
  --settings-card-shadow: -24px 0 60px rgba(18, 20, 18, 0.12);
  --settings-backdrop-bg: rgba(15, 17, 14, 0.32);
  --composer-shell-bg: rgba(255, 255, 255, 0.84);
  --composer-shell-border: rgba(23, 25, 21, 0.08);
  --composer-shell-shadow: var(--shadow);
  --drop-overlay-bg: rgba(255, 255, 255, 0.84);
  --drop-overlay-border: rgba(var(--accent-rgb), 0.36);
  --drop-overlay-blur: 10px;
  --history-active-shadow: 0 12px 28px rgba(25, 29, 23, 0.08);
  --surface-card-border: rgba(23, 25, 21, 0.08);
  --surface-card-shadow: 0 22px 50px rgba(25, 29, 23, 0.08);
  --message-assistant-bg: var(--surface);
  --message-assistant-border: rgba(23, 25, 21, 0.06);
  --message-assistant-shadow: 0 18px 40px rgba(24, 28, 21, 0.06);
  --reading-card-bg: var(--message-assistant-bg);
  --reading-card-border: var(--message-assistant-border);
  --reading-line-height: 1.48;
  --reading-font-size: 0.88rem;
  --reading-link-color: var(--accent);
  --theme-density-history-min: 100px;
  --theme-density-history-padding: 14px 44px 14px 14px;
  --theme-density-answer-gap: 12px;
  --theme-density-message-padding: 16px 16px 18px;
  --message-text-max-width: var(--composer-max-width);
  --theme-tone-meta-display: none;
  --assistant-source-bg:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.02)),
    rgba(255, 255, 255, 0.7);
  --assistant-card-bg: rgba(var(--accent-rgb), 0.04);
  --assistant-card-border: rgba(23, 25, 21, 0.08);
  --assistant-command-bg: rgba(23, 25, 21, 0.05);
  --quote-bg: rgba(var(--accent-rgb), 0.05);
  --quote-border: rgba(var(--accent-rgb), 0.36);
  --code-bg: rgba(14, 19, 31, 0.08);
  --status-success: #2f855a;
  --status-success-bg: rgba(58, 135, 91, 0.12);
  --status-pending: var(--accent);
  --status-pending-bg: rgba(var(--accent-rgb), 0.14);
  --status-danger: #ab4426;
  --status-danger-bg: rgba(171, 68, 38, 0.12);
  --status-neutral: var(--text);
  --status-neutral-bg: rgba(23, 25, 21, 0.08);
  --source-valid-rgb: 38, 128, 96;
  --source-contested-rgb: 184, 119, 72;
  --source-unverified-rgb: 174, 72, 54;
  --semantic-risk-rgb: var(--source-unverified-rgb);
  --semantic-fact-rgb: var(--source-valid-rgb);
  --semantic-hypothesis-rgb: 46, 190, 224;
  --semantic-quote-rgb: 78, 112, 180;
  --semantic-deadline-rgb: var(--source-contested-rgb);
  --semantic-number-rgb: 46, 112, 142;
}

body[data-theme="dark"] {
  --bg: #05070a;
  --bg-strong: #0d1113;
  --surface: rgba(16, 20, 23, 0.84);
  --surface-strong: rgba(20, 25, 28, 0.96);
  --surface-soft: rgba(11, 14, 17, 0.82);
  --text: #f2f6f6;
  --text-muted: #8b9a9a;
  --line: rgba(160, 230, 220, 0.12);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  --grid-rgb: 160, 230, 220;
  --grid-alpha: 0.03;
  --user-bubble: #12171a;
  --user-bubble-rgb: 18, 23, 26;
  --orb-glow-rgb: 46, 230, 200;
  --bg-gradient-start: #05070a;
  --bg-gradient-mid: #0a0f11;
  --bg-gradient-end: #05080a;
  --bg-accent-alpha: 0.18;
  --bg-orb-alpha: 0.22;
  --welcome-orb-bg: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.082), transparent 72%);
  --sidebar-bg: rgba(8, 11, 13, 0.84);
  --control-bg: rgba(16, 20, 23, 0.88);
  --field-bg: rgba(16, 20, 23, 0.84);
  --auth-card-bg: rgba(10, 13, 15, 0.92);
  --auth-card-shadow: 0 32px 80px rgba(0, 0, 0, 0.34);
  --auth-badge-bg: linear-gradient(180deg, rgba(18, 26, 27, 0.9), rgba(12, 18, 19, 0.8));
  --auth-badge-border: rgba(var(--accent-rgb), 0.18);
  --auth-badge-color: rgba(190, 245, 236, 0.94);
  --settings-card-bg: rgba(10, 13, 15, 0.94);
  --settings-card-shadow: -24px 0 60px rgba(0, 0, 0, 0.26);
  --settings-backdrop-bg: rgba(3, 6, 12, 0.52);
  --composer-shell-bg: rgba(20, 26, 29, 0.58);
  --composer-shell-border: rgba(122, 199, 190, 0.14);
  --composer-shell-shadow:
    0 18px 42px rgba(3, 9, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --surface-blur: 10px;
  --drop-overlay-bg: rgba(9, 13, 22, 0.82);
  --surface-card-border: rgba(160, 230, 220, 0.08);
  --surface-card-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
  --message-assistant-bg: rgba(10, 15, 17, 0.88);
  --message-assistant-border: rgba(160, 230, 220, 0.08);
  --message-assistant-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
  --assistant-source-bg:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.03)),
    rgba(11, 16, 17, 0.86);
  --assistant-card-bg: rgba(var(--accent-rgb), 0.06);
  --assistant-card-border: rgba(160, 230, 220, 0.08);
  --assistant-command-bg: rgba(255, 255, 255, 0.04);
  --quote-bg: rgba(var(--accent-rgb), 0.08);
  --code-bg: rgba(0, 0, 0, 0.24);
  --source-valid-rgb: 71, 210, 169;
  --source-contested-rgb: 230, 166, 86;
  --source-unverified-rgb: 235, 112, 94;
  --semantic-quote-rgb: 120, 200, 255;
  --semantic-number-rgb: 94, 210, 224;
}

body.godmod-active[data-theme="light"] {
  --bg: #fbfbfa;
  --bg-strong: #f1f0ef;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --surface-soft: rgba(238, 237, 235, 0.82);
  --text: #242424;
  --text-muted: #5f5f5f;
  --line: rgba(36, 36, 36, 0.1);
  --accent: #8f173b;
  --accent-rgb: 143, 23, 59;
  --accent-soft: rgba(var(--accent-rgb), 0.13);
  --grid-rgb: 36, 36, 36;
  --grid-alpha: 0.025;
  --user-bubble: #8f173b;
  --user-bubble-rgb: 143, 23, 59;
  --orb-glow-rgb: 143, 23, 59;
  --welcome-orb-bg: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.145), transparent 72%);
  --bg-gradient-start: #ffffff;
  --bg-gradient-mid: #f6f5f4;
  --bg-gradient-end: #ecebea;
  --sidebar-bg: rgba(247, 247, 246, 0.88);
  --control-bg: rgba(255, 255, 255, 0.86);
  --control-border: rgba(36, 36, 36, 0.12);
  --field-bg: rgba(255, 255, 255, 0.9);
  --field-border: rgba(36, 36, 36, 0.12);
  --composer-shell-bg: rgba(255, 255, 255, 0.9);
  --composer-shell-border: rgba(36, 36, 36, 0.1);
  --reading-card-bg: rgba(255, 255, 255, 0.9);
  --reading-card-border: rgba(36, 36, 36, 0.09);
  --message-assistant-shadow: 0 18px 42px rgba(30, 30, 30, 0.06);
}

body.godmod-active[data-theme="dark"] {
  --bg: #101010;
  --bg-strong: #171717;
  --surface: rgba(33, 33, 33, 0.84);
  --surface-strong: rgba(43, 43, 43, 0.96);
  --surface-soft: rgba(29, 29, 29, 0.84);
  --text: #f6f6f3;
  --text-muted: #c4c4bf;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #a31d46;
  --accent-rgb: 163, 29, 70;
  --accent-soft: rgba(var(--accent-rgb), 0.22);
  --grid-rgb: 255, 255, 255;
  --grid-alpha: 0.025;
  --user-bubble: #7b1839;
  --user-bubble-rgb: 123, 24, 57;
  --orb-glow-rgb: 163, 29, 70;
  --bg-gradient-start: #0d0d0d;
  --bg-gradient-mid: #171717;
  --bg-gradient-end: #080808;
  --sidebar-bg: rgba(24, 24, 24, 0.92);
  --control-bg: rgba(36, 36, 36, 0.82);
  --control-border: rgba(255, 255, 255, 0.12);
  --field-bg: rgba(28, 28, 28, 0.92);
  --field-border: rgba(255, 255, 255, 0.12);
  --composer-shell-bg: rgba(22, 22, 22, 0.9);
  --composer-shell-border: rgba(255, 255, 255, 0.1);
  --reading-card-bg: rgba(26, 26, 26, 0.86);
  --reading-card-border: rgba(255, 255, 255, 0.1);
  --message-assistant-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

/* File role: base accent palette tokens shared by light and dark themes. */
body[data-accent="control"] {
  --accent: #63d5ff;
  --accent-rgb: 99, 213, 255;
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --heading-weight: 700;
  --title-weight: 560;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-pill: 12px;
  --radius-card: 16px;
  --radius-history: 16px;
  --radius-bubble-assistant: 18px;
  --radius-bubble-user: 16px;
  --ease: 155ms cubic-bezier(0.22, 1, 0.36, 1);
  --grid-size: 18px;
  --grid-alpha: 0.032;
  --orb-glow-rgb: 255, 191, 107;
  --theme-overlay:
    radial-gradient(circle at 82% 18%, rgba(255, 191, 107, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(99, 213, 255, 0.05), transparent 34%);
  --status-pending: #ffbf6b;
  --status-pending-bg: rgba(255, 191, 107, 0.16);
}

body[data-accent="research"] {
  --accent: #8f5f3f;
  --accent-rgb: 143, 95, 63;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --font-ui: "Avenir Next", "Optima", "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-code: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --heading-weight: 620;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-pill: 20px;
  --radius-card: 22px;
  --radius-history: 22px;
  --radius-bubble-assistant: 24px;
  --radius-bubble-user: 22px;
  --ease: 210ms ease;
  --grid-alpha: 0.012;
  --orb-glow-rgb: 218, 181, 120;
  --theme-overlay:
    radial-gradient(circle at 14% 18%, rgba(151, 113, 78, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 24%);
}

body[data-accent="arctic"] {
  --accent: #66aeea;
  --accent-rgb: 102, 174, 234;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --heading-weight: 610;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-pill: 20px;
  --radius-card: 22px;
  --radius-history: 20px;
  --radius-bubble-assistant: 24px;
  --radius-bubble-user: 22px;
  --ease: 190ms cubic-bezier(0.22, 1, 0.36, 1);
  --grid-alpha: 0.02;
  --panel-blur: 28px;
  --surface-blur: 20px;
  --hover-lift: -0.5px;
  --orb-glow-rgb: 147, 210, 255;
}

body[data-accent="progress"] {
  --accent: #53f3cf;
  --accent-rgb: 83, 243, 207;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --font-ui: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --font-display: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --font-code: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --heading-weight: 580;
  --heading-track: -0.02em;
  --title-weight: 560;
  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-pill: 10px;
  --radius-card: 12px;
  --radius-history: 12px;
  --radius-bubble-assistant: 14px;
  --radius-bubble-user: 12px;
  --ease: 150ms linear;
  --grid-size: 20px;
  --grid-alpha: 0.045;
  --orb-glow-rgb: 174, 255, 101;
  --theme-overlay: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0, rgba(255, 255, 255, 0.028) 1px, transparent 1px, transparent 4px);
  --status-success: #f1fff9;
  --status-success-bg: rgba(16, 78, 64, 0.92);
}

body[data-accent="time"] {
  --accent: #e67b5d;
  --accent-rgb: 230, 123, 93;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --font-ui: "Avenir Next", "Optima", "Segoe UI", sans-serif;
  --font-display: "Optima", "Avenir Next", "Segoe UI", sans-serif;
  --heading-weight: 610;
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 16px;
  --radius-pill: 22px;
  --radius-card: 24px;
  --radius-history: 24px;
  --radius-bubble-assistant: 26px;
  --radius-bubble-user: 24px;
  --ease: 220ms cubic-bezier(0.23, 1, 0.32, 1);
  --grid-alpha: 0.018;
  --orb-glow-rgb: 246, 177, 120;
  --theme-overlay:
    radial-gradient(circle at 14% 18%, rgba(246, 177, 120, 0.12), transparent 18%),
    radial-gradient(circle at 88% 84%, rgba(230, 123, 93, 0.08), transparent 22%);
}

body[data-accent="copper"] {
  --accent: #b87748;
  --accent-rgb: 184, 119, 72;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --font-ui: "Avenir Next", "Segoe UI", sans-serif;
  --font-display: "Optima", "Palatino Linotype", "Book Antiqua", serif;
  --heading-weight: 620;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 16px;
  --radius-card: 18px;
  --radius-history: 18px;
  --radius-bubble-assistant: 20px;
  --radius-bubble-user: 18px;
  --ease: 180ms ease;
  --grid-alpha: 0.022;
  --orb-glow-rgb: 205, 150, 108;
  --theme-overlay: linear-gradient(120deg, transparent 0, rgba(208, 164, 120, 0.08) 38%, transparent 58%);
}

body[data-accent="bordeaux"] {
  --accent: #8a243d;
  --accent-rgb: 138, 36, 61;
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --font-ui: "Avenir Next", "Segoe UI", sans-serif;
  --font-display: "Optima", "Avenir Next", "Segoe UI", sans-serif;
  --heading-weight: 630;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --radius-pill: 18px;
  --radius-card: 18px;
  --radius-history: 18px;
  --radius-bubble-assistant: 22px;
  --radius-bubble-user: 20px;
  --ease: 210ms cubic-bezier(0.22, 1, 0.36, 1);
  --grid-alpha: 0.022;
  --orb-glow-rgb: 199, 149, 82;
  --status-pending: #c79552;
  --status-pending-bg: rgba(199, 149, 82, 0.16);
  --theme-overlay:
    radial-gradient(circle at 82% 18%, rgba(199, 149, 82, 0.12), transparent 18%),
    linear-gradient(135deg, rgba(126, 34, 49, 0.14), transparent 44%);
}

body[data-accent="forest"] {
  --accent: #2d8a5b;
  --accent-rgb: 45, 138, 91;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --forest-earth: #8b5f3d;
  --forest-earth-rgb: 139, 95, 61;
  --font-ui: "Avenir Next", "Optima", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Optima", "Segoe UI", sans-serif;
  --heading-weight: 620;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 18px;
  --radius-card: 20px;
  --radius-history: 20px;
  --radius-bubble-assistant: 22px;
  --radius-bubble-user: 20px;
  --ease: 195ms cubic-bezier(0.22, 1, 0.36, 1);
  --grid-alpha: 0.022;
  --orb-glow-rgb: 176, 219, 134;
  --status-pending: var(--forest-earth);
  --status-pending-bg: rgba(var(--forest-earth-rgb), 0.16);
  --theme-overlay:
    radial-gradient(circle at 14% 22%, rgba(176, 219, 134, 0.12), transparent 18%),
    radial-gradient(circle at 86% 20%, rgba(var(--forest-earth-rgb), 0.1), transparent 18%),
    linear-gradient(180deg, rgba(45, 138, 91, 0.04), transparent 38%);
}

body[data-accent="shadow"] {
  --accent: #9bb8c8;
  --accent-rgb: 155, 184, 200;
  --accent-soft: rgba(var(--accent-rgb), 0.15);
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-code: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --heading-weight: 720;
  --title-weight: 620;
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 11px;
  --radius-sm: 9px;
  --radius-pill: 12px;
  --radius-card: 14px;
  --radius-history: 14px;
  --radius-bubble-assistant: 16px;
  --radius-bubble-user: 14px;
  --ease: 145ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --grid-size: 18px;
  --grid-alpha: 0.034;
  --orb-glow-rgb: 255, 255, 255;
  --theme-overlay:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 82% 14%, rgba(155, 184, 200, 0.12), transparent 18%);
}

body[data-accent="aurora"] {
  --accent: #16c2b8;
  --accent-rgb: 22, 194, 184;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --heading-weight: 640;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 18px;
  --radius-card: 18px;
  --radius-history: 18px;
  --radius-bubble-assistant: 22px;
  --radius-bubble-user: 20px;
  --grid-alpha: 0.024;
  --orb-glow-rgb: 46, 230, 200;
  --theme-overlay:
    linear-gradient(120deg, transparent 0, rgba(46, 230, 200, 0.1) 26%, transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(22, 194, 184, 0.08), transparent 16%);
}

body[data-accent="sber"] {
  --accent: #42b99f;
  --accent-rgb: 66, 185, 159;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --font-ui: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Manrope", "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", "SFMono-Regular", "Menlo", monospace;
  --heading-weight: 720;
  --title-weight: 610;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --radius-pill: 18px;
  --radius-card: 18px;
  --radius-history: 18px;
  --radius-bubble-assistant: 22px;
  --radius-bubble-user: 20px;
  --ease: 170ms cubic-bezier(0.22, 1, 0.36, 1);
  --grid-size: 20px;
  --grid-alpha: 0.028;
  --orb-glow-rgb: 150, 118, 255;
  --theme-overlay:
    linear-gradient(118deg, rgba(88, 216, 186, 0.055), transparent 30%),
    linear-gradient(236deg, rgba(150, 118, 255, 0.17), transparent 38%),
    linear-gradient(180deg, rgba(87, 147, 255, 0.08), transparent 44%);
  --status-pending: #a994ff;
  --status-pending-bg: rgba(169, 148, 255, 0.16);
  --semantic-hypothesis-rgb: 169, 148, 255;
  --semantic-number-rgb: 117, 185, 255;
}

/* File role: accent-specific light and dark theme mode token overrides. */
body[data-accent="control"][data-theme="dark"] {
  --bg-gradient-start: #071017;
  --bg-gradient-mid: #0d171f;
  --bg-gradient-end: #09131b;
  --text: #e7f5fa;
  --text-muted: #8fa8b3;
  --line: rgba(154, 197, 214, 0.12);
  --surface: rgba(13, 20, 27, 0.84);
  --surface-strong: rgba(16, 25, 33, 0.95);
  --surface-soft: rgba(10, 16, 22, 0.84);
  --sidebar-bg: rgba(7, 13, 18, 0.9);
  --control-bg: rgba(12, 20, 28, 0.9);
  --field-bg: rgba(14, 22, 29, 0.92);
  --composer-shell-bg: rgba(8, 16, 22, 0.86);
  --composer-shell-border: rgba(22, 194, 184, 0.20);
  --drop-overlay-bg: rgba(7, 13, 18, 0.88);
  --auth-card-bg: rgba(8, 15, 20, 0.94);
  --settings-card-bg: rgba(8, 15, 20, 0.96);
  --user-bubble: #102935;
}

body[data-accent="control"][data-theme="light"] {
  --accent: #1d6686;
  --accent-rgb: 29, 102, 134;
  --bg-gradient-start: #edf4f6;
  --bg-gradient-mid: #e3edf0;
  --bg-gradient-end: #d7e5ea;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(231, 240, 243, 0.88);
  --text: #17313d;
  --text-muted: #58707a;
  --line: rgba(23, 49, 61, 0.12);
  --shadow: 0 28px 70px rgba(15, 36, 46, 0.14);
  --grid-alpha: 0.024;
  --bg-accent-alpha: 0.08;
  --bg-orb-alpha: 0.1;
  --sidebar-bg: rgba(223, 234, 239, 0.9);
  --control-bg: rgba(249, 252, 253, 0.9);
  --field-bg: rgba(255, 255, 255, 0.96);
  --settings-card-bg: rgba(248, 251, 252, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(15, 36, 46, 0.16);
  --composer-shell-bg: rgba(252, 254, 255, 0.92);
  --composer-shell-border: rgba(29, 102, 134, 0.2);
  --surface-card-shadow: 0 24px 55px rgba(15, 36, 46, 0.11);
  --message-assistant-shadow: 0 20px 44px rgba(15, 36, 46, 0.1);
  --user-bubble: #244557;
}

body[data-accent="research"][data-theme="light"] {
  --bg-gradient-start: #f2e7d4;
  --bg-gradient-mid: #e7d8c0;
  --bg-gradient-end: #dbc8ae;
  --surface: rgba(255, 250, 243, 0.92);
  --surface-strong: rgba(255, 252, 247, 0.98);
  --surface-soft: rgba(238, 226, 206, 0.88);
  --text: #281d14;
  --text-muted: #6d5a49;
  --line: rgba(68, 47, 35, 0.13);
  --shadow: 0 26px 64px rgba(86, 62, 44, 0.13);
  --bg-accent-alpha: 0.08;
  --bg-orb-alpha: 0.09;
  --sidebar-bg: rgba(235, 223, 202, 0.9);
  --control-bg: rgba(252, 246, 238, 0.9);
  --field-bg: rgba(255, 251, 245, 0.96);
  --settings-card-bg: rgba(250, 244, 235, 0.98);
  --settings-card-shadow: -24px 0 70px rgba(86, 62, 44, 0.15);
  --composer-shell-bg: rgba(255, 248, 240, 0.92);
  --composer-shell-border: rgba(143, 95, 63, 0.14);
  --surface-card-shadow: 0 22px 52px rgba(86, 62, 44, 0.11);
  --message-assistant-shadow: 0 18px 42px rgba(86, 62, 44, 0.08);
  --user-bubble: #433127;
}

body[data-accent="arctic"][data-theme="light"] {
  --bg-gradient-start: #f0f6fb;
  --bg-gradient-mid: #e5eef6;
  --bg-gradient-end: #d8e5f0;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.93);
  --surface-soft: rgba(236, 244, 250, 0.84);
  --text: #163447;
  --text-muted: #567284;
  --line: rgba(22, 52, 71, 0.11);
  --shadow: 0 26px 60px rgba(39, 73, 97, 0.11);
  --bg-accent-alpha: 0.07;
  --bg-orb-alpha: 0.08;
  --sidebar-bg: rgba(229, 238, 246, 0.84);
  --control-bg: rgba(250, 253, 255, 0.88);
  --field-bg: rgba(255, 255, 255, 0.94);
  --auth-card-bg: rgba(255, 255, 255, 0.88);
  --settings-card-bg: rgba(249, 252, 255, 0.94);
  --settings-card-shadow: -24px 0 68px rgba(39, 73, 97, 0.13);
  --composer-shell-bg: rgba(255, 255, 255, 0.9);
  --composer-shell-border: rgba(102, 174, 234, 0.18);
  --surface-card-shadow: 0 22px 52px rgba(39, 73, 97, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(39, 73, 97, 0.08);
  --user-bubble: #27506a;
}

body[data-accent="progress"][data-theme="dark"] {
  --bg-gradient-start: #050c0b;
  --bg-gradient-mid: #091411;
  --bg-gradient-end: #060d0c;
  --surface: rgba(6, 18, 15, 0.88);
  --surface-strong: rgba(8, 24, 20, 0.96);
  --surface-soft: rgba(5, 15, 13, 0.88);
  --text: #d8fff5;
  --text-muted: #7bc9b5;
  --line: rgba(83, 243, 207, 0.14);
  --sidebar-bg: rgba(5, 15, 13, 0.94);
  --control-bg: rgba(7, 22, 18, 0.92);
  --field-bg: rgba(8, 24, 20, 0.94);
  --composer-shell-bg: rgba(5, 18, 15, 0.92);
  --composer-shell-border: rgba(83, 243, 207, 0.2);
  --user-bubble: #103028;
}

body[data-accent="progress"][data-theme="light"] {
  --accent: #17684f;
  --accent-rgb: 23, 104, 79;
  --bg-gradient-start: #edf5f2;
  --bg-gradient-mid: #dfece7;
  --bg-gradient-end: #d4e4dd;
  --surface: rgba(252, 255, 253, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(229, 239, 234, 0.86);
  --text: #123129;
  --text-muted: #4d6f65;
  --line: rgba(18, 49, 41, 0.11);
  --shadow: 0 26px 64px rgba(12, 40, 32, 0.13);
  --grid-alpha: 0.024;
  --bg-accent-alpha: 0.07;
  --bg-orb-alpha: 0.08;
  --theme-overlay: linear-gradient(180deg, rgba(83, 243, 207, 0.035), transparent 32%);
  --sidebar-bg: rgba(223, 235, 228, 0.88);
  --control-bg: rgba(247, 251, 249, 0.9);
  --field-bg: rgba(255, 255, 255, 0.96);
  --settings-card-bg: rgba(247, 250, 248, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(12, 40, 32, 0.14);
  --composer-shell-bg: rgba(251, 255, 253, 0.92);
  --composer-shell-border: rgba(23, 104, 79, 0.2);
  --surface-card-shadow: 0 22px 52px rgba(12, 40, 32, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(12, 40, 32, 0.08);
  --user-bubble: #1d4a3d;
}

body[data-accent="time"][data-theme="light"] {
  --bg-gradient-start: #f6eadc;
  --bg-gradient-mid: #eedcc7;
  --bg-gradient-end: #e2c6ae;
  --surface: rgba(255, 249, 242, 0.9);
  --surface-strong: rgba(255, 252, 247, 0.97);
  --surface-soft: rgba(242, 228, 212, 0.86);
  --text: #342219;
  --text-muted: #7f6154;
  --line: rgba(72, 41, 29, 0.11);
  --shadow: 0 26px 62px rgba(98, 58, 43, 0.12);
  --bg-accent-alpha: 0.08;
  --bg-orb-alpha: 0.09;
  --sidebar-bg: rgba(240, 226, 210, 0.9);
  --control-bg: rgba(252, 244, 236, 0.9);
  --field-bg: rgba(255, 250, 244, 0.96);
  --settings-card-bg: rgba(251, 244, 236, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(98, 58, 43, 0.14);
  --composer-shell-bg: rgba(255, 248, 240, 0.92);
  --composer-shell-border: rgba(230, 123, 93, 0.15);
  --surface-card-shadow: 0 22px 52px rgba(98, 58, 43, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(98, 58, 43, 0.08);
  --user-bubble: #5c362d;
}

body[data-accent="copper"][data-theme="dark"] {
  --bg-gradient-start: #0c0909;
  --bg-gradient-mid: #151010;
  --bg-gradient-end: #0d0a0a;
  --surface: rgba(18, 12, 12, 0.88);
  --surface-strong: rgba(24, 16, 16, 0.96);
  --surface-soft: rgba(14, 10, 10, 0.88);
  --text: #f5e7de;
  --text-muted: #b79b8b;
  --line: rgba(184, 119, 72, 0.16);
  --sidebar-bg: rgba(13, 9, 9, 0.94);
  --control-bg: rgba(21, 14, 14, 0.92);
  --field-bg: rgba(24, 16, 16, 0.94);
  --composer-shell-bg: rgba(19, 12, 12, 0.92);
  --composer-shell-border: rgba(184, 119, 72, 0.2);
  --auth-card-bg: rgba(18, 12, 12, 0.95);
  --settings-card-bg: rgba(18, 12, 12, 0.97);
  --user-bubble: #36211a;
}

body[data-accent="copper"][data-theme="light"] {
  --bg-gradient-start: #f5eee8;
  --bg-gradient-mid: #eaded4;
  --bg-gradient-end: #ddcec1;
  --surface: rgba(255, 249, 244, 0.9);
  --surface-strong: rgba(255, 252, 248, 0.97);
  --surface-soft: rgba(238, 227, 219, 0.86);
  --text: #2e1f19;
  --text-muted: #725a4d;
  --line: rgba(46, 31, 25, 0.11);
  --shadow: 0 26px 64px rgba(77, 50, 38, 0.13);
  --grid-alpha: 0.02;
  --bg-accent-alpha: 0.07;
  --bg-orb-alpha: 0.08;
  --theme-overlay: radial-gradient(circle at 84% 14%, rgba(184, 119, 72, 0.08), transparent 18%);
  --sidebar-bg: rgba(233, 223, 214, 0.88);
  --control-bg: rgba(250, 245, 241, 0.9);
  --field-bg: rgba(255, 252, 248, 0.96);
  --settings-card-bg: rgba(249, 243, 237, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(77, 50, 38, 0.15);
  --composer-shell-bg: rgba(255, 249, 244, 0.92);
  --composer-shell-border: rgba(184, 119, 72, 0.16);
  --surface-card-shadow: 0 22px 52px rgba(77, 50, 38, 0.11);
  --message-assistant-shadow: 0 18px 42px rgba(77, 50, 38, 0.08);
  --user-bubble: #5a392d;
}

body[data-accent="bordeaux"][data-theme="dark"] {
  --bg-gradient-start: #100508;
  --bg-gradient-mid: #1d0a10;
  --bg-gradient-end: #080305;
  --surface: rgba(25, 10, 14, 0.9);
  --surface-strong: rgba(36, 14, 20, 0.96);
  --surface-soft: rgba(17, 7, 10, 0.9);
  --text: #fff4e6;
  --text-muted: #cdb69c;
  --line: rgba(199, 149, 82, 0.18);
  --sidebar-bg: rgba(13, 5, 8, 0.94);
  --control-bg: rgba(27, 10, 15, 0.92);
  --field-bg: rgba(32, 12, 18, 0.94);
  --auth-card-bg: rgba(18, 7, 11, 0.95);
  --settings-card-bg: rgba(18, 7, 11, 0.97);
  --settings-card-shadow: -24px 0 68px rgba(5, 0, 2, 0.36);
  --composer-shell-bg: rgba(22, 8, 13, 0.92);
  --composer-shell-border: rgba(199, 149, 82, 0.24);
  --message-assistant-bg: rgba(22, 9, 13, 0.92);
  --message-assistant-border: rgba(199, 149, 82, 0.14);
  --user-bubble: #541827;
  --user-bubble-rgb: 84, 24, 39;
}

body[data-accent="bordeaux"][data-theme="light"] {
  --accent: #8a243d;
  --accent-rgb: 138, 36, 61;
  --bg-gradient-start: #f8f0e8;
  --bg-gradient-mid: #eddfd3;
  --bg-gradient-end: #deccb9;
  --surface: rgba(255, 250, 244, 0.9);
  --surface-strong: rgba(255, 252, 247, 0.97);
  --surface-soft: rgba(241, 229, 216, 0.87);
  --text: #32141d;
  --text-muted: #765b4d;
  --line: rgba(88, 34, 45, 0.13);
  --shadow: 0 26px 64px rgba(82, 38, 28, 0.13);
  --bg-accent-alpha: 0.07;
  --bg-orb-alpha: 0.09;
  --orb-glow-rgb: 190, 137, 74;
  --sidebar-bg: rgba(238, 226, 215, 0.88);
  --control-bg: rgba(251, 247, 242, 0.9);
  --field-bg: rgba(255, 252, 247, 0.96);
  --settings-card-bg: rgba(250, 245, 239, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(82, 38, 28, 0.14);
  --composer-shell-bg: rgba(255, 250, 244, 0.92);
  --composer-shell-border: rgba(138, 36, 61, 0.17);
  --surface-card-shadow: 0 22px 52px rgba(82, 38, 28, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(82, 38, 28, 0.08);
  --user-bubble: #5d2531;
}

body[data-accent="forest"][data-theme="light"] {
  --bg-gradient-start: #e8f0e2;
  --bg-gradient-mid: #dce8d3;
  --bg-gradient-end: #ccdcbc;
  --surface: rgba(252, 255, 249, 0.9);
  --surface-strong: rgba(255, 255, 252, 0.97);
  --surface-soft: rgba(229, 239, 220, 0.86);
  --text: #173120;
  --text-muted: #5d6b56;
  --line: rgba(81, 58, 38, 0.12);
  --shadow: 0 26px 62px rgba(75, 58, 39, 0.11);
  --bg-accent-alpha: 0.07;
  --bg-orb-alpha: 0.08;
  --sidebar-bg: rgba(226, 232, 213, 0.88);
  --control-bg: rgba(249, 252, 247, 0.9);
  --field-bg: rgba(254, 255, 251, 0.96);
  --settings-card-bg: rgba(248, 252, 245, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(77, 58, 39, 0.13);
  --composer-shell-bg: rgba(252, 255, 249, 0.92);
  --composer-shell-border: rgba(139, 95, 61, 0.16);
  --surface-card-shadow: 0 22px 52px rgba(77, 58, 39, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(77, 58, 39, 0.08);
  --user-bubble: #3d4b2f;
}

body[data-accent="shadow"][data-theme="dark"] {
  --bg: #050506;
  --bg-strong: #0d0e10;
  --bg-gradient-start: #030304;
  --bg-gradient-mid: #0a0b0d;
  --bg-gradient-end: #050506;
  --surface: rgba(13, 14, 16, 0.9);
  --surface-strong: rgba(19, 20, 23, 0.98);
  --surface-soft: rgba(9, 10, 12, 0.9);
  --text: #f7f9fb;
  --text-muted: #9ba3ad;
  --line: rgba(232, 238, 246, 0.11);
  --shadow: 0 30px 76px rgba(0, 0, 0, 0.42);
  --grid-rgb: 232, 238, 246;
  --bg-accent-alpha: 0.16;
  --bg-orb-alpha: 0.08;
  --sidebar-bg: rgba(7, 8, 10, 0.95);
  --control-bg: rgba(15, 16, 19, 0.93);
  --control-border: rgba(255, 255, 255, 0.12);
  --field-bg: rgba(18, 19, 22, 0.95);
  --field-border: rgba(255, 255, 255, 0.12);
  --auth-card-bg: rgba(10, 11, 13, 0.96);
  --settings-card-bg: rgba(8, 9, 11, 0.98);
  --settings-card-shadow: -26px 0 72px rgba(0, 0, 0, 0.42);
  --composer-shell-bg: rgba(10, 11, 13, 0.94);
  --composer-shell-border: rgba(155, 184, 200, 0.24);
  --drop-overlay-bg: rgba(7, 8, 10, 0.9);
  --surface-card-border: rgba(255, 255, 255, 0.1);
  --surface-card-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
  --message-assistant-bg: rgba(12, 13, 15, 0.94);
  --message-assistant-border: rgba(255, 255, 255, 0.1);
  --message-assistant-shadow: 0 22px 52px rgba(0, 0, 0, 0.32);
  --assistant-command-bg: rgba(255, 255, 255, 0.055);
  --user-bubble: #1b1d22;
  --user-bubble-rgb: 27, 29, 34;
  --status-danger: #d6a15f;
  --status-danger-bg: rgba(214, 161, 95, 0.15);
}

body[data-accent="aurora"][data-theme="dark"] {
  --bg-gradient-start: #05070a;
  --bg-gradient-mid: #0a0f11;
  --bg-gradient-end: #05080a;
  --surface: rgba(16, 21, 22, 0.86);
  --surface-strong: rgba(21, 27, 28, 0.95);
  --surface-soft: rgba(11, 15, 16, 0.84);
  --text: #f2f7f6;
  --text-muted: #93a6a3;
  --line: rgba(120, 220, 208, 0.12);
  --sidebar-bg: rgba(9, 12, 13, 0.9);
  --control-bg: rgba(18, 24, 25, 0.9);
  --field-bg: rgba(18, 24, 25, 0.92);
  --composer-shell-bg: rgba(16, 22, 23, 0.76);
  --composer-shell-border: rgba(22, 194, 184, 0.2);
  --user-bubble: #14201e;
}

body[data-accent="aurora"][data-theme="light"] {
  --accent: #0fb0a5;
  --accent-rgb: 15, 176, 165;
  --bg-gradient-start: #ffffff;
  --bg-gradient-mid: #f2f8f7;
  --bg-gradient-end: #e6f2f0;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-soft: rgba(238, 245, 244, 0.86);
  --text: #0b1614;
  --text-muted: #566b68;
  --line: rgba(11, 22, 20, 0.11);
  --shadow: 0 28px 68px rgba(15, 60, 56, 0.12);
  --grid-alpha: 0.02;
  --bg-accent-alpha: 0.08;
  --bg-orb-alpha: 0.09;
  --sidebar-bg: rgba(238, 245, 244, 0.88);
  --control-bg: rgba(250, 253, 252, 0.9);
  --field-bg: rgba(255, 255, 255, 0.96);
  --settings-card-bg: rgba(248, 252, 251, 0.98);
  --settings-card-shadow: -24px 0 70px rgba(15, 60, 56, 0.14);
  --composer-shell-bg: rgba(250, 254, 253, 0.92);
  --composer-shell-border: rgba(15, 176, 165, 0.2);
  --surface-card-shadow: 0 24px 54px rgba(15, 60, 56, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(15, 60, 56, 0.08);
  --user-bubble: #0b1614;
}

body[data-accent="sber"][data-theme="dark"] {
  --bg: #03060d;
  --bg-strong: #0a1430;
  --bg-gradient-start: #03060d;
  --bg-gradient-mid: #0a1430;
  --bg-gradient-end: #120a22;
  --surface: rgba(9, 17, 34, 0.9);
  --surface-strong: rgba(14, 24, 48, 0.97);
  --surface-soft: rgba(7, 13, 28, 0.88);
  --text: #f0f7ff;
  --text-muted: #a7b8d6;
  --line: rgba(156, 142, 255, 0.16);
  --shadow:
    0 28px 74px rgba(0, 0, 0, 0.42),
    0 0 48px rgba(126, 96, 255, 0.12);
  --grid-rgb: 147, 160, 255;
  --grid-alpha: 0.032;
  --bg-accent-alpha: 0.1;
  --bg-orb-alpha: 0.26;
  --sidebar-bg: rgba(5, 10, 24, 0.93);
  --control-bg: rgba(11, 19, 38, 0.92);
  --control-border: rgba(156, 142, 255, 0.18);
  --field-bg: rgba(12, 21, 42, 0.94);
  --field-border: rgba(156, 142, 255, 0.18);
  --auth-card-bg: rgba(7, 13, 29, 0.94);
  --settings-card-bg: rgba(7, 13, 29, 0.98);
  --settings-card-shadow: -26px 0 72px rgba(0, 0, 0, 0.4);
  --composer-shell-bg: rgba(9, 17, 34, 0.9);
  --composer-shell-border: rgba(147, 129, 255, 0.24);
  --drop-overlay-bg: rgba(5, 10, 24, 0.9);
  --surface-card-border: rgba(156, 142, 255, 0.14);
  --surface-card-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
  --message-assistant-bg: rgba(10, 18, 36, 0.92);
  --message-assistant-border: rgba(156, 142, 255, 0.13);
  --message-assistant-shadow:
    0 22px 52px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --assistant-source-bg:
    linear-gradient(135deg, rgba(88, 216, 186, 0.06), rgba(154, 128, 255, 0.11)),
    rgba(10, 18, 36, 0.88);
  --assistant-card-bg: rgba(154, 128, 255, 0.07);
  --assistant-card-border: rgba(156, 142, 255, 0.13);
  --assistant-command-bg: rgba(255, 255, 255, 0.055);
  --quote-bg: rgba(154, 128, 255, 0.08);
  --quote-border: rgba(154, 128, 255, 0.38);
  --code-bg: rgba(1, 5, 9, 0.42);
  --reading-link-color: #a89bff;
  --user-bubble: #1a264d;
  --user-bubble-rgb: 26, 38, 77;
  --source-valid-rgb: 66, 185, 159;
  --source-contested-rgb: 169, 142, 255;
  --source-unverified-rgb: 255, 133, 123;
}

body[data-accent="sber"][data-theme="light"] {
  --accent: #157f63;
  --accent-rgb: 21, 127, 99;
  --bg-gradient-start: #e9fbf3;
  --bg-gradient-mid: #e6eefb;
  --bg-gradient-end: #e8e2fb;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-soft: rgba(235, 241, 255, 0.86);
  --text: #10263f;
  --text-muted: #5c6f82;
  --line: rgba(63, 72, 149, 0.12);
  --shadow: 0 26px 64px rgba(55, 64, 136, 0.13);
  --grid-rgb: 54, 80, 138;
  --grid-alpha: 0.024;
  --bg-accent-alpha: 0.08;
  --bg-orb-alpha: 0.12;
  --orb-glow-rgb: 126, 96, 255;
  --theme-overlay:
    linear-gradient(118deg, rgba(21, 127, 99, 0.07), transparent 30%),
    linear-gradient(236deg, rgba(126, 96, 255, 0.16), transparent 38%),
    radial-gradient(circle at 78% 16%, rgba(83, 131, 255, 0.12), transparent 22%);
  --sidebar-bg: rgba(226, 239, 244, 0.88);
  --control-bg: rgba(249, 253, 252, 0.9);
  --field-bg: rgba(255, 255, 255, 0.96);
  --settings-card-bg: rgba(248, 252, 255, 0.98);
  --settings-card-shadow: -24px 0 68px rgba(55, 64, 136, 0.14);
  --composer-shell-bg: rgba(252, 255, 254, 0.92);
  --composer-shell-border: rgba(21, 127, 99, 0.16);
  --surface-card-shadow: 0 22px 52px rgba(55, 64, 136, 0.1);
  --message-assistant-shadow: 0 18px 42px rgba(55, 64, 136, 0.08);
  --reading-link-color: #654fe2;
  --user-bubble: #194c55;
  --user-bubble-rgb: 25, 76, 85;
  --source-valid-rgb: 42, 154, 123;
  --source-contested-rgb: 126, 96, 255;
}

body[data-accent][data-theme="light"] {
  --welcome-orb-bg: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.145), transparent 72%);
}

/* File role: research mode and GodMode token overrides. */
body[data-research-mode="chat"] {
  --mode-accent-alpha-shift: 0;
  --mode-orb-alpha-shift: 0;
  --mode-grid-presence: 0;
  --mode-grid-scale: 1;
  --mode-pill-active-bg:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.06));
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(var(--accent-rgb), 0.13);
  --mode-overlay: none;
  --mode-overlay-opacity: 0;
  --mode-orb-shell-filter: saturate(1.06) contrast(1.02);
  --mode-orb-filter: saturate(1.1) contrast(1.06);
}

body[data-research-mode="search"] {
  --mode-accent-alpha-shift: 0.008;
  --mode-orb-alpha-shift: 0.012;
  --mode-grid-presence: 0.02;
  --mode-grid-scale: 1;
  --mode-pill-active-bg: rgba(var(--accent-rgb), 0.12);
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(var(--accent-rgb), 0.12);
  --mode-overlay:
    radial-gradient(circle at 18% 16%, rgba(var(--accent-rgb), 0.034), transparent 16%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.018), transparent 30%);
  --mode-overlay-opacity: 0.36;
  --mode-orb-shell-filter: saturate(1.1) contrast(1.05);
  --mode-orb-filter: saturate(1.16) contrast(1.11);
}

body[data-research-mode="deep-search"] {
  --mode-accent-alpha-shift: 0.045;
  --mode-orb-alpha-shift: 0.058;
  --mode-grid-presence: 0.14;
  --mode-grid-scale: 1.018;
  --mode-pill-active-bg:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--orb-glow-rgb), 0.14));
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(var(--orb-glow-rgb), 0.2);
  --mode-overlay:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(var(--orb-glow-rgb), 0.11), transparent 18%);
  --mode-overlay-opacity: 0.74;
  --mode-orb-shell-filter: saturate(1.18) contrast(1.08);
  --mode-orb-filter: saturate(1.24) contrast(1.15);
}

body[data-research-mode="project"] {
  --mode-accent-alpha-shift: 0.024;
  --mode-orb-alpha-shift: 0.028;
  --mode-grid-presence: 0.07;
  --mode-grid-scale: 1.01;
  --mode-pill-active-bg:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(58, 190, 174, 0.12));
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(58, 190, 174, 0.22);
  --mode-overlay:
    linear-gradient(135deg, rgba(58, 190, 174, 0.045), transparent 38%),
    radial-gradient(circle at 80% 22%, rgba(var(--accent-rgb), 0.065), transparent 17%);
  --mode-overlay-opacity: 0.56;
  --mode-orb-shell-filter: saturate(1.14) contrast(1.06);
  --mode-orb-filter: saturate(1.2) contrast(1.12);
}

body.godmod-active {
  --accent: #bf1f4b;
  --accent-rgb: 191, 31, 75;
  --accent-soft: rgba(var(--accent-rgb), 0.18);
  --orb-glow-rgb: 191, 31, 75;
  --mode-pill-active-bg: rgba(var(--accent-rgb), 0.16);
  --mode-pill-active-color: var(--accent);
  --mode-pill-active-ring: rgba(var(--accent-rgb), 0.18);
  --theme-overlay:
    radial-gradient(circle at 84% 16%, rgba(var(--accent-rgb), 0.18), transparent 18%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.075), transparent 48%);
}

body.godmod-active[data-theme="light"] {
  --bg-gradient-start: #fffafb;
  --bg-gradient-mid: #f6eef1;
  --bg-gradient-end: #ece3e7;
  --text: #27191e;
  --text-muted: #6a545c;
  --line: rgba(88, 28, 48, 0.12);
  --user-bubble: #8f173b;
  --user-bubble-rgb: 143, 23, 59;
  --sidebar-bg: rgba(247, 240, 243, 0.9);
  --control-bg: rgba(255, 251, 252, 0.9);
  --field-bg: rgba(255, 253, 254, 0.96);
  --settings-card-bg: rgba(255, 250, 252, 0.98);
  --composer-shell-bg: rgba(255, 250, 252, 0.92);
  --composer-shell-border: rgba(var(--accent-rgb), 0.18);
  --message-assistant-border: rgba(var(--accent-rgb), 0.11);
  --welcome-orb-bg: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.145), transparent 72%);
}

body.godmod-active[data-theme="dark"] {
  --bg-gradient-start: #0f090c;
  --bg-gradient-mid: #171015;
  --bg-gradient-end: #09070a;
  --text: #fff6f8;
  --text-muted: #c9adb8;
  --line: rgba(255, 208, 222, 0.12);
  --user-bubble: #7b1839;
  --user-bubble-rgb: 123, 24, 57;
  --sidebar-bg: rgba(15, 9, 13, 0.94);
  --control-bg: rgba(28, 17, 24, 0.92);
  --field-bg: rgba(31, 18, 26, 0.94);
  --settings-card-bg: rgba(16, 10, 14, 0.98);
  --composer-shell-bg: rgba(17, 10, 14, 0.92);
  --composer-shell-border: rgba(var(--accent-rgb), 0.22);
  --message-assistant-border: rgba(var(--accent-rgb), 0.12);
}

/* File role: base reset, app shell, sidebar shell, brand, and shared action buttons. */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  touch-action: pan-x pan-y;
}

html {
  background-color: var(--browser-chrome-bg, var(--bg-gradient-end));
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--bg-gradient-end);
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), calc(var(--bg-accent-alpha) + var(--mode-accent-alpha-shift))), transparent 30%),
    radial-gradient(circle at top right, rgba(var(--orb-glow-rgb), calc(var(--bg-orb-alpha) + var(--mode-orb-alpha-shift))), transparent 28%),
    linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 52%, var(--bg-gradient-end) 100%);
}

body.theme-ready {
  transition: color 160ms var(--ease);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: var(--grid-mask);
  opacity: calc(0.86 + var(--mode-grid-presence));
  transform: scale(var(--mode-grid-scale));
  transform-origin: center;
  will-change: opacity, transform;
}

body.theme-ready::before {
  transition:
    opacity 170ms var(--ease),
    transform 170ms var(--ease);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--theme-overlay-opacity);
  background: var(--theme-overlay), var(--mode-overlay);
  mix-blend-mode: var(--theme-overlay-blend);
  transform: translateZ(0);
  will-change: opacity;
}

body.theme-ready::after {
  transition: opacity 170ms var(--ease);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: var(--app-viewport-height, 100vh);
  height: var(--app-viewport-height, 100vh);
  overflow: hidden;
  transition: grid-template-columns 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  background: rgba(16, 19, 15, 0.34);
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-authed="true"] {
  overflow: hidden;
}

body:not([data-authed]),
body[data-authed="false"] {
  height: auto;
  min-height: var(--app-viewport-height, 100vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body.sidebar-collapsed .shell {
  grid-template-columns: 0 minmax(0, 1fr);
}

body.godmod-active .shell {
  grid-template-columns: 0 minmax(0, 1fr);
}

body.godmod-active .shell::before {
  opacity: 0;
  pointer-events: none !important;
}

body.godmod-active .main-panel {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}

.sidebar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  height: 100vh;
  padding: 18px 16px 16px;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--panel-blur));
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--ease);
  contain: layout paint style;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

body.sidebar-collapsed .sidebar {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
  pointer-events: none;
  overflow: hidden;
  border-right-color: transparent;
}

body.godmod-active .sidebar {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
  pointer-events: none;
  overflow: hidden;
  border-right-color: transparent;
}

.brand-block {
  display: grid;
  gap: 12px;
}

.brand-block .logo-button {
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding-inline: 12px;
  position: relative;
  text-align: center;
  gap: 0;
}

.brand-block .logo-text {
  justify-content: center;
  align-items: center;
  width: auto;
  text-align: center;
}

.brand-block .logo-text strong {
  font-size: 1.72rem;
  line-height: 1;
  transform: translateY(-1px);
}

.logo-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  overflow: visible;
}

.logo-mark {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
  filter: saturate(1.16) contrast(1.06);
  transform: translateZ(0);
  transition:
    transform 200ms var(--ease),
    filter 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.particle-blob-mark {
  width: 100%;
  height: 100%;
}

.logo-text {
  display: grid;
  align-content: center;
  min-height: 1em;
  gap: 0;
  min-width: 0;
}

.logo-text strong {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-track);
  font-size: 1.58rem;
  line-height: 1.02;
  white-space: nowrap;
}

.new-thread-button,
.ghost-button,
.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.new-thread-button {
  background: var(--accent);
  color: white;
  box-shadow: none;
  font-size: 0.86rem;
}

.new-thread-button:hover,
.send-button:hover,
.ghost-button:hover,
.mobile-nav-button:hover {
  transform: none;
}

.ghost-button {
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--text);
  font-size: 0.82rem;
}

.ghost-button:hover,
.mobile-nav-button:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: none;
}

body.godmod-active .mobile-nav-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
}

/* File role: sidebar search, conversation history, and research history list styles. */
.history-search {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.history-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.history-search-head > span {
  font-weight: 500;
}

.history-scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 132px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  box-shadow: none;
}

.history-scope-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}

.history-scope-button:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
}

.history-scope-button.active {
  color: var(--mode-pill-active-color);
  background: var(--mode-pill-active-bg);
  box-shadow: none;
}

.history-search-field {
  display: block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.history-search input {
  height: 38px;
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  outline: none;
  background: var(--field-bg);
  color: var(--text);
}

.history-search input:focus {
  border-color: rgba(23, 25, 21, 0.18);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.settings-grid select:focus {
  border-color: rgba(23, 25, 21, 0.18);
  box-shadow: none;
}

.history-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 10px;
  padding-top: 0;
  min-height: 0;
  min-width: 0;
  overflow-x: clip;
}

.history-empty {
  display: grid;
  place-items: center;
  min-height: 82px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-history);
  color: var(--text-muted);
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.24);
}

.sidebar-scroll {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 0 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.research-history-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.research-history-panel[hidden] {
  display: none !important;
}

.research-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.research-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.research-history-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.research-history-item:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateY(var(--hover-lift));
}

.research-history-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 0 28px 0 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  color: inherit;
}

.research-history-title {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.research-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
  white-space: nowrap;
}

.research-history-status[data-status="completed"],
.research-history-status[data-status="done"],
.research-history-status[data-status="succeeded"] {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.research-history-status[data-status="running"],
.research-history-status[data-status="researching"],
.research-history-status[data-status="queued"] {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

.research-history-status[data-status="failed"],
.research-history-status[data-status="cancelled"] {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.research-history-copy {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.research-history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.research-history-artifacts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.research-history-artifact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.research-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.research-history-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.research-history-action:hover,
.research-history-open:hover {
  transform: translateY(var(--hover-lift));
}

.research-history-action:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.research-history-delete {
  top: 12px;
  right: 12px;
}

.history-item {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  align-items: start;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  min-height: var(--theme-density-history-min);
  padding: var(--theme-density-history-padding);
  border: 1px solid transparent;
  border-radius: var(--radius-history);
  background: transparent;
  text-align: left;
  color: inherit;
  overflow: hidden;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.history-item:hover {
  background: var(--surface);
  transform: none;
}

.history-item-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity var(--ease),
    color var(--ease);
  cursor: pointer;
}

.history-item:hover .history-item-delete,
.history-item:focus-visible .history-item-delete,
.history-item:focus-within .history-item-delete {
  opacity: 1;
  pointer-events: auto;
}

.react-history-projects-renderer .history-item:hover .history-item-delete,
.react-history-projects-renderer .history-item:focus-visible .history-item-delete,
.react-history-projects-renderer .history-item:focus-within .history-item-delete {
  opacity: 1;
  pointer-events: auto;
}

.history-item-delete:hover {
  color: #98371f;
}

.history-item-activity {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.history-item-activity[data-state="working"]::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.28), var(--accent)),
    radial-gradient(circle at center, var(--surface-strong) 42%, transparent 44%);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.28));
  animation: history-work-spin 900ms linear infinite;
}

.history-item-activity[data-state="updated"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.11),
    0 0 18px rgba(var(--accent-rgb), 0.34);
  animation: history-update-pulse 1.35s ease-in-out infinite;
}

.history-item.is-working {
  border-color: rgba(var(--accent-rgb), 0.12);
  background: rgba(var(--accent-rgb), 0.035);
}

.history-item.is-updated:not(.active) {
  border-color: rgba(var(--accent-rgb), 0.12);
}

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

@keyframes history-update-pulse {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.history-item.active {
  background: var(--surface-strong);
  border-color: var(--line);
  box-shadow: var(--history-active-shadow);
}

.history-item-body {
  display: grid;
  gap: 2px;
  justify-content: stretch;
  align-content: start;
  align-items: start;
  width: 100%;
  min-width: 0;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.history-item-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.history-item-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.history-item-preview,
.history-item-date {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.history-item-preview {
  display: -webkit-box;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.history-item-date {
  line-height: 1.18;
  white-space: nowrap;
}

/* File role: sidebar density variants, footer, user chip, and main panel frame. */
body[data-theme-density="airy"] {
  --theme-density-history-min: 64px;
  --theme-density-history-padding: 10px 40px 10px 12px;
  --theme-density-answer-gap: 14px;
  --theme-density-message-padding: 18px 18px 20px;
  --reading-line-height: 1.58;
  --reading-font-size: 0.91rem;
}

body[data-theme-density="balanced"] {
  --theme-density-history-min: 58px;
  --theme-density-history-padding: 9px 38px 9px 11px;
  --theme-density-answer-gap: 12px;
  --theme-density-message-padding: 16px 16px 18px;
}

body[data-theme-density="compact"] {
  --theme-density-history-min: 52px;
  --theme-density-history-padding: 8px 36px 8px 10px;
  --theme-density-answer-gap: 9px;
  --theme-density-message-padding: 13px 14px 15px;
  --reading-line-height: 1.42;
  --reading-font-size: 0.84rem;
}

body[data-theme-density="airy"] .history-item-title {
  font-size: 0.88rem;
  line-height: 1.22;
}

body[data-theme-density="compact"] .history-item-title {
  font-size: 0.8rem;
  line-height: 1.16;
  -webkit-line-clamp: 1;
}

body[data-theme-density="compact"] .history-item-preview {
  font-size: 0.68rem;
  -webkit-line-clamp: 1;
}

body[data-theme-density="compact"] .history-item-date {
  font-size: 0.66rem;
}

body[data-compact-history="true"] .history-item {
  display: grid;
  align-items: start;
  min-height: 52px;
  padding: 8px 34px 8px 10px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.1);
}

body[data-compact-history="true"] .history-item-title {
  display: -webkit-box;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.16;
  -webkit-line-clamp: 1;
}

body[data-compact-history="true"] .history-item-body {
  display: grid;
  gap: 1px;
}

body[data-compact-history="true"] .history-item-preview,
body[data-compact-history="true"] .history-item-date {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

body[data-compact-history="true"] .history-item-preview {
  font-size: 0.67rem;
  line-height: 1.18;
}

body[data-compact-history="true"] .history-item-date {
  font-size: 0.64rem;
  line-height: 1.12;
}

.sidebar-footer {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.user-chip {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.user-chip-email {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.user-chip-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.sidebar-actions {
  display: grid;
  gap: 8px;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.privacy-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 8px var(--accent-soft);
}

.main-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* File role: topbar, project task popover, theme toggle, and GodMode control styles. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 32px 12px;
  backdrop-filter: blur(18px);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.topbar-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
}

.topbar-actions {
  --topbar-control-bg: var(--control-bg);
  --topbar-control-border: var(--line);
  --topbar-control-border-hover: rgba(var(--accent-rgb), 0.24);
  --topbar-control-active-bg: rgba(var(--accent-rgb), 0.12);
  --topbar-control-shadow: none;
  --topbar-control-shadow-hover: none;
  --project-control-bg: var(--topbar-control-bg);
  --project-control-border: var(--topbar-control-border);
  --project-control-border-hover: var(--topbar-control-border-hover);
  --project-control-hover-bg: var(--topbar-control-bg);
  --project-control-shadow: var(--topbar-control-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  transition: gap var(--ease);
}

.project-tasks-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 40;
  --project-popover-bg: var(--surface-strong);
  --project-popover-border: rgba(var(--accent-rgb), 0.16);
  --project-item-bg: rgba(255, 255, 255, 0.62);
  --project-item-hover-bg: rgba(var(--accent-rgb), 0.07);
}

.project-tasks-button {
  position: relative;
  --project-control-current-border: var(--project-control-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--project-control-bg);
  background-clip: padding-box;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: auto;
  white-space: nowrap;
  box-shadow: var(--project-control-shadow);
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}

.project-tasks-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--project-control-current-border);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--ease);
}

.project-tasks-button:hover,
.project-tasks-button.active {
  --project-control-current-border: var(--project-control-border-hover);
  transform: none;
  background: var(--project-control-hover-bg);
  box-shadow: var(--topbar-control-shadow-hover);
}

.project-tasks-button:focus-visible,
.project-tasks-refresh-button:focus-visible,
.project-task-disable-button:focus-visible,
.project-task-title:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: 3px;
}

.project-tasks-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.9;
}

.project-tasks-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: visible;
}

.project-tasks-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.95);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
  box-shadow: none;
}

.project-tasks-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--project-popover-border);
  border-radius: 18px;
  background: var(--project-popover-bg);
  box-shadow:
    var(--shadow-card),
    0 18px 44px rgba(var(--accent-rgb), 0.08);
  overflow: hidden;
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.project-tasks-popover[hidden],
.project-tasks-menu[hidden],
.project-tasks-button[hidden] {
  display: none;
}

.project-artifacts-topbar-button[hidden] {
  display: none;
}

.project-artifacts-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-tasks-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.project-tasks-popover-head strong {
  font-size: 0.95rem;
}

.project-tasks-refresh-button,
.project-task-disable-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  transition:
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    transform var(--ease);
}

.project-tasks-refresh-button:hover,
.project-task-disable-button:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.09);
}

.project-task-disable-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.project-tasks-status {
  min-height: 18px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.project-tasks-status.is-error {
  color: var(--status-danger);
}

.project-tasks-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.project-task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--project-item-bg);
  transition:
    border-color var(--ease),
    background var(--ease),
    box-shadow var(--ease);
}

.project-task-item:hover {
  border-color: rgba(var(--accent-rgb), 0.18);
  background: var(--project-item-hover-bg);
}

.project-task-main {
  min-width: 0;
}

.project-task-title {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
}

.project-task-title:hover {
  color: var(--accent);
}

.project-task-name {
  margin-top: 4px;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.35;
}

.project-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.project-task-meta span {
  min-width: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
}

.project-task-prompt {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-tasks-empty {
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--project-item-bg);
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.theme-toggle-button,
.incognito-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 44px;
  max-width: 220px;
  padding: 0 16px;
  border: 1px solid var(--topbar-control-border);
  border-radius: var(--radius-pill);
  background: var(--topbar-control-bg);
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  box-shadow: var(--topbar-control-shadow);
  transition:
    transform var(--ease),
    max-width var(--ease),
    padding var(--ease),
    opacity var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease);
}

.theme-toggle-button:hover,
.incognito-toggle-button:hover {
  transform: none;
  border-color: var(--topbar-control-border-hover);
  box-shadow: var(--topbar-control-shadow-hover);
}

.theme-toggle-button:disabled,
.theme-toggle-button.is-theme-locked {
  cursor: default;
  opacity: 0.78;
}

.theme-toggle-button:disabled:hover,
.theme-toggle-button.is-theme-locked:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.topbar-actions.is-godmod-active {
  gap: 8px;
}

.topbar-actions.is-godmod-active .project-artifacts-topbar-button,
.topbar-actions.is-godmod-active .incognito-toggle-button,
.topbar-actions.is-godmod-active .project-tasks-menu {
  display: none !important;
}

.theme-toggle-button.is-godmod-hidden {
  max-width: 0;
  padding-inline: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px) scale(0.98);
}

.theme-toggle-button.is-godmod-hidden .theme-toggle-icon,
.theme-toggle-button.is-godmod-hidden .theme-toggle-label {
  opacity: 0;
}

.godmod-toggle-button {
  position: relative;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--topbar-control-border);
  border-radius: var(--radius-pill);
  background: var(--topbar-control-bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: var(--topbar-control-shadow);
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}

.godmod-toggle-button:hover {
  transform: none;
  border-color: var(--topbar-control-border-hover);
  background: var(--topbar-control-bg);
  box-shadow: var(--topbar-control-shadow-hover);
}

.godmod-toggle-button.active {
  background: var(--topbar-control-active-bg);
  border-color: var(--topbar-control-border-hover);
  color: var(--text);
  box-shadow: var(--topbar-control-shadow-hover);
}

@media (min-width: 981px) {
  body.sidebar-collapsed .topbar-actions {
    gap: 8px;
  }

  body.sidebar-collapsed .project-tasks-button,
  body.sidebar-collapsed .incognito-toggle-button,
  body.sidebar-collapsed .theme-toggle-button,
  body.sidebar-collapsed .godmod-toggle-button {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding-inline: 0;
  }

  body.sidebar-collapsed .project-tasks-button-label,
  body.sidebar-collapsed .incognito-toggle-label,
  body.sidebar-collapsed .theme-toggle-label,
  body.sidebar-collapsed .project-tasks-badge {
    display: none;
  }

  body.sidebar-collapsed .godmod-toggle-button {
    font-size: 0;
  }

  body.sidebar-collapsed .godmod-toggle-button::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.82;
    box-shadow:
      0 -7px 0 currentColor,
      6px -2px 0 currentColor,
      6px 5px 0 currentColor,
      -6px 5px 0 currentColor,
      -6px -2px 0 currentColor;
  }

  body.sidebar-collapsed .project-tasks-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  body.sidebar-collapsed .theme-toggle-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    margin: 0;
  }

  body.sidebar-collapsed .theme-toggle-button[data-theme="dark"] .theme-toggle-icon::before {
    inset: 3px;
  }

  body.sidebar-collapsed .theme-toggle-button[data-theme="dark"] .theme-toggle-icon::after {
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
  }
}

.theme-toggle-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.5));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
  transition: opacity var(--ease), transform var(--ease), background var(--ease);
}

.theme-toggle-icon::before,
.theme-toggle-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  transition: transform var(--ease), opacity var(--ease), background var(--ease);
}

.theme-toggle-icon::before {
  inset: 2px;
  background: rgba(255, 255, 255, 0.96);
}

.theme-toggle-icon::after {
  width: 10px;
  height: 10px;
  right: -1px;
  top: 1px;
  background: var(--surface);
  opacity: 0;
  transform: scale(0.5);
}

.theme-toggle-button[data-theme="dark"] .theme-toggle-icon::before {
  inset: 2px;
  transform: none;
  background: rgba(255, 255, 255, 0.96);
}

.theme-toggle-button[data-theme="dark"] .theme-toggle-icon {
  background: transparent;
  box-shadow: none;
}

.theme-toggle-button[data-theme="dark"] .theme-toggle-icon::after {
  right: 1px;
  top: 1px;
  width: 12px;
  height: 12px;
  background: var(--topbar-control-bg);
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.theme-toggle-label {
  font-size: 0.9rem;
  transition: opacity var(--ease), transform var(--ease);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar-meta h2 {
  font-family: var(--font-display);
  width: 100%;
  margin: 0;
  font-size: clamp(1rem, 1.1vw + 0.84rem, 1.35rem);
  line-height: 1.14;
  letter-spacing: var(--heading-track);
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* File role: topbar incognito mode button and compact icon styles. */
.incognito-toggle-button {
  max-width: 190px;
}

.incognito-toggle-button.active {
  background: var(--topbar-control-active-bg);
  border-color: var(--topbar-control-border-hover);
  color: var(--text);
}

.incognito-toggle-icon {
  width: 24px;
  height: 16px;
  flex: 0 0 24px;
  color: var(--accent);
}

.incognito-toggle-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.incognito-toggle-label {
  font-size: 0.9rem;
  transition: opacity var(--ease), transform var(--ease);
}

/* File role: auth shell, conversation stage, welcome view, and particle orb styles. */
.auth-shell {
  display: grid;
  place-items: center;
  min-height: var(--app-viewport-height, 100vh);
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: inherit;
  background-color: var(--bg-gradient-end);
}

body[data-authed="booting"] .auth-shell,
body[data-view-state="booting"] .shell {
  opacity: 0;
  pointer-events: none;
}

.auth-card {
  width: min(560px, 100%);
  padding: 34px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: var(--radius-auth);
  background: var(--auth-card-bg);
  box-shadow: var(--auth-card-shadow);
  backdrop-filter: blur(20px);
}

.auth-card-top {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-bottom: 18px;
  text-align: center;
}

.logo-lockup {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.auth-card-top .auth-hero-puchok {
  position: relative;
  display: block;
  width: 178px;
  height: 136px;
  margin: -8px 0 -4px;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
  filter: saturate(1.16) contrast(1.06);
  transform: translateZ(0);
}

.auth-card-top .logo-text strong {
  font-size: clamp(2.35rem, 3.5vw, 3rem);
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--auth-badge-border);
  background: var(--auth-badge-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 26px rgba(var(--accent-rgb), 0.08);
  color: var(--auth-badge-color);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  backdrop-filter: blur(16px);
}

.auth-copy {
  margin: 12px 0 0;
  color: var(--text-muted);
  line-height: 1.7;
  text-align: center;
}

.auth-alert {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(183, 62, 35, 0.1);
  color: #98371f;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.auth-label {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.auth-input,
.auth-readonly {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--text);
}

.auth-input-readonly {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), rgba(var(--accent-rgb), 0.015)),
    var(--field-bg);
}

.auth-username-proxy {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-input:focus {
  outline: none;
  border-color: rgba(23, 25, 21, 0.18);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.auth-input.is-invalid,
.auth-input[aria-invalid="true"] {
  border-color: rgba(183, 62, 35, 0.58);
  background:
    linear-gradient(180deg, rgba(183, 62, 35, 0.06), rgba(183, 62, 35, 0.03)),
    var(--field-bg);
  box-shadow: 0 0 0 4px rgba(183, 62, 35, 0.1);
}

.auth-input.is-invalid:focus,
.auth-input[aria-invalid="true"]:focus {
  border-color: rgba(183, 62, 35, 0.7);
  box-shadow: 0 0 0 5px rgba(183, 62, 35, 0.14);
}

.auth-field-error {
  min-height: 1.2em;
  color: #a54429;
  font-size: 0.82rem;
  line-height: 1.45;
}

.auth-field-error[hidden] {
  display: none;
}

.auth-readonly {
  display: flex;
  align-items: center;
  background: var(--surface-soft);
}

.auth-primary {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ee6c8 0%, var(--accent) 100%);
  color: #05201d;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(22, 194, 184, 0.28);
}

.auth-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  text-decoration: none;
}

.auth-actions-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.auth-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
}

.auth-notice {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  color: var(--text);
  line-height: 1.65;
}

.auth-hint,
.auth-muted {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.auth-loading {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin-top: 16px;
  text-align: center;
}

.topbar-meta h1,
.settings-header h2,
.welcome-view h2,
.welcome-view h3,
.auth-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  letter-spacing: var(--heading-track);
}

.auth-card h1 {
  text-align: center;
}

[hidden] {
  display: none !important;
}

.topbar-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.86rem;
}

.pill.muted {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line);
  color: var(--text-muted);
}

.pill.accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.conversation-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  position: relative;
  min-height: 0;
  padding: 0 32px 12px;
  overflow: hidden;
}

.workspace-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(var(--chat-layout-width), 100%);
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  align-items: stretch;
}

.conversation-stage {
  display: grid;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.welcome-view,
.messages {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.welcome-view {
  width: min(var(--chat-column-max-width), 100%);
  align-self: center;
  text-align: center;
  padding: 28px 10px 72px;
}

body[data-view-state="welcome"] .topbar {
  padding-bottom: 12px;
}

body[data-view-state="welcome"] .main-panel {
  grid-template-rows: auto auto auto;
  align-content: start;
}

body[data-view-state="welcome"] .conversation-panel {
  align-content: stretch;
  padding-top: clamp(12px, 4vh, 42px);
  padding-bottom: 10px;
  overflow: visible;
}

body[data-view-state="welcome"] .workspace-view {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  align-items: start;
}

body[data-view-state="welcome"]:not([data-research-mode="project"]) .inspector-panel {
  display: none;
}

body:not([data-history-scope="projects"]) .inspector-panel,
body[data-research-mode]:not([data-research-mode="project"]) .inspector-panel {
  display: none !important;
}

body[data-view-state="welcome"] .conversation-stage {
  align-content: stretch;
  height: auto;
}

body[data-view-state="welcome"] .welcome-view {
  align-self: start;
  padding: 0 10px 10px;
}

body[data-view-state="welcome"] .welcome-orb {
  width: 224px;
  height: 224px;
  margin-bottom: 18px;
}

body[data-view-state="welcome"] .welcome-copy {
  margin-top: 10px;
}

body[data-view-state="welcome"] .suggestions {
  display: none;
}

.welcome-orb {
  width: 248px;
  height: 248px;
  margin: 0 auto 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: var(--welcome-orb-bg);
  filter: var(--mode-orb-shell-filter);
  contain: layout paint style;
  will-change: filter;
  transition:
    filter 170ms var(--ease);
}

.welcome-orb .particle-blob {
  filter: var(--mode-orb-filter);
  transition: filter 170ms var(--ease);
}

.particle-blob {
  position: relative;
  display: block;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  transform: translateZ(0);
}

.particle-blob-mark {
  background: transparent;
}

.particle-blob-hero {
  width: 100%;
  height: 100%;
}

.particle-blob-mini {
  width: 100%;
  height: 100%;
}

.particle-blob-canvas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle-blob[data-particle-blob="avatar"] .particle-blob-canvas,
.particle-blob[data-particle-blob="mark"] .particle-blob-canvas,
.particle-blob[data-particle-blob="mini"] .particle-blob-canvas {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 50%;
  will-change: contents;
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}

@keyframes assistant-answer-materialize {
  0% {
    opacity: 0.22;
    transform: translateY(12px) scale(0.988);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes assistant-answer-child-settle {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes assistant-answer-sheen {
  0% {
    opacity: 0;
    transform: translateX(-118%);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(118%);
  }
}

@keyframes decision-log-arrive {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
  }
  55% {
    opacity: 1;
    transform: translateY(2px) scale(1.006);
    box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.14);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: none;
  }
}

@keyframes artifact-unlock-pop {
  0% {
    transform: translateY(4px) scale(0.96);
    box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
  }
  45% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.22);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.14);
  }
}

@keyframes artifact-unlock-sheen {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  18% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translateX(118%);
  }
}

@keyframes artifact-unlock-icon {
  0% {
    transform: scale(0.84) rotate(-12deg);
    opacity: 0.7;
  }
  52% {
    transform: scale(1.08) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.welcome-copy {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.welcome-view h3 {
  font-weight: 500;
  letter-spacing: 0;
}

.suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.suggestions:empty {
  display: none;
}

.suggestion-chip {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.suggestion-chip:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(23, 25, 21, 0.16);
}

.messages {
  display: none;
  gap: 18px;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding: 0 0 14px;
  scroll-behavior: auto;
}

.messages.has-messages {
  display: grid;
  align-content: start;
}

.messages[data-turn-anchor-spacer="true"] {
  padding-bottom: calc(var(--turn-anchor-bottom-space, 52vh) + 14px);
  scroll-behavior: smooth;
}

/* ==========================================================================
   Step 6: unify auth screens (login / password / register / reset).
   All four states share .auth-card / .auth-form / .auth-input / .auth-primary,
   so we only harmonise the Aurora theme accents and the dark-mode card border
   (previously hardcoded to a light-theme value, which looked inconsistent).
   ========================================================================== */
body[data-accent="aurora"][data-theme="dark"] .auth-card {
  border-color: rgba(var(--accent-rgb), 0.16);
}
body[data-accent="aurora"][data-theme="dark"] .auth-input:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}
body[data-accent="aurora"] .auth-badge {
  border-color: rgba(var(--accent-rgb), 0.28);
  color: var(--accent);
}
body[data-accent="aurora"] .auth-link,
body[data-accent="aurora"] .auth-link-button {
  color: var(--accent);
}
/* Keep the same hero animation footprint on every auth state. */
body[data-accent="aurora"] .auth-card-top .auth-hero-puchok {
  filter: saturate(1.12) contrast(1.04);
}

/* File role: inspector panel cards and compact audit surfaces. */
.inspector-panel {
  position: absolute;
  top: 0;
  right: 32px;
  bottom: 12px;
  z-index: 18;
  width: min(var(--inspector-width), calc(100% - 64px));
  min-width: 0;
  max-width: calc(100% - 64px);
  min-height: 0;
  display: flex;
  align-self: stretch;
  pointer-events: none;
  box-sizing: border-box;
}

.inspector-panel.is-collapsed {
  top: 10px;
  bottom: auto;
  width: auto;
  align-self: start;
}

.inspector-panel-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  padding: 16px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 20px 56px rgba(28, 34, 25, 0.08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  overflow: hidden;
}

.inspector-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.inspector-panel-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.inspector-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 400;
  white-space: nowrap;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease);
}

.inspector-panel-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.inspector-panel-toggle[aria-expanded="false"] {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.2);
  background: var(--accent-soft);
}

.inspector-panel-title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.inspector-panel-description {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.inspector-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inspector-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease);
}

.inspector-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.inspector-tab.active {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.inspector-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.08);
  color: inherit;
  font-size: 0.68rem;
  line-height: 1;
}

.inspector-content {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.inspector-panel.is-collapsed .inspector-panel-shell {
  grid-template-rows: auto;
  gap: 0;
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 999px;
}

.inspector-panel.is-collapsed .inspector-panel-copy,
.inspector-panel.is-collapsed .inspector-panel-description,
.inspector-panel.is-collapsed .inspector-tabs,
.inspector-panel.is-collapsed .inspector-content {
  display: none;
}

.inspector-content::-webkit-scrollbar {
  width: 8px;
}

.inspector-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.12);
}

.inspector-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.inspector-section-head {
  display: grid;
  gap: 8px;
}

.inspector-section-title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.inspector-section-copy {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.inspector-section-meta,
.inspector-chip-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inspector-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.inspector-empty-state,
.inspector-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 18px;
  background: var(--surface-strong);
}

.inspector-empty-state {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.02)),
    var(--surface-strong);
}

.inspector-empty-title,
.inspector-card-title {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.inspector-empty-copy,
.inspector-card-copy,
.inspector-card-meta,
.inspector-card-row,
.inspector-approval-copy,
.inspector-approval-command {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.inspector-card-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inspector-card-rows,
.inspector-stream-stages,
.inspector-approval-list,
.inspector-artifact-grid,
.inspector-attachment-grid {
  display: grid;
  gap: 10px;
}

.inspector-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.inspector-card-row strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}

.inspector-attachment-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.04);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.inspector-attachment-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.08);
  text-decoration: none;
}

.inspector-attachment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.inspector-attachment-badge,
.inspector-approval-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.inspector-attachment-size {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.inspector-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.08);
}

.inspector-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.42), var(--accent));
}

.inspector-stream-stage,
.inspector-approval-item,
.inspector-artifact-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.inspector-project-link-card {
  color: inherit;
  text-decoration: none;
}

.inspector-project-link-card:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
  text-decoration: none;
}

.inspector-stream-stage strong,
.inspector-artifact-card strong,
.inspector-approval-item strong {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.35;
}

.project-space-artifacts {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.project-space-artifacts-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.project-space-artifact-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.project-space-artifact-card {
  display: grid;
  grid-template-columns: minmax(82px, 104px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.project-space-artifact-preview {
  display: grid;
  place-items: center;
  min-height: 82px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.project-space-artifact-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-space-artifact-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.project-space-artifact-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.project-space-artifacts-toolbar > div,
.project-space-artifact-actions > *,
.project-space-artifact-preview,
.project-space-context-pill {
  min-width: 0;
  max-width: 100%;
}

.project-space-artifact-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.25;
}

.project-space-context-pill {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
}

.project-space-context-pill[data-enabled="false"] {
  background: rgba(23, 25, 21, 0.07);
  color: var(--text-muted);
}

.project-space-artifact-meta,
.project-space-artifact-source {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-space-artifact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspector-missing-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* File role: chat message row layout and message entry animations. */
.message {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 0;
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.message[data-role="assistant"],
.message-approval {
  grid-template-columns: minmax(0, 1fr);
}

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

.message-avatar {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  position: absolute;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: none;
  top: 12px;
  left: max(0px, calc((100% - min(var(--message-text-max-width), 100%)) / 2 - var(--chat-avatar-rail)));
}

.message-avatar[data-avatar="assistant"] {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: hidden;
  filter: saturate(1.22) contrast(1.08);
}

.message[data-role="user"] .message-avatar {
  visibility: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  overflow: hidden;
}

.message-avatar .particle-blob {
  border-radius: inherit;
  overflow: hidden;
}

.message-body {
  display: grid;
  gap: 10px;
  width: min(var(--message-text-max-width), 100%);
  min-width: 0;
  max-width: 100%;
  justify-self: center;
  justify-items: start;
}

.message[data-role="assistant"] .message-body {
  justify-items: stretch;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.message-time {
  white-space: nowrap;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.message-role {
  font-weight: 600;
  color: var(--text);
}

.message[data-role="assistant"] .message-role,
.message-approval .message-role {
  color: var(--accent);
}

.message-text {
  min-width: 0;
  max-width: min(var(--message-text-max-width), 100%);
  box-sizing: border-box;
  font-size: var(--reading-font-size);
  line-height: var(--reading-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.message[data-role="assistant"] .message-meta,
.message[data-role="assistant"] .message-text {
  width: 100%;
  box-sizing: border-box;
  justify-self: center;
}

.message[data-role="assistant"] .assistant-streaming-plain.is-draft {
  border-left: 2px solid color-mix(in srgb, var(--accent-color, #2f6fed) 48%, transparent);
  opacity: 0.78;
  padding-left: 10px;
}

.message[data-role="assistant"] .message-text.is-rich,
.message[data-role="assistant"] .message-text.is-thinking {
  padding: var(--theme-density-message-padding);
  border-radius: var(--radius-bubble-assistant);
  background: var(--reading-card-bg);
  border: 1px solid var(--reading-card-border);
  box-shadow: var(--message-assistant-shadow);
}

.message[data-role="user"] .message-text {
  padding: 16px 18px;
  border-radius: var(--radius-bubble-user);
  background: var(--user-bubble);
  color: white;
  justify-self: start;
}

.message[data-role="user"] .message-body {
  align-items: start;
  justify-content: start;
}

.message[data-role="user"] .message-meta {
  grid-column: 1;
}

.user-message-content,
.assistant-message-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.user-message-content {
  justify-content: flex-start;
  width: fit-content;
  justify-self: start;
}

.user-message-content .message-text {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--message-text-max-width), calc(100% - 40px));
}

.assistant-message-content {
  justify-content: center;
  width: 100%;
  justify-self: center;
}

.assistant-message-content .message-text {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(var(--message-text-max-width), 100%);
}

.message-copy-button {
  order: 2;
  flex: 0 0 30px;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition:
    opacity var(--ease),
    transform var(--ease),
    color var(--ease),
    background var(--ease);
}

.message-copy-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message[data-role="user"]:hover .message-copy-button,
.message[data-role="user"]:focus-within .message-copy-button,
.message[data-role="assistant"]:hover .message-copy-button,
.message[data-role="assistant"]:focus-within .message-copy-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.message-copy-button:hover,
.message-copy-button:focus-visible {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
  outline: none;
}

.message-copy-button[data-copy-state="copied"] {
  background: rgba(48, 140, 83, 0.14);
  color: rgba(42, 126, 76, 0.98);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1.025);
  box-shadow: 0 0 0 1px rgba(48, 140, 83, 0.22);
}

.message-copy-button[data-copy-state="error"] {
  background: rgba(255, 110, 82, 0.14);
  color: rgba(255, 166, 142, 0.96);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.message-text.is-thinking {
  position: relative;
  padding: 12px 12px 14px;
  min-height: 112px;
  white-space: normal;
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
  contain: layout paint;
}

.message[data-role="assistant"] .message-text.is-thinking {
  overflow: clip;
  transform-origin: center;
  will-change: auto;
}

.message[data-role="assistant"] .message-text.is-thinking::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.055), transparent 72%);
  opacity: 0.2;
  transform: none;
  transform-origin: center;
}

.message[data-role="assistant"] .message-text.is-thinking > * {
  position: relative;
  z-index: 1;
}

.message[data-role="assistant"] .message-text.is-stream-empty {
  display: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message[data-role="assistant"][data-react-message-empty="true"] {
  min-height: 42px;
  padding: 6px 0 0;
}

.message[data-role="assistant"][data-react-message-empty="true"] .message-avatar {
  top: 2px;
}

.message[data-role="assistant"][data-react-message-empty="true"] .message-body {
  gap: 0;
  min-height: 36px;
}

.message[data-role="assistant"][data-react-message-empty="true"] .message-meta {
  min-height: 36px;
  opacity: 1;
  transform: translateY(0);
}

.message[data-role="assistant"] .message-text.is-rich:not(.is-stream-empty) {
  animation: auroraMessageSoftIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes auroraMessageSoftIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-text.is-rich {
  position: relative;
  white-space: normal;
}

.message-text.is-rich.is-focus-dim-target {
  outline: none;
  box-shadow: var(--message-assistant-shadow);
}

.message-scroll-actions {
  position: absolute;
  right: max(8px, calc((100% - min(var(--message-text-max-width), 100%)) / 2 - 58px));
  top: 50%;
  z-index: 4;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.message-scroll-actions[hidden] {
  display: none !important;
}

.message-scroll-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05)),
    var(--control-bg);
  color: var(--accent);
  box-shadow:
    0 14px 30px rgba(6, 10, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    box-shadow var(--ease);
}

.message-scroll-button:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow:
    0 18px 34px rgba(var(--accent-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.message-scroll-button span {
  display: block;
  font-size: 1.12rem;
  line-height: 1;
  transform: translateY(-1px);
}

.message-text.is-materializing {
  position: relative;
  overflow: visible;
}

.message-text.is-materializing::after {
  content: none;
}

/* ==========================================================================
   Redesign (Perplexity-like): no avatars, no names.
   User -> right, plain teal bubble. Assistant -> left, no card background.
   ========================================================================== */

/* Remove per-message avatar "\u043f\u0443\u0447\u043e\u043a" entirely (layout reclaimed). */
.message-avatar {
  display: none !important;
}

/* Remove role names ("\u0410\u0432\u0440\u043e\u0440\u0430" / "\u0412\u044b"); keep timing meta only. */
.message-role {
  display: none !important;
}

/* Body spans full width; no avatar rail offset. */
.message .message-body {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  justify-items: stretch;
}

/* --- User: align to the RIGHT --- */
.message[data-role="user"] .message-body {
  align-items: flex-end;
  justify-items: end;
}
.message[data-role="user"] .message-meta {
  justify-content: flex-end;
  width: 100%;
}
.message[data-role="user"] .user-message-content {
  justify-self: end;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.message[data-role="user"] .message-text {
  justify-self: end;
  text-align: left;
  background: var(--user-bubble);
  color: #ffffff;
  border-radius: var(--radius-bubble-user, 18px);
  padding: 12px 16px;
  max-width: min(var(--message-text-max-width), 86%);
}

/* --- Assistant: align to the LEFT, NO bubble/card background --- */
.message[data-role="assistant"] .message-body {
  align-items: flex-start;
  justify-items: start;
}
.message[data-role="assistant"] .message-meta {
  justify-content: flex-start;
  width: 100%;
}
.message[data-role="assistant"] .assistant-message-content {
  justify-content: flex-start;
  justify-self: start;
  width: 100%;
}
.message[data-role="assistant"] .message-text,
.message[data-role="assistant"] .message-text.is-rich,
.message[data-role="assistant"] .message-text.is-thinking {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  justify-self: start;
  max-width: 100%;
}
/* Keep the "thinking" state readable without a card frame. */
.message[data-role="assistant"] .message-text.is-thinking {
  padding: 4px 0 6px !important;
  min-height: 0;
}

/* File role: assistant answer shell and trust marker layout. */
.assistant-answer {
  display: grid;
  gap: var(--theme-density-answer-gap);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.godmod-empty-state {
  width: min(var(--message-text-max-width), 100%);
  margin: 12px auto 0;
  padding: 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-bubble-assistant);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 52%),
    var(--reading-card-bg);
  color: var(--text);
  box-shadow: var(--message-assistant-shadow);
}

.godmod-empty-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.godmod-empty-state h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.24rem;
  letter-spacing: var(--heading-track);
}

.godmod-empty-state p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.message-text.is-godmod-answer {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.assistant-answer > .assistant-gateway-job-card,
.assistant-answer > .assistant-job-evidence-bindings,
.assistant-answer > .assistant-source-bindings {
  display: none !important;
}

/* File role: assistant confidence rows and confidence metadata. */
.assistant-confidence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
}

.assistant-confidence-ribbon {
  position: relative;
  display: inline-block;
  width: 82px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  flex: 0 0 auto;
}

.assistant-confidence-ribbon::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--confidence-score, 44%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.48), var(--accent));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.24);
}

.assistant-confidence-label,
.assistant-confidence-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-confidence-label {
  color: var(--text);
  font-weight: 650;
}

.assistant-confidence-note {
  color: var(--text-muted);
}

.assistant-confidence[data-level="high"] {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.09);
}

.assistant-confidence[data-level="low"] .assistant-confidence-ribbon::after {
  opacity: 0.72;
}

.assistant-citation-health,
.assistant-semantic-states,
.assistant-decision-pins {
  max-width: 100%;
}

/* File role: assistant citation health badge states. */
.assistant-citation-health {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--source-valid-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--source-valid-rgb), 0.08);
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.2;
}

.assistant-citation-health[data-source-health="unverified"] {
  border-color: rgba(var(--source-unverified-rgb), 0.26);
  background: rgba(var(--source-unverified-rgb), 0.09);
}

.assistant-citation-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--source-valid-rgb));
  box-shadow: 0 0 0 4px rgba(var(--source-valid-rgb), 0.12);
  flex: 0 0 auto;
}

.assistant-citation-health[data-source-health="unverified"] .assistant-citation-health-dot {
  background: rgb(var(--source-unverified-rgb));
  box-shadow: 0 0 0 4px rgba(var(--source-unverified-rgb), 0.12);
}

.assistant-citation-health-title {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.assistant-citation-health-note {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File role: assistant semantic verification state chips. */
.assistant-semantic-states {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.assistant-semantic-chip {
  --semantic-rgb: var(--accent-rgb);
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--semantic-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--semantic-rgb), 0.075);
  color: rgb(var(--semantic-rgb));
  font-size: 0.71rem;
  font-weight: 720;
  line-height: 1;
}

.assistant-semantic-chip[data-semantic-state="risk"] {
  --semantic-rgb: var(--semantic-risk-rgb);
}

.assistant-semantic-chip[data-semantic-state="fact"] {
  --semantic-rgb: var(--semantic-fact-rgb);
}

.assistant-semantic-chip[data-semantic-state="hypothesis"] {
  --semantic-rgb: var(--semantic-hypothesis-rgb);
}

.assistant-semantic-chip[data-semantic-state="quote"] {
  --semantic-rgb: var(--semantic-quote-rgb);
}

.assistant-semantic-chip[data-semantic-state="deadline"] {
  --semantic-rgb: var(--semantic-deadline-rgb);
}

.assistant-semantic-chip[data-semantic-state="number"] {
  --semantic-rgb: var(--semantic-number-rgb);
}

.assistant-timeline,

/* File role: assistant contradiction summaries and timeline cards. */
.assistant-contradiction {
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent 42%),
    rgba(var(--accent-rgb), 0.025);
}

.assistant-timeline summary,
.assistant-contradiction summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.assistant-timeline summary::-webkit-details-marker,
.assistant-contradiction summary::-webkit-details-marker {
  display: none;
}

.assistant-timeline summary::after,
.assistant-contradiction summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  color: var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}

.assistant-timeline[open] summary::after,
.assistant-contradiction[open] summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.assistant-timeline-title,
.assistant-contradiction-title {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.assistant-timeline-note,
.assistant-contradiction-note {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.assistant-timeline-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 14px 14px 22px;
  list-style: none;
}

.assistant-timeline-item {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 0 0 14px 18px;
}

.assistant-timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.1);
}

.assistant-timeline-item::after {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(0.35em + 10px);
  bottom: 2px;
  width: 1px;
  background: rgba(var(--accent-rgb), 0.16);
}

.assistant-timeline-item:last-child {
  padding-bottom: 0;
}

.assistant-timeline-item:last-child::after {
  display: none;
}

.assistant-timeline-date {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.25;
}

.assistant-timeline-copy {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.44;
}

.assistant-contradiction {
  border-color: rgba(var(--source-contested-rgb), 0.25);
  background:
    linear-gradient(180deg, rgba(var(--source-contested-rgb), 0.075), transparent 44%),
    rgba(var(--source-contested-rgb), 0.045);
}

.assistant-contradiction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(var(--source-contested-rgb), 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--source-contested-rgb), 0.18), rgba(var(--source-contested-rgb), 0.07));
  color: rgb(var(--source-contested-rgb));
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.assistant-contradiction-icon::before,
.assistant-contradiction-icon::after {
  display: none;
}

.assistant-contradiction-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px 45px;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.48;
}

.assistant-contradiction-body p,
.assistant-contradiction-body ul {
  margin: 0;
}

.assistant-contradiction-body ul {
  display: grid;
  gap: 7px;
  padding-left: 18px;
}

/* File role: reading palette, focus mode, tone, and materializing states. */
body[data-reading-palette="calm"] {
  --reading-card-bg:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 34%),
    var(--message-assistant-bg);
  --reading-card-border: rgba(var(--accent-rgb), 0.08);
  --reading-line-height: 1.56;
  --reading-font-size: 0.9rem;
  --reading-link-color: var(--accent);
}

body[data-reading-palette="classic"] {
  --reading-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    var(--message-assistant-bg);
  --reading-card-border: rgba(var(--accent-rgb), 0.12);
  --reading-line-height: 1.66;
  --reading-font-size: 0.94rem;
  --reading-link-color: var(--accent);
}

body[data-reading-palette="classic"] {
  --message-text-max-width: var(--composer-max-width);
}

body[data-reading-palette="classic"] .assistant-answer {
  font-family: var(--font-display);
}

body[data-reading-palette="classic"] .assistant-answer pre,
body[data-reading-palette="classic"] .assistant-answer code,
body[data-reading-palette="classic"] .assistant-source-card,
body[data-reading-palette="classic"] .assistant-confidence {
  font-family: var(--font-code);
}

body[data-reading-palette="focus"] {
  --reading-card-bg:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.065), rgba(var(--accent-rgb), 0.018)),
    var(--message-assistant-bg);
  --reading-card-border: rgba(var(--accent-rgb), 0.16);
  --reading-line-height: 1.5;
  --reading-font-size: 0.87rem;
  --reading-link-color: var(--accent);
}

body[data-reading-palette="focus"] {
  --message-text-max-width: var(--composer-max-width);
}

body[data-theme-density="compact"][data-reading-palette="focus"] .assistant-sources-grid {
  gap: 8px;
}

body[data-theme-tone="ops"] .message[data-role="assistant"] .message-meta::after {
  content: "SYS";
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  font-family: var(--font-code);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

body[data-theme-tone="ops"] .assistant-source-link::before {
  content: "SRC ";
  opacity: 0.72;
}

body[data-theme-tone="ops"] .assistant-job-card,
body[data-theme-tone="ops"] .thinking-stage-card {
  border-style: dashed;
}

body[data-theme-tone="notebook"] .message[data-role="assistant"] .message-text.is-rich,
body[data-theme-tone="notebook"] .message[data-role="assistant"] .message-text.is-thinking {
  background-image:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.04) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    var(--message-assistant-bg);
  background-size: 32px 100%, 100% 1.82rem, auto, auto;
}

body[data-theme-tone="notebook"] .assistant-answer h1,
body[data-theme-tone="notebook"] .assistant-answer h2,
body[data-theme-tone="notebook"] .assistant-answer h3 {
  color: var(--text);
}

body[data-theme-tone="notebook"] .assistant-source-card {
  border-radius: 18px 18px 18px 8px;
}

body[data-theme-tone="terminal"] .message[data-role="assistant"] .message-meta::before {
  content: ">";
  color: var(--accent);
  font-family: var(--font-code);
  font-weight: 700;
}

body[data-theme-tone="terminal"] .assistant-confidence,
body[data-theme-tone="terminal"] .assistant-source-card,
body[data-theme-tone="terminal"] .assistant-job-card {
  border-radius: 10px;
}

body[data-theme-tone="terminal"] .assistant-answer h1,
body[data-theme-tone="terminal"] .assistant-answer h2,
body[data-theme-tone="terminal"] .assistant-answer h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body[data-theme-tone="glass"] .message[data-role="assistant"] .message-text.is-rich,
body[data-theme-tone="glass"] .message[data-role="assistant"] .message-text.is-thinking {
  backdrop-filter: blur(14px);
}

body[data-theme-tone="executive"] .assistant-confidence {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.045));
}

body[data-theme-tone="organic"] .assistant-source-card {
  border-radius: 22px 18px 22px 14px;
}

body[data-theme-tone="ops"] .assistant-semantic-chip {
  border-style: dashed;
  border-radius: 8px;
  font-family: var(--font-code);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-theme-tone="notebook"] .assistant-semantic-chip {
  border-radius: 12px 12px 12px 4px;
  background:
    linear-gradient(90deg, rgba(var(--semantic-rgb), 0.12), rgba(var(--semantic-rgb), 0.04)),
    rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
}

body[data-theme-tone="terminal"] .assistant-semantic-chip {
  border-radius: 7px;
  background: rgba(var(--semantic-rgb), 0.045);
  font-family: var(--font-code);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

body[data-theme-tone="glass"] .assistant-semantic-chip {
  border-color: rgba(var(--semantic-rgb), 0.18);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

body[data-theme-tone="executive"] .assistant-semantic-chip {
  border-radius: 999px 999px 999px 10px;
  background: linear-gradient(180deg, rgba(var(--semantic-rgb), 0.1), rgba(var(--semantic-rgb), 0.04));
}

body[data-theme-tone="organic"] .assistant-semantic-chip {
  border-radius: 18px 14px 18px 10px;
}

body[data-theme-tone="creative"] .assistant-semantic-chip {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.message,
.response-feedback-panel {
  transition:
    opacity var(--ease),
    filter var(--ease),
    transform var(--ease);
}

body.is-focus-dimming .response-feedback-panel,
body.is-focus-dimming .message:not(.is-focus-dim-context) {
  opacity: 0.88;
  filter: saturate(0.97);
}

body.is-focus-dimming .message.is-focus-dim-context {
  opacity: 1;
  filter: none;
}

body[data-focus-dimming="detail"] .message.is-focus-dim-context .assistant-source-card,
body[data-focus-dimming="detail"] .message.is-focus-dim-context [data-source-constellation] {
  opacity: 0.77;
}

body[data-focus-dimming="detail"] .message.is-focus-dim-context .is-focus-dim-target {
  opacity: 1;
  transform: translateY(-0.5px);
}

.message-text.is-materializing .assistant-answer {
  transform-origin: top center;
  animation: none;
}

.message-text.is-materializing .assistant-answer > * {
  opacity: 1;
  transform: none;
  animation: none;
}

.message-text.is-materializing .assistant-answer > *:nth-child(1) {
  animation-delay: 70ms;
}

.message-text.is-materializing .assistant-answer > *:nth-child(2) {
  animation-delay: 120ms;
}

.message-text.is-materializing .assistant-answer > *:nth-child(3) {
  animation-delay: 170ms;
}

.message-text.is-materializing .assistant-answer > *:nth-child(4) {
  animation-delay: 220ms;
}

.message-text.is-materializing .assistant-answer > *:nth-child(5) {
  animation-delay: 270ms;
}

body[data-accent="research"] {
  --message-text-max-width: var(--composer-max-width);
}

/* File role: assistant source constellation and source card styling. */
.assistant-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.assistant-sources {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--assistant-card-border);
  border-radius: var(--radius-card);
  background: var(--assistant-source-bg);
}

.assistant-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.assistant-sources-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.assistant-sources-note {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.assistant-sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.assistant-source-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    opacity var(--ease),
    box-shadow var(--ease);
}

.assistant-source-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.assistant-source-card[data-source-health="valid"] {
  border-color: rgba(var(--source-valid-rgb), 0.16);
}

.assistant-source-card[data-credibility-level="high"] {
  border-color: rgba(39, 124, 96, 0.26);
}

.assistant-source-card[data-credibility-level="medium"] {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.assistant-source-card[data-credibility-level="low"] {
  border-color: rgba(172, 120, 36, 0.24);
}

.assistant-source-card[data-credibility-level="unknown"] {
  opacity: 0.88;
}

.assistant-source-card[data-source-health="valid"]:hover,
.assistant-source-card[data-source-health="valid"].is-constellation-match {
  border-color: rgba(var(--source-valid-rgb), 0.32);
  background: rgba(var(--source-valid-rgb), 0.09);
  box-shadow: 0 16px 28px rgba(var(--source-valid-rgb), 0.11);
}

.assistant-source-link {
  color: rgb(var(--source-valid-rgb));
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-source-title {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.assistant-source-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.source-cards-section-inspector {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.inspector-source-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.inspector-source-card .assistant-source-title,
.inspector-source-card .assistant-source-meta {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.assistant-answer [data-source-constellation] {
  position: relative;
  border-radius: 14px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    opacity var(--ease),
    outline-color var(--ease),
    box-shadow var(--ease);
}

.assistant-answer.is-constellation-active [data-source-constellation] {
  opacity: 1;
}

.assistant-answer [data-source-constellation].is-constellation-anchor {
  opacity: 1;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.assistant-answer.is-constellation-active .assistant-source-card {
  opacity: 0.54;
  transform: translateY(0);
}

.assistant-source-card.is-constellation-match {
  opacity: 1;
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.14);
}

/* File role: assistant attachment card styling. */
.assistant-attachment {
  display: grid;
  gap: 4px;
  min-width: min(100%, 220px);
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.05);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.assistant-attachment:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.08);
  text-decoration: none;
}

.assistant-attachment-name {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.assistant-attachment-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* File role: assistant research job card status styling. */
.assistant-job-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--assistant-card-border);
  border-radius: var(--radius-card);
  background: var(--assistant-card-bg);
  overflow-wrap: anywhere;
}

.assistant-job-card > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.assistant-answer .assistant-job-card {
  margin-top: 18px;
}

.assistant-answer .assistant-job-card:first-child {
  margin-top: 0;
}

.assistant-job-head,
.assistant-job-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.assistant-job-badge,
.assistant-job-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.assistant-job-badge {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.assistant-job-status {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}

.assistant-job-card[data-status="completed"] .assistant-job-status,
.assistant-job-card[data-status="done"] .assistant-job-status,
.assistant-job-card[data-status="succeeded"] .assistant-job-status {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.assistant-job-card[data-status="running"] .assistant-job-status,
.assistant-job-card[data-status="researching"] .assistant-job-status,
.assistant-job-card[data-status="queued"] .assistant-job-status {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

.assistant-job-card[data-status="failed"] .assistant-job-status,
.assistant-job-card[data-status="cancelled"] .assistant-job-status {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.assistant-job-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.assistant-job-event {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* File role: research verification, retrieval trace, and evidence binding styling. */
.assistant-semantic-verification {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.assistant-inline-citation-summary {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.assistant-citation-coverage-gate {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.assistant-conflict-awareness {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.assistant-citation-coverage-gate[data-gate-status="pass"] {
  color: #277c60;
}

.assistant-citation-coverage-gate[data-gate-status="warn"] {
  color: #8a6722;
}

.assistant-citation-coverage-gate[data-gate-status="fail"] {
  color: #ab4426;
}

.assistant-conflict-awareness[data-conflict-status="clear"] {
  color: #277c60;
}

.assistant-conflict-awareness[data-conflict-status="needs_review"] {
  color: #8a6722;
}

.assistant-conflict-awareness[data-conflict-status="conflict"] {
  color: #ab4426;
}

.assistant-retrieval-trace {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.045);
}

.assistant-retrieval-trace[data-trace-status="traced"] {
  border-color: rgba(39, 124, 96, 0.22);
  background: rgba(39, 124, 96, 0.055);
}

.assistant-retrieval-trace[data-trace-status="partial"] {
  border-color: rgba(172, 120, 36, 0.24);
  background: rgba(172, 120, 36, 0.055);
}

.assistant-retrieval-hop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.assistant-retrieval-hop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.assistant-retrieval-hop strong {
  color: var(--text);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assistant-job-error {
  color: #ab4426;
  font-size: 0.84rem;
  line-height: 1.5;
}

.assistant-job-artifacts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-job-evidence-bindings {
  display: grid;
  gap: 8px;
}

.assistant-source-bindings {
  padding: 12px 14px;
  border: 1px solid var(--assistant-card-border);
  border-radius: var(--radius-card);
  background: rgba(var(--accent-rgb), 0.035);
}

.assistant-evidence-binding-list {
  display: grid;
  gap: 8px;
}

.assistant-job-evidence-binding-row {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
}

.assistant-job-evidence-binding-row[data-support="unlinked"] {
  border-color: rgba(171, 68, 38, 0.24);
  background: rgba(171, 68, 38, 0.06);
}

.assistant-job-evidence-binding-row[data-citation-status="missing"] {
  border-style: dashed;
}

.assistant-job-evidence-binding-row[data-semantic-status="verified"] {
  border-color: rgba(39, 124, 96, 0.22);
}

.assistant-job-evidence-binding-row[data-semantic-status="needs_review"] {
  border-color: rgba(172, 120, 36, 0.28);
}

.assistant-job-evidence-binding-row[data-semantic-status="unverified"] {
  opacity: 0.86;
}

.assistant-job-evidence-binding-row[data-conflict-status="conflict"] {
  border-color: rgba(171, 68, 38, 0.34);
  background: rgba(171, 68, 38, 0.07);
}

.assistant-job-evidence-binding-row[data-conflict-status="needs_review"] {
  border-color: rgba(172, 120, 36, 0.3);
}

/* File role: inline citations, artifacts, downloads, and job action controls. */
.assistant-inline-citations {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.assistant-inline-citation-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.assistant-job-artifact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.22;
  text-decoration: none;
}

.assistant-job-artifact-passive {
  cursor: default;
}

.assistant-job-artifact-meta {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.research-download-link {
  position: relative;
  overflow: hidden;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.research-download-link:hover {
  transform: translateY(-1px);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.12);
}

.research-download-link.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.research-download-pending {
  pointer-events: none;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--text);
}

.research-download-pending:hover {
  transform: none;
  box-shadow: none;
  background: rgba(var(--accent-rgb), 0.07);
}

.research-download-spinner {
  border: 2px solid rgba(var(--accent-rgb), 0.22);
  border-top-color: rgba(var(--accent-rgb), 0.82);
  border-radius: 50%;
  animation: research-download-spin 900ms linear infinite;
}

.research-download-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gateway-artifact-download-link {
  background: rgba(var(--accent-rgb), 0.13);
}

.gateway-artifact-download-link .assistant-job-artifact-meta {
  margin-left: 2px;
}

.research-download-link.is-unlocking {
  animation: artifact-unlock-pop 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.research-download-link.is-unlocking::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0, rgba(255, 255, 255, 0.28) 46%, transparent 64%);
  transform: translateX(-120%);
  animation: artifact-unlock-sheen 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.research-download-link.is-unlocking .research-download-icon {
  animation: artifact-unlock-icon 760ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.research-download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.research-download-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.research-download-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.assistant-job-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-job-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease);
}

.assistant-job-action:hover {
  transform: translateY(var(--hover-lift));
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.24);
}

.assistant-citation-toggle {
  background: rgba(var(--accent-rgb), 0.045);
  color: var(--text-muted);
}

.assistant-citation-toggle[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

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

/* File role: assistant approval card and approval action styling. */
.assistant-approval-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--assistant-card-border);
  border-radius: var(--radius-card);
  background: rgba(var(--accent-rgb), 0.06);
}

.assistant-approval-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.assistant-approval-badge,
.assistant-approval-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.assistant-approval-badge {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.assistant-approval-status {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}

.assistant-approval-copy {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}

.assistant-approval-command {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--assistant-command-bg);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-approval-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.assistant-approval-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.assistant-approval-action.danger {
  color: #ab4426;
  border-color: rgba(171, 68, 38, 0.18);
  background: rgba(171, 68, 38, 0.08);
}

.assistant-approval-waiting {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* File role: assistant markdown content, tables, code, and citation links. */
.assistant-answer h1,
.assistant-answer h2,
.assistant-answer h3,
.assistant-answer h4,
.assistant-answer p,
.assistant-answer ol,
.assistant-answer ul,
.assistant-answer blockquote,
.assistant-answer .assistant-table-wrap,
.assistant-answer pre {
  margin: 0;
}

.assistant-answer p + p {
  margin-top: 4px;
}

.assistant-streaming-draft {
  display: grid;
  gap: 4px;
  line-height: 1.65;
  contain: layout paint;
}

.assistant-streaming-draft p {
  margin: 0;
}

.assistant-answer > *,
.assistant-answer :where(section, article, details, summary, div, ul, ol, li, p, blockquote, pre, a, span, strong, em, code, button) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.assistant-answer :where(h1, h2, h3, h4, p, li, blockquote, a, code:not(pre code), .assistant-source-title, .assistant-source-meta, .assistant-attachment-name) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.assistant-answer h1,
.assistant-answer h2,
.assistant-answer h3,
.assistant-answer h4 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  line-height: 1.25;
  letter-spacing: var(--heading-track);
}

.assistant-answer h1 {
  font-size: 1.22rem;
}

.assistant-answer h2 {
  font-size: 1.12rem;
}

.assistant-answer h3,
.assistant-answer h4 {
  font-size: 1rem;
}

.assistant-answer ol,
.assistant-answer ul {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.assistant-answer li {
  line-height: 1.65;
}

.assistant-answer blockquote {
  padding: 12px 14px;
  border-left: 3px solid var(--quote-border);
  border-radius: 0 16px 16px 0;
  background: var(--quote-bg);
  color: var(--text-muted);
}

.assistant-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 42%),
    var(--assistant-card-bg);
  box-shadow: 0 18px 42px rgba(7, 10, 25, 0.16);
}

.assistant-answer .assistant-table-wrap[data-table-scroll="x"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.assistant-markdown-table {
  width: max(100%, var(--assistant-table-min-width, 560px));
  min-width: var(--assistant-table-min-width, 560px);
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.5;
  table-layout: auto;
}

.assistant-answer .assistant-table-wrap[data-table-scroll="x"] .assistant-markdown-table {
  width: var(--assistant-table-min-width, 960px);
  min-width: var(--assistant-table-min-width, 960px);
  max-width: none;
  table-layout: fixed;
}

.assistant-markdown-table th,
.assistant-markdown-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.13);
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.assistant-markdown-table th {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.12);
  min-width: 132px;
  white-space: normal;
}

.assistant-table-wrap--wide .assistant-markdown-table th,
.assistant-table-wrap--wide .assistant-markdown-table td {
  min-width: 210px;
}

.assistant-table-wrap--wide .assistant-markdown-table th:first-child,
.assistant-table-wrap--wide .assistant-markdown-table td:first-child {
  min-width: 280px;
}

.assistant-table-wrap--dense .assistant-markdown-table {
  font-size: 0.88rem;
}

.assistant-markdown-table :where(a, code, span, strong, em) {
  overflow-wrap: normal;
  word-break: normal;
}

.assistant-answer .assistant-table-wrap[data-table-scroll="x"] :where(th, td, a, code, span, strong, em) {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.assistant-markdown-table tr:last-child td {
  border-bottom: 0;
}

.assistant-markdown-table th[data-align="center"],
.assistant-markdown-table td[data-align="center"] {
  text-align: center;
}

.assistant-markdown-table th[data-align="right"],
.assistant-markdown-table td[data-align="right"] {
  text-align: right;
}

.assistant-markdown-table td {
  color: var(--text-muted);
}

.assistant-answer pre {
  max-width: 100%;
  overflow: auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--code-bg);
}

.assistant-answer code {
  padding: 0.12em 0.38em;
  border-radius: 8px;
  background: var(--code-bg);
  font-size: 0.9em;
}

.assistant-answer pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow-wrap: normal;
  word-break: normal;
}

.assistant-answer a {
  color: var(--reading-link-color);
  text-decoration-line: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.28);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 3px;
}

.assistant-answer a:hover {
  text-decoration-color: rgba(var(--accent-rgb), 0.56);
}

.assistant-citation-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.45em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: rgba(var(--source-valid-rgb), 0.1);
  color: rgb(var(--source-valid-rgb));
  font-size: 0.92em;
  font-weight: 650;
  text-decoration: none;
}

.assistant-citation-link:hover {
  background: rgba(var(--source-valid-rgb), 0.16);
  text-decoration: none;
}

.assistant-citation-missing {
  display: inline-flex;
  align-items: center;
  min-height: 1.45em;
  padding: 0 0.3em;
  border: 1px solid rgba(var(--source-unverified-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--source-unverified-rgb), 0.08);
  color: rgb(var(--source-unverified-rgb));
  font-size: 0.92em;
  font-weight: 700;
  cursor: help;
}

/* File role: decision pins and decision log panel styling. */
.assistant-decision-pins {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent 60%),
    rgba(var(--accent-rgb), 0.025);
}

.assistant-decision-pins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.assistant-decision-pins-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.assistant-decision-manual-trigger,
.decision-log-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
  cursor: pointer;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.assistant-decision-manual-trigger {
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.assistant-decision-manual-trigger span,
.decision-log-add span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.assistant-decision-manual-trigger strong {
  font: inherit;
}

.assistant-decision-manual-trigger:hover,
.decision-log-add:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.11);
}

.assistant-decision-pin-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.assistant-decision-pin {
  display: inline-grid;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.055);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease);
}

.assistant-decision-pin:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.09);
}

.assistant-decision-pin span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-decision-pin strong {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.34;
}

.assistant-decision-pin.is-pinned {
  border-color: rgba(var(--source-valid-rgb), 0.24);
  background: rgba(var(--source-valid-rgb), 0.08);
}

.assistant-decision-pin.is-pinned span {
  color: rgb(var(--source-valid-rgb));
}

.decision-log-panel {
  display: grid;
  gap: 12px;
  margin: 8px auto 4px;
  width: min(var(--message-text-max-width), 100%);
  max-width: var(--message-text-max-width);
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.11);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), transparent 42%),
    var(--surface);
  box-shadow: var(--surface-card-shadow);
}

.decision-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.decision-log-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.decision-log-kicker {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.decision-log-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
}

.decision-log-add {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 850;
}

.decision-log-list {
  display: grid;
  gap: 8px;
}

.decision-manual-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.045);
}

.decision-manual-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.decision-manual-input {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.13);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.42;
}

.decision-manual-input:focus {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.decision-manual-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.decision-manual-counter {
  margin-right: auto;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.decision-manual-cancel,
.decision-manual-save {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.decision-manual-cancel {
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: transparent;
  color: var(--text-muted);
}

.decision-manual-save {
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: var(--accent);
  color: var(--accent-contrast);
}

.decision-manual-save:disabled {
  cursor: default;
  opacity: 0.48;
}

.decision-log-item {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
}

.decision-log-item.is-new {
  animation: decision-log-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.decision-log-copy {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.42;
}

.decision-log-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.decision-log-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.decision-log-remove:hover {
  color: var(--accent);
}

.decision-selection-toolbar {
  position: fixed;
  z-index: 80;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: stretch;
  gap: 6px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 44px rgba(20, 20, 28, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.decision-selection-toolbar[hidden] {
  display: none;
}

.decision-selection-toolbar[data-surface="float"][data-placement="above"] {
  transform: translate(-50%, -100%);
}

.decision-selection-toolbar[data-surface="float"][data-placement="below"] {
  transform: translate(-50%, 0);
}

.decision-selection-action {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 13px;
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.decision-selection-action-label {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.decision-selection-preview {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-selection-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
}

/* File role: response feedback panel styling. */
.response-feedback-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.message[data-role="assistant"] .response-feedback-panel {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
}

.response-feedback-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 38px;
}

.response-feedback-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  min-width: 0;
  color: rgba(var(--accent-rgb), 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.response-feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.react-message-extra{width:100%;min-width:0;box-sizing:border-box}
.assistant-message-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 2px 8px}
.assistant-message-copy-slot{display:inline-flex;flex:0 0 auto;min-width:0}
.assistant-message-copy-slot .message-copy-button{opacity:1;pointer-events:auto;transform:none;margin-top:0;border:0;border-radius:8px;background:transparent;box-shadow:none}
.assistant-message-feedback{display:grid;justify-items:end;flex:1 1 auto;min-width:0}

.response-feedback-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: none;
  transition:
    transform var(--ease),
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    box-shadow var(--ease);
}

.response-feedback-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.response-feedback-button:hover,
.response-feedback-button:focus-visible {
  transform: translateY(-1px);
  background: transparent;
  color: var(--text);
  outline: none;
}

.response-feedback-button[aria-pressed="true"] {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.response-feedback-button[data-feedback-pending="true"] {
  opacity: 0.72;
}

.response-feedback-button:disabled,
.response-feedback-reason:disabled {
  cursor: default;
}

.response-feedback-button:disabled:not([aria-pressed="true"]),
.response-feedback-reason:disabled:not([aria-pressed="true"]) {
  opacity: 0.48;
}

.response-feedback-button[data-feedback-error="true"] {
  color: rgba(220, 64, 64, 0.92);
}

.response-feedback-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.response-feedback-reasons[hidden] {
  display: none;
}

.response-feedback-reason {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.035);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color var(--ease),
    background var(--ease),
    color var(--ease),
    transform var(--ease);
}

.response-feedback-reason:hover,
.response-feedback-reason:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.24);
  color: var(--text);
  outline: none;
}

.response-feedback-reason[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.48);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

/* File role: unified output artifact preview cards for chat and inspector. */

.artifact-list{display:grid;gap:7px;margin-top:8px;width:min(100%,880px);max-width:100%;min-width:0}
.artifact-card{display:grid;gap:0;min-width:0;max-width:100%;overflow:hidden;border:1px solid rgba(23,25,21,.1);border-radius:8px;background:rgba(255,255,255,.78)}
.artifact-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:8px 10px}
.artifact-card-title-block{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 8px;min-width:0}
.artifact-card-title-block strong{grid-column:2;color:var(--text);font-size:.88rem;line-height:1.18;overflow-wrap:anywhere}
.artifact-card-kind{grid-row:1 / span 2;width:fit-content;max-width:100%;padding:2px 7px;border-radius:6px;background:rgba(var(--accent-rgb),.12);color:rgb(var(--accent-rgb));font-size:.65rem;font-weight:800;letter-spacing:0}
.artifact-card-meta,.artifact-card-summary{color:var(--text-muted);font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
.artifact-card-meta{grid-column:2}
.artifact-card-actions{display:flex;flex:0 0 auto;gap:6px}
.artifact-icon-action{display:inline-grid;place-items:center;min-height:30px;padding:0 9px;border:1px solid rgba(23,25,21,.1);border-radius:7px;color:var(--text);background:rgba(255,255,255,.74);font-size:.73rem;font-weight:800;text-decoration:none;white-space:nowrap}
.artifact-preview{display:grid;min-width:0;margin:0 10px 10px;overflow:hidden;border:1px solid rgba(23,25,21,.08);border-radius:7px;background:rgba(23,25,21,.04);color:var(--text-muted);text-decoration:none}
.artifact-card.is-compact .artifact-card-summary{display:none}
.artifact-preview-image{aspect-ratio:16/9;place-items:center;max-height:420px}
.artifact-preview-image img{display:block;width:100%;height:100%;object-fit:contain;background:rgba(255,255,255,.58)}
.artifact-preview-frame{height:220px}
.artifact-preview-frame.is-web-app{height:240px}
.artifact-card.is-compact.has-inline-preview .artifact-preview-frame.is-web-app{height:min(64vh,520px);min-height:360px}
.artifact-card.is-compact.has-inline-preview .artifact-preview-image{max-height:420px}
.artifact-preview-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.artifact-card.is-web-app .artifact-preview-frame{isolation:isolate;overscroll-behavior:contain}
.artifact-preview-file{min-height:58px;align-content:center;justify-items:start;gap:2px;padding:10px 12px;font-size:.84rem;font-weight:800}
.artifact-preview-file small{display:block;color:var(--text-muted);font-size:.74rem;font-weight:600;line-height:1.35}
.artifact-card-summary{margin:-2px 10px 10px}
.project-space-artifact-shell{display:grid;gap:8px;min-width:0}
.project-space-artifact-status{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.75rem;overflow-wrap:anywhere}
body[data-theme="dark"] .artifact-card,body[data-theme="dark"] .artifact-icon-action{border-color:rgba(255,255,255,.1);background:rgba(24,26,30,.82)}
body[data-theme="dark"] .artifact-preview{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}

@media (max-width:720px){.artifact-list{width:100%;max-width:100%;gap:8px}.artifact-card{width:100%;border-radius:8px}.artifact-card-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:8px;padding:8px}.artifact-card-title-block{width:100%;grid-template-columns:auto minmax(0,1fr)}.artifact-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px}.artifact-icon-action{justify-content:center;min-width:0;width:100%;padding:0 6px}.artifact-preview{margin:0 8px 8px}.artifact-preview-frame,.artifact-preview-frame.is-web-app{height:300px;min-height:260px}.artifact-card.is-compact.has-inline-preview .artifact-preview-frame.is-web-app{height:min(76svh,560px);min-height:420px}.artifact-card.is-compact.has-inline-preview .artifact-preview-image{max-height:min(58svh,420px)}}

@media (max-width:420px){.artifact-card.is-compact.has-inline-preview .artifact-preview-frame.is-web-app{height:min(78svh,520px);min-height:360px}.artifact-card-title-block strong{font-size:.84rem}.artifact-card-meta{font-size:.7rem}}

/* File role: thinking status panel, progress, sources, insights, and keyframes. */
.message[data-role="assistant"] .message-text.is-thinking[data-thinking-live="compact"] {
  min-height: 0;
}

.message[data-role="assistant"] .message-text.is-thinking[data-thinking-live="compact"]::before {
  display: none;
}

.message[data-role="assistant"] .message-text.is-thinking[data-thinking-live="research"] {
  min-height: 0;
  padding: clamp(18px, 2.2vw, 24px);
}

.message[data-role="assistant"] .message-text.is-thinking[data-thinking-live="research"]::before {
  display: none;
}

.thinking-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.thinking-compact-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 0.48em;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.72;
}

.thinking-compact-body {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.thinking-compact-title {
  display: inline;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.28;
}

.thinking-compact-detail {
  display: inline;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.34;
}

.thinking-screening {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-left: 17px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  min-width: 0;
}

.thinking-screening::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 5px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--reading-card-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
}

.thinking-screening[data-screening-phase="searching"]::before {
  background: var(--accent);
  animation: thinkingPulseDot 1.4s ease-in-out infinite;
}

.thinking-screening:is(
  [data-screening-phase="found"],
  [data-screening-phase="checked"],
  [data-screening-phase="bound"]
)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.thinking-screening-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.3;
}

.thinking-screening-head strong {
  font-weight: 650;
}

.thinking-screening-head span {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.thinking-screening-detail {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.thinking-screening-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.thinking-screening-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(100%, 260px);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--text-muted);
  font-size: 0.71rem;
  line-height: 1.25;
}

.thinking-screening-source strong,
.thinking-screening-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thinking-screening-source strong {
  color: var(--text);
  font-weight: 620;
}

@media (prefers-reduced-motion: reduce) {
  .thinking-screening::before {
    animation: none !important;
  }
}

.thinking-inline-separator {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  min-width: 8px;
  font-size: 0;
  line-height: 0;
}

.thinking-stack {
  display: grid;
  gap: 10px;
  min-height: 86px;
  contain: layout paint;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.thinking-research-timeline {
  gap: 18px;
  min-height: 0;
  contain: none;
}

.thinking-research-intro {
  margin: 0;
  color: var(--text);
  font-size: clamp(0.96rem, 1.8vw, 1.18rem);
  font-weight: 560;
  line-height: 1.55;
}

.thinking-research-plan {
  display: grid;
  gap: 10px;
}

.thinking-research-plan-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: none;
}

.thinking-research-plan-title::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--text-muted), var(--text-muted)) 5px 6px / 8px 2px no-repeat,
    linear-gradient(var(--text-muted), var(--text-muted)) 5px 11px / 8px 2px no-repeat;
  opacity: 0.72;
}

.thinking-research-plan ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.48;
}

.thinking-research-plan li::marker {
  color: var(--text-muted);
  font-weight: 700;
}

.thinking-research-task {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-block: 1px solid var(--line);
}

.thinking-research-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.thinking-research-task-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.32;
}

.thinking-research-task-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.thinking-research-task-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.thinking-research-task p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.48;
}

.thinking-header {
  display: grid;
  gap: 7px;
}

.thinking-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.thinking-status-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

[data-thinking-role="chips"] {
  display: contents;
}

.thinking-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.055);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}

.thinking-status-chip[data-tone="date"] {
  border-color: rgba(102, 174, 234, 0.18);
  background: rgba(102, 174, 234, 0.075);
}

.thinking-status-chip[data-tone="verify"] {
  border-color: rgba(47, 133, 90, 0.18);
  background: rgba(47, 133, 90, 0.075);
}

.thinking-status-chip[data-tone="final"] {
  border-color: rgba(184, 119, 72, 0.2);
  background: rgba(184, 119, 72, 0.075);
}

.thinking-status-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  position: relative;
  isolation: isolate;
}

.thinking-status-dot::before,
.thinking-status-dot::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.thinking-status-dot::before {
  width: 8px;
  height: 8px;
  background: var(--accent);
  z-index: 1;
}

.thinking-status-dot::after {
  inset: 0;
  background: rgba(var(--accent-rgb), 0.12);
  transform: scale(0.66);
  animation: thinkingPulseDot 1.4s ease-in-out infinite;
  will-change: transform, opacity;
}

.thinking-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.06);
}

.thinking-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.36), var(--accent));
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.2);
  transition: width 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thinking-query {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.38;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.thinking-stage-grid {
  display: grid;
  gap: 8px;
}

.thinking-stage-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.thinking-stage-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 260ms ease,
    opacity 220ms ease;
}

.thinking-stage-card[data-state="active"] {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), 0.1);
  transform: translateY(-1px);
}

.thinking-stage-card[data-state="complete"] {
  background: rgba(255, 255, 255, 0.6);
}

.thinking-stage-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.thinking-stage-body {
  display: grid;
  gap: 4px;
  align-content: center;
}

.thinking-stage-title {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.28;
}

.thinking-stage-copy {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.34;
}

.thinking-stage-body .thinking-inline-separator {
  display: none;
}

.thinking-run-log {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thinking-run-log-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.34;
}

.thinking-run-log-dot {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.24);
}

.thinking-run-log-body {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;
}

.thinking-run-log-body strong {
  display: inline;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 650;
}

.thinking-run-log-detail {
  display: inline;
}

.thinking-research-log {
  gap: 12px;
}

.thinking-research-log .thinking-run-log-item {
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.46;
}

.thinking-research-log .thinking-run-log-dot {
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
}

.thinking-research-log .thinking-run-log-body {
  display: grid;
  gap: 4px;
}

.thinking-research-log .thinking-run-log-body strong {
  font-size: 0.86rem;
  line-height: 1.32;
}

.thinking-research-log .thinking-run-log-detail {
  color: var(--text-muted);
}

.thinking-run-log-expand {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.thinking-run-log-expand summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  color: var(--text-muted);
  list-style: none;
}

.thinking-run-log-expand summary::-webkit-details-marker {
  display: none;
}

.thinking-run-log-expand summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.72;
  transition: transform 160ms ease;
}

.thinking-run-log-expand[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.thinking-run-log-expand summary span {
  min-width: 0;
}

.thinking-run-log-detail-full {
  display: block;
  padding: 8px 10px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.36);
  background: rgba(var(--accent-rgb), 0.05);
}

.thinking-sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.thinking-source-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    opacity 220ms ease,
    transform 240ms ease;
}

.thinking-source-link {
  color: var(--accent);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thinking-source-title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
}

.thinking-source-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.thinking-insights {
  display: grid;
  gap: 8px;
}

.thinking-insight-line {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
  transition:
    background-color 240ms ease,
    color 220ms ease,
    opacity 220ms ease,
    transform 240ms ease;
}

@keyframes thinkingPulseDot {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.68);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes answerBreathingFrame {
  0%,
  100% {
    transform: scaleY(1);
    box-shadow: var(--message-assistant-shadow);
  }

  50% {
    transform: scaleY(1.006);
    box-shadow:
      var(--message-assistant-shadow),
      0 18px 54px rgba(var(--accent-rgb), 0.08);
  }
}

@keyframes answerBreathingGlow {
  0%,
  100% {
    opacity: 0.24;
    transform: scaleY(0.988);
  }

  50% {
    opacity: 0.48;
    transform: scaleY(1.012);
  }
}

/* File role: typing indicator bubbles and pulse keyframes. */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.typing span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.5);
  animation: typingPulse 1s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: 140ms;
}

.typing span:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes typingPulse {
  0%,
  80%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* File role: composer shell, layout, and drag-drop overlay styling. */
.composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  align-items: end;
  padding: 0 32px 16px;
  min-height: auto;
  box-sizing: border-box;
}

.composer-layout,
.react-composer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(var(--composer-max-width), 100%);
  margin: 0 auto;
  align-items: end;
}

.composer-column {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-self: center;
  margin-left: 0;
}

body[data-view-state="welcome"] .composer {
  position: relative;
  bottom: auto;
  align-items: start;
  padding-top: 0;
  padding-bottom: 18px;
  margin-top: 0;
}

.composer-shell {
  width: 100%;
  margin: 0;
  padding: 7px 9px;
  border-radius: 18px;
  position: relative;
  isolation: isolate;
  background: transparent;
}

.composer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--composer-shell-border);
  border-radius: inherit;
  background: var(--composer-shell-bg);
  box-shadow: var(--composer-shell-shadow);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  pointer-events: none;
}

.composer-shell:focus-within::before {
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.07),
    var(--composer-shell-shadow);
}

.composer-shell > textarea,
.composer-shell > .composer-attachments,
.composer-shell > .composer-actions,
.composer-shell > .composer-meta-row {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.composer-shell.is-drag-active::before {
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 24px 52px rgba(51, 36, 96, 0.14);
}

.composer-drop-overlay {
  position: absolute;
  inset: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--drop-overlay-border);
  border-radius: calc(var(--radius-xl) - 10px);
  background: var(--drop-overlay-bg);
  backdrop-filter: blur(var(--drop-overlay-blur));
  pointer-events: none;
}

.composer-drop-card {
  display: grid;
  gap: 6px;
  max-width: 340px;
  text-align: center;
}

.composer-drop-title {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
}

.composer-drop-copy {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* File role: composer attachment card previews, states, progress, and remove controls. */
.composer-attachments {
  display: grid;
  gap: 5px;
  margin-bottom: 6px;
}

.composer-attachment-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.composer-attachment-card[data-status="processing"] {
  border-color: rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.05);
}

.composer-attachment-card[data-status="error"] {
  border-color: rgba(171, 68, 38, 0.2);
  background: rgba(171, 68, 38, 0.04);
}

.composer-attachment-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(247, 245, 239, 0.94);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
}

.composer-attachment-preview-button {
  display: block;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.composer-attachment-preview-button:disabled {
  cursor: default;
}

.composer-attachment-preview-button:not(:disabled):hover .composer-attachment-preview,
.composer-attachment-preview-button:not(:disabled):focus-visible .composer-attachment-preview {
  border-color: rgba(var(--accent-rgb), 0.34);
}

.composer-attachment-kind-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding-inline: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-attachment-preview.is-snippet {
  background: rgba(36, 52, 83, 0.08);
  color: #455564;
}

.composer-attachment-preview.is-file {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.composer-attachment-body {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.composer-attachment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.composer-attachment-title {
  font-weight: 600;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-status {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 600;
  white-space: nowrap;
}

.composer-attachment-status[data-status="ready"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.composer-attachment-status[data-status="processing"] {
  background: rgba(73, 89, 166, 0.1);
  color: #5060aa;
}

.composer-attachment-status[data-status="error"] {
  background: rgba(171, 68, 38, 0.12);
  color: #ab4426;
}

.composer-attachment-copy,
.composer-attachment-meta {
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-copy {
  display: none;
}

.composer-attachment-preview-progress {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.12);
}

.composer-attachment-preview-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.42), var(--accent));
}

.composer-attachment-card[data-status="error"] .composer-attachment-preview-progress span {
  background: linear-gradient(90deg, #d8927a, #ab4426);
}

.composer-attachment-meta.is-error {
  color: #ab4426;
}

.composer-attachment-remove {
  align-self: start;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 25, 21, 0.06);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
}

/* File role: composer textarea base styling. */
.composer textarea {
  width: 100%;
  min-height: 30px;
  max-height: 160px;
  border: 0;
  resize: none;
  outline: none;
  padding: 3px 5px 7px;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.42;
}

/* File role: composer action rows, tool buttons, glyphs, and chevrons. */
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-actions-rich {
  align-items: flex-end;
}

.composer-left-tools,
.composer-right-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.composer-right-tools {
  margin-left: auto;
}

.composer-menu-anchor {
  position: relative;
  z-index: 2;
}

.composer-mode-anchor[hidden] {
  display: none !important;
}

.composer-menu-anchor[hidden] {
  display: none !important;
}

body.godmod-active .composer-mode-anchor {
  display: none !important;
}

body.godmod-active .composer-model-button,
body.godmod-active .composer-model-button + .composer-popover {
  display: none !important;
}

.composer-research-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  box-shadow: none;
  overflow: visible;
}

.composer-research-switch[data-mode-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.composer-research-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.84rem;
  transition:
    color var(--ease),
    background var(--ease);
  justify-content: center;
  overflow: visible;
}

.composer-research-option.active {
  background: var(--mode-pill-active-bg);
  color: var(--mode-pill-active-color);
  box-shadow: none;
}

.composer-label-short {
  display: none;
}

.composer-research-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.composer-icon-button,
.composer-pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.84rem;
  touch-action: manipulation;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease),
    color var(--ease);
}

.composer-icon-button {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.composer-pill-button:hover,
.composer-icon-button:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(23, 25, 21, 0.16);
}

.composer-pill-button.active,
.composer-icon-button.active,
.composer-computer-button.active {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}

.composer-plus-glyph {
  font-size: 1.32rem;
  line-height: 1;
  transform: translateY(-1px);
}

.composer-glyph {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.composer-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.composer-glyph-chat svg {
  stroke-width: 2.05;
}

.composer-glyph-search svg {
  stroke-width: 2.3;
}

.composer-glyph-deep svg {
  stroke-width: 2.15;
}

.composer-glyph-project svg {
  stroke-width: 2;
}

.composer-glyph-computer::before,
.composer-glyph-computer::after,
.composer-glyph-mic::before,
.composer-glyph-mic::after {
  content: "";
  position: absolute;
}

.composer-glyph-computer::before {
  inset: 1px 1px 5px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.composer-glyph-computer::after {
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.composer-glyph-mic::before {
  left: 4px;
  top: 1px;
  width: 8px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.composer-glyph-mic::after {
  left: 7px;
  bottom: 1px;
  width: 2px;
  height: 6px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: -4px 3px 0 -1px currentColor, 4px 3px 0 -1px currentColor;
}

.composer-chevron {
  color: var(--text-muted);
  font-size: 0.88rem;
}

@media (hover: hover) and (pointer: fine) {
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 160;
    width: 0;
    max-width: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-strong) 94%, var(--bg));
    color: var(--text);
    box-shadow: 0 12px 28px rgba(10, 12, 18, 0.14);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition:
      opacity 140ms var(--ease),
      transform 140ms var(--ease);
    transition-delay: 0s;
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    width: max-content;
    max-width: 260px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 1s;
  }

  [data-tooltip][data-tooltip-dismissed="true"]::after,
  [data-tooltip]:active::after {
    content: "";
    width: 0;
    max-width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition-delay: 0s;
  }

  .mobile-nav-button[data-tooltip]::after {
    left: 0;
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateY(-4px);
  }

  .mobile-nav-button[data-tooltip]:hover::after,
  .mobile-nav-button[data-tooltip]:focus-visible::after {
    transform: translateY(0);
  }

  .mobile-nav-button[data-tooltip][data-tooltip-dismissed="true"]::after,
  .mobile-nav-button[data-tooltip]:active::after {
    transform: translateY(-4px);
  }

  body[data-theme="dark"] [data-tooltip]::after {
    background: rgba(17, 18, 26, 0.98);
    color: rgba(247, 249, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  }

  body[data-theme="dark"] [data-tooltip]:hover::after,
  body[data-theme="dark"] [data-tooltip]:focus-visible::after {
    border-color: rgba(var(--accent-rgb), 0.26);
  }
}

/* ==========================================================================
   Aurora theme: composer mode switch + send in the Perplexity style.
   Clearer teal active pill; consistent turquoise accents.
   ========================================================================== */
body[data-accent="aurora"] .composer-research-switch {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.05);
}
body[data-accent="aurora"] .composer-research-option.active {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.30);
}
body[data-accent="aurora"] .composer-research-option.active .composer-glyph {
  color: var(--accent);
}
body[data-accent="aurora"][data-theme="dark"] .composer-research-option:hover {
  background: rgba(var(--accent-rgb), 0.10);
}
body[data-accent="aurora"] .composer-model-button {
  border-color: rgba(var(--accent-rgb), 0.20);
}
body[data-accent="aurora"] .composer-icon-button:hover,
body[data-accent="aurora"] .composer-pill-button:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
}

/* File role: composer popover menu positioning and item styling. */
.composer-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 6;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 4px;
  border: 1px solid rgba(23, 25, 21, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(24, 28, 21, 0.12);
  overflow: hidden;
}

.composer-popover-right {
  left: auto;
  right: 0;
  min-width: 210px;
}

.composer-popover-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.composer-popover-item + .composer-popover-item {
  border-top: 0;
}

.composer-popover-item:hover {
  background: rgba(248, 246, 239, 0.94);
}

.composer-popover-item-body {
  display: grid;
  gap: 2px;
}

.composer-popover-item-title {
  font-size: 0.8rem;
  font-weight: 600;
}

.composer-popover-item-copy {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.28;
}

/* File role: composer meta row, selected mode chips, and hints. */
.composer-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 12px;
}

.composer-meta-row:has(.composer-selection:empty):has(.composer-hint[hidden]) {
  display: none;
}

.composer-meta-stack {
  display: grid;
  gap: 0;
}

.composer-mode-description {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.composer-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.composer-selection-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(247, 245, 239, 0.94);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
}

.composer-selection-chip[data-tone="mode"] {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.composer-selection-chip[data-tone="godmod"] {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.24);
  color: var(--accent);
  font-weight: 650;
}

.composer-selection-chip[data-tone="source"] {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.composer-selection-chip[data-tone="context"] {
  background: rgba(36, 52, 83, 0.08);
  color: #455564;
}

.composer-selection-chip[data-tone="model"] {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--orb-glow-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.composer-selection-chip[data-tone="voice"] {
  background: rgba(178, 132, 45, 0.12);
  color: #8a6618;
}

.composer-selection-chip[data-tone="recording"] {
  background: rgba(171, 68, 38, 0.14);
  color: #8f2f1b;
}

.composer-selection-chip[data-tone="transcribing"] {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.composer-selection-chip[data-tone="error"] {
  background: rgba(171, 68, 38, 0.14);
  color: #98371f;
}

.composer-selection-chip[data-tone="attachment"] {
  background: rgba(36, 52, 83, 0.08);
  color: #455564;
}

.composer-hint {
  display: block;
  margin-left: auto;
  max-width: min(100%, 420px);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: right;
}

.composer-hint[data-tone="voice"],
.composer-hint[data-tone="transcribing"],
.composer-hint[data-tone="godmod"] {
  color: var(--accent);
}

.composer-hint[data-tone="error"] {
  color: #ab4426;
}

/* File role: send button, voice mode, recording, and arrow styling. */
.send-button {
  min-width: 48px;
  background: #20231f;
  color: white;
}

.send-button-round {
  --voice-level: 0;
  --voice-bar-1: 7px;
  --voice-bar-2: 10px;
  --voice-bar-3: 12px;
  --voice-bar-4: 9px;
  --voice-bar-5: 7px;
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 999px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(8, 18, 28, 0.22);
  transform: translateZ(0);
  transition:
    transform 180ms var(--ease),
    border-color var(--ease),
    box-shadow var(--ease),
    opacity var(--ease);
}

.send-button-round::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.98), rgba(12, 48, 60, 0.96));
  pointer-events: none;
}

.composer-shell.is-godmod {
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 16px 38px rgba(var(--accent-rgb), 0.08),
    var(--composer-shell-shadow);
}

.send-button-round > * {
  position: relative;
  z-index: 1;
}

.send-button-round.is-voice-mode {
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

.send-button-round.is-voice-mode::before {
  background: rgba(255, 255, 255, 0.94);
}

.send-button-round.is-recording {
  border: 1px solid rgba(255, 170, 170, 0.18);
  color: rgba(255, 245, 245, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(77, 16, 16, 0.28);
}

.send-button-round.is-recording::before {
  background: linear-gradient(180deg, rgba(162, 58, 58, 0.98), rgba(118, 29, 29, 0.98));
}

.send-button-round.is-recording::after {
  content: none;
}

.send-button-round.is-stop-mode {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(var(--accent-rgb), 0.16);
}

.send-button-round.is-stop-mode::before {
  background: rgba(var(--accent-rgb), 0.1);
}

.send-button-round.is-disabled {
  opacity: 0.58;
  box-shadow: none;
  cursor: not-allowed;
}

.composer-send-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 1rem;
  line-height: 1;
  transform: none;
}

.composer-send-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.composer-stop-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.08);
}

.send-button-round.is-recording .composer-send-arrow {
  width: 14px;
  height: 14px;
}

.send-button-round.is-recording .composer-send-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
}

.send-button-round .composer-waveform {
  justify-content: center;
  gap: 2px;
  height: 17px;
}

.send-button-round .composer-waveform span {
  width: 3px;
  opacity: 0.72;
  background: currentColor;
  transition: opacity 140ms var(--ease);
}

.send-button-round.is-recording .composer-waveform span {
  animation: none;
  opacity: 0.86;
  transform-origin: center;
  transition:
    height 72ms linear,
    opacity 72ms linear,
    transform 72ms linear;
}

.send-button-round.is-recording .composer-waveform span:nth-child(1) {
  height: var(--voice-bar-1);
}

.send-button-round.is-recording .composer-waveform span:nth-child(2) {
  height: var(--voice-bar-2);
}

.send-button-round.is-recording .composer-waveform span:nth-child(3) {
  height: var(--voice-bar-3);
}

.send-button-round.is-recording .composer-waveform span:nth-child(4) {
  height: var(--voice-bar-4);
}

.send-button-round.is-recording .composer-waveform span:nth-child(5) {
  height: var(--voice-bar-5);
}

body.godmod-active .send-button-round.is-recording {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.3);
}

body.godmod-active .send-button-round.is-recording::before {
  background: linear-gradient(180deg, #181818, #050505);
}

/* File role: shared custom scrollbar styling for scrollable panels. */
.sidebar-scroll,
.messages,
.settings-card,
.settings-grid,
.research-history-list,
.history-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 132, 160, 0.6) transparent;
}

.sidebar-scroll::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.settings-card::-webkit-scrollbar,
.settings-grid::-webkit-scrollbar,
.research-history-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sidebar-scroll::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
.settings-card::-webkit-scrollbar-track,
.settings-grid::-webkit-scrollbar-track,
.research-history-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.settings-card::-webkit-scrollbar-thumb,
.settings-grid::-webkit-scrollbar-thumb,
.research-history-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(121, 132, 160, 0.55);
  background-clip: padding-box;
}

/* Round-9: keep desktop overlay scrollbar clear of message text */
@media (min-width: 721px) {
  .messages {
    padding-right: 14px;
    scrollbar-gutter: stable;
  }
}

/* File role: composer waveform bars and mobile nav button baseline. */
.composer-waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.composer-waveform span {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: waveformPulse 1.1s ease-in-out infinite;
}

.composer-waveform span:nth-child(1) {
  height: 8px;
}

.composer-waveform span:nth-child(2) {
  height: 14px;
  animation-delay: 80ms;
}

.composer-waveform span:nth-child(3) {
  height: 18px;
  animation-delay: 140ms;
}

.composer-waveform span:nth-child(4) {
  height: 12px;
  animation-delay: 220ms;
}

.composer-waveform span:nth-child(5) {
  height: 9px;
  animation-delay: 280ms;
}

@keyframes waveformPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scaleY(0.78);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.mobile-nav-button,

/* File role: icon buttons, mobile sidebar controls, and settings close controls. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease),
    box-shadow var(--ease),
    color var(--ease);
}

.settings-close-button {
  position: relative;
  flex: 0 0 auto;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.settings-close-button:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.24);
  color: var(--accent);
  transform: translateY(-1px);
}

.settings-close-button-glyph,
.settings-close-button-glyph::before,
.settings-close-button-glyph::after {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.settings-close-button-glyph {
  background: transparent;
}

.settings-close-button-glyph::before {
  transform: rotate(45deg);
}

.settings-close-button-glyph::after {
  transform: rotate(-45deg);
}

.mobile-nav-button span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-nav-button {
  flex-direction: column;
  gap: 4px;
}

/* File role: settings drawer layout, personalization rows, fields, segmented controls, and toggles. */
.settings-drawer {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: end;
  pointer-events: none;
  z-index: 40;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: var(--settings-backdrop-bg);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.settings-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  height: var(--app-viewport-height, 100%);
  padding: 28px;
  background: var(--settings-card-bg);
  box-shadow: var(--settings-card-shadow);
  opacity: 0.98;
  transform: translate3d(100%, 0, 0);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  contain: layout paint;
  backface-visibility: hidden;
  will-change: transform, scroll-position;
  transform-style: preserve-3d;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.settings-drawer.open {
  pointer-events: auto;
}

.settings-drawer.open .settings-backdrop {
  opacity: 1;
}

.settings-drawer.open .settings-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.settings-open .settings-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-header h2 {
  font-weight: 400;
}

.settings-grid {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  transform: translateZ(0);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  contain: layout paint style;
}

.setting-row[hidden] {
  display: none !important;
}

.setting-row-compact {
  min-height: 52px;
  padding: 9px 14px;
}

.setting-row span {
  max-width: 220px;
}

.react-personalization-panel {
  display: grid;
  gap: 10px;
}

.react-personalization-grid {
  display: grid;
  gap: 10px;
}

.react-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-sizing: border-box;
}

.react-setting-row > span:first-child {
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.25;
}

.react-setting-row .setting-select-wrap {
  flex: 0 1 190px;
  min-width: min(190px, 48%);
  max-width: 100%;
}

.react-setting-row select,
.react-setting-row .setting-select-wrap select {
  width: 100%;
  min-width: 126px;
  min-height: 38px;
  padding-inline: 12px 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background: var(--field-bg);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.2;
  outline: none;
  box-shadow: none;
}

.react-toggle-row input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid rgba(var(--accent-rgb), 0.36);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--field-bg);
  box-shadow: none;
}

.react-toggle-row input[type="checkbox"]:checked {
  border-color: rgba(var(--accent-rgb), 0.86);
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.76));
}

.react-toggle-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9.1 7.25 12.35 14.2 5.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.setting-row-stack {
  display: grid;
  gap: 8px;
  align-items: start;
}

.setting-row-copy {
  display: grid;
  gap: 4px;
}

.setting-row-copy small,
.setting-feedback {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.setting-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.setting-inline-fields input {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--field-bg);
  color: var(--text);
}

.setting-inline-fields input:focus {
  border-color: rgba(23, 25, 21, 0.18);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.setting-address-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.setting-address-style > span {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.setting-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.045);
}

.setting-segmented button {
  min-width: 42px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
  transition:
    color var(--ease),
    background var(--ease),
    box-shadow var(--ease);
}

.setting-segmented button.active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: none;
}

.setting-save-button {
  min-width: 92px;
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.82rem;
}

.setting-feedback[data-tone="success"] {
  color: var(--accent);
}

.setting-feedback[data-tone="error"] {
  color: #ab4426;
}

body.settings-open {
  overflow: hidden;
}

body.settings-open .composer {
  pointer-events: none;
}

.setting-row select {
  min-height: var(--touch-target-size);
  min-width: 170px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  padding: 0 36px 0 14px;
  background: var(--field-bg);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}

.setting-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.setting-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  color: var(--text-muted);
  pointer-events: none;
}

/* ==========================================================================
   Step 7: Settings — themed background + in-panel section navigation.
   The settings list is long and had no orientation. We keep it CSS-only:
   - a subtle turquoise ambience behind the card (Aurora theme);
   - a sticky header so the title/close stay reachable while scrolling;
   - sticky section headings that pin as you move through the list, acting
     as lightweight "you are here" section navigation without any JS.
   ========================================================================== */

/* Themed ambient background for the Aurora settings card. */
body[data-accent="aurora"] .settings-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(var(--accent-rgb), 0.06), transparent 55%),
    var(--settings-card-bg);
}

/* Sticky panel header — title + close always visible. */
.settings-card .settings-header {
  position: sticky;
  top: -28px; /* cancels the card's 28px top padding so it hugs the edge */
  z-index: 5;
  margin: -28px -28px 0;
  padding: 22px 28px 14px;
  background: linear-gradient(180deg, var(--settings-card-bg) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Sticky section headings act as in-panel section navigation. */
.settings-grid .settings-section-heading {
  position: sticky;
  top: 44px; /* sits just under the sticky header */
  z-index: 3;
  margin: 8px -8px 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-accent="aurora"] .settings-grid .settings-section-heading {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.04)),
    var(--surface);
}

body[data-accent="aurora"] .settings-grid .settings-section-heading span {
  color: var(--accent);
}

/* Mobile: card top padding uses safe-area, so re-anchor the sticky header. */
@media (max-width: 720px) {
  .settings-card .settings-header {
    top: calc(-1 * (16px + env(safe-area-inset-top)));
    margin: calc(-1 * (16px + env(safe-area-inset-top))) -14px 0;
    padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
  }
  .settings-grid .settings-section-heading {
    top: calc(40px + env(safe-area-inset-top));
    margin-left: 0;
    margin-right: 0;
  }
}

/* File role: Telegram Agent settings panel, draft lists, campaign cards, and media previews. */
.telegram-agent-setting {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-items: stretch;
  width: 100%;
}

.telegram-agent-entry {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  justify-self: stretch;
  min-width: 0;
}

.telegram-agent-entry-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 5px;
  max-width: none;
  min-width: 0;
}

.telegram-agent-setting .telegram-agent-entry-copy {
  max-width: none;
}

.telegram-agent-entry-title {
  font-size: 0.96rem;
  font-weight: 540;
}

.telegram-agent-entry-copy small {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.telegram-agent-entry-action {
  flex: 0 0 auto;
  justify-self: end;
  margin-left: auto;
  min-width: 98px;
  min-height: 40px;
  padding-inline: 14px;
  font-size: 0.82rem;
  line-height: 1.15;
  white-space: nowrap;
}

.telegram-agent-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.telegram-agent-panel[hidden] {
  display: none;
}

.telegram-agent-react-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.telegram-agent-alert {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: rgba(var(--accent-rgb), 0.045);
  font-size: 0.84rem;
  line-height: 1.45;
}

.telegram-agent-alert[data-tone="success"] {
  color: var(--accent);
}

.telegram-agent-alert[data-tone="error"] {
  color: #ab4426;
  background: rgba(171, 68, 38, 0.08);
}

.telegram-agent-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.35);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.telegram-agent-section-head {
  display: grid;
  gap: 4px;
}

.telegram-agent-section-head span {
  max-width: none;
  font-weight: 680;
}

.telegram-agent-section-head small {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.telegram-agent-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.telegram-agent-fields label,
.telegram-agent-wide {
  display: grid;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.telegram-agent-fields label span {
  max-width: none;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.telegram-agent-fields input,
.telegram-agent-fields select,
.telegram-agent-fields textarea {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.83rem;
  line-height: 1.25;
  outline: none;
  box-sizing: border-box;
}

.telegram-agent-fields select {
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.telegram-agent-fields textarea {
  min-height: 92px;
  padding-block: 10px;
  resize: vertical;
}

.telegram-agent-fields input:focus,
.telegram-agent-fields select:focus,
.telegram-agent-fields textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.telegram-agent-wide {
  grid-column: 1 / -1;
}

.telegram-agent-primary {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  font-size: 0.76rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.telegram-agent-prompt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.telegram-agent-prompt-actions .ghost-button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding-inline: 13px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.telegram-agent-accent {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-inline: 14px;
  border-color: rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.72));
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.12;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18);
}

.telegram-agent-accent:hover {
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.82));
}

.telegram-agent-danger {
  min-height: 40px;
  border-color: rgba(171, 68, 38, 0.22);
  background: rgba(171, 68, 38, 0.08);
  color: #ab4426;
  font-size: 0.82rem;
}

.telegram-agent-setting .ghost-button:hover,
.telegram-agent-setting .ghost-button:focus-visible {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.telegram-agent-primary:hover,
.telegram-agent-primary:focus-visible {
  color: var(--text);
}

.telegram-agent-accent:hover,
.telegram-agent-accent:focus-visible {
  color: #fff;
}

.telegram-agent-danger:hover,
.telegram-agent-danger:focus-visible {
  color: #8f351c;
  background: rgba(171, 68, 38, 0.12);
  border-color: rgba(171, 68, 38, 0.32);
}

.telegram-agent-manual-row,
.telegram-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.telegram-agent-list {
  display: grid;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.telegram-agent-draft-list,
#telegramAgentDraftList {
  overflow: visible;
}

.telegram-agent-campaign-list {
  overflow: visible;
}

.telegram-agent-item,
.telegram-agent-empty {
  display: grid;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.035);
}

.telegram-agent-empty {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.telegram-agent-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.telegram-agent-item-head strong {
  font-size: 0.9rem;
}

.telegram-agent-item-head span {
  max-width: none;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.telegram-agent-preview {
  max-width: 100%;
  max-height: min(30vh, 260px);
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  overscroll-behavior: contain;
  padding-right: 4px;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}

.telegram-agent-campaign-preview {
  max-width: 100%;
  max-height: 176px;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.telegram-agent-media-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.telegram-agent-media-thumb,
.telegram-agent-media-more {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.055);
  color: var(--text);
  overflow: hidden;
  text-decoration: none;
}

.telegram-agent-media-thumb {
  display: grid;
  place-items: center;
}

.telegram-agent-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.telegram-agent-media-thumb-label span,
.telegram-agent-media-more {
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
}

.telegram-agent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.telegram-agent-meta span {
  max-width: none;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.74rem;
}

.telegram-agent-actions .ghost-button,
.telegram-agent-manual-row .ghost-button {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 0.8rem;
}

/* File role: Telegram Agent draft action status and inline media preview states. */
.telegram-agent-draft-work-status,
.telegram-agent-draft-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.telegram-agent-draft-work-status span,
.telegram-agent-draft-status span {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
}

.telegram-agent-draft-work-status[data-state="working"] span,
.telegram-agent-draft-status[data-state="working"] span {
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.04);
  animation: history-work-spin 900ms linear infinite;
}

.telegram-agent-item[data-state="working"] {
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

.telegram-agent-media-thumb {
  padding: 0;
  cursor: pointer;
}

.telegram-agent-media-thumb[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.54);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.telegram-agent-media-thumb-label {
  padding: 6px;
}

.telegram-agent-media-preview {
  display: grid;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.04);
}

.telegram-agent-media-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.telegram-agent-media-preview-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.telegram-agent-media-preview-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.telegram-agent-media-preview-actions a,
.telegram-agent-media-preview-actions button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  text-decoration: none;
  cursor: pointer;
}

.telegram-agent-media-preview img,
.telegram-agent-media-preview video {
  display: block;
  width: 100%;
  max-height: min(42vh, 360px);
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.04);
}

.telegram-agent-media-preview-link {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.telegram-agent-media-preview-link a {
  justify-self: start;
  color: var(--accent);
  text-decoration: none;
}

/* File role: theme preview picker controls and color swatch styling. */
.theme-preview-setting {
  padding: 14px;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-preview-card {
  --preview-accent: #16c2b8;
  --preview-accent-rgb: 22, 194, 184;
  --preview-bg: #0a0f11;
  --preview-surface: rgba(255, 255, 255, 0.08);
  --preview-text: #f2f7f6;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(var(--preview-accent-rgb), 0.18);
  border-radius: 18px;
  background: var(--preview-bg);
  background:
    radial-gradient(circle at 82% 18%, rgba(var(--preview-accent-rgb), 0.18), transparent 32%),
    linear-gradient(135deg, var(--preview-bg), color-mix(in srgb, var(--preview-bg) 82%, var(--preview-accent)));
  color: var(--preview-text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.theme-preview-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--preview-accent-rgb), 0.36);
  box-shadow: 0 14px 28px rgba(var(--preview-accent-rgb), 0.12);
}

.theme-preview-card.active {
  border-color: rgba(var(--preview-accent-rgb), 0.58);
  box-shadow:
    0 0 0 1px rgba(var(--preview-accent-rgb), 0.2),
    0 16px 34px rgba(var(--preview-accent-rgb), 0.16);
}

.theme-preview-card span,
.theme-preview-card strong,
.theme-preview-card small {
  max-width: none;
}

.theme-preview-card-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.theme-preview-swatch {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: rgba(var(--preview-accent-rgb), 0.14);
}

.theme-preview-swatch span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--preview-accent);
  box-shadow: 0 0 18px rgba(var(--preview-accent-rgb), 0.58);
}

.theme-preview-copy {
  display: grid;
  gap: 4px;
}

.theme-preview-copy strong {
  color: var(--preview-text);
  font-size: 0.84rem;
  line-height: 1.18;
}

.theme-preview-copy small {
  display: block;
  color: color-mix(in srgb, var(--preview-text) 72%, transparent);
  font-size: 0.68rem;
  line-height: 1.28;
}

.theme-preview-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
}

.theme-preview-bubble,
.theme-preview-button,
.theme-preview-source {
  display: block;
  border-radius: 999px;
}

.theme-preview-bubble {
  height: 28px;
  background: var(--preview-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-preview-button {
  height: 28px;
  background: linear-gradient(135deg, rgba(var(--preview-accent-rgb), 0.82), rgba(var(--preview-accent-rgb), 0.42));
}

.theme-preview-source {
  grid-column: 1 / -1;
  width: 66%;
  height: 8px;
  background: rgba(var(--preview-accent-rgb), 0.32);
}

.theme-preview-meta {
  display: none !important;
}

.theme-preview-card[data-preview-accent="control"] {
  --preview-accent: #63d5ff;
  --preview-accent-rgb: 99, 213, 255;
  --preview-bg: #071017;
  --preview-text: #e7f5fa;
}

.theme-preview-card[data-preview-accent="research"] {
  --preview-accent: #8f5f3f;
  --preview-accent-rgb: 143, 95, 63;
  --preview-bg: #f2e7d4;
  --preview-surface: rgba(255, 250, 243, 0.76);
  --preview-text: #281d14;
}

.theme-preview-card[data-preview-accent="arctic"] {
  --preview-accent: #66aeea;
  --preview-accent-rgb: 102, 174, 234;
  --preview-bg: #eef6fb;
  --preview-surface: rgba(255, 255, 255, 0.7);
  --preview-text: #163447;
}

.theme-preview-card[data-preview-accent="progress"] {
  --preview-accent: #53f3cf;
  --preview-accent-rgb: 83, 243, 207;
  --preview-bg: #050c0b;
  --preview-text: #d8fff5;
}

.theme-preview-card[data-preview-accent="time"] {
  --preview-accent: #e67b5d;
  --preview-accent-rgb: 230, 123, 93;
  --preview-bg: #f6eadc;
  --preview-surface: rgba(255, 249, 242, 0.72);
  --preview-text: #342219;
}

.theme-preview-card[data-preview-accent="copper"] {
  --preview-accent: #b87748;
  --preview-accent-rgb: 184, 119, 72;
  --preview-bg: #0c0909;
  --preview-text: #f5e7de;
}

.theme-preview-card[data-preview-accent="bordeaux"] {
  --preview-accent: #8a243d;
  --preview-accent-rgb: 138, 36, 61;
  --preview-bg: #16060b;
  --preview-surface: rgba(199, 149, 82, 0.1);
  --preview-text: #fff4e6;
  border-color: rgba(138, 36, 61, 0.38);
  background:
    radial-gradient(circle at 82% 18%, rgba(199, 149, 82, 0.14), transparent 30%),
    linear-gradient(135deg, #16060b, #3b0d1b 62%, #19070d);
}

.theme-preview-card[data-preview-accent="bordeaux"] .theme-preview-button {
  background: linear-gradient(135deg, rgba(199, 149, 82, 0.84), rgba(138, 36, 61, 0.72));
}

.theme-preview-card[data-preview-accent="bordeaux"] .theme-preview-source {
  background: rgba(199, 149, 82, 0.34);
}

.theme-preview-card[data-preview-accent="forest"] {
  --preview-accent: #2d8a5b;
  --preview-accent-rgb: 45, 138, 91;
  --preview-earth: #8b5f3d;
  --preview-bg: #e8f0e2;
  --preview-surface: rgba(252, 255, 249, 0.72);
  --preview-text: #173120;
}

.theme-preview-card[data-preview-accent="forest"] .theme-preview-button {
  background: linear-gradient(135deg, rgba(45, 138, 91, 0.78), rgba(139, 95, 61, 0.66));
}

.theme-preview-card[data-preview-accent="forest"] .theme-preview-source {
  background: rgba(139, 95, 61, 0.32);
}

.theme-preview-card[data-preview-accent="shadow"] {
  --preview-accent: #9bb8c8;
  --preview-accent-rgb: 155, 184, 200;
  --preview-bg: #050506;
  --preview-surface: rgba(255, 255, 255, 0.07);
  --preview-text: #f7f9fb;
}

.theme-preview-card[data-preview-accent="aurora"] {
  --preview-accent: #16c2b8;
  --preview-accent-rgb: 22, 194, 184;
  --preview-bg: #05070a;
  --preview-text: #f2f7f6;
}

.theme-preview-card[data-preview-accent="sber"] {
  --preview-accent: #42b99f;
  --preview-accent-rgb: 66, 185, 159;
  --preview-bg: #03060d;
  --preview-surface: rgba(154, 128, 255, 0.1);
  --preview-text: #f0f7ff;
  border-color: rgba(154, 128, 255, 0.34);
  background:
    linear-gradient(126deg, rgba(66, 185, 159, 0.08), transparent 34%),
    linear-gradient(235deg, rgba(154, 128, 255, 0.26), transparent 44%),
    linear-gradient(135deg, #03060d, #0a1430 52%, #120a22);
}

.theme-preview-card[data-preview-accent="sber"] .theme-preview-button {
  background: linear-gradient(135deg, rgba(66, 185, 159, 0.78), rgba(154, 128, 255, 0.78));
}

.theme-preview-card[data-preview-accent="sber"] .theme-preview-source {
  background: rgba(169, 156, 255, 0.4);
}

.toggle-row input {
  position: relative;
  width: var(--touch-target-size);
  height: var(--touch-target-size);
  border: 1px solid rgba(23, 25, 21, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 18px rgba(22, 27, 24, 0.06);
  transition:
    border-color var(--ease),
    background var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
}

.toggle-row input::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 9px;
  width: 9px;
  height: 16px;
  border-right: 2.6px solid rgba(255, 255, 255, 0.96);
  border-bottom: 2.6px solid rgba(255, 255, 255, 0.96);
  transform: rotate(45deg) scale(0.7);
  opacity: 0;
  transition:
    opacity var(--ease),
    transform var(--ease);
}

.toggle-row input:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.toggle-row input:checked {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(var(--accent-rgb), 0.2);
}

.toggle-row input:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.toggle-row input:focus-visible,
.setting-row select:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.36);
  outline-offset: 3px;
  box-shadow: none;
}

/* File role: admin panels, quality rows, invite rows, and approval cards. */
.admin-panel {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
}

.admin-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-panel-header h3 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: 0;
}

.admin-panel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
}

.admin-panel-controls {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.admin-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-filter-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-muted);
}

.admin-filter-chip.active {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.admin-summary {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.admin-users-table-wrap {
  max-height: min(38vh, 320px);
  margin-top: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.admin-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
}

.admin-users-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 12px 4px;
  background: rgba(248, 246, 239, 0.96);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.admin-users-table th:last-child,
.admin-user-role-cell {
  width: 116px;
  text-align: right;
}

.admin-users-table td {
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  vertical-align: middle;
}

.admin-users-table td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 14px 0 0 14px;
}

.admin-users-table td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 14px 14px 0;
}

.admin-user-main-cell {
  min-width: 0;
}

.admin-user-email {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 560;
  line-height: 1.3;
}

.admin-user-meta {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-user-switch {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.admin-users-table input[type="checkbox"],
.admin-user-switch input {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(var(--accent-rgb), 0.34);
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--field-bg);
}

.admin-users-table input[type="checkbox"]:checked,
.admin-user-switch input:checked {
  border-color: rgba(var(--accent-rgb), 0.88);
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.74));
}

.admin-users-table input[type="checkbox"]:checked::after,
.admin-user-switch input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.1 5.55 9.65 11.1 4.1' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

.admin-user-switch input:disabled {
  opacity: 0.46;
}

.admin-user-switch input:disabled + span {
  color: var(--text-muted);
}

.admin-quality-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-quality-head h4 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.admin-quality-summary {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.admin-quantity-row input {
  width: 96px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: white;
}

.admin-generate-button {
  width: 100%;
}

.admin-feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  line-height: 1.55;
}

.admin-feedback[data-tone="error"] {
  background: rgba(183, 62, 35, 0.1);
  color: #98371f;
}

.admin-link-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.admin-approval-panel {
  margin-top: 32px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(248, 246, 239, 0.92);
}

.admin-toolbar-single {
  justify-content: flex-end;
}

.admin-approval-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.admin-approval-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.admin-link-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(248, 246, 239, 0.92);
}

.admin-link-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.admin-link-url {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.admin-link-url.is-muted {
  color: var(--text-muted);
}

.admin-link-stack {
  display: grid;
  gap: 8px;
}

.admin-link-caption {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.admin-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-copy-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--text);
}

.admin-copy-button:disabled,
.admin-filter-chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-copy-button.danger {
  border-color: rgba(183, 62, 35, 0.18);
  color: #98371f;
}

.invite-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.invite-status-badge[data-status="active"] {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.invite-status-badge[data-status="pending"] {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

.invite-status-badge[data-status="used"] {
  background: rgba(60, 79, 95, 0.12);
  color: #455564;
}

.invite-status-badge[data-status="expired"] {
  background: rgba(178, 132, 45, 0.12);
  color: #8a6618;
}

.invite-status-badge[data-status="revoked"] {
  background: rgba(183, 62, 35, 0.12);
  color: #98371f;
}

code {
  font-family: var(--font-code);
}

body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .settings-card,
body[data-theme="dark"] .history-item.active,
body[data-theme="dark"] .composer-shell::before,
body[data-theme="dark"] .inspector-panel-shell,
body[data-theme="dark"] .message[data-role="assistant"] .message-text.is-rich,
body[data-theme="dark"] .message[data-role="assistant"] .message-text.is-thinking,
body[data-theme="dark"] .composer-popover,
body[data-theme="dark"] .thinking-stage-card,
body[data-theme="dark"] .thinking-source-card,
body[data-theme="dark"] .thinking-insight-line,
body[data-theme="dark"] .composer-attachment-card {
  border-color: var(--surface-card-border);
}

/* File role: dark theme shell, controls, project, inspector, composer base, and history overrides. */
body[data-theme="dark"] .admin-approval-card {
  border-color: var(--surface-card-border);
  box-shadow: var(--surface-card-shadow);
}

body[data-theme="dark"] .auth-card {
  background: var(--auth-card-bg);
}

body[data-theme="dark"] .settings-card {
  background: var(--settings-card-bg);
}

body[data-theme="dark"] .auth-input,
body[data-theme="dark"] .auth-readonly,
body[data-theme="dark"] .setting-inline-fields input,
body[data-theme="dark"] .settings-grid select,
body[data-theme="dark"] .history-search input {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--field-border);
}

body[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
}

body[data-theme="dark"] .ghost-button,
body[data-theme="dark"] .theme-toggle-button,
body[data-theme="dark"] .project-tasks-button,
body[data-theme="dark"] .composer-research-switch,
body[data-theme="dark"] .composer-research-option,
body[data-theme="dark"] .composer-icon-button,
body[data-theme="dark"] .composer-pill-button,
body[data-theme="dark"] .inspector-panel-toggle,
body[data-theme="dark"] .inspector-tab,
body[data-theme="dark"] .suggestion-chip,
body[data-theme="dark"] .auth-badge,
body[data-theme="dark"] .composer-drop-overlay {
  background: var(--control-bg);
}

body[data-theme="dark"] .auth-badge {
  background: var(--auth-badge-bg);
  border-color: var(--auth-badge-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.26);
  color: var(--auth-badge-color);
}

body[data-theme="dark"] .project-tasks-menu {
  --project-popover-bg: rgba(12, 17, 27, 0.96);
  --project-popover-border: rgba(var(--accent-rgb), 0.24);
  --project-item-bg: rgba(255, 255, 255, 0.045);
  --project-item-hover-bg: rgba(var(--accent-rgb), 0.12);
}

body[data-theme="dark"] .project-tasks-button {
  color: rgba(242, 246, 255, 0.96);
  box-shadow: var(--topbar-control-shadow);
}

body[data-theme="dark"] .project-tasks-button:hover,
body[data-theme="dark"] .project-tasks-button.active {
  box-shadow: var(--topbar-control-shadow-hover);
}

body[data-theme="dark"] .project-tasks-popover {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 18px 44px rgba(var(--accent-rgb), 0.1);
}

body[data-theme="dark"] .composer-drop-overlay {
  background: var(--drop-overlay-bg);
}

body[data-theme="dark"] .composer-shell::before {
  background: var(--composer-shell-bg);
  border-color: var(--composer-shell-border);
  box-shadow: var(--composer-shell-shadow);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

body[data-theme="dark"] .inspector-panel-shell,
body[data-theme="dark"] .inspector-card,
body[data-theme="dark"] .inspector-empty-state,
body[data-theme="dark"] .inspector-stream-stage,
body[data-theme="dark"] .inspector-approval-item,
body[data-theme="dark"] .inspector-artifact-card {
  background: rgba(11, 17, 28, 0.88);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .project-space-artifact-card {
  background: rgba(12, 19, 31, 0.84);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .project-space-artifact-preview {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(173, 188, 255, 0.1);
}

body[data-theme="dark"] .project-space-context-pill[data-enabled="false"] {
  background: rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .inspector-attachment-card {
  background: rgba(12, 19, 31, 0.84);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .inspector-attachment-card:hover {
  background: rgba(20, 29, 46, 0.94);
  border-color: rgba(var(--accent-rgb), 0.24);
}

body[data-theme="dark"] .inspector-tab-count,
body[data-theme="dark"] .inspector-chip {
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .composer textarea {
  color: rgba(236, 242, 255, 0.96);
  caret-color: rgba(236, 242, 255, 0.96);
}

body[data-theme="dark"] .composer textarea::placeholder {
  color: rgba(180, 193, 221, 0.7);
}

body[data-theme="dark"] .composer-popover {
  background: var(--surface-strong);
  border-color: var(--surface-card-border);
}

body[data-theme="dark"] .composer-popover-item {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .composer-popover-item + .composer-popover-item {
  border-top-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .composer-popover-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .composer-popover-item-title {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .composer-popover-item-copy {
  color: #92a0be;
}

body[data-theme="dark"] .composer-research-switch {
  background: var(--control-bg);
  border-color: var(--surface-card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .composer-research-option {
  color: #a9b6d3;
}

body[data-theme="dark"] .composer-research-option.active,
body[data-theme="dark"] .composer-pill-button.active,
body[data-theme="dark"] .composer-icon-button.active {
  background: var(--mode-pill-active-bg);
  border-color: var(--mode-pill-active-ring);
  color: var(--mode-pill-active-color);
}

body[data-theme="dark"] .composer-pill-button.active .composer-chevron {
  color: var(--mode-pill-active-color);
}

body[data-theme="dark"] .history-item-delete {
  color: #92a0be;
}

body[data-theme="dark"] .research-history-panel {
  border-top-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .research-history-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .research-history-item:hover {
  background: var(--surface);
  border-color: var(--surface-card-border);
  box-shadow: var(--surface-card-shadow);
}

body[data-theme="dark"] .research-history-title,
body[data-theme="dark"] .research-history-copy {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .research-history-status {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}

body[data-theme="dark"] .research-history-status[data-status="completed"],
body[data-theme="dark"] .research-history-status[data-status="done"],
body[data-theme="dark"] .research-history-status[data-status="succeeded"] {
  background: var(--status-success-bg);
  color: var(--status-success);
}

body[data-theme="dark"] .research-history-status[data-status="running"],
body[data-theme="dark"] .research-history-status[data-status="researching"],
body[data-theme="dark"] .research-history-status[data-status="queued"] {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

body[data-theme="dark"] .research-history-status[data-status="failed"],
body[data-theme="dark"] .research-history-status[data-status="cancelled"] {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

body[data-theme="dark"] .research-history-meta {
  color: #92a0be;
}

body[data-theme="dark"] .research-history-artifact {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(214, 237, 255, 0.96);
}

body[data-theme="dark"] .research-history-action {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: rgba(214, 237, 255, 0.96);
}

body[data-theme="dark"] .research-history-action:hover {
  background: rgba(var(--accent-rgb), 0.24);
  border-color: rgba(var(--accent-rgb), 0.28);
}

/* File role: dark theme assistant, source, decision, and welcome content overrides. */
body[data-theme="dark"] .message-avatar[data-avatar="assistant"] {
  background: transparent;
  border-color: transparent;
}

body[data-theme="dark"] .history-item:hover,
body[data-theme="dark"] .suggestion-chip:hover {
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .mobile-nav-button {
  background: var(--control-bg);
  border-color: var(--surface-card-border);
  color: var(--text);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .ghost-button:hover,
body[data-theme="dark"] .mobile-nav-button:hover {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.28);
  color: rgba(243, 246, 255, 0.96);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.24),
    0 10px 22px rgba(var(--accent-rgb), 0.16);
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .conversation-panel,
body[data-theme="dark"] .main-panel {
  color: var(--text);
}

body[data-theme="dark"] .message {
  border-bottom-color: var(--surface-card-border);
}

body[data-theme="dark"] .message[data-role="assistant"] .message-text.is-rich,
body[data-theme="dark"] .message[data-role="assistant"] .message-text.is-thinking {
  background: var(--message-assistant-bg);
}

body[data-theme="dark"] .assistant-job-card {
  background: var(--assistant-card-bg);
  border-color: var(--assistant-card-border);
}

body[data-theme="dark"] .assistant-attachment {
  background: var(--assistant-card-bg);
  border-color: var(--assistant-card-border);
}

body[data-theme="dark"] .assistant-attachment:hover {
  background: rgba(21, 31, 49, 0.94);
  border-color: rgba(115, 197, 227, 0.24);
}

body[data-theme="dark"] .assistant-confidence {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: rgba(210, 220, 244, 0.9);
}

body[data-theme="dark"] .assistant-source-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .assistant-source-card:hover,
body[data-theme="dark"] .assistant-source-card.is-constellation-match {
  background: rgba(var(--accent-rgb), 0.13);
  border-color: rgba(var(--accent-rgb), 0.26);
}

body[data-theme="dark"] .assistant-source-card[data-source-health="valid"]:hover,
body[data-theme="dark"] .assistant-source-card[data-source-health="valid"].is-constellation-match {
  background: rgba(var(--source-valid-rgb), 0.12);
  border-color: rgba(var(--source-valid-rgb), 0.3);
}

body[data-theme="dark"] .assistant-source-title {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .decision-log-panel {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 42%),
    rgba(11, 17, 28, 0.88);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .decision-log-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .decision-manual-form {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(173, 188, 255, 0.08);
}

body[data-theme="dark"] .decision-manual-input {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(173, 188, 255, 0.1);
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .decision-selection-toolbar {
  background: rgba(11, 17, 28, 0.92);
  border-color: rgba(173, 188, 255, 0.12);
}

body[data-theme="dark"] .assistant-approval-card {
  background: var(--assistant-card-bg);
  border-color: var(--assistant-card-border);
}

body[data-theme="dark"] .assistant-answer blockquote,
body[data-theme="dark"] .assistant-answer pre,
body[data-theme="dark"] .assistant-answer code {
  background: var(--code-bg);
}

body[data-theme="dark"] .assistant-job-artifact {
  background: rgba(var(--accent-rgb), 0.16);
  color: rgba(214, 237, 255, 0.96);
}

body[data-theme="dark"] .assistant-job-action {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: rgba(214, 237, 255, 0.96);
}

body[data-theme="dark"] .assistant-job-action:hover {
  background: rgba(var(--accent-rgb), 0.24);
  border-color: rgba(var(--accent-rgb), 0.28);
}

body[data-theme="dark"] .assistant-job-status {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}

body[data-theme="dark"] .assistant-job-card[data-status="completed"] .assistant-job-status,
body[data-theme="dark"] .assistant-job-card[data-status="done"] .assistant-job-status,
body[data-theme="dark"] .assistant-job-card[data-status="succeeded"] .assistant-job-status {
  background: var(--status-success-bg);
  color: var(--status-success);
}

body[data-theme="dark"] .assistant-approval-status {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}

body[data-theme="dark"] .assistant-job-id {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .assistant-approval-copy,
body[data-theme="dark"] .assistant-approval-command {
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .assistant-approval-command {
  background: var(--assistant-command-bg);
}

body[data-theme="dark"] .assistant-approval-action {
  background: var(--control-bg);
  border-color: var(--surface-card-border);
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .assistant-approval-action.danger {
  background: rgba(171, 68, 38, 0.14);
  border-color: rgba(171, 68, 38, 0.24);
  color: #f3b7a5;
}

body[data-theme="dark"] .assistant-approval-waiting {
  color: #92a0be;
}

/* File role: dark theme settings, Telegram Agent, composer attachment, accent, and GodMode overrides. */
body[data-theme="dark"] .settings-close-button {
  background: var(--control-bg);
  border-color: var(--surface-card-border);
  color: rgba(214, 237, 255, 0.92);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .settings-close-button:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.28);
  color: rgba(239, 243, 255, 0.98);
}

body[data-theme="dark"] .setting-row,
body[data-theme="dark"] .admin-panel,
body[data-theme="dark"] .admin-approval-panel,
body[data-theme="dark"] .admin-approval-card {
  background: rgba(244, 244, 241, 0.96);
  border-color: rgba(18, 23, 37, 0.08);
  color: #171915;
}

body[data-theme="dark"] .setting-row span,
body[data-theme="dark"] .setting-row-copy,
body[data-theme="dark"] .setting-row-copy span,
body[data-theme="dark"] .admin-panel-header h3,
body[data-theme="dark"] .admin-summary,
body[data-theme="dark"] .admin-approval-panel h4 {
  color: #171915;
}

body[data-theme="dark"] .setting-row-copy small,
body[data-theme="dark"] .setting-feedback,
body[data-theme="dark"] .admin-panel .eyebrow,
body[data-theme="dark"] .admin-summary,
body[data-theme="dark"] .admin-quality-summary,
body[data-theme="dark"] .admin-approval-panel .admin-quality-summary {
  color: #667064;
}

body[data-theme="dark"] .settings-card {
  color: #171915;
}

body[data-theme="dark"] .settings-card :where(
  .settings-group-title,
  .admin-panel-header h3,
  .admin-quality-head h4,
  .admin-link-url,
  .admin-user-email,
  .admin-users-table td,
  .admin-user-switch,
  .admin-feedback,
  .admin-link-card
) {
  color: #171915;
}

body[data-theme="dark"] .settings-header h2,
body[data-theme="dark"] .settings-section-title,
body[data-theme="dark"] .settings-section-heading,
body[data-theme="dark"] .settings-section-heading span {
  color: rgba(247, 249, 255, 0.96);
}

body[data-theme="dark"] .settings-card :where(
  .admin-link-caption,
  .admin-link-meta,
  .admin-user-meta,
  .admin-users-table th,
  .admin-panel-badge,
  .admin-summary,
  .admin-quality-summary
) {
  color: #667064;
}

body[data-theme="dark"] .settings-card :where(
  .admin-link-card,
  .admin-users-table td,
  .admin-user-switch,
  .admin-feedback,
  .admin-users-table th
) {
  background: rgba(255, 255, 252, 0.86);
  border-color: rgba(18, 23, 37, 0.08);
}

body[data-theme="dark"] .settings-card :where(input, select, textarea, .admin-copy-button) {
  background-color: rgba(255, 255, 255, 0.94);
  color: #171915;
}

body[data-theme="dark"] .settings-card :where(.admin-copy-button:disabled) {
  color: rgba(23, 25, 21, 0.46);
}

body[data-theme="dark"] .setting-feedback[data-tone="success"] {
  color: var(--accent);
}

body[data-theme="dark"] .setting-feedback[data-tone="error"] {
  color: #98371f;
}

body[data-theme="dark"] .auth-field-error {
  color: #ffb49d;
}

body[data-theme="dark"] .auth-input.is-invalid,
body[data-theme="dark"] .auth-input[aria-invalid="true"] {
  border-color: rgba(255, 139, 112, 0.62);
  box-shadow: 0 0 0 4px rgba(255, 139, 112, 0.12);
}

body[data-theme="dark"] .theme-preview-card,
body[data-theme="dark"] .theme-preview-card span,
body[data-theme="dark"] .theme-preview-copy strong {
  color: var(--preview-text);
}

body[data-theme="dark"] .theme-preview-copy small,
body[data-theme="dark"] .theme-preview-meta {
  color: color-mix(in srgb, var(--preview-text) 70%, transparent);
}

body[data-theme="dark"] .telegram-agent-section,
body[data-theme="dark"] .telegram-agent-item,
body[data-theme="dark"] .telegram-agent-empty {
  background: rgba(23, 25, 21, 0.035);
}

body[data-theme="dark"] .telegram-agent-entry-copy small,
body[data-theme="dark"] .telegram-agent-section-head small,
body[data-theme="dark"] .telegram-agent-fields label span,
body[data-theme="dark"] .telegram-agent-item-head span,
body[data-theme="dark"] .telegram-agent-meta span,
body[data-theme="dark"] .telegram-agent-empty {
  color: #667064;
}

body[data-theme="dark"] .telegram-agent-alert,
body[data-theme="dark"] .telegram-agent-meta span {
  background: rgba(23, 25, 21, 0.035);
}

body[data-theme="dark"] .telegram-agent-entry-action {
  background: rgba(23, 25, 21, 0.045);
  border-color: rgba(18, 23, 37, 0.12);
  color: #171915;
}

body[data-theme="dark"] .telegram-agent-entry-action:hover,
body[data-theme="dark"] .telegram-agent-entry-action:focus-visible {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.28);
  color: #171915;
}

body[data-theme="dark"] .telegram-agent-primary,
body[data-theme="dark"] .telegram-agent-manual-row .ghost-button,
body[data-theme="dark"] .telegram-agent-actions .ghost-button,
body[data-theme="dark"] .telegram-agent-prompt-actions .ghost-button {
  color: rgba(243, 246, 255, 0.96);
}

body[data-theme="dark"] .telegram-agent-primary:hover,
body[data-theme="dark"] .telegram-agent-primary:focus-visible,
body[data-theme="dark"] .telegram-agent-manual-row .ghost-button:hover,
body[data-theme="dark"] .telegram-agent-manual-row .ghost-button:focus-visible,
body[data-theme="dark"] .telegram-agent-actions .ghost-button:hover,
body[data-theme="dark"] .telegram-agent-actions .ghost-button:focus-visible,
body[data-theme="dark"] .telegram-agent-prompt-actions .ghost-button:hover,
body[data-theme="dark"] .telegram-agent-prompt-actions .ghost-button:focus-visible {
  background: rgba(25, 32, 50, 0.96);
  border-color: rgba(var(--accent-rgb), 0.32);
  color: #fff;
}

body[data-theme="dark"] .telegram-agent-danger,
body[data-theme="dark"] .telegram-agent-danger:hover,
body[data-theme="dark"] .telegram-agent-danger:focus-visible {
  color: #9a3a20;
}

body[data-theme="dark"] .telegram-agent-preview,
body[data-theme="dark"] .telegram-agent-item-head strong {
  color: #171915;
}

body[data-theme="dark"] .telegram-agent-accent {
  color: #fff;
}

body[data-theme="dark"] .telegram-agent-accent:hover,
body[data-theme="dark"] .telegram-agent-accent:focus-visible {
  color: #fff;
}

body[data-theme="dark"] .thinking-progress {
  background: rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .thinking-stage-card,
body[data-theme="dark"] .thinking-source-card,
body[data-theme="dark"] .thinking-insight-line {
  background: rgba(255, 255, 255, 0.035);
}

body[data-theme="dark"] .thinking-stage-card[data-state="active"] {
  background: rgba(var(--accent-rgb), 0.12);
}

body[data-theme="dark"] .composer-attachment-card {
  border-color: rgba(173, 188, 255, 0.1);
  background: rgba(12, 18, 30, 0.84);
}

body[data-theme="dark"] .composer-attachment-card[data-status="ready"] {
  border-color: rgba(var(--accent-rgb), 0.16);
  background: rgba(14, 22, 36, 0.9);
}

body[data-theme="dark"] .composer-attachment-card[data-status="processing"] {
  background: rgba(var(--accent-rgb), 0.08);
}

body[data-theme="dark"] .composer-attachment-card[data-status="error"] {
  background: rgba(171, 68, 38, 0.1);
}

body[data-theme="dark"] .composer-attachment-preview,
body[data-theme="dark"] .composer-selection-chip,
body[data-theme="dark"] .composer-attachment-preview-progress {
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .composer-attachment-preview {
  border-color: rgba(173, 188, 255, 0.1);
  color: rgba(226, 232, 245, 0.82);
}

body[data-theme="dark"] .composer-attachment-preview img {
  background: rgba(5, 9, 16, 0.96);
}

body[data-theme="dark"] .composer-attachment-status[data-status="ready"] {
  background: rgba(var(--accent-rgb), 0.16);
  color: color-mix(in srgb, var(--accent) 74%, white);
}

body[data-theme="dark"] .composer-selection-chip[data-tone="context"],
body[data-theme="dark"] .composer-selection-chip[data-tone="attachment"] {
  color: var(--text-muted);
}

body[data-theme="dark"] .composer-selection-chip[data-tone="source"],
body[data-theme="dark"] .composer-selection-chip[data-tone="mode"],
body[data-theme="dark"] .composer-selection-chip[data-tone="model"],
body[data-theme="dark"] .composer-selection-chip[data-tone="godmod"] {
  color: color-mix(in srgb, var(--accent) 72%, white);
}

body[data-theme="dark"] .composer-waveform span,
body[data-theme="dark"] .typing span {
  opacity: 0.94;
}

body[data-theme="dark"] .response-feedback-reason {
  background: rgba(17, 24, 38, 0.9);
  border-color: rgba(173, 188, 255, 0.08);
  color: rgba(239, 243, 255, 0.96);
}

body[data-theme="dark"] .response-feedback-reason:hover,
body[data-theme="dark"] .response-feedback-reason:focus-visible {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.22);
}

body[data-theme="dark"] .composer-selection-chip[data-tone="recording"] {
  background: rgba(171, 68, 38, 0.18);
  color: #f3b7a5;
}

body[data-theme="dark"] .composer-selection-chip[data-tone="transcribing"] {
  background: rgba(var(--accent-rgb), 0.16);
  color: rgba(214, 237, 255, 0.96);
}

body[data-theme="dark"] .composer-selection-chip[data-tone="error"] {
  background: rgba(171, 68, 38, 0.16);
  color: #f3b7a5;
}

body[data-theme="dark"] .send-button-round.is-voice-mode {
  color: rgba(232, 226, 255, 0.98);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .send-button-round.is-voice-mode::before {
  background: rgba(25, 32, 49, 0.96);
}

body[data-theme="dark"] .send-button-round.is-recording {
  border-color: rgba(255, 187, 187, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(71, 18, 18, 0.32);
}

body[data-theme="dark"] .send-button-round.is-stop-mode {
  color: rgba(var(--accent-rgb), 0.98);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(var(--accent-rgb), 0.14);
}

body[data-theme="dark"] .send-button-round.is-stop-mode::before {
  background: rgba(var(--accent-rgb), 0.14);
}

body[data-theme="dark"] .auth-muted,
body[data-theme="dark"] .welcome-copy,
body[data-theme="dark"] .thinking-stage-copy,
body[data-theme="dark"] .thinking-source-meta,
body[data-theme="dark"] .composer-mode-description,
body[data-theme="dark"] .composer-hint,
body[data-theme="dark"] .composer-attachment-copy,
body[data-theme="dark"] .composer-attachment-meta {
  color: var(--text-muted);
}

body[data-accent="sber"][data-theme="dark"]:not(.godmod-active) .new-thread-button {
  background: linear-gradient(135deg, #1d706b 0%, #266f93 48%, #3859d6 100%);
  color: #ffffff;
  border-color: rgba(169, 148, 255, 0.22);
  box-shadow:
    0 14px 32px rgba(17, 35, 83, 0.34),
    0 0 24px rgba(66, 185, 159, 0.1);
}

body[data-accent="bordeaux"][data-theme="dark"]:not(.godmod-active) {
  --bordeaux-gold: #d6a65d;
  --bordeaux-gold-rgb: 214, 166, 93;
  --bordeaux-link: #d6a65d;
  --bordeaux-link-rgb: 214, 166, 93;
  --mode-pill-active-bg:
    linear-gradient(135deg, rgba(var(--bordeaux-gold-rgb), 0.2), rgba(var(--bordeaux-gold-rgb), 0.09));
  --mode-pill-active-color: var(--bordeaux-gold);
  --mode-pill-active-ring: rgba(var(--bordeaux-gold-rgb), 0.34);
  --reading-link-color: var(--bordeaux-link);
}

body[data-accent="bordeaux"][data-theme="dark"]:not(.godmod-active) .assistant-answer a {
  text-decoration-color: rgba(var(--bordeaux-link-rgb), 0.42);
}

body[data-accent="bordeaux"][data-theme="dark"]:not(.godmod-active) .assistant-answer a:hover {
  text-decoration-color: rgba(var(--bordeaux-link-rgb), 0.68);
}

body[data-accent="bordeaux"][data-theme="dark"]:not(.godmod-active) .message-scroll-button {
  color: var(--text);
}

body.godmod-active[data-accent][data-theme] {
  --accent: #bf1f4b;
  --accent-rgb: 191, 31, 75;
  --accent-soft: rgba(var(--accent-rgb), 0.18);
  --orb-glow-rgb: 191, 31, 75;
  --status-pending: #bf1f4b;
  --status-pending-bg: rgba(var(--accent-rgb), 0.16);
  --reading-link-color: #bf1f4b;
  --mode-pill-active-bg: rgba(var(--accent-rgb), 0.18);
  --mode-pill-active-color: #bf1f4b;
  --mode-pill-active-ring: rgba(var(--accent-rgb), 0.22);
}

body.godmod-active .godmod-toggle-button.active,
body.godmod-active .composer-research-option.active,
body.godmod-active .composer-pill-button.active,
body.godmod-active .composer-icon-button.active,
body.godmod-active .composer-computer-button.active {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.34);
  color: #fff6f8;
  box-shadow: none;
}

body.godmod-active .godmod-toggle-button.active {
  background: var(--topbar-control-active-bg);
  border-color: var(--topbar-control-border-hover);
  color: var(--text);
  box-shadow: var(--topbar-control-shadow-hover);
}

body.godmod-active .send-button-round {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: none;
}

body.godmod-active .send-button-round::before {
  background: linear-gradient(180deg, rgba(191, 31, 75, 0.98), rgba(105, 12, 42, 0.98));
}

body.godmod-active .send-button-round.is-voice-mode {
  color: #fff;
  border-color: rgba(255, 236, 240, 0.38);
  box-shadow: none;
}

body.godmod-active .send-button-round.is-voice-mode::before {
  background: linear-gradient(180deg, rgba(191, 31, 75, 0.98), rgba(122, 14, 52, 0.96));
}

body.godmod-active .send-button-round.is-recording {
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.godmod-active .send-button-round.is-recording::before {
  background: linear-gradient(180deg, #181818, #050505);
}

body.godmod-active .composer-shell.is-godmod::before {
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow:
    0 18px 42px rgba(var(--accent-rgb), 0.12),
    var(--composer-shell-shadow);
}

body.godmod-active .assistant-answer a {
  color: var(--accent);
  text-decoration-color: rgba(var(--accent-rgb), 0.36);
}

body.godmod-active .assistant-citation-link {
  background: rgba(var(--accent-rgb), 0.14);
  color: #f05f87;
}

body.godmod-active .assistant-citation-link:hover {
  background: rgba(var(--accent-rgb), 0.22);
}

/* File role: reduced motion and responsive media query styles. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .shell,
  .sidebar,
  .settings-card,
  .settings-backdrop,
  .message,
  .decision-log-item.is-new,
  .message[data-role="assistant"] .message-text.is-thinking,
  .message[data-role="assistant"] .message-text.is-thinking::before,
  .message-text.is-materializing,
  .message-text.is-materializing .assistant-answer,
  .message-text.is-materializing .assistant-answer > *,
  .message-text.is-materializing::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 1360px) {
  .workspace-view,
  .composer-layout,
  .react-composer-layout {
    grid-template-columns: 1fr;
  }

  .workspace-view {
    grid-template-rows: minmax(0, 1fr);
  }

  .inspector-panel {
    right: 18px;
    bottom: 12px;
    width: min(320px, calc(100% - 36px));
    max-width: calc(100% - 36px);
    margin: 0;
  }

  .inspector-panel-shell {
    height: 100%;
    max-height: none;
  }

  .project-space-artifact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-space-artifact-card {
    grid-template-columns: 1fr;
  }

  .composer-column {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(86vw, 340px);
    min-width: min(86vw, 340px);
    max-width: min(86vw, 340px);
    transform: translateX(-104%);
    transition:
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 24px 0 60px rgba(17, 20, 16, 0.16);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .shell::before {
    opacity: 1;
  }

  .mobile-nav-button,
  .icon-button {
    display: inline-flex;
  }

  .topbar {
    padding-inline: 18px;
  }

  .topbar-meta h2 {
    font-size: clamp(0.96rem, 2.8vw, 1.18rem);
  }

  .theme-toggle-label {
    display: none;
  }

  .conversation-panel,
  .composer {
    padding-inline: 18px;
  }

  .topbar-pills {
    display: none;
  }

  .inspector-panel-shell {
    max-height: none;
  }
}

@media (max-width: 720px) {
  .project-space-artifacts-toolbar {
    flex-direction: column;
  }

  .project-space-artifact-grid {
    grid-template-columns: 1fr;
  }

  .project-space-artifact-card {
    grid-template-columns: minmax(74px, 92px) minmax(0, 1fr);
  }

  .message-body {
    width: 100%;
    padding-left: 58px;
    box-sizing: border-box;
  }

  .message-avatar {
    left: 0;
  }

  .thinking-stage-grid[data-columns="2"] {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .auth-card-top,
  .auth-actions-row {
    flex-direction: column;
    align-items: center;
  }

  .auth-card-top .auth-hero-puchok {
    width: 154px;
    height: 118px;
    margin: -6px 0 -2px;
  }

  .composer-actions,
  .composer-meta-row,
  .composer-left-tools,
  .composer-right-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    flex-direction: row;
    align-items: center;
    justify-self: end;
  }

  .project-tasks-popover {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    z-index: 80;
    width: auto;
    max-height: min(70dvh, 560px);
  }

  .project-task-item {
    grid-template-columns: 1fr;
  }

  .project-task-disable-button {
    justify-self: stretch;
  }

  .welcome-orb {
    width: 180px;
    height: 180px;
  }

  .thinking-sources-grid,
  .assistant-sources-grid {
    grid-template-columns: 1fr;
  }

  .decision-log-panel {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  .assistant-citation-health,
  .assistant-decision-pin,
  .assistant-decision-manual-trigger {
    width: 100%;
  }

  .assistant-citation-health {
    align-items: flex-start;
    border-radius: 16px;
  }

  .assistant-citation-health-note {
    white-space: normal;
  }

  .composer-hint {
    order: 2;
    max-width: none;
    text-align: center;
    white-space: normal;
  }

  .send-button {
    width: auto;
  }

  .send-button-round {
    align-self: flex-end;
    width: 48px;
    min-width: 48px;
  }

  .composer-right-tools {
    align-items: flex-end;
  }

  .composer-icon-button {
    width: 100%;
  }

  .composer-attachment-card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .composer-attachment-preview {
    width: 36px;
    height: 36px;
  }

  .composer-attachment-head {
    flex-direction: row;
    align-items: center;
  }

  .composer-popover,
  .composer-popover-right {
    left: 0;
    right: 0;
    min-width: 100%;
    border-radius: 14px;
  }

  .inspector-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .inspector-tab {
    flex: 0 0 auto;
  }

  .theme-toggle-label {
    display: inline;
  }

  .settings-card {
    padding: 22px 18px;
  }

  .setting-address-style {
    align-items: flex-start;
    flex-direction: column;
  }

  .theme-preview-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel-header,
  .admin-toolbar,
  .admin-link-meta,
  .admin-link-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-height: 920px) {
  .conversation-panel {
    padding-bottom: 12px;
  }

  .composer {
    padding-bottom: 10px;
  }

  .composer-shell {
    padding: 7px 9px;
  }

  .message {
    padding: 12px 0;
  }

  .message[data-role="assistant"] .message-text.is-rich,
  .message[data-role="assistant"] .message-text.is-thinking,
  .message-text.is-thinking {
    padding: 12px 12px 14px;
  }

  .thinking-query {
    display: none;
  }

  .thinking-stack {
    gap: 8px;
  }

  .thinking-stage-card {
    padding: 9px;
  }

  .thinking-sources-grid,
  .thinking-insights {
    display: none;
  }

  .thinking-sources-grid,
  .assistant-sources-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  body[data-authed="true"] {
    overscroll-behavior-y: none;
  }

  body.sidebar-collapsed .shell,
  .shell,
  .main-panel,
  .sidebar {
    min-height: var(--app-viewport-height, 100dvh);
    height: var(--app-viewport-height, 100dvh);
    max-height: var(--app-viewport-height, 100dvh);
  }

  body.sidebar-collapsed .shell,
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell::before {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.sidebar-open .shell::before {
    pointer-events: auto;
  }

  body.sidebar-open,
  body.sidebar-open #app {
    min-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    background-color: var(--sidebar-bg);
  }

  body.sidebar-open .shell,
  body.sidebar-open .main-panel {
    min-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    max-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
  }

  .sidebar {
    width: min(88vw, 360px);
    min-width: min(88vw, 360px);
    max-width: min(88vw, 360px);
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }

  body.sidebar-open .sidebar {
    opacity: 1;
    pointer-events: auto;
    border-right-color: var(--line);
    min-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    max-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    z-index: 70;
  }

  .topbar {
    gap: 10px;
    min-width: 0;
    padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
  }

  .topbar-actions {
    gap: 8px;
    min-width: 0;
  }

  .mobile-nav-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--control-bg);
    color: var(--text);
  }

  .conversation-panel {
    padding: 0 14px 12px;
  }

  .composer {
    min-height: auto;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  }
}

@media (hover: none) and (pointer: coarse) {
  .history-item:hover,
  .research-history-item:hover,
  .suggestion-chip:hover,
  .composer-pill-button:hover,
  .composer-icon-button:hover,
  .composer-research-option:hover,
  .assistant-decision-manual-trigger:hover,
  .assistant-decision-pin:hover,
  .decision-log-add:hover,
  .theme-toggle-button:hover,
  .godmod-toggle-button:hover,
  .message-scroll-button:hover {
    transform: none;
  }

  .composer-research-option:hover {
    background: transparent;
    color: var(--text-muted);
  }

  .composer-research-option.active,
  .composer-research-option.active:hover {
    background: var(--mode-pill-active-bg);
    color: var(--mode-pill-active-color);
  }

  button,
  input,
  textarea,
  select,
  a {
    touch-action: manipulation;
  }
}

/* File role: mobile shell, chat, inspector, message, and artifact responsive styles. */
@media (max-width: 720px) {
  body {
    --chat-layout-width: 100%;
    --message-text-max-width: 100%;
    --chat-avatar-rail: 46px;
  }

  .main-panel,
  .workspace-view,
  .conversation-stage,
  .composer-layout,
  .react-composer-layout,
  .composer-column {
    min-width: 0;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: 12px;
  }

  .topbar-meta {
    min-width: 0;
  }

  .topbar-meta h2 {
    font-size: 1rem;
  }

  .theme-toggle-button {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .incognito-toggle-button {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0;
  }

  .incognito-toggle-label {
    display: none;
  }

  .incognito-toggle-icon {
    width: 24px;
    height: 16px;
    flex-basis: 24px;
  }

  .project-tasks-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .project-tasks-icon {
    width: 17px;
    height: 17px;
  }

  .project-tasks-button-label {
    display: none;
  }

  .project-tasks-badge {
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
  }

  .theme-toggle-label {
    display: none;
  }

  .godmod-toggle-button {
    min-height: 44px;
    max-width: 98px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conversation-panel {
    padding-inline: 12px;
    padding-bottom: 8px;
  }

  body[data-view-state="welcome"] .conversation-panel {
    padding-top: clamp(4px, 2vh, 16px);
    padding-bottom: 6px;
  }

  .workspace-view,
  .welcome-view,
  .messages {
    width: 100%;
  }

  .inspector-panel {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: min(40vh, 320px);
  }

  .inspector-panel.is-collapsed {
    top: auto;
    right: 70px;
    bottom: 13px;
    left: auto;
    width: auto;
    max-height: none;
  }

  .inspector-panel-shell {
    max-height: min(40vh, 320px);
    padding: 12px;
    border-radius: 20px;
  }

  .inspector-panel.is-collapsed .inspector-panel-shell {
    padding: 6px;
    border-radius: 999px;
  }

  .inspector-panel-toggle {
    min-height: 26px;
    padding-inline: 9px;
    font-size: 0.72rem;
  }

  .inspector-panel-title {
    font-size: 0.94rem;
  }

  .inspector-panel-description {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  body[data-theme="dark"] .inspector-panel-shell {
    background: rgba(8, 13, 24, 0.96);
    border-color: rgba(var(--accent-rgb), 0.26);
    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  body[data-theme="dark"] .inspector-panel-toggle[aria-expanded="false"] {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.34);
    color: #bda8ff;
  }

  body[data-theme="dark"] .inspector-panel-title,
  body[data-theme="dark"] .inspector-card-title,
  body[data-theme="dark"] .inspector-empty-title,
  body[data-theme="dark"] .inspector-section-title,
  body[data-theme="dark"] .project-space-artifact-head strong {
    color: #f6f2ff;
  }

  body[data-theme="dark"] .inspector-panel-description,
  body[data-theme="dark"] .inspector-card-copy,
  body[data-theme="dark"] .inspector-empty-copy,
  body[data-theme="dark"] .inspector-card-meta,
  body[data-theme="dark"] .inspector-card-row,
  body[data-theme="dark"] .inspector-artifact-card span,
  body[data-theme="dark"] .project-space-artifact-meta,
  body[data-theme="dark"] .project-space-artifact-source {
    color: rgba(231, 225, 255, 0.76);
  }

  body[data-theme="dark"] .inspector-card,
  body[data-theme="dark"] .inspector-empty-state,
  body[data-theme="dark"] .inspector-artifact-card,
  body[data-theme="dark"] .inspector-attachment-card,
  body[data-theme="dark"] .project-space-artifact-card {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(var(--accent-rgb), 0.22);
  }

  body[data-theme="dark"] .project-space-artifact-preview {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.24);
    color: rgba(246, 242, 255, 0.82);
  }

  .project-space-artifacts-toolbar {
    display: grid;
    gap: 8px;
  }

  .project-space-artifact-card {
    grid-template-columns: minmax(58px, 72px) minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }

  .project-space-artifact-preview {
    min-height: 58px;
  }

  .project-space-artifact-actions {
    gap: 5px;
  }

  .welcome-view {
    padding: 10px 0 18px;
  }

  body[data-view-state="welcome"] .welcome-view {
    padding: 0 0 8px;
  }

  body[data-view-state="welcome"] .suggestions {
    display: none;
  }

  body[data-view-state="welcome"] .welcome-orb,
  .welcome-orb {
    width: 112px;
    height: 112px;
    margin-bottom: 10px;
  }

  .welcome-view h3 {
    font-size: 1.08rem;
    line-height: 1.2;
  }

  .welcome-copy {
    font-size: 0.88rem;
    line-height: 1.48;
  }

  body[data-view-state="welcome"] .welcome-copy {
    margin-top: 8px;
  }

  .messages {
    gap: 12px;
    padding: 0 12px 10px 0;
    scrollbar-gutter: stable;
  }

  .message {
    padding: 10px 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .message::before,
  .message::after {
    display: none;
    content: none;
  }

  .message-avatar {
    top: 10px;
    left: 0;
    width: 38px;
    height: 38px;
  }

  .message-body {
    position: relative;
    width: 100%;
    padding-left: 0;
    box-sizing: border-box;
    min-width: 0;
  }

  .message[data-role="assistant"] .message-body {
    padding-left: 0;
  }

  .message-meta {
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .message[data-role="assistant"] .message-meta {
    min-height: 38px;
    padding-left: 0;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .message-text {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.92rem;
    line-height: 1.52;
  }

  .user-message-content,
  .assistant-message-content {
    display: block;
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .user-message-content .message-text {
    width: fit-content;
    max-width: 100%;
  }

  .assistant-message-content .message-text {
    width: 100%;
    max-width: 100%;
  }

  .message-copy-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
    opacity: 0.72;
    pointer-events: auto;
    transform: none;
    background: transparent;
    box-shadow: none;
  }

  .message-copy-button svg {
    width: 19px;
    height: 19px;
  }

  .message[data-role="user"] .message-copy-button {
    top: -14px;
    right: 2px;
  }

  .assistant-message-copy-slot .message-copy-button {
    position: static;
    top: auto;
    right: auto;
    width: 32px;
    height: 32px;
    opacity: 1;
    background: transparent;
    box-shadow: none;
  }

  .message[data-role="user"]:hover .message-copy-button,
  .message[data-role="user"]:focus-within .message-copy-button,
  .message[data-role="assistant"]:hover .message-copy-button,
  .message[data-role="assistant"]:focus-within .message-copy-button {
    opacity: 1;
    transform: none;
  }

  .message-text.is-rich,
  .assistant-answer,
  .assistant-answer > *,
  .assistant-contradiction,
  .assistant-contradiction summary,
  .assistant-decision-pins,
  .assistant-decision-pins-head,
  .assistant-decision-pin,
  .decision-manual-form,
  .decision-manual-input,
  .assistant-job-evidence-bindings,
  .assistant-source-bindings,
  .assistant-evidence-binding-list,
  .assistant-job-evidence-binding-row,
  .assistant-retrieval-trace,
  .assistant-conflict-awareness,
  .assistant-semantic-verification {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .assistant-answer {
    width: 100%;
    overflow-x: clip;
  }

  .assistant-answer :where(section, article, details, summary, div, ul, ol, li, p, blockquote, pre, a, span, strong, em, code, button) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .assistant-answer :where(.assistant-sources, .assistant-source-card, .assistant-job-card, .assistant-confidence, .assistant-citation-health, .assistant-semantic-states, .assistant-timeline, .assistant-contradiction, .assistant-decision-pins, .assistant-decision-pin, .assistant-job-evidence-bindings, .assistant-source-bindings, .assistant-retrieval-trace, .assistant-job-evidence-binding-row) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .assistant-answer :where(.assistant-job-head, .assistant-job-meta, .assistant-sources-head, .assistant-retrieval-hop-list, .assistant-job-artifacts) {
    min-width: 0;
    max-width: 100%;
  }

  .assistant-contradiction summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .assistant-decision-pins-head {
    align-items: stretch;
    flex-direction: column;
  }

  .assistant-decision-manual-trigger {
    justify-content: center;
    min-height: 42px;
    border-radius: 14px;
  }

  .decision-log-head {
    align-items: flex-start;
  }

  .decision-log-add {
    width: 40px;
    height: 40px;
  }

  .decision-manual-form {
    border-radius: 14px;
  }

  .decision-manual-input {
    min-height: 92px;
    font-size: 16px;
  }

  .decision-manual-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .assistant-contradiction summary::after {
    flex: 0 0 auto;
  }

  .assistant-citation-health,
  .assistant-confidence {
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 16px;
    line-height: 1.3;
  }

  .assistant-citation-health-title,
  .assistant-citation-health-note,
  .assistant-confidence-label,
  .assistant-confidence-note {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .message[data-role="assistant"] .message-text.is-rich,
  .message[data-role="assistant"] .message-text.is-thinking,
  .message-text.is-thinking {
    padding: 14px;
    border-radius: 18px;
  }

  .message[data-role="user"] .message-text {
    padding: 13px 14px;
    border-radius: 18px;
  }

  .message-scroll-actions {
    right: 10px;
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .message-scroll-button {
    width: 42px;
    height: 42px;
  }

}

/* File role: mobile composer, assistant content, feedback, and attachment responsive overrides. */
@media (max-width: 720px) {
  .auth-shell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--app-viewport-height, 100dvh);
    min-height: var(--app-viewport-height, 100dvh);
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom) + var(--mobile-browser-chrome-gap, var(--mobile-browser-bottom-offset, 0px)));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .auth-card {
    width: min(100%, 560px);
    margin-block: auto;
  }

  body.mobile-auth-focus-active .auth-shell {
    position: fixed;
    top: var(--visual-viewport-offset-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 80;
    align-items: flex-start;
    height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    min-height: var(--visual-viewport-height, var(--app-viewport-height, 100dvh));
    padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  body.mobile-auth-focus-active .auth-card {
    margin-block: 0;
    max-height: calc(var(--visual-viewport-height, var(--app-viewport-height, 100dvh)) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-auth-focus-active .auth-card-top {
    gap: 10px;
    margin-bottom: 12px;
  }

  body.mobile-auth-focus-active .auth-card-top .auth-hero-puchok {
    display: none;
  }

  body.mobile-auth-focus-active .auth-card-top .logo-text strong {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
  }

  body.mobile-auth-focus-active .auth-copy {
    line-height: 1.45;
  }

  body.mobile-auth-focus-active .auth-form {
    gap: 12px;
    margin-top: 18px;
  }

  .composer {
    padding-inline: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .composer-layout,
  .react-composer-layout {
    width: 100%;
  }

  .composer-shell {
    padding: 10px;
    border-radius: 20px;
  }

  .composer textarea {
    min-height: 42px;
    max-height: min(34dvh, 160px);
    padding: 4px 4px 8px;
    font-size: 16px;
    line-height: 1.42;
  }

  .composer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .composer-left-tools,
  .composer-right-tools {
    flex-direction: row;
    align-items: center;
    min-width: 0;
    width: 100%;
  }

  .composer-left-tools {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .composer-right-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
    margin-left: 0;
  }

  .composer-right-tools .composer-menu-anchor {
    min-width: 0;
  }

  .composer-menu-anchor {
    position: static;
  }

  .composer-icon-button,
  .composer-pill-button,
  .composer-research-option {
    min-height: 44px;
  }

  .composer-icon-button {
    width: 44px;
    min-width: 44px;
  }

  .composer-research-option {
    flex: 1 1 0;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    padding-inline: 6px;
    font-size: 0.86rem;
  }

  #composerModeChatButton {
    flex: 0 0 clamp(82px, 28vw, 110px);
  }

  #composerModeProjectButton {
    flex: 1 1 0;
  }

  .composer-research-option span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-research-switch {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .composer-selection::-webkit-scrollbar {
    display: none;
  }

  .composer-model-button {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .composer-model-button span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .send-button-round {
    align-self: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  .composer-meta-row {
    display: grid;
    gap: 7px;
    margin-top: 8px;
  }

  .composer-selection {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .composer-selection-chip {
    flex: 0 0 auto;
    min-height: 30px;
    padding-inline: 10px;
  }

  .composer-hint {
    margin-left: 0;
    max-width: none;
    text-align: left;
    font-size: 0.72rem;
  }

  .composer-popover,
  .composer-popover-right {
    left: 10px;
    right: 10px;
    min-width: 0;
    width: auto;
    max-height: min(48dvh, 360px);
    border-radius: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .composer-popover-item {
    align-items: flex-start;
    min-height: auto;
    padding: 9px 11px;
    font-size: 0.8rem;
  }

  .composer-popover-item-title {
    font-size: 0.8rem;
  }

  .composer-popover-item-copy {
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .composer-popover-item-body {
    min-width: 0;
  }

  .composer-popover-item-title,
  .composer-popover-item-copy {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .history-item,
  .history-scope-button,
  .research-history-item,
  .suggestion-chip,
  .theme-preview-card,
  .assistant-source-card,
  .assistant-job-artifact,
  .assistant-job-action,
  .assistant-decision-manual-trigger,
  .decision-manual-cancel,
  .decision-manual-save,
  .assistant-approval-action,
  .setting-segmented button,
  .setting-save-button {
    min-height: var(--touch-target-size);
  }

  .assistant-job-card,
  .assistant-sources {
    padding: 12px;
  }

  .thinking-research-task-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .thinking-research-task-head strong {
    display: block;
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .thinking-research-task-meta {
    justify-content: flex-start;
    width: 100%;
  }

  .decision-selection-toolbar[data-surface="sheet"] {
    grid-template-columns: minmax(0, 1fr) 42px;
    max-width: none;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 18px 54px rgba(20, 20, 28, 0.24);
  }

  .decision-selection-toolbar[data-surface="sheet"] .decision-selection-action {
    min-height: 48px;
    border-radius: 14px;
  }

  .decision-selection-toolbar[data-surface="sheet"] .decision-selection-close {
    width: 42px;
    min-width: 42px;
    min-height: 48px;
    border-radius: 14px;
    background: rgba(var(--accent-rgb), 0.055);
  }

  .decision-selection-toolbar[data-surface="sheet"] .decision-selection-preview {
    white-space: normal;
  }

  .assistant-job-head,
  .assistant-job-meta,
  .assistant-sources-head {
    gap: 8px;
  }

  .assistant-source-card {
    padding: 10px;
  }

  .assistant-answer h1 {
    font-size: 1.08rem;
  }

  .assistant-answer h2 {
    font-size: 1rem;
  }

  .assistant-answer h3,
  .assistant-answer h4 {
    font-size: 0.95rem;
  }

  .assistant-answer ol,
  .assistant-answer ul {
    gap: 6px;
    padding-left: 18px;
  }

  .assistant-answer li {
    line-height: 1.52;
  }

  .assistant-answer blockquote {
    padding: 10px 12px;
    border-radius: 0 14px 14px 0;
  }

  .assistant-table-wrap {
    max-width: 100%;
    min-width: 0;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .assistant-markdown-table {
    min-width: 460px;
    font-size: 0.82rem;
  }

  .assistant-markdown-table th,
  .assistant-markdown-table td {
    padding: 9px 10px;
  }

  .assistant-answer pre {
    max-width: 100%;
    padding: 12px;
    border-radius: 14px;
    font-size: 0.82rem;
    -webkit-overflow-scrolling: touch;
  }

  .assistant-answer code {
    overflow-wrap: anywhere;
  }

  .assistant-answer p,
  .assistant-answer li,
  .assistant-answer h1,
  .assistant-answer h2,
  .assistant-answer h3,
  .assistant-answer h4,
  .assistant-answer blockquote,
  .assistant-answer a,
  .assistant-citation-link,
  .assistant-citation-missing,
  .assistant-citation-health-title,
  .assistant-citation-health-note,
  .assistant-confidence-label,
  .assistant-confidence-note,
  .assistant-contradiction-title,
  .assistant-contradiction-note,
  .assistant-contradiction-body,
  .assistant-contradiction-body p,
  .assistant-contradiction-body li,
  .assistant-decision-pins-label,
  .assistant-decision-pin span,
  .assistant-decision-pin strong,
  .decision-manual-label,
  .decision-selection-preview,
  .assistant-job-evidence-binding-row,
  .assistant-retrieval-hop,
  .assistant-source-title,
  .assistant-source-meta,
  .assistant-job-artifact,
  .assistant-attachment-name {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .assistant-answer [data-source-constellation].is-constellation-anchor {
    outline: none;
    box-shadow: none;
  }

  .assistant-citation-link,
  .assistant-citation-missing {
    min-height: 1.35em;
  }

  .response-feedback-panel {
    gap: 8px;
    padding: 0;
  }

  .response-feedback-main {
    align-items: flex-start;
    gap: 10px;
  }

  .response-feedback-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .response-feedback-status {
    min-width: 0;
    text-align: left;
  }

  .assistant-message-footer {
    align-items: center;
    gap: 12px;
    padding: 0 2px 8px;
  }

  .assistant-message-copy-slot .message-copy-button,
  .assistant-message-copy-slot .message-copy-button:hover,
  .assistant-message-copy-slot .message-copy-button:focus-visible,
  .response-feedback-button,
  .response-feedback-button:hover,
  .response-feedback-button:focus-visible,
  .response-feedback-button[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
  }

  .response-feedback-reasons {
    gap: 7px;
  }

  .assistant-attachments {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .assistant-attachment {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
  }

}

/* File role: mobile settings, keyboard-active, and compact breakpoint overrides. */
@media (max-width: 720px) {
  html,
  body,
  #app {
    min-height: var(--app-viewport-height, 100dvh);
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
  }

  html.mobile-keyboard-active-root {
    height: var(--visual-viewport-height, 100dvh);
    min-height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
    overflow: hidden;
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
  }

  .auth-shell,
  .shell,
  .main-panel,
  .conversation-panel,
  .workspace-view,
  .conversation-stage {
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
  }

  body.mobile-keyboard-active,
  body.mobile-keyboard-active #app {
    height: var(--visual-viewport-height, 100dvh);
    min-height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
    overflow: hidden;
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
  }

  body.mobile-keyboard-active .shell,
  body.mobile-keyboard-active .main-panel,
  body.mobile-keyboard-active .conversation-panel,
  body.mobile-keyboard-active .workspace-view,
  body.mobile-keyboard-active .conversation-stage {
    min-height: var(--visual-viewport-height, 100dvh);
    height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
  }

  .settings-card {
    width: 100%;
    height: var(--app-viewport-height, 100dvh);
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  }

  .settings-grid {
    gap: 12px;
    margin-top: 20px;
  }

  .setting-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .setting-row span,
  .setting-select-wrap,
  .setting-row select,
  .setting-inline-fields {
    max-width: none;
    width: 100%;
  }

  .setting-inline-fields {
    grid-template-columns: 1fr;
  }

  .setting-save-button {
    width: 100%;
  }

  .toggle-row {
    flex-direction: row;
    align-items: center;
    min-height: 56px;
  }

  .toggle-row span {
    width: auto;
    flex: 1 1 auto;
  }

  .toggle-row input {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
  }

  .toggle-row input::after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 13px;
    border-right-width: 2.2px;
    border-bottom-width: 2.2px;
  }

  body.mobile-keyboard-active .welcome-view {
    max-height: none;
    margin-inline: auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-view {
    padding: 0 0 6px;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-orb {
    width: clamp(168px, 44vw, 208px);
    height: clamp(168px, 44vw, 208px);
    margin-bottom: 14px;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-copy {
    display: none;
  }

  body.mobile-keyboard-active .conversation-panel {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  body.mobile-keyboard-active .composer {
    position: sticky;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    min-height: auto;
    padding: 0 10px 8px;
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
  }

  body.mobile-keyboard-active .composer-shell {
    padding: 8px;
  }

  body.mobile-keyboard-active .composer textarea {
    max-height: min(22dvh, 104px);
  }

  body.mobile-keyboard-active .composer-hint {
    display: none;
  }

  body.mobile-keyboard-active .composer-popover,
  body.mobile-keyboard-active .composer-popover-right {
    max-height: min(36dvh, calc(var(--visual-viewport-height, var(--app-viewport-height, 100dvh)) - 220px));
  }

  body.decision-manual-keyboard-active .conversation-panel {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  body.decision-manual-keyboard-active .messages {
    padding-bottom: calc(14px + var(--keyboard-inset, 0px) + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(var(--keyboard-inset, 0px) + 96px);
  }

  body.decision-manual-keyboard-active .decision-manual-input {
    scroll-margin-bottom: calc(var(--keyboard-inset, 0px) + 96px);
  }

  body.decision-manual-focus-active .composer {
    display: none;
  }
}

@media (max-width: 720px) and (max-height: 760px) {
  .conversation-panel {
    padding-bottom: 6px;
  }

  .messages {
    gap: 10px;
  }

  .message {
    padding: 8px 0;
  }

  body[data-view-state="welcome"] .welcome-orb,
  .welcome-orb {
    width: 92px;
    height: 92px;
    margin-bottom: 8px;
  }

  .composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .composer-shell {
    padding: 8px;
  }

  .composer textarea {
    min-height: 36px;
    max-height: min(26dvh, 120px);
    padding-bottom: 6px;
  }

  .composer-actions {
    gap: 6px;
  }

  .composer-meta-row {
    gap: 5px;
    margin-top: 6px;
  }

  .composer-selection-chip {
    min-height: 28px;
  }

  body.mobile-keyboard-active .message {
    padding-block: 6px;
  }
}

@media (max-width: 420px) {
  .sidebar {
    width: min(92vw, 340px);
    min-width: min(92vw, 340px);
    max-width: min(92vw, 340px);
  }

  .topbar {
    gap: 8px;
    padding-inline: 10px;
  }

  .history-search-head {
    gap: 8px;
  }

  .history-scope-switch {
    min-width: 132px;
  }

  .history-scope-button {
    min-height: 32px;
    padding-inline: 6px;
    font-size: 0.74rem;
  }

  .conversation-panel {
    padding-inline: 10px;
  }

  .messages {
    padding-inline-end: 10px;
  }

  .message-body {
    padding-left: 40px;
  }

  .message[data-role="assistant"] .message-body {
    padding-left: 40px;
  }

  .message[data-role="assistant"] .message-meta {
    min-height: 32px;
    padding-left: 0;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
  }

  .message[data-role="assistant"] .message-text.is-rich,
  .message[data-role="assistant"] .message-text.is-thinking,
  .message-text.is-thinking {
    padding: 12px;
    border-radius: 16px;
  }

  .composer {
    padding-inline: 8px;
  }

  .composer-shell {
    padding: 9px;
    border-radius: 18px;
  }

  .composer-left-tools {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px;
  }

  .composer-popover,
  .composer-popover-right {
    left: 9px;
    right: 9px;
    min-width: 0;
  }

  .composer-research-option {
    gap: 5px;
    padding-inline: 6px;
    font-size: 0.82rem;
  }

  .composer-pill-button {
    padding-inline: 11px;
  }

  .composer-glyph {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  #composerModeChatButton {
    flex-basis: 68px;
  }

  #composerModeProjectButton {
    flex-basis: 70px;
  }

  .assistant-markdown-table {
    min-width: 420px;
    font-size: 0.78rem;
  }

  .assistant-markdown-table th,
  .assistant-markdown-table td {
    padding: 8px;
  }

  .response-feedback-reason {
    font-size: 0.84rem;
  }

  .assistant-job-artifact,
  .assistant-job-action,
  .decision-manual-cancel,
  .decision-manual-save {
    width: 100%;
  }

  .assistant-job-artifact {
    min-height: auto;
    padding-block: 9px;
    align-items: center;
  }

  .research-download-pending {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
  }

  .research-download-pending .assistant-job-artifact-meta {
    grid-column: 2;
  }

  .decision-manual-actions {
    grid-template-columns: 1fr;
  }

  .decision-manual-counter {
    margin-right: 0;
  }

  .settings-card {
    padding-inline: 12px;
  }
}

@media (max-width: 360px) {
  .composer-left-tools {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px;
  }

  .composer-icon-button {
    width: 40px;
    min-width: 40px;
  }

  .composer-research-option {
    gap: 4px;
    padding-inline: 4px;
    font-size: 0.78rem;
  }

  #composerModeChatButton {
    flex-basis: 58px;
  }

  #composerModeProjectButton {
    flex-basis: 58px;
  }
}

@media (max-width: 480px) {
  .composer-research-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .composer-research-switch[data-mode-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer-research-option {
    gap: 0;
    min-width: 0;
    padding-inline: 4px;
    width: 100%;
    font-size: clamp(0.8rem, 3.15vw, 0.86rem);
  }

  #composerModeChatButton,
  #composerModeProjectButton {
    flex: 0 0 auto;
  }

  #composerModeChatButton,
  #composerModeProjectButton {
    padding-inline: 4px;
  }

  .composer-research-option .composer-glyph {
    display: none;
  }

  .composer-research-option span:last-child {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .composer-research-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer-research-option {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Step 5: force 16px on ALL real text-entry controls on mobile.
   iOS Safari auto-zooms any focused field whose font-size < 16px.
   Zoom is intentionally disabled app-wide, so every input/textarea/select
   that accepts typing must be >= 16px to avoid the layout jump.
   Standalone 720px block so it covers all phones (not only <=360px).
   ========================================================================== */
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  .composer textarea,
  .react-composer-shell textarea {
    font-size: 16px !important;
    line-height: 1.42;
  }
}

/* File role: mobile overlay, feedback, project controls, and Telegram responsive styles. */
@media (max-width: 720px) {
  html.mobile-conversation-keyboard-root {
    height: var(--layout-viewport-height, 100dvh);
    min-height: var(--layout-viewport-height, 100dvh);
    max-height: none;
    overflow: hidden;
  }

  body.mobile-conversation-keyboard-active,
  body.mobile-conversation-keyboard-active #app,
  body.mobile-conversation-keyboard-active .shell,
  body.mobile-conversation-keyboard-active .main-panel {
    height: var(--layout-viewport-height, 100dvh);
    min-height: var(--layout-viewport-height, 100dvh);
    max-height: none;
  }

  body[data-view-state="welcome"] .inspector-panel {
    display: none !important;
  }

  .topbar {
    min-height: 62px;
    z-index: 30;
  }

  .project-tasks-menu {
    z-index: 34;
  }

  body[data-view-state="welcome"] .main-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .conversation-panel {
    padding-top: 58px;
  }

  body[data-view-state="welcome"] .conversation-panel {
    padding-top: clamp(58px, 9vh, 82px);
  }

  body[data-view-state="welcome"] .workspace-view,
  body[data-view-state="welcome"] .conversation-stage {
    height: 100%;
    align-items: center;
    align-content: center;
  }

  body[data-view-state="welcome"] .welcome-view {
    align-self: center;
    padding-bottom: 0;
  }

  body[data-view-state="welcome"] .composer {
    position: sticky;
    bottom: 0;
    align-items: end;
  }

  body[data-view-state="welcome"] .welcome-orb,
  .welcome-orb {
    width: clamp(168px, 44vw, 208px);
    height: clamp(168px, 44vw, 208px);
    margin-bottom: 14px;
  }

  .welcome-view h3 {
    font-size: clamp(1.08rem, 5vw, 1.32rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .composer-mode-anchor {
    position: static;
    flex: 0 0 clamp(84px, 24vw, 106px);
    width: clamp(84px, 24vw, 106px);
    min-width: 0;
    transform: none;
  }

  body[data-view-state="welcome"] .composer-mode-anchor {
    position: fixed;
    top: calc(68px + env(safe-area-inset-top));
    left: 50%;
    z-index: 8;
    width: min(238px, calc(100vw - 148px));
    transform: translateX(-50%);
  }

  .composer-mode-anchor .composer-research-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    padding: 4px;
    border-color: rgba(var(--accent-rgb), 0.13);
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 28px rgba(25, 29, 23, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .composer-mode-anchor .composer-research-switch[data-mode-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-theme="dark"] .composer-mode-anchor .composer-research-switch {
    border-color: rgba(173, 188, 255, 0.12);
    background: rgba(18, 23, 37, 0.74);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.22);
  }

  .composer-mode-anchor .composer-research-option,
  #composerModeChatButton,
  #composerModeProjectButton {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0;
  }

  .composer-mode-anchor .composer-research-option .composer-glyph {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .composer-mode-anchor .composer-research-option span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .composer {
    padding-inline: 12px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    transition:
      top 180ms var(--ease),
      bottom 180ms var(--ease),
      padding-bottom 180ms var(--ease),
      transform 180ms var(--ease);
    will-change: top, bottom, padding-bottom;
  }

  body:not(.mobile-keyboard-active) .composer {
    padding-bottom: calc(22px + env(safe-area-inset-bottom) + var(--mobile-browser-bottom-offset, 0px));
  }

  body.mobile-standalone-mode:not(.mobile-keyboard-active) .composer {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  @media (display-mode: standalone) {
    body:not(.mobile-keyboard-active) .composer {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  }

  /* kb-jump fix (round-15): was position: fixed. Round-12/13 make the
     keyboard-active composer position: sticky; keeping this PRE-keyboard
     focus state on fixed forced a fixed->sticky position-TYPE change at
     the exact instant mobile-keyboard-active toggles on, which iOS cannot
     animate (a position type change is never interpolated) and produced
     the visible snap/jump. Unifying on sticky here removes the type
     change entirely; --mobile-browser-bottom-offset keeps working the
     same way under sticky (offset from the bottom of the in-flow box). */
  body.mobile-composer-focus-active:not(.mobile-keyboard-active) .composer,
  body.mobile-composer-focus-active:not(.mobile-keyboard-active)[data-view-state="welcome"] .composer {
    position: sticky !important;
    top: auto;
    right: 0;
    bottom: var(--mobile-browser-bottom-offset, 0px);
    left: 0;
    z-index: 55;
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
    padding: 0 10px 8px;
  }

  body.mobile-composer-focus-active:not(.mobile-keyboard-active)[data-view-state="welcome"] .composer {
    top: auto;
    bottom: var(--mobile-browser-bottom-offset, 0px);
  }

  .composer-shell {
    padding: 12px 14px;
    border-radius: 26px;
    transition:
      padding 180ms var(--ease),
      border-radius 180ms var(--ease);
  }

  .composer textarea {
    min-height: 40px;
    max-height: min(30dvh, 148px);
    padding: 8px 12px 12px;
    font-size: 16px;
  }

  .composer-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .composer-shell > .composer-actions {
    transform: none;
    backface-visibility: visible;
  }

  .composer-left-tools,
  .composer-right-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    min-width: 0;
    gap: 8px;
  }

  .composer-left-tools {
    flex: 0 1 auto;
    width: auto;
  }

  .composer-right-tools {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .composer-icon-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 999px;
  }

  .composer-model-button {
    width: auto;
    min-width: 92px;
    max-width: 116px;
    min-height: 42px;
    justify-content: center;
    padding-inline: 14px;
  }

  .composer-model-button #composerModelLabel {
    font-size: 0;
  }

  .composer-model-button #composerModelLabel::after {
    content: "Модель";
    font-size: 0.78rem;
    font-weight: 600;
  }

  .composer-model-button .composer-chevron {
    display: none;
  }

  .send-button-round {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
  }

  .composer-meta-row {
    margin-top: 8px;
  }

  body.mobile-keyboard-active .conversation-panel {
    padding-top: 44px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  body.mobile-keyboard-active .main-panel {
    transform: none;
  }

  body.mobile-keyboard-active[data-view-state="conversation"] .main-panel {
    grid-template-rows: auto minmax(0, 1fr) 0px;
  }

  body.mobile-keyboard-active .composer,
  body.mobile-keyboard-active[data-view-state="welcome"] .composer {
    position: sticky !important;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    background: var(--browser-chrome-bg, var(--bg-gradient-end));
    padding-bottom: 8px;
  }

  /* kb-jump fix (round-15): was position: fixed; bottom: var(--keyboard-inset).
     This stale round-11 rule fought the round-12 sticky architecture
     (82_round12_mobile_fixes.css) for the SAME selector: both set the
     composer position with !important and equal specificity, so which
     one "won" the paint depended on source order/browser tie-breaking,
     and the position TYPE itself flipped between fixed and sticky across
     reflows/renders — a type change can never animate, hence the snap.
     Bringing this in line with round-12 (sticky, bottom: 0) removes the
     conflict; round-12 remains the single source of truth for this
     selector and now simply re-asserts the same values. */
  body.mobile-keyboard-active[data-view-state="conversation"] .composer {
    position: sticky !important;
    top: auto;
    right: 0;
    bottom: 0 !important;
    left: 0;
    background: transparent !important;
    transition: none !important;
    will-change: auto;
  }

  body.mobile-keyboard-active[data-view-state="conversation"] .conversation-panel,
  body.mobile-keyboard-active[data-view-state="conversation"] .workspace-view,
  body.mobile-keyboard-active[data-view-state="conversation"] .conversation-stage {
    background: transparent !important;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  body.mobile-keyboard-active[data-view-state="conversation"] .messages {
    --conversation-keyboard-composer-space: calc(max(var(--composer-visual-height, 142px), 142px) + 16px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
    padding-bottom: var(--conversation-keyboard-composer-space);
    scroll-padding-bottom: var(--conversation-keyboard-composer-space);
  }

  /* kb-jump fix (round-15): was position: fixed; bottom: var(--keyboard-inset),
     which OVERRODE the sticky rule at L301-311 within this same file for
     the identical selector (last-declaration-wins at equal specificity).
     Unify on round-12's sticky + bottom: 0 so there is no second override
     re-introducing the fixed/sticky conflict for the welcome composer. */
  body.mobile-keyboard-active[data-view-state="welcome"] .composer {
    position: sticky !important;
    top: auto;
    bottom: 0 !important;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .conversation-panel,
  body.mobile-keyboard-active[data-view-state="welcome"] .workspace-view,
  body.mobile-keyboard-active[data-view-state="welcome"] .conversation-stage {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-view {
    padding-bottom: calc(var(--composer-visual-height, 128px) + 12px);
  }

  body.mobile-keyboard-active[data-view-state="conversation"] .messages[data-turn-anchor-spacer="true"] {
    padding-bottom: var(--conversation-keyboard-composer-space);
    scroll-padding-bottom: var(--conversation-keyboard-composer-space);
  }

  body[data-view-state="conversation"] .composer-mode-anchor {
    display: none !important;
  }

  body.mobile-keyboard-active .composer-mode-anchor {
    top: auto;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .composer-mode-anchor {
    top: calc(58px + env(safe-area-inset-top));
  }
}

@media (max-width: 420px) {
  body[data-view-state="welcome"] .composer-mode-anchor {
    width: min(220px, calc(100vw - 132px));
  }
}

@media (max-width: 360px) {
  .composer-mode-anchor {
    flex-basis: 78px;
    width: 78px;
  }

  body[data-view-state="welcome"] .composer-mode-anchor {
    width: min(204px, calc(100vw - 118px));
  }
}

@media (max-width: 720px) {
  .settings-drawer {
    z-index: 140;
  }

  .settings-backdrop {
    z-index: 0;
  }

  .settings-card {
    z-index: 1;
  }

  .message[data-role="assistant"] .message-body {
    padding-left: 0;
  }

  .message[data-role="assistant"] .message-meta {
    padding-left: 46px;
  }

  .inspector-panel,
  .inspector-panel-shell,
  .inspector-panel-copy,
  .inspector-content,
  .inspector-section,
  .inspector-card,
  .inspector-empty-state,
  .project-space-artifacts,
  .project-space-artifacts-toolbar,
  .project-space-artifact-grid,
  .project-space-artifact-card,
  .project-space-artifact-body,
  .inspector-artifact-grid,
  .inspector-artifact-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .inspector-panel-shell {
    overflow: hidden;
  }

  .inspector-content {
    overflow-x: hidden;
  }

  .project-space-artifacts-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .project-space-artifacts-toolbar .assistant-approval-action {
    justify-self: start;
    max-width: 100%;
  }

  .inspector-panel-description,
  .inspector-card-copy,
  .inspector-empty-copy,
  .project-space-artifact-meta,
  .project-space-artifact-source,
  .inspector-artifact-card strong,
  .inspector-artifact-card span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .message[data-role="assistant"] .message-body {
    padding-left: 0;
  }

  .message[data-role="assistant"] .message-meta {
    padding-left: 40px;
  }
}

@media (max-width: 720px) {
  body[data-view-state="conversation"]:not(.mobile-keyboard-active) .conversation-panel {
    padding-top: 14px;
  }

  body[data-view-state="conversation"]:not(.mobile-keyboard-active) .messages {
    scroll-padding-top: 14px;
  }
}

@media (max-width: 720px) {
  .response-feedback-panel {
    justify-self: stretch;
    width: 100%;
    padding: 0;
  }

  .response-feedback-main {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .response-feedback-copy {
    align-items: flex-start;
    text-align: left;
  }

  .response-feedback-actions {
    justify-content: flex-end;
    margin-left: auto;
  }

  .assistant-message-footer {
    padding-bottom: 8px;
  }

  .assistant-message-copy-slot .message-copy-button,
  .response-feedback-button {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .message[data-role="user"] .message-meta {
    padding-left: 8px;
    box-sizing: border-box;
  }

  .message[data-role="assistant"] .message-meta {
    padding-left: 54px;
  }
}

@media (max-width: 480px) {
  .message[data-role="assistant"] .message-meta {
    padding-left: 48px;
  }
}

@media (max-width: 720px) {
  .project-artifacts-topbar-button {
    display: none !important;
  }

  .project-tasks-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--project-control-bg);
    box-shadow: var(--topbar-control-shadow);
  }

  .project-tasks-button::after {
    inset: 0;
    border-color: var(--project-control-current-border);
    border-radius: inherit;
  }

  .project-tasks-button:hover,
  .project-tasks-button.active {
    transform: none;
    background: var(--project-control-hover-bg);
    box-shadow: var(--topbar-control-shadow-hover);
  }

  .project-tasks-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    opacity: 1;
  }

  .project-tasks-icon svg {
    transform: translateZ(0);
  }

  body[data-theme="dark"] .project-tasks-button {
    background: var(--project-control-bg);
    box-shadow: var(--topbar-control-shadow);
  }

  body[data-theme="dark"] .project-tasks-button::after {
    border-color: var(--project-control-current-border);
  }
}

@media (min-width: 721px) {
  .inspector-panel.is-collapsed {
    display: none;
  }
}

@media (max-width: 720px) {
  .telegram-agent-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .telegram-agent-primary {
    width: 100%;
  }

  .telegram-agent-entry-action {
    width: auto;
    max-width: 46vw;
    justify-self: end;
    margin-left: auto;
  }

  .telegram-agent-panel,
  .telegram-agent-section {
    min-width: 0;
  }

  .telegram-agent-section {
    padding: 12px;
  }

  .telegram-agent-section-head,
  .telegram-agent-item-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .telegram-agent-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .telegram-agent-fields input,
  .telegram-agent-fields select,
  .telegram-agent-fields textarea {
    font-size: 0.86rem;
  }

  .telegram-agent-actions .ghost-button,
  .telegram-agent-manual-row .ghost-button {
    flex: 1 1 100%;
    min-height: 42px;
  }

  .telegram-agent-prompt-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .telegram-agent-prompt-actions .ghost-button {
    min-height: 42px;
  }

  .telegram-agent-accent {
    min-height: 34px;
  }

  .telegram-agent-preview,
  .telegram-agent-meta span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* File role: final override for horizontally scrollable assistant tables. */
.assistant-answer .assistant-table-wrap[data-table-scroll="x"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.assistant-answer .assistant-table-wrap[data-table-scroll="x"] .assistant-markdown-table {
  width: var(--assistant-table-min-width, 960px) !important;
  min-width: var(--assistant-table-min-width, 960px) !important;
  max-width: none !important;
  table-layout: fixed;
}

.assistant-answer .assistant-table-wrap[data-table-scroll="x"] :where(th, td, a, code, span, strong, em) {
  max-width: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}

/* ==========================================================================
   File role: Round-2 Perplexity-parity polish (loads LAST, wins cascade).
   Covers: theme-aware safe-area fills (2), auth+home mesh animation without
   circle (3,6), Perplexity-style message layout (4), compact density (5),
   admin button contrast (8), responsive tables (9), blur-fade dialog edges
   and minimal composer (10). CSS-only; no DOM/logic changes.
   ========================================================================== */

/* ----- shared round-2 tokens ----- */
:root{
  --r2-user-bubble: rgba(127,140,158,0.14);
  --r2-safe-fill: var(--bg-gradient-end, #ffffff);
}
body[data-theme="dark"]{
  --r2-user-bubble: rgba(255,255,255,0.10);
  --r2-safe-fill: #05070a;
}
body[data-theme="light"]{
  --r2-user-bubble: rgba(15,23,32,0.06);
  --r2-safe-fill: #ffffff;
}

/* ==========================================================================
   BUG 2 — top/bottom safe-area strips must follow the theme.
   The html/body root paint the area behind the status bar and the home-bar;
   force them to the theme background so they flip on dark<->light.
   ========================================================================== */
/* body-scoped var covers the body paint */
body{
  background-color: var(--r2-safe-fill) !important;
}
/* <html> paints the area behind the OS status bar / home indicator; data-theme
   lives on <body>, so drive the html fill via :has() on the themed body. */
html:has(body[data-theme="dark"]){ background-color: #05070a !important; }
html:has(body[data-theme="light"]){ background-color: #ffffff !important; }
/* Fallback for engines without :has(): inherit from body via transparent html. */
@supports not (selector(:has(*))){
  html{ background-color: var(--r2-safe-fill, #05070a) !important; }
}

/* ==========================================================================
   BUG 4 — Perplexity message layout.
   User: compact, RIGHT, soft neutral bubble. Assistant: LEFT, no bubble.
   ========================================================================== */
.message[data-role="user"] .message-body,
.message[data-role="assistant"] .message-body{
  grid-template-columns: minmax(0,1fr) !important;
}
.message[data-role="user"] .message-text{
  width: fit-content !important;
  max-width: min(var(--message-text-max-width, 640px), 82%) !important;
  margin-left: auto !important;
  justify-self: end !important;
  background: var(--r2-user-bubble) !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 9px 14px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}
.message[data-role="user"] .message-meta{
  justify-content: flex-end !important;
}
.message[data-role="assistant"] .message-text{
  max-width: 100% !important;
}

/* ==========================================================================
   BUG 5 — compact density (match Perplexity plating).
   ========================================================================== */
:root{
  --message-text-max-width: 760px;
}
.messages{ gap: 2px; }
.message{ padding: 8px 0 !important; }
.message-meta{ font-size: 0.72rem !important; gap: 8px !important; }
.assistant-answer{ font-size: 0.95rem; line-height: 1.6; }
.assistant-answer h1{ font-size: 1.14rem !important; }
.assistant-answer h2{ font-size: 1.05rem !important; }
.assistant-answer h3, .assistant-answer h4{ font-size: 0.98rem !important; }
.assistant-answer ol, .assistant-answer ul{ gap: 5px !important; padding-left: 20px !important; }
/* topbar pills / controls a touch smaller */
.topbar{ padding-top: 8px !important; }
.mode-switch, .mode-pill, .topbar-pill{ font-size: 0.82rem; }
.composer-pill-button, .composer-icon-button{ transform: scale(0.94); transform-origin: center; }

/* ==========================================================================
   BUG 8 — "Сгенерировать ссылки" (auth-primary in dark settings):
   force the teal gradient so the dark text stays readable.
   ========================================================================== */
body[data-theme="dark"] .settings-card .admin-generate-button.auth-primary,
body[data-theme="dark"] .admin-generate-button.auth-primary,
.admin-generate-button.auth-primary{
  background: linear-gradient(135deg, #2ee6c8 0%, var(--accent) 100%) !important;
  color: #05201d !important;
  border: 0 !important;
  box-shadow: 0 12px 26px rgba(22,194,184,0.28) !important;
}

/* ==========================================================================
   BUG 9 — response tables fit the viewport, wrap content, soft shadow.
   ========================================================================== */
.assistant-answer .assistant-table-wrap,
.assistant-answer .assistant-table-wrap[data-table-scroll="x"]{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--accent-rgb),0.16) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  scrollbar-gutter: auto !important;
}
.assistant-answer .assistant-table-wrap .assistant-markdown-table,
.assistant-answer .assistant-table-wrap[data-table-scroll="x"] .assistant-markdown-table{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: auto !important;
  font-size: 0.85rem !important;
}
.assistant-answer .assistant-markdown-table th,
.assistant-answer .assistant-markdown-table td{
  min-width: 0 !important;
  padding: 8px 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* ==========================================================================
   BUG 7 — settings sticky section heading overlaps the block above/below.
   Drop the pinning; render as a clean, fully-opaque section label with
   clear spacing so it can never overlap adjacent rows during scroll.
   ========================================================================== */
.settings-grid .settings-section-heading{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 16px 0 6px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-accent="aurora"] .settings-grid .settings-section-heading{
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.05)),
    var(--surface) !important;
}
@media (max-width: 720px){
  .settings-grid .settings-section-heading{
    position: static !important;
    top: auto !important;
    margin: 14px 0 6px !important;
  }
}

/* ==========================================================================
   BUG 3 & 6 — animation without the circle.
   Auth (login/password/register): mesh spans the card, "Аврора" overlaid.
   Home: full-width mesh panel, no circle, wordmark overlaid.
   ========================================================================== */

/* --- AUTH: overlay wordmark on the mesh, drop the circle --- */
.auth-card-top .logo-lockup{
  position: relative;
  display: grid !important;
  justify-items: center;
  width: 100%;
  min-height: 132px;
}
.auth-card-top .auth-hero-puchok{
  position: relative !important;
  width: 100% !important;
  height: 132px !important;
  margin: 0 !important;
  border-radius: 20px !important;      /* soft rectangle, NOT a circle */
  overflow: hidden !important;
  /* filled panel so the rounded rectangle reads intentionally even where the
     live mesh canvas fades toward its edges */
  background:
    radial-gradient(120% 140% at 50% 40%, rgba(var(--accent-rgb),0.20), transparent 70%),
    linear-gradient(160deg, #0a2b29 0%, #06181a 100%) !important;
}
.auth-card-top .auth-hero-puchok.particle-blob,
.auth-card-top .auth-hero-puchok .particle-blob-canvas{
  border-radius: 20px !important;
}
.auth-card-top .logo-lockup .logo-text{
  position: absolute !important;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.auth-card-top .logo-lockup .logo-text strong{
  font-size: clamp(2.1rem, 8vw, 2.9rem) !important;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  letter-spacing: -0.01em;
}

/* --- HOME: full mesh panel, no circle, wordmark overlaid --- */
body[data-view-state="welcome"] .welcome-orb,
.welcome-orb{
  width: 100% !important;
  height: clamp(200px, 42vh, 360px) !important;
  max-width: 640px !important;
  margin: 8px auto 10px !important;
  border-radius: 24px !important;      /* soft panel, not a circle */
  overflow: hidden !important;
  position: relative !important;
  background:
    radial-gradient(120% 140% at 50% 40%, rgba(var(--accent-rgb),0.18), transparent 72%),
    linear-gradient(160deg, #0a2b29 0%, #06181a 100%) !important;
}
body[data-theme="light"] .welcome-orb,
body[data-theme="light"] .auth-card-top .auth-hero-puchok{
  background:
    radial-gradient(120% 140% at 50% 40%, rgba(var(--accent-rgb),0.16), transparent 72%),
    linear-gradient(160deg, #0c8f88 0%, #0a6f6a 100%) !important;
}
.welcome-orb .particle-blob,
.welcome-orb .particle-blob-hero,
.welcome-orb .particle-blob-canvas{
  border-radius: 24px !important;
  width: 100% !important;
  height: 100% !important;
}
/* Wordmark centered over the home mesh. */
.welcome-orb::after{
  content: "Аврора";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 3px 22px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* ==========================================================================
   BUG 10 — dialog stage like Perplexity: soft blur-fade at top & bottom
   instead of hard plates; keep the composer minimal.
   ========================================================================== */
.conversation-panel{
  position: relative;
}
/* top + bottom fade masks over the scrolling stage */
.conversation-stage{
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 96px), transparent 100%);
}
body[data-view-state="welcome"] .conversation-stage{
  -webkit-mask-image: none;
          mask-image: none;
}
/* minimal composer: tighter padding, soft translucent shell */
.composer{ padding-bottom: 14px !important; }
.composer-shell{ padding: 6px 8px !important; }
.composer-shell::before{
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.composer textarea{
  font-size: 16px !important;   /* keep no-zoom on iOS (intentional) */
  line-height: 1.45 !important;
}

/* ==========================================================================
   File role: Round-3 polish (loads LAST after 72, wins cascade).
   Fixes the 8-point round-3 list:
   1  auth mesh: remove the boxed rectangle; keep the live animation on ALL
      auth steps (incl. password); desktop too.
   2  home mesh: remove the boxed rectangle; desktop too.
   3  mobile: hide the sidebar "Аврора" brand wordmark (home already shows it);
      desktop: hide the "Аврора" wordmark painted over the animation instead.
   4  composer/stage fade must not cover the copy / feedback buttons.
   5  history (sidebar) scroll gets the same soft top/bottom fade as the chat.
   6  (superseded by round 4) composer compaction now lives in 74_round4_polish.
   7  mobile: user msg drops copy + time; assistant time moves to the bottom
      next to the copy button. Desktop unchanged.
   8  PWA standalone: correct safe-area padding so nothing shifts; no bottom bar.
   CSS-only; no DOM / logic changes.
   ========================================================================== */

/* ==========================================================================
   BUG 1 + 2 — remove the rectangle behind the animation.
   Drop the solid gradient fill, the box border-radius framing and the clip so
   the particle mesh floats freely; keep it visible on every auth step.
   Overrides the round-2 panel styling in 72_*.css.
   ========================================================================== */

/* --- AUTH hero: no rectangle, mesh floats, always visible --- */
.auth-card-top .logo-lockup{
  min-height: 150px !important;
}
.auth-card-top .auth-hero-puchok{
  background: none !important;          /* kill the solid teal rectangle */
  border-radius: 0 !important;
  overflow: visible !important;
  height: 150px !important;
  width: 100% !important;
  filter: saturate(1.05);
}
.auth-card-top .auth-hero-puchok.particle-blob,
.auth-card-top .auth-hero-puchok .particle-blob-canvas{
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
}
/* keep the live mesh painting on EVERY auth step (email/password/register) */
.auth-shell .auth-hero-puchok,
.auth-shell .auth-hero-puchok .particle-blob-canvas{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- HOME orb: no rectangle, mesh floats --- */
body[data-view-state="welcome"] .welcome-orb,
.welcome-orb{
  background: none !important;          /* kill the solid teal rectangle */
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
body[data-theme="light"] .welcome-orb,
body[data-theme="light"] .auth-card-top .auth-hero-puchok{
  background: none !important;
}
.welcome-orb .particle-blob,
.welcome-orb .particle-blob-hero,
.welcome-orb .particle-blob-canvas{
  border-radius: 0 !important;
  background: none !important;
}

/* ==========================================================================
   BUG 3 — wordmark placement differs by breakpoint.
   Mobile  (<=720px): keep the wordmark over the animation, but hide the
                      sidebar brand "Аврора" (home screen already shows it).
   Desktop (>=721px): remove the "Аврора" wordmark painted over the animation.
   ========================================================================== */

/* Desktop: remove wordmark over the auth + home animation */
@media (min-width: 721px){
  .auth-card-top .logo-lockup .logo-text{ display: none !important; }
  .welcome-orb::after{ content: none !important; display: none !important; }
}

/* Mobile: hide the sidebar brand wordmark button (keep "Новый диалог") */
@media (max-width: 720px){
  .sidebar .brand-block .logo-button{ display: none !important; }
}

/* ==========================================================================
   BUG 4 — the stage fade / composer blur must not clip the action buttons
   (copy / feedback). Shrink the bottom fade and add clearance so the last
   message footer sits fully above the fade + composer.
   ========================================================================== */
.conversation-stage{
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%) !important;
  padding-bottom: 12px !important;
}
body[data-view-state="welcome"] .conversation-stage{
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* ensure the assistant footer (copy + feedback) has breathing room */
.assistant-message-footer,
.message-footer{
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}
/* the last message needs clearance so the composer never sits on the buttons */
.messages > .message:last-child{
  margin-bottom: 12px !important;
}

/* ==========================================================================
   BUG 5 — history (sidebar) scroll gets the same soft top/bottom fade.
   ========================================================================== */
.sidebar-scroll{
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
}

/* ==========================================================================
   BUG 6 (round-3) — REMOVED in round 4.
   По уточнению: композер должен сжиматься ПО ВЫСОТЕ (вниз), а не вправо.
   Новая компактная верстка — в 74_round4_polish.css (BUG 5 раунда 4).
   ========================================================================== */

/* ==========================================================================
   BUG 7 — MOBILE ONLY message meta / actions.
   User message: no copy button, no meta (role + time).
   Assistant message: hide top meta role, move the time to the bottom next to
   the copy button (reorder the grid so meta renders after the answer).
   Desktop: everything unchanged.
   ========================================================================== */
@media (max-width: 720px){
  /* user: drop copy + meta entirely */
  .message[data-role="user"] .message-copy-button,
  .message[data-role="user"] .message-copy-slot,
  .message[data-role="user"] .message-meta{
    display: none !important;
  }

  /* assistant: allow reordering the grid children */
  .message[data-role="assistant"] .message-body{
    display: grid !important;
  }
  /* move the whole meta below the answer, hide the role label + avatar,
     keep just the time so it sits with the footer copy button */
  .message[data-role="assistant"] .message-meta{
    order: 20 !important;
    margin-top: 2px !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
  }
  .message[data-role="assistant"] .message-meta .message-role,
  .message[data-role="assistant"] .message-meta .message-avatar{
    display: none !important;
  }
  .message[data-role="assistant"] .message-meta .message-time{
    display: inline-flex !important;
  }
  /* the footer (copy + feedback) keeps its own order; place it right after
     the answer, just above the relocated time so they read as one row */
  .message[data-role="assistant"] .assistant-message-footer,
  .message[data-role="assistant"] .message-footer{
    order: 19 !important;
    margin-top: 4px !important;
  }
}

/* ==========================================================================
   BUG 8 — PWA standalone: keep the layout from shifting and drop the phantom
   bottom bar. Apply safe-area insets on the app frame (not on <html>) so the
   status bar / home indicator are respected without pushing content.
   ========================================================================== */
@media (display-mode: standalone){
  /* paint behind the notch / home indicator with the theme colour */
  html, body{
    background-color: var(--r2-safe-fill) !important;
  }
  /* top inset goes on the sticky topbar and the auth card, not the whole body,
     so nothing "jumps" and the content starts below the status bar */
  .main-panel .topbar{
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }
  .auth-shell{
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  }
  /* bottom: the composer clears the home indicator; no extra plate below it */
  .composer{
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar{
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ==========================================================================
   File role: Round-4 polish (loads LAST after 73, wins cascade).
   Fixes the 6-point round-4 list:
   1  animation must have NO visible border/clip edge — soft radial edge fade
      on the auth hero + welcome orb (mobile + desktop, all themes).
   2  remove the checkered grid texture from the app backdrop (body::before).
   3  mobile: theme colour must not disappear while typing (keyboard open) —
      the theme gradient now lives on a viewport-fixed layer.
   4  plan infographic (e.g. "Скрининг источников"): the ring marker + line
      were clipped by `contain: paint` — unclip and nudge inward.
   5  in-conversation composer shrinks DOWN (compact single row, full width),
      replacing the round-3 right-shrink. Mobile only.
   6  assistant answer time sits on the SAME row as the copy button (mobile).
   CSS-only; no DOM / logic changes.
   ========================================================================== */

/* ==========================================================================
   BUG 1 — no visible boundary cutting the animation.
   The mesh canvas is a rectangle; its hard edges showed as a "border".
   A soft elliptical mask fades the painting to transparent BEFORE the box
   edge on every side, so nothing ever looks cropped. Applies to all auth
   steps, the home orb, both themes, mobile + desktop.
   ========================================================================== */
.auth-card-top .auth-hero-puchok,
.welcome-orb{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%,
      #000 52%, rgba(0, 0, 0, 0.55) 78%, transparent 99%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%,
      #000 52%, rgba(0, 0, 0, 0.55) 78%, transparent 99%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.auth-card-top .auth-hero-puchok .particle-blob-canvas,
.welcome-orb .particle-blob-canvas{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BUG 2 + 3 — backdrop: kill the checkered grid AND make the theme gradient
   viewport-fixed. body::before used to draw the grid pattern; it is already
   position:fixed + inset:0, so we repurpose it to carry the SAME gradient the
   body paints. Result: no grid anywhere, and when the mobile keyboard opens
   (page scrolls / viewport shrinks) the theme colour never disappears —
   the fixed layer always covers the whole screen. Works in both themes and
   in PWA standalone (covers the safe areas too).
   ========================================================================== */
body::before{
  z-index: -1;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), calc(var(--bg-accent-alpha) + var(--mode-accent-alpha-shift))), transparent 30%),
    radial-gradient(circle at top right, rgba(var(--orb-glow-rgb), calc(var(--bg-orb-alpha) + var(--mode-orb-alpha-shift))), transparent 28%),
    linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 52%, var(--bg-gradient-end) 100%) !important;
  background-size: auto !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   BUG 4 — plan / progress infographic ("Скрининг источников").
   The step ring (::before at left:-4px) pokes outside .thinking-stack, which
   declares `contain: layout paint` — paint containment CLIPS it, leaving a
   broken half-circle and a stray line. Drop the paint clip and nudge the
   screening block inward so the ring + connector line always render whole.
   ========================================================================== */
.thinking-stack{
  contain: layout;
}
.thinking-screening{
  margin-left: 5px;
}

/* ==========================================================================
   BUG 5 — MOBILE ONLY: the in-conversation composer shrinks DOWN, not right.
   Full width again, but compact: one Perplexity-style row — the text field
   and the action buttons (+ / mode / voice) share a single line, so the
   whole composer is about half its previous height. Welcome screen and
   desktop stay unchanged.
   ========================================================================== */
@media (max-width: 720px){
  /* restore full width (undo any right-pinning) */
  body:not([data-view-state="welcome"]) .composer{
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
    justify-items: stretch !important;
  }
  body:not([data-view-state="welcome"]) .composer .composer-layout,
  body:not([data-view-state="welcome"]) .composer .react-composer-layout{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: stretch !important;
  }
  body:not([data-view-state="welcome"]) .composer .composer-column{
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  /* compact single row: textarea + actions inline */
  body:not([data-view-state="welcome"]) .composer-shell{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 6px !important;
    padding: 5px 7px !important;
    border-radius: 24px !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell > textarea{
    flex: 1 1 110px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    max-height: 88px !important;
    padding: 8px 4px !important;
  }
  /* placeholder must fit the narrower single-row field on one line
     (input font itself stays 16px — the iOS no-zoom rule is untouched) */
  body:not([data-view-state="welcome"]) .composer-shell > textarea::placeholder{
    font-size: 13px;
  }
  body:not([data-view-state="welcome"]) .composer-shell > .composer-actions{
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 6px !important;
  }
  /* attachment previews take their own full-width row above the field */
  body:not([data-view-state="welcome"]) .composer-shell > .composer-attachments{
    flex: 1 1 100% !important;
    order: -1 !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell > .composer-meta-row{
    flex: 1 1 100% !important;
  }
}

/* ==========================================================================
   BUG 6 — MOBILE ONLY: the assistant answer time sits on the SAME line as
   the copy button (round 3 put it on its own row below). The meta block is
   lifted into the footer row, right after the copy button. When a message
   has no footer yet (still streaming) the meta keeps the round-3 flow
   placement below the answer. Desktop unchanged.
   ========================================================================== */
@media (max-width: 720px){
  .message[data-role="assistant"] .message-body{
    position: relative !important;
  }
  .message[data-role="assistant"] .message-body:has(.assistant-message-footer) .message-meta,
  .message[data-role="assistant"] .message-body:has(.message-footer) .message-meta{
    position: absolute !important;
    left: 42px !important;
    right: auto !important;
    bottom: 11px !important;
    width: max-content !important;
    max-width: 60vw !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    pointer-events: none;
    z-index: 2;
  }
}

/* ==========================================================================
   75_round5_polish.css — Round-5 polish (2026-07-16).
   1  mobile welcome + keyboard: keep the theme colour/animation above the
      composer (no hard cut line, no flat plate).
   2  settings: card fills the real viewport — no big empty strip below.
   3  settings: "ты/вы" segmented switch — wider, even halves, prettier.
   4  assistant time: truly centered against copy / feedback buttons.
   5  chat composer (mobile): smaller uniform buttons, hide them while the
      keyboard is open, placeholder vertically centered.
   6  mobile topbar: theme/incognito/GodMod live in Settings now (markup
      moved in index.html); notifications icon-only on the right styled
      like the sidebar button; mode pill raised into the topbar row.
   7  desktop topbar: the same treatment.
   ========================================================================== */

/* ==========================================================================
   BUG 1 — mobile keyboard: no flat plates over the fixed theme gradient,
   and the welcome mesh shrinks to fit the visual viewport instead of being
   clipped mid-gradient.
   ========================================================================== */
@media (max-width: 720px){
  body.mobile-keyboard-active #app,
  body.mobile-keyboard-active .shell,
  body.mobile-keyboard-active .main-panel,
  body.mobile-keyboard-active .conversation-panel,
  body.mobile-keyboard-active .workspace-view,
  body.mobile-keyboard-active .conversation-stage,
  .shell,
  .main-panel,
  .conversation-panel,
  .workspace-view,
  .conversation-stage{
    background: transparent !important;
  }
  /* on welcome the composer floats over the mesh gradient with no plate */
  body.mobile-keyboard-active[data-view-state="welcome"] .composer{
    background: transparent !important;
  }
  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-orb{
    width: 100% !important;
    height: clamp(120px, calc(var(--visual-viewport-height, 100svh) * 0.30), 240px) !important;
    margin: 4px auto 8px !important;
  }
  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-view{
    overflow: visible !important;
  }
}

/* ==========================================================================
   BUG 2 — settings card must fill the real viewport height; kill the big
   empty strip that appears when --app-viewport-height is stale.
   ========================================================================== */
@media (max-width: 720px){
  .settings-card{
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .settings-grid{
    margin-bottom: 0 !important;
  }
}
.admin-panel[hidden]{ display: none !important; }

/* ==========================================================================
   BUG 3 — "ты/вы" segmented switch: full-width, even halves, teal active.
   ========================================================================== */
.setting-row:has(> .setting-segmented),
.setting-row-stack:has(.setting-segmented){
  justify-content: stretch !important;
  justify-items: stretch !important;
}
.setting-segmented{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: auto;
  justify-self: stretch;
  align-self: stretch;
  max-width: 360px;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.06);
}
.setting-segmented button{
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.94rem;
  border-radius: 999px;
}
.setting-segmented button.active{
  background: linear-gradient(135deg, #2ee6c8 0%, var(--accent) 100%);
  color: #05201d;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(22, 194, 184, 0.25);
}
@media (max-width: 720px){
  .setting-segmented{ max-width: none; }
}

/* ==========================================================================
   BUG 4 — assistant time: center against the copy / feedback buttons.
   (Same selector as 74; later file order wins. Empirically the time sat
   ~3.5px high on device, so 11px -> 7.5px.)
   ========================================================================== */
@media (max-width: 720px){
  .message[data-role="assistant"] .message-body:has(.assistant-message-footer) .message-meta,
  .message[data-role="assistant"] .message-body:has(.message-footer) .message-meta{
    bottom: 7.5px !important;
  }
}

/* ==========================================================================
   BUG 5 — chat composer (mobile): compact uniform controls; controls hide
   entirely while the keyboard is open; placeholder vertically centered.
   ========================================================================== */
@media (max-width: 720px){
  body:not([data-view-state="welcome"]) .composer-shell{
    align-items: center !important;
    padding: 6px 8px !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell > textarea{
    align-self: center !important;
    min-height: 36px !important;
    max-height: 88px !important;
    padding: 8px 6px !important;
    line-height: 20px !important;
  }
  /* uniform compact controls: 36px tall, icon buttons 36px square */
  body:not([data-view-state="welcome"]) .composer-shell .composer-actions{
    align-items: center !important;
    gap: 6px !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell .composer-icon-button{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    transform: none !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell .composer-pill-button{
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    transform: none !important;
  }
  body:not([data-view-state="welcome"]) .composer-shell .send-button-round{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  /* while typing (keyboard open) the buttons disappear entirely */
  body.mobile-keyboard-active:not([data-view-state="welcome"]) .composer-shell .composer-actions{
    display: none !important;
  }
}

/* ==========================================================================
   BUG 6 + 7 — topbar rework (mobile & desktop).
   Theme / incognito / GodMod moved into Settings (markup change).
   Notifications: icon-only, no pill outline, styled like the sidebar button.
   ========================================================================== */
.project-tasks-button{
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}
.project-tasks-button::after{
  content: none !important;
}
.project-tasks-button .project-tasks-button-label{
  display: none !important;
}
body[data-theme="dark"] .project-tasks-button{
  background: rgba(16, 20, 24, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.topbar-actions{
  justify-self: end !important;
  align-items: center !important;
}

/* --- welcome mode pill lifted into the topbar row (mobile) --- */
@media (max-width: 720px){
  body[data-view-state="welcome"] .composer-mode-anchor{
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    z-index: 31 !important;
    width: min(210px, calc(100vw - 136px)) !important;
  }
  body[data-view-state="welcome"] .composer-mode-anchor .composer-research-switch{
    padding: 4px !important;
  }
  body[data-view-state="welcome"] .composer-mode-anchor .composer-research-option{
    min-height: 34px !important;
  }
}


/* ==========================================================================
   Settings: quick-actions row (theme / incognito / GodMod) — top block.
   ========================================================================== */
.setting-row.quick-actions-row{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px !important;
}
.quick-actions-row .theme-toggle-button,
.quick-actions-row .incognito-toggle-button,
.quick-actions-row .godmod-toggle-button{
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--control-bg) !important;
  color: var(--text) !important;
  font-size: 0.88rem !important;
  white-space: nowrap !important;
}
.quick-actions-row .theme-toggle-label,
.quick-actions-row .incognito-toggle-label{
  display: inline !important;
}
.quick-actions-row .incognito-toggle-button[aria-pressed="true"],
.quick-actions-row .godmod-toggle-button.active{
  background: rgba(var(--accent-rgb), 0.14) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  color: var(--accent) !important;
}
#godModeReactMount:not([hidden]){
  display: contents !important;
}
body[data-theme="dark"] .quick-actions-row .theme-toggle-button,
body[data-theme="dark"] .quick-actions-row .incognito-toggle-button,
body[data-theme="dark"] .quick-actions-row .godmod-toggle-button{
  background: rgba(16, 20, 24, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   76_round6_polish.css — Round-6 polish (2026-07-16).
   1  desktop composer: smaller placeholder & «Диалог/Проект» text, all bar
      controls one height (like the attachments button), one text size,
      vertically centered.
   2  settings: uniform spacing between section headings and their blocks.
   3  settings: theme / incognito / GodMod buttons equal width.
   4  desktop topbar: sidebar & notifications buttons lower from the top.
   5  dark theme: quick-actions plate dark, buttons/icons/labels light.
   6  GodMod active: theme & incognito hide, GodMod stretches across.
   7  dark theme: voice button plate matches the theme (teal-black, not navy).
   ========================================================================== */

/* ==========================================================================
   BUG 1 — desktop composer bar: uniform 34px controls, one text size.
   ========================================================================== */
@media (min-width: 721px){
  .composer textarea,
  .react-composer-shell textarea{
    font-size: 14px !important;
  }
  .composer textarea::placeholder{
    font-size: 14px !important;
  }
  .composer-shell .composer-actions{
    align-items: center !important;
  }
  .composer-shell .composer-left-tools,
  .composer-shell .composer-right-tools{
    align-items: center !important;
  }
  .composer-shell .composer-icon-button,
  .composer-shell .composer-pill-button{
    transform: none !important;
  }
  .composer-shell .composer-icon-button{
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }
  .composer-shell .composer-research-switch{
    padding: 3px !important;
  }
  .composer-shell .composer-research-option{
    min-height: 26px !important;
    padding: 0 12px !important;
    font-size: 0.875rem !important;
  }
  .composer-shell .composer-pill-button{
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 0.875rem !important;
  }
  .composer-shell .send-button,
  .composer-shell .send-button-round{
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   BUG 2 — settings: uniform spacing around section headings.
   ========================================================================== */
.settings-grid{
  gap: 12px !important;
}
.settings-grid .settings-section-heading{
  margin-top: 8px !important;
  margin-bottom: -4px !important;
}

/* ==========================================================================
   BUG 3 — quick-actions buttons: equal widths (one size).
   ========================================================================== */
.quick-actions-row .theme-toggle-button,
.quick-actions-row .incognito-toggle-button,
.quick-actions-row .godmod-toggle-button{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 720px){
  /* three equal buttons must fit a narrow row: drop icons, tighten text */
  .quick-actions-row .theme-toggle-icon,
  .quick-actions-row .incognito-toggle-icon{
    display: none !important;
  }
  .quick-actions-row .theme-toggle-button,
  .quick-actions-row .incognito-toggle-button,
  .quick-actions-row .godmod-toggle-button{
    padding: 0 8px !important;
    font-size: 0.8rem !important;
  }
  .quick-actions-row .theme-toggle-label,
  .quick-actions-row .incognito-toggle-label{
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
  }
}

/* ==========================================================================
   BUG 4 — desktop topbar: buttons lower from the top edge.
   ========================================================================== */
@media (min-width: 721px){
  .topbar{
    padding-top: 20px !important;
  }
}

/* ==========================================================================
   BUG 5 — dark theme: dark plate, light buttons / icons / labels.
   ========================================================================== */
body[data-theme="dark"] .setting-row.quick-actions-row{
  background: rgba(14, 18, 21, 0.92) !important;
  border-color: rgba(160, 230, 220, 0.14) !important;
}
body[data-theme="dark"] .quick-actions-row .theme-toggle-button,
body[data-theme="dark"] .quick-actions-row .incognito-toggle-button,
body[data-theme="dark"] .quick-actions-row .godmod-toggle-button{
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .quick-actions-row .theme-toggle-label,
body[data-theme="dark"] .quick-actions-row .incognito-toggle-label{
  color: var(--text) !important;
}
body[data-theme="dark"] .quick-actions-row .incognito-toggle-icon svg path{
  fill: var(--text) !important;
}
body[data-theme="dark"] .quick-actions-row .incognito-toggle-button[aria-pressed="true"],
body[data-theme="dark"] .quick-actions-row .godmod-toggle-button.active{
  background: rgba(var(--accent-rgb), 0.2) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  color: #7ff2e2 !important;
}

/* ==========================================================================
   BUG 6 — GodMod active: hide theme & incognito, stretch GodMod across.
   ========================================================================== */
body.godmod-active .quick-actions-row .theme-toggle-button,
body.godmod-active .quick-actions-row .incognito-toggle-button,
.quick-actions-row .theme-toggle-button.is-godmod-hidden,
.quick-actions-row .incognito-toggle-button.is-godmod-hidden{
  display: none !important;
}
body.godmod-active .quick-actions-row .godmod-toggle-button{
  flex: 1 1 100% !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ==========================================================================
   BUG 7 — dark theme: voice button plate in theme colours.
   ========================================================================== */
body[data-theme="dark"] .send-button-round.is-voice-mode{
  background: var(--control-bg) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .send-button-round.is-voice-mode::before{
  background: var(--control-bg) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   77_round7_polish.css — Round-7 polish (2026-07-16).
   1  attachments dropdown («Файл / Изображение»): base-sized text and
      compact menu — it rendered noticeably larger than the base UI.
   2  settings: remove the «Отчет PDF в стиле темы» and
      «Анимация набора ответа» rows entirely.
   3  settings header: «Настройки» and the close button share one vertical
      axis; smaller gap from the header to the first block.
   ========================================================================== */

/* ==========================================================================
   BUG 1 — attachments dropdown: base font & compact size on all widths.
   ========================================================================== */
.composer-popover{
  min-width: 150px !important;
  padding: 4px !important;
  gap: 2px !important;
}
.composer-popover-item{
  font-size: 0.84rem !important;
  line-height: 1.3 !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
}

/* ==========================================================================
   BUG 2 — remove settings rows: «Отчет PDF в стиле темы»,
   «Анимация набора ответа».
   ========================================================================== */
.setting-row:has(#themeResponseStyleToggle),
.setting-row:has(#typingToggle){
  display: none !important;
}

/* ==========================================================================
   BUG 3 — settings header: title and close button on one axis,
   tighter gap to the first block.
   ========================================================================== */
.settings-header{
  align-items: center !important;
}
.settings-grid{
  margin-top: 12px !important;
}

/* ==========================================================================
   78_round8_mobile.css — Round-8 mobile fixes (2026-07-16).
   1  welcome mode pill (Диалог/Проект) invisible on mobile: .main-panel has
      transform:translateZ(0) which turns it into the containing block for the
      position:fixed pill, and the composer stacking context (z=4) sits under
      the mobile topbar (z=30). Remove the transform on the welcome screen and
      raise the composer layer above the topbar (but below settings z=40 and
      sidebar z=60).
   2  while typing, the area between the visual-viewport bottom (body edge)
      and the composer showed the html background (pure #fff / #05070a
      literals from part 74) instead of the flat mobile tone
      var(--browser-chrome-bg) used by body and the containers — a mismatched
      rectangle. Paint mobile html with the same chrome tone.
   3  PWA (standalone): the white strip below the shell is the same html
      mismatch (fixed by 2); also trim the composer bottom padding in
      standalone mode so the composer hugs the home indicator.
   ========================================================================== */

@media (max-width: 720px) {
  /* -- Bug 1: welcome mode pill ---------------------------------------- */
  body[data-view-state="welcome"] .main-panel {
    transform: none !important;
  }
  body[data-view-state="welcome"] .composer {
    z-index: 31 !important;
  }

  /* -- Bug 2/3: html tone must match the mobile chrome tone ------------- */
  html,
  html:has(body[data-theme="dark"]),
  html:has(body[data-theme="light"]) {
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
  }
  /* pre-JS fallbacks: match the theme before --browser-chrome-bg is set */
  html:has(body[data-theme="dark"]) {
    background: var(--browser-chrome-bg, #05080a) !important;
  }
  html:has(body[data-theme="light"]) {
    background: var(--browser-chrome-bg, #eaf1f0) !important;
  }

  /* -- Bug 2: while the keyboard is open the zone between the body edge
        and the keyboard showed the bare html canvas in a different tone —
        a mismatched rectangle. IMPORTANT: do NOT stretch the body under
        the keyboard (100lvh was tried — iOS then scrolls the page down to
        the focused input and hides everything above). Keep the base
        visual-viewport height and instead flatten every layer to one tone:
        the html canvas below the body edge matches by construction. */

  /* Belt and braces: while the keyboard is open, iOS clips/attaches fixed
     boxes unpredictably, so gradients painted by body and its pseudo
     overlays can end mid-screen. Flatten every background layer to the
     same solid tone — a boundary becomes impossible by construction. */
  html.mobile-keyboard-active-root,
  body.mobile-keyboard-active,
  body.mobile-keyboard-active #app {
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
  }
  body.mobile-keyboard-active::before,
  body.mobile-keyboard-active::after {
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
    background-image: none !important;
  }

  /* -- Round-8c: the composer carried will-change (top/bottom/padding),
        which promotes it to its own compositing layer on iOS; combined
        with the backdrop-filter of .composer-shell::before this painted a
        sharp full-width tinted rectangle behind the composer (visible in
        the installed PWA on the welcome screen). Drop the hint — the
        transition still works, iOS promotes layers on demand. */
  .composer {
    will-change: auto !important;
  }
}

/* -- Bug 3: standalone (PWA) — composer hugs the home indicator ---------
   In iOS standalone the ICB can end ~34px above the physical bottom:
   stretch the shell to 100lvh so the composer reaches the bottom edge,
   and trim its padding. (CSP forbids inline scripts, so a JS-set class is
   not an option; iOS matches display-mode:standalone for installed PWAs.) */
@media (display-mode: standalone) and (max-width: 720px) {
  body:not(.mobile-keyboard-active),
  body:not(.mobile-keyboard-active) .shell,
  body:not(.mobile-keyboard-active) .main-panel {
    min-height: 100lvh !important;
  }
  body:not(.mobile-keyboard-active) .composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Round-8c: second half of the tinted-rectangle fix (see above) — on the
     welcome screen the card sits on a clean background, the blur is
     invisible anyway, so disable the backdrop sampling entirely. */
  body[data-view-state="welcome"]:not(.mobile-keyboard-active) .composer-shell::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* -- Round-9: welcome-screen composer pill blend (2026-07-16) -----------
   Root cause of the "separate light rectangle" over the keyboard on the
   home screen: on welcome the .composer-shell::before painted a near-solid
   bright card (~0.92 alpha) with a heavy blur(18px) + 0 24px 70px shadow.
   Over the muted page gradient this read as a detached floating card
   (see IMG_3021 / IMG_3023). Conversation view is unaffected (darker
   scrolling content behind it). Fix: soften the welcome pill so it blends
   with the page in BOTH themes, using the theme-aware --composer-shell-bg
   token. Covers focus + keyboard-active, standalone and in-browser. */
@media (max-width: 720px) {
  body[data-view-state="welcome"] .composer-shell::before {
    background: color-mix(in srgb, var(--composer-shell-bg) 55%, transparent) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    box-shadow: 0 6px 22px rgba(12, 20, 20, 0.07) !important;
    border-color: color-mix(in srgb, var(--composer-shell-border) 70%, transparent) !important;
  }
}

/* Round-9: stabilize animated orb layers to prevent occasional canvas flicker on desktop */
.welcome-orb,
.particle-blob-canvas {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.particle-blob[data-particle-blob="avatar"] .particle-blob-canvas,
.particle-blob[data-particle-blob="mark"] .particle-blob-canvas,
.particle-blob[data-particle-blob="mini"] .particle-blob-canvas {
  will-change: transform;
  backface-visibility: hidden;
}

/* ==========================================================================
   79_round9_hover.css — Round-9 (2026-07-16).
   Unify hover highlight: notifications (.project-tasks-button), theme,
   incognito and GodMod buttons now highlight exactly like the sidebar
   hide button (.mobile-nav-button): teal accent tint instead of the
   neutral --topbar-control-* vars. !important is required because part 75
   ("BUG 6+7 topbar rework") sets base background/border with !important.
   The notifications button draws its border via ::after, driven by
   --project-control-current-border, so that var is overridden too.
   ========================================================================== */

.project-tasks-button:hover,
.theme-toggle-button:not(:disabled):not(.is-theme-locked):hover,
.incognito-toggle-button:hover,
.godmod-toggle-button:hover {
  --project-control-current-border: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  box-shadow: none !important;
  transform: none;
}
.project-tasks-button:hover::after {
  border-color: rgba(var(--accent-rgb), 0.22) !important;
}

body[data-theme="dark"] .project-tasks-button:hover,
body[data-theme="dark"] .theme-toggle-button:not(:disabled):not(.is-theme-locked):hover,
body[data-theme="dark"] .incognito-toggle-button:hover,
body[data-theme="dark"] .godmod-toggle-button:hover {
  --project-control-current-border: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.16) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: rgba(243, 246, 255, 0.96);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 10px 22px rgba(var(--accent-rgb), 0.16) !important;
}
body[data-theme="dark"] .project-tasks-button:hover::after {
  border-color: rgba(var(--accent-rgb), 0.28) !important;
}

/* ==========================================================================
   82_round12_mobile_fixes.css — Round-12 mobile fixes (2026-07-17).

   А. КЛАВИАТУРА. Round-11 (position:fixed + top: var(--composer-keyboard-top))
   на реальном iOS давал зависание композера на 50–170px выше клавиатуры и
   прыжки: iOS позиционирует fixed-элементы непредсказуемо при открытой
   клавиатуре (см. также комментарий round-8 про fixed-боксы). Round-12
   возвращает надёжную архитектуру "оболочка = visual viewport":

   1. html/body/#app/.shell/.main-panel сжимаются ровно до высоты видимой
      области (--visual-viewport-height, обновляется JS-хуком по событиям
      visualViewport). Композер остаётся В ПОТОКЕ (sticky, низ сетки) и
      оказывается точно над клавиатурой ПО ПОСТРОЕНИЮ — без измерений
      высот, без fixed, без формул top.
   2. Панорама iOS гасится JS (window.scrollTo(0,0)); остаточный сдвиг
      компенсирует transform: translateY(--visual-viewport-offset-top).
   3. Никаких transition на композере при клавиатуре — ничего не прыгает.
   4. Орб на welcome масштабируется под доступную высоту (не обрезается).

   Б. Правки 1–4:
   1. Нижняя кромка беседы затухает так же мягко, как верхняя: маска
      перенесена с .conversation-stage на сам скроллер .messages — раньше
      контент жёстко обрезался границей .messages на 12px раньше конца
      градиента (та самая "прямая линия").
   2. Отступы кнопок композера одинаковы на сайте и в PWA: единый код-путь
      (композер всегда в потоке, ширина от сетки) — в Safari ряд больше
      не переполняется вправо.
   3. Главный экран: "+", "Модель" и "Голос" одной высоты 42px (по кнопке
      "добавить файл"), без scale(0.94), отцентрованы — как на десктопе.
   4. Placeholder "Задайте любой вопрос" = размеру текста выбора модели
      (0.84rem) на мобильном.
   ========================================================================== */

@media (max-width: 720px) {
  /* -- А1. Оболочка = visual viewport --------------------------------- */
  html.mobile-keyboard-active-root,
  html.mobile-conversation-keyboard-active-root {
    height: var(--visual-viewport-height, 100dvh) !important;
    min-height: var(--visual-viewport-height, 100dvh) !important;
    max-height: var(--visual-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.mobile-keyboard-active,
  body.mobile-keyboard-active #app,
  body.mobile-conversation-keyboard-active,
  body.mobile-conversation-keyboard-active #app {
    height: var(--visual-viewport-height, 100dvh) !important;
    min-height: var(--visual-viewport-height, 100dvh) !important;
    max-height: var(--visual-viewport-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.mobile-keyboard-active .shell,
  body.mobile-keyboard-active .main-panel,
  body.mobile-conversation-keyboard-active .shell,
  body.mobile-conversation-keyboard-active .main-panel {
    height: var(--visual-viewport-height, 100dvh) !important;
    min-height: var(--visual-viewport-height, 100dvh) !important;
    max-height: var(--visual-viewport-height, 100dvh) !important;
  }

  /* -- А2. Компенсация остаточной панорамы visual viewport ------------- */
  body.mobile-keyboard-active .shell,
  body.mobile-conversation-keyboard-active .shell {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(var(--visual-viewport-offset-top, 0px)) !important;
  }

  /* -- А3. Сетка: композер занимает свой ряд по фактической высоте ----- */
  body.mobile-keyboard-active[data-view-state="welcome"] .main-panel,
  body.mobile-keyboard-active[data-view-state="conversation"] .main-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  /* -- А4. Композер всегда в потоке, прижат к низу, без анимаций ------- */
  body.mobile-composer-focus-active .composer,
  body.mobile-keyboard-active .composer,
  body.mobile-keyboard-active[data-view-state="welcome"] .composer,
  body.mobile-keyboard-active[data-view-state="conversation"] .composer {
    position: sticky !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 55 !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.mobile-keyboard-active .composer {
    margin: 0 !important;
    padding: 0 10px 8px !important;
    background: var(--browser-chrome-bg, var(--bg-gradient-end)) !important;
  }

  /* -- А5. Панели заполняют сжатую оболочку, без лишних резервов ------- */
  body.mobile-keyboard-active .conversation-panel,
  body.mobile-keyboard-active .workspace-view,
  body.mobile-keyboard-active .conversation-stage {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  body.mobile-keyboard-active .conversation-panel {
    padding-top: 14px !important;
    padding-bottom: 8px !important;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .conversation-panel {
    padding-top: clamp(20px, 4vh, 40px) !important;
  }

  /* -- А6. Беседа: композер в потоке — резерв под клавиатуру не нужен -- */
  body.mobile-keyboard-active[data-view-state="conversation"] .messages,
  body.mobile-keyboard-active[data-view-state="conversation"] .messages[data-turn-anchor-spacer="true"] {
    padding-bottom: 14px !important;
    scroll-padding-bottom: 72px !important;
  }

  /* -- А7. Welcome: орб масштабируется, не обрезается ------------------ */
  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-view {
    padding: 0 !important;
    overflow: visible !important;
  }

  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-orb {
    width: min(clamp(140px, 44vw, 208px), calc(var(--visual-viewport-height, 100dvh) * 0.34)) !important;
    height: min(clamp(140px, 44vw, 208px), calc(var(--visual-viewport-height, 100dvh) * 0.34)) !important;
    margin: 0 auto 10px !important;
  }

  /* -- А8. Страховка порядка фоновых слоёв (как в round-11) ------------ */
  body.mobile-keyboard-active::before,
  body.mobile-conversation-keyboard-active::before {
    z-index: -2 !important;
  }

  body.mobile-keyboard-active::after,
  body.mobile-conversation-keyboard-active::after {
    z-index: -1 !important;
  }

  /* -- Б1. Мягкое затухание НИЗА беседы = как сверху -------------------
     Маска уходит со .conversation-stage на сам скроллер .messages: край
     обрезки и конец градиента теперь совпадают — прямая линия исчезает. */
  body[data-view-state="conversation"] .conversation-stage {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  body[data-view-state="conversation"] .messages {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 30px), transparent 100%) !important;
            mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 30px), transparent 100%) !important;
  }

  /* -- Б3. Главный экран: кнопки одной высоты по "+", отцентрованы ----- */
  body[data-view-state="welcome"] .composer-shell .composer-actions,
  body[data-view-state="welcome"] .composer-left-tools,
  body[data-view-state="welcome"] .composer-right-tools {
    align-items: center !important;
  }

  body[data-view-state="welcome"] .composer-shell .composer-icon-button,
  body[data-view-state="welcome"] .composer-shell .composer-pill-button {
    transform: none !important;
  }

  body[data-view-state="welcome"] .composer-shell .composer-icon-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  body[data-view-state="welcome"] .composer-shell .composer-model-button {
    height: 42px !important;
    min-height: 42px !important;
  }

  body[data-view-state="welcome"] .composer-shell .send-button-round {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-self: center !important;
  }

  /* -- Б2/Б4. Placeholder = размер текста выбора модели (оба вида) ----- */
  .composer textarea::placeholder,
  .react-composer-shell textarea::placeholder {
    font-size: 0.84rem !important;
  }

  body:not([data-view-state="welcome"]) .composer-shell .composer-pill-button {
    font-size: 0.84rem !important;
  }
}

/* ====================================================================
   83_round13_keyboard_glide.css — Round-13 (2026-07-17, rev3)
   iOS reports the final visual-viewport metrics (and any focus pan)
   only at the END of the keyboard show/hide animation, so mid-flight
   corrections are impossible. Original round-13 strategy:
   - OPEN: the JS prediction applies the final keyboard geometry
     synchronously on focus, before WebKit computes its scroll-to-reveal
     pan — one clean instant movement, nothing left for iOS to pan.
     Transitions were therefore DISABLED in the keyboard-active state.
   - CLOSE / view switch: geometry returns to rest through a 260ms
     glide that matches the keyboard slide (transitions live on the
     resting state, i.e. the destination of the close).

   kb-jump fix (round-15): the OPEN prediction only fires when a trusted
   keyboard visual height is already cached in localStorage AND a recent
   pointer gesture was seen (see useMobileViewport.ts KEYBOARD_VH_STORAGE_KEY
   / KEYBOARD_GESTURE_WINDOW_MS). On the very first focus ever (nothing
   cached yet) or after the cache expires, the prediction does not apply,
   so the old "transition: none" on keyboard-active turned that miss into
   a hard instant snap instead of a glide. Per the fix contract, OPEN is
   now made SYMMETRIC with CLOSE: the keyboard-active state now uses the
   SAME 260ms cubic-bezier height glide as the resting state (simply by no
   longer overriding it to "none"), so whether or not the prediction hits,
   the composer/orb/shell rise smoothly instead of jumping. transform is
   still excluded (kept instant) so the iOS visual-viewport pan
   compensation (round-12 A2, translateY) is never delayed. */
@media (max-width: 720px) {
  /* Resting-state transitions: drive the CLOSE glide. Heights only —
     transform must track the iOS pan compensation instantly. */
  html,
  body,
  #app,
  body .shell,
  body .main-panel {
    transition:
      height 260ms cubic-bezier(0.36, 0.66, 0.04, 1),
      min-height 260ms cubic-bezier(0.36, 0.66, 0.04, 1),
      max-height 260ms cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  /* The welcome orb rescales between resting and keyboard sizes
     (round-12 А6) — glide it back on close too. */
  body[data-view-state="welcome"] .welcome-orb {
    transition:
      width 260ms cubic-bezier(0.36, 0.66, 0.04, 1),
      height 260ms cubic-bezier(0.36, 0.66, 0.04, 1),
      margin 260ms cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  /* kb-jump fix (round-15): previously "transition: none" here made the
     OPEN destination un-animated (a deliberate instant jump). That is
     removed so OPEN inherits the same 260ms height glide declared above
     for html/body/#app/.shell/.main-panel — symmetric with CLOSE. transform
     is intentionally left untouched (still instant) so the visual-viewport
     pan compensation (round-12 A2) keeps tracking iOS in real time. */
}

/* ==========================================================================
   ФИНАЛЬНЫЙ АВТОРИТЕТНЫЙ БЛОК (перебивает предыдущие конфликтующие слои)
   BUG #1 — кнопка «Скопировать» у запроса пользователя должна стоять
            вплотную слева от пузыря, а не улетать к левому краю.
   BUG #2/#5 — плашка артефакта под ответом Авроры должна быть шириной
            во всю ширину контента ответа (до иконок действий 👍👎),
            а не уже (не по ширине текстового пузыря).
   Добавлено: 2026-07-18. Все правила детерминированные, без завязки на JS.
   ========================================================================== */

/* --- BUG #1: раскладка запроса пользователя [кнопка][пузырь] справа --- */
.message[data-role="user"] .message-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;   /* весь блок к правому краю */
}
.message[data-role="user"] .user-message-content {
  display: inline-flex !important;
  flex-direction: row !important;      /* [кнопка] слева, [пузырь] справа */
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: min(var(--message-text-max-width, 760px), 82%) !important;
  margin-left: auto !important;        /* прижать группу вправо */
  position: static !important;
}
/* кнопка: статична, первый ребёнок = слева от пузыря, вплотную */
.message[data-role="user"] .user-message-content .message-copy-button {
  position: static !important;
  order: 0 !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
}
/* пузырь: второй ребёнок = справа от кнопки, занимает своё содержимое */
.message[data-role="user"] .user-message-content .message-text {
  order: 1 !important;
  flex: 0 1 auto !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* --- BUG #2/#5: ширина плашки артефакта = ширине контента ответа --- */
.message[data-role="assistant"] .artifact-list,
.message[data-role="assistant"] .artifact-collection,
.artifact-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ====================================================================
   85_round17_keyboard_flip.css — Round-17 (2026-07-18)
   Почему открытие клавиатуры «прыгало», а закрытие было плавным:
   round-15 анимировал ОТКРЫТИЕ height-переходами (83_round13) на
   html/body/#app/.shell/.main-panel. height/min/max-height анимируются
   ТОЛЬКО на главном потоке (каждый кадр = пересчёт layout всей страницы).
   Но в момент focusin главный поток занят: ре-рендер React (фокус
   композера, скрытие mode-switch), MutationObserver'ы, метрики хука.
   Кадры перехода выпадают, и плашка ТЕЛЕПОРТИРУЕТСЯ из начала в конец
   (подтверждено покадровым зондом kb_probe.mjs: welcome-open 195px/кадр,
   conv-open 184px/кадр — при плавном закрытии, когда поток свободен).
   Вдобавок, пока layout-высота плавно едет вниз, она несколько кадров
   БОЛЬШЕ visual-высоты — iOS в это окно может панорамировать вьюпорт
   (чёрная полоса сверху, кадры f_094/f_109 записи экрана).

   Решение (FLIP): при ОТКРЫТИИ геометрия применяется МГНОВЕННО
   (layout-высота сразу равна visual-высоте — iOS панорамировать нечего,
   это исходная механика round-13 rev3), а видимый подъём делает
   transform-анимация от translateY(var(--keyboard-inset)) к 0 — она
   исполняется на КОМПОЗИТОРЕ и не зависит от занятости главного потока.
   Работает и при промахе предсказания: класс добавляется в конце
   анимации клавиатуры — подъём всё равно плавный, просто позже.
   ЗАКРЫТИЕ не тронуто: переходы высот живут на состоянии покоя
   (83_round13) и по-прежнему ведут плавный спуск (подтверждено зондом).
   ==================================================================== */
@media (max-width: 720px) {
  /* А. Открытие: высоты применяются мгновенно. Селекторы бьют
     безусловные переходы 83_round13 специфичностью + !important.
     Закрытие не задето: у состояния покоя переходы остаются. */
  html.mobile-keyboard-active-root,
  body.mobile-keyboard-active,
  body.mobile-keyboard-active #app,
  body.mobile-keyboard-active .shell,
  body.mobile-keyboard-active .main-panel {
    transition-property: none !important;
  }
  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-orb {
    transition-property: none !important;
  }

  /* Б. Видимый подъём: плашка композера и контент над ней въезжают
     снизу transform-анимацией (композитор). Расстояние = фактический
     подъём (--keyboard-inset уже выставлен предсказанием или замером
     к моменту добавления класса). Анимация стартует один раз при
     добавлении класса и не перезапускается метрическими проходами. */
  body.mobile-keyboard-active .composer {
    animation: aurora-kb-rise 260ms cubic-bezier(0.36, 0.66, 0.04, 1) backwards;
  }
  body.mobile-keyboard-active[data-view-state="conversation"] .conversation-stage,
  body.mobile-keyboard-active[data-view-state="welcome"] .welcome-view {
    animation: aurora-kb-rise 260ms cubic-bezier(0.36, 0.66, 0.04, 1) backwards;
  }

  /* В. [round17-anchor-flash-fix] Пилл переключателя режима
     (.composer-mode-anchor) имеет position:fixed (живёт в шапке), но
     в DOM лежит ВНУТРИ form.composer. Пока на композере идёт
     transform-анимация подъёма, transform делает композер containing
     block для fixed-потомков — пилл на долю секунды проступает в
     строке композера (регресс с видео 23:33). Прячем его РОВНО на
     время анимации: step-end держит from-значение (скрыт) до конца,
     затем пилл появляется в шапке как прежде. Итоговое состояние не
     меняется, закрытие не задето (там нет transform-анимации). */
  body.mobile-keyboard-active .composer .composer-mode-anchor {
    animation: aurora-kb-anchor-hold 260ms step-end both;
  }
}

@keyframes aurora-kb-anchor-hold {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes aurora-kb-rise {
  from {
    transform: translateY(var(--keyboard-inset, 280px));
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   86 — МОБИЛЬНАЯ ШИРИНА ПУЗЫРЯ ПОЛЬЗОВАТЕЛЯ [mobile-user-bubble-width]
   Запрос: на мобильном пузырь запроса пользователя слишком узкий (82%),
   слева остаётся много пустого места. Расширяем ТОЛЬКО на мобильном.
   Десктоп не трогаем (там 82% / 760px — осознанный дизайн слоёв 72/84).
   Специфичность и порядок: файл идёт ПОСЛЕ 84/85, селекторы повторяют 84,
   поэтому !important-переопределение детерминировано побеждает.
   Добавлено: 2026-07-18.
   ========================================================================== */

@media (max-width: 720px) {
  /* группа [кнопка копирования][пузырь] — почти вся ширина колонки */
  .message[data-role="user"] .user-message-content {
    max-width: 96% !important;
  }

  /* страховка: если разметка без .user-message-content (старые сообщения),
     сам текст тоже расширяем */
  .message[data-role="user"] .message-text {
    max-width: 96% !important;
  }

  /* внутри группы текст занимает всё доступное после кнопки */
  .message[data-role="user"] .user-message-content .message-text {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   87 — МЕСТО ПОД ТЕКСТ В КОМПОЗЕРЕ НА МОБИЛЬНОМ [mobile-has-text-space]
   Запрос: когда в поле уже набран текст, пилл смены модели («Аврора Auto»)
   занимает половину строки. Прячем его на мобильном, пока есть текст:
   кнопка голоса при наборе и так сменяется кнопкой «отправить», а модель
   можно выбрать до набора или очистив поле. Десктоп не трогаем.
   Класс composer-has-text ставит React (ComposerIsland, маркер
   [mobile-has-text-space]). Добавлено: 2026-07-19.
   ========================================================================== */

@media (max-width: 720px) {
  .composer-shell.composer-has-text .composer-model-button {
    display: none !important;
  }
}

/* ==========================================================================
   88 — НАСТРОЙКИ: СКРЫТЫЕ КНОПКИ БЫСТРЫХ ДЕЙСТВИЙ [qa-hidden-fix]
   Баг: слои 75/76 задают кнопкам ряда (тема/инкогнито/годмод)
   display:flex !important, что по специфичности перебивает глобальное
   [hidden]{display:none !important}. Итог: GodMod с атрибутом hidden
   (не-админ) всё равно виден и занимает треть ряда.
   Фикс: правило выше по специфичности возвращает честное скрытие.
   Ряд — flex с flex:1 1 0, поэтому оставшиеся кнопки растягиваются
   на освободившееся место автоматически. Добавлено: 2026-07-19.
   ========================================================================== */

.quick-actions-row .theme-toggle-button[hidden],
.quick-actions-row .incognito-toggle-button[hidden],
.quick-actions-row .godmod-toggle-button[hidden] {
  display: none !important;
}

/* File role: GodMode mobile exit button (hotfix 2026-07-21). */
.godmod-mobile-exit {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 50%;
  background: var(--control-bg);
  color: var(--accent);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.godmod-mobile-exit svg {
  width: 18px;
  height: 18px;
}

.godmod-mobile-exit .settings-close-button-glyph {
  color: inherit;
}

.godmod-mobile-exit:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.godmod-mobile-exit:active {
  transform: scale(0.92);
}

/* v2: крестик виден на главном экране и в диалоге (все ширины),
   скрыт при открытых настройках и в остальных местах. */
body.godmod-active[data-view-state="welcome"] .godmod-mobile-exit,
body.godmod-active[data-view-state="conversation"] .godmod-mobile-exit {
  display: inline-flex;
}

body.godmod-active.settings-open .godmod-mobile-exit {
  display: none !important;
}