/*
 * Готовые дизайны интерфейса. Каждая тема объявляет полный набор токенов —
 * это нужно не только для страницы, но и для мини-превью в галерее: превью
 * получает свой data-theme и берёт токены темы, не наследуя текущую.
 * Селекторы намеренно атрибутные ([data-theme=…]), а не :root[data-theme=…].
 */

/* Verdant — базовый светлый дизайн: зелёный кабинет, спокойная типографика. */
[data-theme="verdant"] {
  color-scheme: light;
  --font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: var(--font-ui);
  --font-size-base: 16px;
  --label-transform: none;
  --label-spacing: 0;
  --page-bg:
    radial-gradient(circle at 90% 0%, #e9f3eb 0, transparent 28rem) #f7f9f6;
  --paper: #f7f9f6;
  --surface: #ffffff;
  --surface-soft: #f7f9f6;
  --ink: #17211b;
  --muted: #69736c;
  --faint: #8a938d;
  --line: #dfe5df;
  --accent: #1f6f4a;
  --accent-strong: #155437;
  --accent-soft: #e7f2eb;
  --accent-line: #cfe0d2;
  --accent-on: #ffffff;
  --accent-ink: #155437;
  --warn-line: #efb27c;
  --warn-soft: #fff0df;
  --warn-ink: #7b3a0d;
  --warn-dot: #d8782c;
  --stop-ink: #9e352d;
  --stop-soft: #fbe9e7;
  --side-bg: #183c2b;
  --side-solid: #183c2b;
  --side-ink: #f7fff9;
  --side-muted: #a9c5b4;
  --side-item-ink: #d5e5da;
  --side-item-hover-bg: #214b36;
  --side-item-hover-line: #456e57;
  --side-mark-bg: #a9d9b7;
  --side-mark-ink: #173d2a;
  --count-bg: #f5b57d;
  --count-ink: #4b2510;
  --radius-xs: 9px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: 0 12px 32px rgb(33 68 46 / 8%);
  --shadow-modal: 0 24px 80px rgb(17 42 28 / 25%);
  --backdrop: rgb(20 35 26 / 45%);
  --sidebar-width: 276px;
  --content-width: 1040px;
  --thread-width: 780px;
  --role-bg: var(--accent);
  --role-ink: var(--accent-on);
  --role-user-bg: #e3e8e3;
  --role-user-ink: var(--ink);
  --bubble-radius: var(--radius-sm);
  --composer-bg: var(--surface);
  --composer-line: #cfd8d0;
  --composer-radius: var(--radius-lg);
}

/*
 * Flight — омаж legacy-скину alt: тёплая бумага, оранжевый акцент, светлая
 * боковая панель вместо тёмной, ответы карточками и реплики пользователя
 * оранжевым пузырём. Здесь маскот «Флай» выглядит как в оригинале.
 */
[data-theme="flight"] {
  color-scheme: light;
  --font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: var(--font-ui);
  --font-size-base: 15px;
  --label-transform: none;
  --label-spacing: 0;
  --page-bg: #faf9f7;
  --paper: #faf9f7;
  --surface: #ffffff;
  --surface-soft: #f4f1ec;
  --ink: #221f1c;
  --muted: #8a8378;
  --faint: #a49a8d;
  --line: #eae6df;
  --accent: #ff6b35;
  --accent-strong: #d14a17;
  --accent-soft: #ffd9c7;
  --accent-line: #ffc4a8;
  --accent-on: #ffffff;
  --accent-ink: #c2410c;
  --warn-line: #e8b45f;
  --warn-soft: #fff6e3;
  --warn-ink: #8a5a12;
  --warn-dot: #ff8f5e;
  --stop-ink: #a83a2c;
  --stop-soft: #ffe6e1;
  --side-bg: #ffffff;
  --side-solid: #ffffff;
  --side-ink: #221f1c;
  --side-muted: #8a8378;
  --side-item-ink: #3d3833;
  --side-item-hover-bg: #f4f1ec;
  --side-item-hover-line: #eae6df;
  --side-mark-bg: #ff6b35;
  --side-mark-ink: #ffffff;
  --count-bg: #ff6b35;
  --count-ink: #ffffff;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: 0 1px 0 #eae6df;
  --shadow-modal: 0 20px 60px rgb(34 31 28 / 22%);
  --backdrop: rgb(34 31 28 / 40%);
  --sidebar-width: 268px;
  --content-width: 980px;
  --thread-width: 720px;
  --role-bg: var(--accent);
  --role-ink: var(--accent-on);
  --role-user-bg: var(--accent);
  --role-user-ink: #ffffff;
  --bubble-radius: 14px;
  --composer-bg: var(--surface);
  --composer-line: #eae6df;
  --composer-radius: 12px;
}

/* Ответ — карточка, реплика пользователя — оранжевый пузырь справа. */
[data-theme="flight"] .sidebar {
  border-right: var(--border-width) solid var(--line);
}

[data-theme="flight"] .message.assistant .message-content,
[data-theme="flight"] .message.system .message-content {
  padding: 13px 17px;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

[data-theme="flight"] .message.user {
  grid-template-columns: minmax(0, 1fr) 34px;
}

[data-theme="flight"] .message.user .message-role {
  order: 2;
}

[data-theme="flight"] .message.user .message-body {
  order: 1;
}

[data-theme="flight"] .message.user .message-content {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  color: var(--role-user-ink);
  background: var(--accent);
}

/* Midnight — тёмный дизайн для долгих сессий, холодный индиговый акцент. */
[data-theme="midnight"] {
  color-scheme: dark;
  --font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: var(--font-ui);
  --font-size-base: 16px;
  --label-transform: none;
  --label-spacing: 0;
  --page-bg:
    radial-gradient(circle at 85% -10%, #1b2540 0, transparent 30rem) #0d1117;
  --paper: #0d1117;
  --surface: #161b22;
  --surface-soft: #1a2029;
  --ink: #e6edf3;
  --muted: #97a3b1;
  --faint: #6f7b88;
  --line: #262f3b;
  --accent: #6c8cff;
  --accent-strong: #5570e6;
  --accent-soft: #1a2542;
  --accent-line: #2f3c63;
  --accent-on: #0b1020;
  --accent-ink: #a8bcff;
  --warn-line: #7a5326;
  --warn-soft: #2a1f10;
  --warn-ink: #f2c48a;
  --warn-dot: #f0a24b;
  --stop-ink: #ff9f96;
  --stop-soft: #331c1b;
  --side-bg: #080b11;
  --side-solid: #080b11;
  --side-ink: #e8eef5;
  --side-muted: #7d8896;
  --side-item-ink: #c3ccd7;
  --side-item-hover-bg: #161d29;
  --side-item-hover-line: #2b3646;
  --side-mark-bg: #6c8cff;
  --side-mark-ink: #0b1020;
  --count-bg: #f0a24b;
  --count-ink: #2a1a08;
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: 0 14px 40px rgb(0 0 0 / 45%);
  --shadow-modal: 0 30px 90px rgb(0 0 0 / 65%);
  --backdrop: rgb(4 7 12 / 70%);
  --sidebar-width: 276px;
  --content-width: 1040px;
  --thread-width: 780px;
  --role-bg: var(--accent);
  --role-ink: var(--accent-on);
  --role-user-bg: #232b36;
  --role-user-ink: var(--ink);
  --bubble-radius: var(--radius-sm);
  --composer-bg: #151b24;
  --composer-line: #2b3646;
  --composer-radius: var(--radius-lg);
}

/* Paper — читальный зал: тёплая бумага, засечки, светлая боковая панель. */
[data-theme="paper"] {
  color-scheme: light;
  --font-ui:
    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-heading: var(--font-ui);
  --font-size-base: 17px;
  --label-transform: none;
  --label-spacing: 0.01em;
  --page-bg: #fbf9f4;
  --paper: #fbf9f4;
  --surface: #ffffff;
  --surface-soft: #f4f0e7;
  --ink: #241f1a;
  --muted: #6f665b;
  --faint: #948b7d;
  --line: #e3dccd;
  --accent: #7a5c2e;
  --accent-strong: #5d4522;
  --accent-soft: #f2ebdc;
  --accent-line: #ddd0b5;
  --accent-on: #fffdf7;
  --accent-ink: #5d4522;
  --warn-line: #d9b98a;
  --warn-soft: #fbf1e0;
  --warn-ink: #7a5320;
  --warn-dot: #b8762a;
  --stop-ink: #8e3b2f;
  --stop-soft: #f7e6e0;
  --side-bg: #f2ede1;
  --side-solid: #f2ede1;
  --side-ink: #2c2620;
  --side-muted: #7c7264;
  --side-item-ink: #43392e;
  --side-item-hover-bg: #e7dfcd;
  --side-item-hover-line: #d8cdb4;
  --side-mark-bg: #2c2620;
  --side-mark-ink: #f5f0e4;
  --count-bg: #b8762a;
  --count-ink: #fff6e9;
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 7px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: none;
  --shadow-modal: 0 18px 50px rgb(60 48 30 / 20%);
  --backdrop: rgb(45 38 28 / 40%);
  --sidebar-width: 260px;
  --content-width: 940px;
  --thread-width: 660px;
  --role-bg: transparent;
  --role-ink: var(--muted);
  --role-user-bg: #efe9db;
  --role-user-ink: var(--ink);
  --bubble-radius: var(--radius-sm);
  --composer-bg: var(--surface);
  --composer-line: #ddd5c3;
  --composer-radius: 6px;
}

/* Плоская вёрстка Paper: роли — тонкие метки, а не цветные плашки. */
[data-theme="paper"] .message-role,
.theme-preview[data-theme="paper"] .preview-bubble.ai {
  border: var(--border-width) solid var(--line);
}

[data-theme="paper"] .message-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-theme="paper"] .sidebar {
  border-right: var(--border-width) solid var(--line);
}

[data-theme="paper"] .messages {
  padding: 44px 0;
}

/* Sunrise — тёплый оранжевый дизайн с крупными скруглениями и пузырями. */
[data-theme="sunrise"] {
  color-scheme: light;
  --font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: var(--font-ui);
  --font-size-base: 16px;
  --label-transform: none;
  --label-spacing: 0;
  --page-bg:
    radial-gradient(circle at 12% -5%, #ffe6d4 0, transparent 26rem) #fdf8f3;
  --paper: #fdf8f3;
  --surface: #ffffff;
  --surface-soft: #fdf1e7;
  --ink: #2a1d15;
  --muted: #7d6a5c;
  --faint: #a3907f;
  --line: #f0e2d5;
  --accent: #ef6a2b;
  --accent-strong: #d2521a;
  --accent-soft: #ffeadd;
  --accent-line: #f8cfb2;
  --accent-on: #fff8f4;
  --accent-ink: #b8480f;
  --warn-line: #e8b45f;
  --warn-soft: #fff5df;
  --warn-ink: #7d5510;
  --warn-dot: #f0912b;
  --stop-ink: #a83a2c;
  --stop-soft: #ffe6e1;
  --side-bg: linear-gradient(180deg, #2c1c14 0%, #40241a 100%);
  --side-solid: #342016;
  --side-ink: #fff3ea;
  --side-muted: #c8a691;
  --side-item-ink: #e8d3c5;
  --side-item-hover-bg: #4d2c1e;
  --side-item-hover-line: #6d4230;
  --side-mark-bg: #ef6a2b;
  --side-mark-ink: #2a1206;
  --count-bg: #ffce8a;
  --count-ink: #5c3407;
  --radius-xs: 12px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: 0 16px 40px rgb(120 60 20 / 12%);
  --shadow-modal: 0 28px 80px rgb(80 40 15 / 28%);
  --backdrop: rgb(50 28 18 / 45%);
  --sidebar-width: 276px;
  --content-width: 1040px;
  --thread-width: 780px;
  --role-bg: var(--accent);
  --role-ink: var(--accent-on);
  --role-user-bg: #ffeadd;
  --role-user-ink: #7a3d16;
  --bubble-radius: 18px;
  --composer-bg: var(--surface);
  --composer-line: #f2d9c5;
  --composer-radius: 24px;
}

/* Реплики пользователя в Sunrise — пузырь справа. */
[data-theme="sunrise"] .message.user {
  grid-template-columns: minmax(0, 1fr) 34px;
}

[data-theme="sunrise"] .message.user .message-role {
  order: 2;
}

[data-theme="sunrise"] .message.user .message-body {
  order: 1;
}

[data-theme="sunrise"] .message.user .message-content {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 18px 18px 6px;
  color: var(--role-user-ink);
  background: var(--accent-soft);
}

/* Terminal — моноширинный пульт: нулевые скругления, зелёный по чёрному. */
[data-theme="terminal"] {
  color-scheme: dark;
  --font-ui:
    ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-heading: var(--font-ui);
  --font-size-base: 15px;
  --label-transform: uppercase;
  --label-spacing: 0.08em;
  --page-bg:
    repeating-linear-gradient(
      180deg,
      rgb(63 240 140 / 3%) 0 1px,
      transparent 1px 3px
    )
    #07090b;
  --paper: #07090b;
  --surface: #0d1114;
  --surface-soft: #101519;
  --ink: #d3f7de;
  --muted: #7fae8f;
  --faint: #5d8069;
  --line: #1e2a22;
  --accent: #3ff08c;
  --accent-strong: #2bd577;
  --accent-soft: #0f2419;
  --accent-line: #235c3c;
  --accent-on: #04140a;
  --accent-ink: #3ff08c;
  --warn-line: #8a7326;
  --warn-soft: #1f1c08;
  --warn-ink: #f2dd8a;
  --warn-dot: #e8c545;
  --stop-ink: #ff8b7a;
  --stop-soft: #2a1310;
  --side-bg: #05070a;
  --side-solid: #05070a;
  --side-ink: #d3f7de;
  --side-muted: #6f9b7e;
  --side-item-ink: #a9d8b8;
  --side-item-hover-bg: #0e1a13;
  --side-item-hover-line: #2a5b3d;
  --side-mark-bg: #3ff08c;
  --side-mark-ink: #04140a;
  --count-bg: #e8c545;
  --count-ink: #1c1503;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --border-width: 1px;
  --shadow-soft: none;
  --shadow-modal: 0 0 0 1px #235c3c;
  --backdrop: rgb(0 0 0 / 75%);
  --sidebar-width: 268px;
  --content-width: 1000px;
  --thread-width: 760px;
  --role-bg: transparent;
  --role-ink: var(--accent);
  --role-user-bg: #16211a;
  --role-user-ink: var(--ink);
  --bubble-radius: 0;
  --composer-bg: #0a0f0c;
  --composer-line: #235c3c;
  --composer-radius: 0;
}

[data-theme="terminal"] .topbar h1,
[data-theme="terminal"] .mode-badge,
[data-theme="terminal"] .empty-state h2,
[data-theme="terminal"] .brand strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="terminal"] .message-role {
  border: var(--border-width) solid var(--accent-line);
}

[data-theme="terminal"] .sidebar {
  border-right: var(--border-width) solid var(--accent-line);
}

[data-theme="terminal"] .message-content {
  font-size: 14px;
}

/* Aurora — воздушный градиентный дизайн со стеклянным композером. */
[data-theme="aurora"] {
  color-scheme: light;
  --font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: var(--font-ui);
  --font-size-base: 16px;
  --label-transform: none;
  --label-spacing: 0;
  --page-bg:
    radial-gradient(circle at 80% -10%, #dfe3ff 0, transparent 30rem),
    radial-gradient(circle at 5% 100%, #e4f6ff 0, transparent 26rem) #f4f6fd;
  --paper: #f4f6fd;
  --surface: #ffffff;
  --surface-soft: #eef1fb;
  --ink: #1a1c2e;
  --muted: #63688a;
  --faint: #8d92b0;
  --line: #e0e4f5;
  --accent: #5b6cff;
  --accent-strong: #4353e8;
  --accent-soft: #e8ebff;
  --accent-line: #cdd4ff;
  --accent-on: #ffffff;
  --accent-ink: #3d4bd1;
  --warn-line: #f0c07a;
  --warn-soft: #fff5e4;
  --warn-ink: #8a5a12;
  --warn-dot: #f59e42;
  --stop-ink: #b23a53;
  --stop-soft: #ffe9ee;
  --side-bg: linear-gradient(165deg, #4a3fc0 0%, #6f5ce8 45%, #8f7bf0 100%);
  --side-solid: #6f5ce8;
  --side-ink: #f6f4ff;
  --side-muted: #cfc7f8;
  --side-item-ink: #e5e0ff;
  --side-item-hover-bg: rgb(255 255 255 / 18%);
  --side-item-hover-line: rgb(255 255 255 / 35%);
  --side-mark-bg: rgb(255 255 255 / 90%);
  --side-mark-ink: #4a3fc0;
  --count-bg: #ffd166;
  --count-ink: #4a3105;
  --radius-xs: 14px;
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-soft: 0 20px 50px rgb(70 60 190 / 14%);
  --shadow-modal: 0 34px 100px rgb(50 40 140 / 30%);
  --backdrop: rgb(30 28 70 / 40%);
  --sidebar-width: 284px;
  --content-width: 1080px;
  --thread-width: 780px;
  --role-bg: var(--accent);
  --role-ink: var(--accent-on);
  --role-user-bg: #e8ebff;
  --role-user-ink: #3d4bd1;
  --bubble-radius: 16px;
  --composer-bg: rgb(255 255 255 / 78%);
  --composer-line: rgb(205 212 255 / 90%);
  --composer-radius: 26px;
}

[data-theme="aurora"] .composer {
  backdrop-filter: blur(12px);
}

[data-theme="aurora"] .message-role {
  box-shadow: 0 6px 14px rgb(91 108 255 / 28%);
}