/* ============ Темы ============ */

/* Универсальный скрывающий класс: применяется к любым элементам через classList.
   Точечные правила ниже оставлены для совместимости, но больше не обязательны. */
.hidden { display: none !important; }


:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --font-ui: "Segoe UI", "Golos Text", Tahoma, sans-serif;
  --theme-icon: sun;
  --bg: #0b0f14;
  --bg-grad: radial-gradient(1100px 520px at 88% -12%, rgba(255, 159, 28, .09), transparent 62%),
             radial-gradient(820px 460px at -12% 112%, rgba(87, 199, 224, .06), transparent 62%);
  --panel: #151b23;
  --panel-2: #1b2430;
  --panel-3: #232e3c;
  --line: #2a3441;
  --line-soft: rgba(148, 163, 184, .16);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #ff9f1c;
  --accent-contrast: #1a1206;
  --accent-soft: rgba(255, 159, 28, .15);
  --accent-2: #57c7e0;
  --accent-strong: #ffb454;
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, .15);
  --err: #ef4444;
  --err-soft: rgba(239, 68, 68, .14);
  --user-bubble: linear-gradient(135deg, #2f6396, #28507a);
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .32);
  --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .38);
  --code-bg: #1a212e;
}

:root[data-theme="light"] {
  color-scheme: light;
  --font-ui: "Segoe UI", "Golos Text", Tahoma, sans-serif;
  --theme-icon: moon;
  --bg: #f8f9fb;
  --bg-grad: radial-gradient(1100px 520px at 88% -12%, rgba(245, 166, 35, .10), transparent 62%),
             radial-gradient(820px 460px at -12% 112%, rgba(14, 127, 160, .07), transparent 62%);
  --panel: #ffffff;
  --panel-2: #f2f4f7;
  --panel-3: #e8ebf0;
  --line: #e6e8ec;
  --line-soft: rgba(90, 105, 130, .16);
  --text: #1a1d21;
  --muted: #5b6472;
  --accent: #f5a623;
  --accent-contrast: #241608; /* тёмный текст на янтарном фоне: AA (белый давал бы 2.3:1) */
  --accent-soft: rgba(245, 166, 35, .14);
  --accent-2: #0e7fa0;
  --accent-strong: #a86e06;
  --ok: #16a34a;
  --ok-soft: rgba(34, 197, 94, .13);
  --err: #dc2626;
  --err-soft: rgba(239, 68, 68, .11);
  --user-bubble: linear-gradient(135deg, #2f6396, #28507a);
  --shadow: 0 18px 50px rgba(30, 42, 65, .14);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px rgba(16, 24, 40, .05);
  --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 36px rgba(16, 24, 40, .09);
  --code-bg: #eceff5;
}
/* ============ 10 тем ============ */
/* Каждая тема: свои цвета, свой шрифт, своя иконка dark/light (переменные --font-ui и --theme-icon). */

:root[data-theme="graphite"] {
  color-scheme: dark;
  --font-ui: "Segoe UI", Tahoma, sans-serif;
  --theme-icon: moon;
  --bg: #101214;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(120, 144, 156, .08), transparent 60%);
  --panel: #17191d;
  --panel-2: #1d2025;
  --panel-3: #24282e;
  --line: #2b3038;
  --line-soft: rgba(140, 150, 165, .16);
  --text: #e6e9ed;
  --muted: #8d95a3;
  --accent: #8fa3b8;
  --accent-contrast: #10141a;
  --accent-soft: rgba(143, 163, 184, .16);
  --accent-2: #b8c4d4;
  --accent-strong: #aeb9c7;
  --ok: #58c98b;
  --ok-soft: rgba(88, 201, 139, .14);
  --err: #ef6a6a;
  --err-soft: rgba(239, 106, 106, .12);
  --user-bubble: linear-gradient(135deg, #3a4450, #2e3641);
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --code-bg: #1b1e24;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --font-ui: "Candara", "Trebuchet MS", "Segoe UI", sans-serif;
  --theme-icon: sun;
  --bg: #0b1020;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(99, 102, 241, .14), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(56, 189, 248, .08), transparent 60%);
  --panel: #121731;
  --panel-2: #18203e;
  --panel-3: #1f2950;
  --line: #2a3459;
  --line-soft: rgba(130, 145, 200, .18);
  --text: #e5e9ff;
  --muted: #8e97c4;
  --accent: #818cf8;
  --accent-contrast: #0b1020;
  --accent-soft: rgba(129, 140, 248, .18);
  --accent-2: #38bdf8;
  --accent-strong: #38bdf8;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .13);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, .12);
  --user-bubble: linear-gradient(135deg, #4338ca, #3730a3);
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --code-bg: #161c38;
}

:root[data-theme="emerald"] {
  color-scheme: dark;
  --font-ui: "Verdana", "Segoe UI", sans-serif;
  --theme-icon: moon;
  --bg: #0a1410;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(52, 211, 153, .10), transparent 60%);
  --panel: #10201a;
  --panel-2: #152a21;
  --panel-3: #1b352a;
  --line: #244638;
  --line-soft: rgba(110, 200, 160, .16);
  --text: #e2f3ea;
  --muted: #7fae99;
  --accent: #34d399;
  --accent-contrast: #06251a;
  --accent-soft: rgba(52, 211, 153, .15);
  --accent-2: #5eead4;
  --accent-strong: #34d399;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .13);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, .12);
  --user-bubble: linear-gradient(135deg, #065f46, #064e3b);
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --code-bg: #14251e;
}

:root[data-theme="burgundy"] {
  color-scheme: dark;
  --font-ui: "Georgia", "Times New Roman", serif;
  --theme-icon: moon;
  --bg: #170d10;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(225, 100, 116, .10), transparent 60%);
  --panel: #221219;
  --panel-2: #2b181f;
  --panel-3: #372028;
  --line: #4a2c36;
  --line-soft: rgba(220, 140, 155, .17);
  --text: #f3e6e9;
  --muted: #bd8d99;
  --accent: #e16474;
  --accent-contrast: #2a0d12;
  --accent-soft: rgba(225, 100, 116, .16);
  --accent-2: #f0a35e;
  --accent-strong: #f0a35e;
  --ok: #58c98b;
  --ok-soft: rgba(88, 201, 139, .13);
  --err: #ef6a6a;
  --err-soft: rgba(239, 106, 106, .12);
  --user-bubble: linear-gradient(135deg, #7c2d3e, #5e1f2d);
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --code-bg: #241519;
}

:root[data-theme="coffee"] {
  color-scheme: dark;
  --font-ui: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --theme-icon: sun;
  --bg: #171210;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(214, 164, 108, .10), transparent 60%);
  --panel: #211a15;
  --panel-2: #2a211a;
  --panel-3: #342920;
  --line: #46382b;
  --line-soft: rgba(210, 170, 125, .17);
  --text: #f2e8dc;
  --muted: #b39b81;
  --accent: #d6a46c;
  --accent-contrast: #241608;
  --accent-soft: rgba(214, 164, 108, .16);
  --accent-2: #a6c48a;
  --accent-strong: #d9a45f;
  --ok: #94c973;
  --ok-soft: rgba(148, 201, 115, .14);
  --err: #ef6a6a;
  --err-soft: rgba(239, 106, 106, .12);
  --user-bubble: linear-gradient(135deg, #6f4e37, #55382a);
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --code-bg: #241c15;
}

:root[data-theme="ocean"] {
  color-scheme: light;
  --font-ui: "Segoe UI", Verdana, sans-serif;
  --theme-icon: moon;
  --bg: #eef5fa;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(14, 116, 172, .10), transparent 60%);
  --panel: #ffffff;
  --panel-2: #e9f2f9;
  --panel-3: #d9e8f4;
  --line: #c5dcee;
  --line-soft: rgba(60, 110, 150, .18);
  --text: #12324a;
  --muted: #43708f;
  --accent: #0e74ac;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(14, 116, 172, .12);
  --accent-2: #0369a1;
  --accent-strong: #0a5d88;
  --ok: #1e9e63;
  --ok-soft: rgba(30, 158, 99, .12);
  --err: #d64545;
  --err-soft: rgba(214, 69, 69, .10);
  --user-bubble: linear-gradient(135deg, #0369a1, #075985);
  --shadow: 0 18px 50px rgba(20, 60, 90, .15);
  --code-bg: #e4eef6;
}

:root[data-theme="sand"] {
  color-scheme: light;
  --font-ui: "Corbel", "Candara", "Segoe UI", sans-serif;
  --theme-icon: sun;
  --bg: #f8f4ec;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(180, 140, 70, .10), transparent 60%);
  --panel: #fffdf8;
  --panel-2: #f3ecdd;
  --panel-3: #e9dfc9;
  --line: #ddd0b4;
  --line-soft: rgba(130, 110, 70, .18);
  --text: #3d3222;
  --muted: #6f6249;
  --accent: #b4872f;
  --accent-contrast: #1c1408; /* белый на #b4872f давал всего 3.2:1 */
  --accent-soft: rgba(180, 135, 47, .14);
  --accent-2: #8c6d2f;
  --accent-strong: #8a6420;
  --ok: #1e9e63;
  --ok-soft: rgba(30, 158, 99, .12);
  --err: #c53d3d;
  --err-soft: rgba(197, 61, 61, .10);
  --user-bubble: linear-gradient(135deg, #a67c2e, #8a6425);
  --shadow: 0 18px 50px rgba(90, 70, 30, .16);
  --code-bg: #efe7d5;
}

:root[data-theme="lavender"] {
  color-scheme: light;
  --font-ui: "Trebuchet MS", "Segoe UI", sans-serif;
  --theme-icon: moon;
  --bg: #f5f2fa;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(140, 100, 200, .10), transparent 60%);
  --panel: #fdfcff;
  --panel-2: #efeaf7;
  --panel-3: #e2d9f0;
  --line: #d4c7e8;
  --line-soft: rgba(110, 80, 160, .18);
  --text: #33264d;
  --muted: #6f5f92;
  --accent: #7c5cbf;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(124, 92, 191, .13);
  --accent-2: #5a3d99;
  --accent-strong: #5a3d99;
  --ok: #1e9e63;
  --ok-soft: rgba(30, 158, 99, .12);
  --err: #d64545;
  --err-soft: rgba(214, 69, 69, .10);
  --user-bubble: linear-gradient(135deg, #6d4fae, #573d91);
  --shadow: 0 18px 50px rgba(70, 45, 120, .16);
  --code-bg: #eae3f4;
}

:root[data-theme="forest"] {
  color-scheme: light;
  --font-ui: "Gill Sans", "Gill Sans MT", "Segoe UI", sans-serif;
  --theme-icon: sun;
  --bg: #eff5ee;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(60, 130, 80, .10), transparent 60%);
  --panel: #fbfdfb;
  --panel-2: #e6efe4;
  --panel-3: #d5e5d3;
  --line: #bfd6bd;
  --line-soft: rgba(60, 110, 65, .18);
  --text: #1d3320;
  --muted: #4c6f4e;
  --accent: #2e7d43;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(46, 125, 67, .13);
  --accent-2: #1b5e34;
  --accent-strong: #256b37;
  --ok: #1e9e63;
  --ok-soft: rgba(30, 158, 99, .12);
  --err: #d64545;
  --err-soft: rgba(214, 69, 69, .10);
  --user-bubble: linear-gradient(135deg, #2e7d43, #236436);
  --shadow: 0 18px 50px rgba(30, 60, 35, .16);
  --code-bg: #e4eee2;
}

:root[data-theme="sky"] {
  color-scheme: light;
  --font-ui: "Nunito", "Segoe UI", Verdana, sans-serif;
  --theme-icon: sun;
  --bg: #f0f7fd;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(60, 150, 220, .12), transparent 60%);
  --panel: #ffffff;
  --panel-2: #e8f3fb;
  --panel-3: #d7eaf8;
  --line: #c2dff2;
  --line-soft: rgba(50, 110, 160, .18);
  --text: #173042;
  --muted: #476e8d;
  --accent: #2196d3;
  --accent-contrast: #1c1408; /* белый на #2196d3 давал всего 3.3:1 */
  --accent-soft: rgba(33, 150, 211, .13);
  --accent-2: #1272a8;
  --accent-strong: #1272a8;
  --ok: #1e9e63;
  --ok-soft: rgba(30, 158, 99, .12);
  --err: #d64545;
  --err-soft: rgba(214, 69, 69, .10);
  --user-bubble: linear-gradient(135deg, #2196d3, #1877ab);
  --shadow: 0 18px 50px rgba(30, 70, 110, .15);
  --code-bg: #e6f1f9;
}

/* Шрифт и целевая иконка по умолчанию (базовые dark/light переопределяют выше) */
:root { --font-ui: "Segoe UI", "Golos Text", Tahoma, sans-serif; --theme-icon: auto; }

/* Единая высота строки ввода: поле, «Отправить», скрепка и микрофон — одной
   высоты (квадраты у иконочных кнопок). На десктопе переопределяется ниже. */
:root { --composer-h: 50px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 19px;
  display: flex;
  flex-direction: column;
  transition: background-color .2s, color .2s;
}

body.theme-anim *,
body.theme-anim *::before,
body.theme-anim *::after {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

::selection { background: var(--accent-soft); }

/* Скроллбары в цвет темы */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============ Шапка ============ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
}

.brand { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f4b740, #e08c1f);
  color: #1c1408;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(229, 154, 16, .35);
}

.brand-text { display: flex; flex-direction: column; gap: 4px; }

/* Вторая строка бренда: «1С Агент» перед меткой «ДЕМО» (первая строка — название). */
.brand-sub, .sb-brand-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; line-height: 1.2; }
.sb-brand-sub .demo-badge { align-self: center; margin-left: 2px; }
.drawer-brand { display: flex; flex-direction: column; gap: 2px; }
.drawer-brand b { font-size: 17px; }
.brand-text b { font-size: 19px; line-height: 1.2; }

.statuses { display: flex; gap: 6px; flex-wrap: wrap; }

.st {
  font-size: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  cursor: default;
  white-space: nowrap;
}
.st-ok  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.st-demo { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 45%, transparent); background: var(--accent-soft); }
.st-off { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.st-err { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.st-check { color: var(--muted); border-color: var(--line); background: var(--panel-2); }

.topnav { display: flex; gap: 8px; align-items: center; }

/* Чип пользователя (вход через Bitrix24) */
.user-chip {
  font-size: 15.5px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip.hidden, .topnav .hidden { display: none; }

/* ============ Кнопки ============ */

button {
  font-family: inherit;
  font-size: 17.5px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s, opacity .15s;
}
button:hover { background: var(--panel-3); }
/* :active-сдвиг только для кнопок в обычном потоке. У позиционированных кнопок
   (eye-btn, plans-toggle, scroll-down-fab) transform задаёт выравнивание —
   глобальный сдвиг на время нажатия сбивает позицию, и mousedown/click
   попадают в разные точки (проявлялось как «дёргается, но не срабатывает»). */
button:active { transform: translateY(1px); }
/* У кнопок ниже transform задаёт выравнивание (translateY(-50%) и т.п.).
   При нажатии его НЕЛЬЗЯ сбрасывать: кнопка прыгает на пол-высоты прямо под
   курсором, mouseup попадает мимо, и клик не доходит до обработчика —
   выглядело как «дёргается, но не срабатывает». */
button:active.eye-btn { transform: translateY(-50%); }
button:active.plans-toggle { transform: translateY(-50%); }
button:active.scroll-down-fab { transform: translateX(-50%) translateY(6px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.primary-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}
.primary-btn:hover { background: color-mix(in srgb, var(--accent) 84%, #000); border-color: color-mix(in srgb, var(--accent) 84%, #000); }

.primary-btn:disabled, .ghost-btn:disabled { opacity: .45; cursor: wait; }
.primary-btn:disabled:hover { background: var(--accent); }

.ghost-btn { background: transparent; }
.ghost-btn:hover { background: var(--panel-2); }

.icon-btn {
  width: 38px; height: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.icon-btn:hover { background: var(--panel-2); }
.icon-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

/* Кнопка темы: показываем «целевую» иконку (что включится при клике).
   У каждой темы своя целевая иконка — задаётся переменной --theme-icon («sun»/«moon»).
   JS выставляет <html data-theme-icon="…"> из переменной активной темы. */
.icon-sun, .icon-moon { display: none; }
:root[data-theme-icon="sun"] .icon-sun  { display: block; color: var(--accent-strong); }
:root[data-theme-icon="moon"] .icon-moon { display: block; color: var(--accent-2); }

/* ============ Раскладка ============ */

.layout {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.chat-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 20px 12px;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Верхняя зона (приветствие + лента) — единая прокручиваемая область под прибитым низом */
.chat-scroll { display: flex; flex-direction: column; }

.chat-head { padding: 16px 4px 8px; }
.chat-title { font-size: 25px; font-weight: 700; }
.chat-sub { color: var(--muted); font-size: 16px; margin-top: 4px; }

.messages {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 4px 16px;
  min-height: 0;
  /* Лента чата — главный элемент: тарифы/подсказки не должны сжимать её в полоску
     (на 1280×800 с развёрнутыми тарифами оставалось ~26px). Ниже — комфортный минимум;
     на совсем низких экранах панель скроллится сама (см. .chat-panel). */
  min-height: min(320px, 45vh);
}

.chat-panel {
  /* Если контент панели выше окна (низкий экран), панель прокручивается целиком,
     а не сплющивает ленту до нечитаемого. */
  overflow-y: auto;
}

.msg { display: flex; animation: rise .22s ease; }
.msg.user { justify-content: flex-end; }
.msg.agent { justify-content: flex-start; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  body.theme-anim * { transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.bubble {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.msg.user .bubble {
  background: var(--user-bubble);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Свой вопрос кликабелен: возвращается в поле ввода для правки */
.msg.user .bubble.editable { cursor: text; }
.msg.agent .bubble {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.bubble.pending { color: var(--muted); }

.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble h1, .bubble h2, .bubble h3 { margin: 10px 0 6px; font-size: 19px; }
.bubble ul, .bubble ol { margin: 6px 0; padding-left: 22px; }
.bubble table { border-collapse: collapse; margin: 8px 0; font-size: 17px; display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* Подсказка для широких таблиц на мобильных: скроллбары там скрыты */
.tbl-hint { font-size: 12.5px; color: var(--muted); margin: 2px 0 2px; }
.bubble th, .bubble td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bubble tr:first-child th, .bubble tr:first-child td { background: var(--panel-3); position: sticky; top: -1px; }
.bubble code { background: var(--panel-3); border-radius: 5px; padding: 1px 6px; font-family: Consolas, monospace; font-size: 16px; }
.bubble pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; position: relative; }
.bubble pre code { background: transparent; padding: 0; }
/* Кнопка копирования код-блока: мелкая, в правом верхнем углу блока */
.code-copy {
  position: absolute; top: 4px; right: 4px;
  min-width: 28px; height: 24px; padding: 0 6px;
  font-size: 13px; line-height: 1;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px;
  opacity: .75;
}
.code-copy:hover { color: var(--text); border-color: var(--accent); opacity: 1; }
.bubble blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--accent); color: var(--muted); }
.bubble a { color: var(--accent-2); }
.bubble .md-error { color: var(--err); }

/* Анимация «печатает…» */
.typing { display: inline-flex; gap: 4px; align-items: center; margin-right: 6px; vertical-align: middle; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink {
  0%, 70%, 100% { opacity: .25; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

/* ============ Чипсы быстрых вопросов ============ */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 2px 8px;
}

.chip {
  font-size: 15.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
.chip:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* ============ Шаблоны-пресеты ============ */

.presets { padding: 0 2px 8px; }
.presets.hidden { display: none; }
.preset-toggle { font-size: 14px; padding: 4px 10px; }
.preset-toggle[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.presets-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.preset-chip { font-size: 14px; padding: 5px 11px; text-align: left; }

/* Мультабазность: список подключений 1С в настройках. */
.bases-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.base-row { display: flex; align-items: stretch; gap: 6px; }
.base-row .base-select {
  flex: 1; text-align: left; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); font-size: 14.5px; cursor: pointer;
}
.base-row .base-select:hover { border-color: var(--accent); }
.base-row.active .base-select { border-color: var(--accent); background: var(--accent-soft); }
.base-badge { font-size: 12px; font-weight: 700; color: var(--accent); }
.btn-aligned { display: flex; align-items: end; }
.btn-aligned .ghost-btn { width: 100%; }
.base-row .arch-del { position: static; flex: 0 0 26px; }

/* ============ Ввод ============ */

.chat-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding-top: 2px;
  /* iPhone с «чёлкой» в PWA-режиме: поле ввода не должно прилипать к home-индикатору. */
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

#chatInput {
  flex: 1;
  resize: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.45;
  min-height: var(--composer-h);
  max-height: 200px;
  transition: border-color .15s, box-shadow .15s;
}
#chatInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.send-btn {
  height: var(--composer-h);
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.send-btn svg { width: 17px; height: 17px; }
.send-btn:disabled { opacity: .5; cursor: default; }
.send-btn:disabled:hover { background: var(--accent); }

/* Режим «Стоп»: пока идёт запрос, кнопка отправки становится кнопкой прерывания —
   стрелка заменяется квадратом (стоп-иконка), подпись меняется. Кнопка активна. */
.send-btn .stop-ico { display: none; }
.send-btn .stop-label { display: none; }
.send-btn.stopping { background: var(--panel-3); color: var(--text); }
.send-btn.stopping:hover { background: var(--panel-2); }
.send-btn.stopping:disabled { opacity: 1; cursor: pointer; }
.send-btn.stopping:disabled:hover { background: var(--panel-3); }
.send-btn.stopping .send-ico { display: none; }
/* Пометка под обрезанной длинной таблицей */
.tbl-note { font-size: 13.5px; color: var(--muted); margin: 4px 0 10px; }

/* Зона чата при перетаскивании CSV-файла */
.messages.dragover { outline: 2px dashed var(--accent); outline-offset: -10px; border-radius: 10px; }

.send-btn.stopping .stop-ico { display: block; }
.send-btn.stopping .send-label { display: none; }
.send-btn.stopping .stop-label { display: inline; }
.stopped-note { display: block; margin-top: 6px; font-size: 14px; }

/* Отчёт по расписанию (ЛК) */
.sched-bots { display: flex; gap: 16px; margin: 10px 0; }
.sched-bot { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sched-q-row { display: flex; gap: 6px; margin-bottom: 6px; }
.sched-q-row input { flex: 1; }
.sched-q-del { flex: 0 0 auto; }
/* Поле времени занимало всю ширину панели — оставляем компактное, под формат ЧЧ:ММ. */
#schedTime { width: 132px; }

.chat-status {
  min-height: 18px;
  font-size: 15.5px;
  color: var(--muted);
  padding: 4px 4px 0;
  /* Слева внизу в этой зоне живёт переключатель тем — статус не должен налезать на него */
  padding-left: 200px;
}
.chat-status.err { color: var(--err); }

/* ============ Пикер модели и режима мышления (под полем ввода) ============ */

.chat-pickers {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 4px 0;
  /* Слева внизу панель тем — пикеры не должны налезать на неё */
  padding-left: 200px;
}
.picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.picker-ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.chat-pickers select {
  max-width: 300px;
  min-width: 0;
  font-size: 15.5px;
  padding: 3px 22px 3px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.chat-pickers select:hover { color: var(--text); border-color: var(--accent); }

/* ===== Демо-выпадашка моделей (кастомная: нативный select не рисует иконки) ===== */
.demo-dd { position: relative; display: inline-block; }
.demo-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 300px; min-width: 0;
  font-size: 15.5px; font-family: inherit;
  padding: 3px 26px 3px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* стрелка как у нативного select */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.demo-dd-btn:hover { color: var(--text); border-color: var(--accent); }
.demo-dd-caret { display: none; }
.demo-dd-panel {
  position: absolute;
  bottom: calc(100% + 6px); /* пикеры прижаты к низу — раскрываемся вверх */
  left: 0;
  width: min(360px, 92vw);
  max-height: min(420px, 70vh);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 70;
  padding: 6px;
}
.demo-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
}
.demo-dd-item:hover { background: var(--panel-3); }
.demo-dd-item.active { color: var(--accent-strong); font-weight: 600; }
.demo-dd-item.active .demo-dd-check { margin-left: auto; color: var(--accent-strong); }
.demo-dd-item.locked .dd-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-dd-item.locked:hover .dd-name { color: var(--text); }
.demo-dd-item.locked .dd-lock { margin-left: auto; opacity: .9; flex: none; }
.demo-dd-sep {
  padding: 8px 10px 6px;
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.demo-dd-list { display: flex; flex-direction: column; }
.dd-logo {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.demo-dd-item .dd-logo { flex: none; }
.demo-dd-btn .dd-logo { font-size: 12px; }

/* ============ Переключатель тем (слева внизу) ============ */

.theme-picker {
  /* Фиксируем к левому нижнему углу ОКНА (не страницы): видно всегда,
     поверх любого места прокрутки. Пилюля с фоном — чтобы читалась,
     когда под ней оказывается контент (тарифы, сообщения). */
  position: fixed;
  left: 10px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 9px;
}
.theme-picker .tp-icon { width: 14px; height: 14px; flex: 0 0 auto; opacity: .85; }
.theme-picker select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 22px 4px 8px;
  cursor: pointer;
  max-width: 168px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.theme-picker select:hover { border-color: var(--accent); }
.theme-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* На узких экранах прячем подпись, оставляем компактный селект */
@media (max-width: 620px) {
  .theme-picker { left: 8px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .theme-picker select { max-width: 132px; }
  .chat-status { padding-left: 150px; padding-right: 60px; }
  .chat-pickers { padding-left: 150px; /* справа оставляем место под «Написать нам»-кнопку */
    padding-right: 60px; }
  .chat-pickers select { max-width: 180px; }
}

/* Баннер «нет сети» над полем ввода */
.net-banner {
  display: none;
  margin: 6px 2px 0;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--err) 45%, transparent);
  background: var(--err-soft);
  color: var(--err);
  font-size: 16px;
}
.net-banner.show { display: block; animation: rise .2s ease; }

/* ============ Боковая панель сущностей ============ */

.side-panel {
  width: 380px;
  flex: 0 0 380px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: slidein .18s ease;
}
@keyframes slidein {
  from { transform: translateX(14px); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.side-panel.hidden { display: none; }

.side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 17.5px;
}

.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.side-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.side-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
}
.side-search input:focus { outline: none; }

.entities-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entities-count {
  font-size: 15px;
  padding: 2px 2px 4px;
  font-variant-numeric: tabular-nums;
}

.entity-item {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  transition: border-color .12s;
  cursor: pointer;
}
.entity-item:hover { border-color: var(--accent); }
.entity-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.entity-item .en { font-family: Consolas, monospace; font-size: 15.5px; color: var(--accent-2); word-break: break-all; }
.entity-item .et { font-size: 15.5px; color: var(--muted); margin-top: 2px; }

/* Архив чатов в боковой панели: тот же список, что у сущностей. */
.arch-item { position: relative; display: block; }
.arch-item .arch-title { font-size: 15.5px; font-weight: 600; word-break: break-word; padding-right: 26px; }
.arch-item .arch-meta { font-size: 14px; margin-top: 2px; }
.arch-del {
  position: absolute; top: 7px; right: 7px;
  width: 22px; height: 22px; min-width: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; border-radius: 6px;
  color: var(--muted); background: transparent; border: 1px solid transparent;
}
.arch-del:hover { color: var(--err); border-color: var(--err); }
#historyView .side-foot { border-top: 1px solid var(--line); }

.side-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}

.muted { color: var(--muted); }
.pad { padding: 10px 2px; display: block; }
.small { font-size: 15px; font-weight: 400; margin-top: 2px; }

/* ============ Модальное окно настроек ============ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, .62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  animation: fadein .15s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.overlay.hidden { display: none; }

.modal {
  width: 720px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  animation: pop .16s ease;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.modal-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 18px; }

.cfg-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cfg-block legend { padding: 0 8px; font-weight: 600; font-size: 17px; color: var(--accent); }

label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--muted); }
/* Подпись поля одной строкой: label — flex-column, без обёртки текст и «*»
   становятся отдельными flex-элементами и «*» уезжает на свою строку. */
label .lbl { display: block; }
label .lbl .req { margin-left: 2px; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 17.5px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

.input-wrap { position: relative; display: block; }
.input-wrap input { width: 100%; padding-right: 40px; }

.eye-btn {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eye-btn svg { width: 17px; height: 17px; }
.eye-btn:hover { color: var(--text); background: transparent; }
.eye-btn.on { color: var(--accent); }

.check-row { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 17px; cursor: pointer; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Строка «подпись слева, ссылка справа» (метка над полем ввода) */
.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lbl-text { font-size: 16px; color: var(--muted); }
.lbl-link { font-size: 15.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.lbl-link:hover { text-decoration: underline; }

/* ---- Вход / регистрация ---- */
.auth-modal { max-width: 420px; width: 100%; }
.auth-tabs { display: flex; gap: 6px; }
.auth-tab {
  flex: 1; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; font-family: inherit;
}
.auth-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
#authForm { display: flex; flex-direction: column; gap: 12px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soc-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start;
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 17px; cursor: pointer; font-family: inherit;
}
.soc-btn:hover { border-color: var(--accent); }
.soc-ico {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; flex: 0 0 auto;
}
.soc-yandex { background: #fc3f1d; }
.soc-vk { background: #0077ff; }
.soc-max { background: #7b61ff; }
.soc-tg { background: #2aabee; }
.bot-code-box { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bot-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bot-code-row code { font-size: 25px; letter-spacing: 2px; font-weight: 700; color: var(--accent); font-family: Consolas, monospace; }
#refBlock .bot-code-row { flex-wrap: wrap; gap: 8px; }
#refBlock .bot-code-row code { font-size: 20px; letter-spacing: 1px; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

/* Восстановление пароля: форма «Забыли пароль?» */
#forgotForm { display: flex; flex-direction: column; gap: 10px; }
#forgotForm.hidden { display: none; }
#btnForgot { margin-top: 2px; align-self: flex-start; }

/* ---- Личный кабинет ---- */
.bot-link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bot-link-row b { min-width: 84px; }
.bot-link-row .hint { flex: 1; min-width: 120px; }

/* Опасная зона ЛК + смена пароля */
.danger-zone { margin-top: 10px; border: 1px solid var(--err); border-radius: 10px; padding: 8px 12px; }
.danger-zone summary { cursor: pointer; color: var(--err); font-weight: 600; font-size: 16px; }
.danger-zone form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.danger-btn {
  background: none; border: 1px solid var(--err); color: var(--err); border-radius: 9px;
  padding: 8px 14px; font: inherit; cursor: pointer;
}
.danger-btn:hover { background: var(--err); color: #fff; }
#passForm { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#passForm.hidden { display: none; }
label.hidden, .modal-body label.hidden { display: none; }

.hint { font-size: 15px; color: var(--muted); line-height: 1.5; }
.hint code { background: var(--panel-2); border-radius: 5px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 14.5px; }

.btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.test-result { font-size: 15.5px; }
.test-result.ok { color: var(--ok); }
.test-result.err { color: var(--err); }

.save-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

/* Ошибки полей формы */
.field-error {
  font-size: 15px;
  color: var(--err);
  line-height: 1.4;
}
label:has(.field-error) input {
  border-color: var(--err);
}
label:has(.field-error) input:focus {
  box-shadow: 0 0 0 3px var(--err-soft);
}

/* Кнопка повтора запроса в чате */
.retry-row { margin-top: 8px; }
.retry-btn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
}
.retry-btn:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel-2)); }

/* Действия под ответом агента: обновить / копировать / оценка */
.msg-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 6px 0 0 4px;
  flex-wrap: wrap;
}
.act-btn {
  font-size: 15px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}
.act-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.act-fb-up.fb-on, .act-fb-down.fb-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Подсказки-уточнения после ответа */
.suggest-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0 0 4px;
  flex-wrap: wrap;
}
.suggest-chip { font-size: 15px; padding: 4px 10px; }

/* Кнопка копирования таблицы в Excel */
.tbl-copy {
  font-size: 14.5px;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 6px 0 2px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
}
.tbl-copy + .tbl-copy { margin-left: 6px; }
.tbl-copy:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* SVG-график под таблицей */
.chart-wrap { margin: 10px 0 4px; max-width: 520px; }
.chart-title { font-size: 15px; margin-bottom: 4px; }
.chart-wrap svg { width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.chart-wrap .bar { fill: var(--accent); opacity: .85; }
.chart-wrap .lbl { fill: var(--text); font-size: 14px; }
.chart-wrap .val { fill: var(--muted); font-size: 14px; }

/* Кнопка голосового ввода */
.voice-btn { width: var(--composer-h); height: var(--composer-h); border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); flex: 0 0 auto; }
.voice-btn:hover { border-color: var(--accent); }
.voice-btn.recording { color: var(--err); border-color: var(--err); animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--err-soft); }
  50% { box-shadow: 0 0 0 6px var(--err-soft); }
}

/* ============ Плавающая кнопка «Написать нам» ============ */

.contact-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: 17.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .2s;
}
.contact-fab svg { width: 18px; height: 18px; }
/* Hover/active: затемняем фон, а не осветляем — текст остаётся контрастным во всех темах */
.contact-fab:hover, .contact-fab:focus-visible {
  background: color-mix(in srgb, var(--accent) 82%, #000);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}
.contact-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============ Форма «Написать нам» ============ */

.contact-modal { width: 560px; }

.req { color: var(--err); }

.contact-modal textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 17.5px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.contact-modal textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.contact-modal input:focus,
.contact-modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.drop-zone {
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  align-items: center;
  transition: border-color .15s, background-color .15s;
}
.drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent); outline: none; }
.drop-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }

.file-list { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 6px; text-align: left; }
.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
}
.file-item .fi-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .fi-size { color: var(--muted); flex: 0 0 auto; }
.file-item .fi-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 17.5px;
  line-height: 1;
}
.file-item .fi-del:hover { color: var(--err); background: var(--err-soft); }
.file-item.too-large { border-color: color-mix(in srgb, var(--err) 55%, transparent); }
.file-item.too-large .fi-size { color: var(--err); }

/* ============ Тосты ============ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(16px);
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 17px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-left-color: var(--err); }

/* ============ Адаптив ============ */

@media (max-width: 900px) {
  .side-panel {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    z-index: 10;
    width: min(380px, 92vw);
    flex-basis: auto;
    box-shadow: -12px 0 30px rgba(0, 0, 0, .35);
  }
  .grid2 { grid-template-columns: 1fr; }
  .bubble { max-width: 95%; }
  .brand-text b { font-size: 17px; }
  .topnav .ghost-btn { padding: 8px 10px; font-size: 16px; }
  .chat-panel { padding: 0 12px 10px; }
}

@media (max-width: 620px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .topnav { gap: 5px; flex-wrap: nowrap; }
  .topbar { min-width: 0; }
  .topbar > .topnav { flex-shrink: 1; min-width: 0; }
  .brand { min-width: 0; flex: 0 0 auto; } /* бренд не сжимается в «Агент 1…» — всю усадку забирает прокручиваемое меню */
  .brand-text { min-width: 0; }
  .topnav { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #btnNewChat { display: none; }
  #btnPrint { display: none; } /* печать с телефона редка — место в шапке дороже */
  /* статусы НЕ прячем — дизайн v2 показывает чипы 1С/LLM/Офлайн на мобильном (компактно) */
  .brand-text b { font-size: 15px; white-space: nowrap; } /* «Ai Smart Bot» одной строкой, не переносится */
  .plans-head .muted { padding: 0 50px; } /* текст не заезжает под кнопку «−/+» справа */
  .logo { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; flex: 0 0 auto; }
  .topnav .ghost-btn { padding: 8px 8px; font-size: 15px; white-space: nowrap; }
  .topnav .icon-btn { width: 34px; height: 34px; min-width: 34px; }
  .chat-panel { padding: 0 8px 8px; }
  .send-btn { padding: 0 12px; }
  .send-btn span { display: none; } /* на узких экранах остаётся иконка отправки */
  .voice-btn svg { width: 18px; height: 18px; }
  #chatInput { font-size: 19px; } /* ≥16px не даёт iOS зумить при фокусе */
  .msg-actions, .suggest-row { margin-left: 0; }
  .contact-fab { right: 10px; bottom: 10px; padding: 10px 14px; font-size: 16px; }
  .contact-fab span { display: none; } /* на узких экранах остаётся иконка */
  .contact-fab svg { width: 20px; height: 20px; }
  .auth-socials { grid-template-columns: 1fr; }
  #btnAccount { display: none; } /* на телефоне кабинет открывается через user-chip */
}

/* ============ Тарифы (витрина на главной) ============ */

.plans-section { padding: 0 8px 6px; }
.plans-head { text-align: center; margin-bottom: 10px; position: relative; }
.plans-head b { font-size: 19px; }
.plans-head .muted { font-size: 15.5px; }
/* Крупная зона клика (48px): глиф «−»/«+» внутри всего 14px — по нему мажут,
   отсюда «дёргается, но не срабатывает». Знак рисуем геометрически (::before/
   ::after): текстовый глиф U+2212/U+002B центрируется строкой, а не «чернилами»,
   и его положение зависит от шрифта темы — отсюда неровная посадка. */
.plans-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; min-width: 48px; margin-right: 0; padding: 0; font-size: 0; line-height: 0; color: var(--text); font-weight: 700; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.plans-toggle::before,
.plans-toggle::after { content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 2px; }
.plans-toggle::before { width: 15px; height: 2.5px; }
.plans-toggle::after { width: 2.5px; height: 15px; }
.plans-toggle[aria-expanded="true"]::after { display: none; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 980px; margin: 0 auto; }
/* Свернутые тарифы: только название и цена. */
.plans.collapsed .plan ul,
.plans.collapsed .plan .plan-cta { display: none; }
.plans.collapsed .plan { padding-bottom: 12px; }
@media (max-width: 620px) {
  /* Правило ниже должно идти ПОСЛЕ базового .plans, иначе базовый его перебивает
     (одинаковая специфичность — побеждает последний в файле). */
  .plans { grid-template-columns: 1fr; }
}
.plan {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--panel);
}
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.plan-name { font-weight: 700; font-size: 17.5px; }
.plan-price { font-size: 19px; font-weight: 700; color: var(--accent); }
.plan-price small { font-size: 15px; font-weight: 400; color: var(--muted); }
.plan ul { margin: 2px 0 0; padding-left: 18px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.plan .plan-cta { margin-top: auto; align-self: flex-start; font-size: 15.5px; padding: 7px 12px; }
.plans-note { text-align: center; margin-top: 8px; font-size: 14.5px; }

/* SEO-блок: смысл отдаём роботам и ассистентам, на экране не показываем. */
#seoBlock { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* При печати плавающие элементы повторялись бы на каждой странице — убираем. */
@media print {
  .theme-picker, .contact-fab, .scroll-down-fab, .topbar, .code-copy { display: none !important; }
}

/* Плашка «Вниз» над полем ввода: появляется, когда история прокручена вверх. */
.scroll-down-fab {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(6px);
  z-index: 30;
  width: 40px; height: 40px; min-width: 40px; padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.scroll-down-fab.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.scroll-down-fab:hover { background: var(--panel-2); }

/* Свои шаблоны в панели пресетов. */
.preset-save { font-size: 13.5px; opacity: .85; }
.preset-save:hover { opacity: 1; }
.my-preset { border-style: dashed; }
.preset-del { position: static; flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; align-self: center; }
#myPresetsWrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#myPresetsWrap.hidden { display: none; }

/* Прикреплённые CSV-файлы над полем ввода. */
.csv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 6px; }
.csv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.csv-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.csv-chip button:hover { color: var(--err); }
.attach-btn { align-self: flex-end; width: var(--composer-h); height: var(--composer-h); }

/* ==================== Дизайн v2: сайдбар, drawer, hero, таб-бар ==================== */

/* Каркас: сайдбар + контент */
body { display: flex; flex-direction: row; min-height: 100vh; }
.main-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
  flex: 0 0 236px; width: 236px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  gap: 6px;
  z-index: 40;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.sb-brand .logo { width: 38px; height: 38px; }
.sb-brand-text { display: flex; flex-direction: column; }
.sb-brand-text b { font-size: 17px; }
.demo-badge {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 35%, transparent);
  border-radius: 6px;
  padding: 1px 7px;
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text); text-decoration: none;
  font-size: 15.5px;
  cursor: pointer;
  border: 0; background: none; font-family: inherit; text-align: left;
  width: 100%;
}
.sb-item svg { width: 19px; height: 19px; flex: none; opacity: .8; }
.sb-item:hover { background: var(--panel-3); }
.sb-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sb-item.active svg { opacity: 1; }
.sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.sb-promo {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 30%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.sb-promo b { font-size: 14px; color: var(--accent-strong); }
.sb-promo span { font-size: 12.5px; color: var(--muted); }
.sb-theme { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0; }
.sb-theme button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; }
.sb-theme button:hover { color: var(--text); }
.sb-theme button svg { width: 18px; height: 18px; display: block; }
.tri-track { width: 44px; height: 22px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); position: relative; display: inline-block; }
.tri-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: left .15s; }
.tri-knob.auto { left: 13px; }
.tri-knob.dark { left: 24px; }
.sb-settings { margin-top: 2px; }

/* Hero (приветствие до первого вопроса) */
.hero {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px;
  align-items: center;
  padding: 14px 6px 10px;
}
body.chat-started .hero { display: none; }
.hero-eyebrow { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hero-title { font-size: 38px; line-height: 1.08; margin: 0 0 8px; font-weight: 800; }
.hero-title .accent { color: var(--accent-strong); }
.welcome-card {
  margin-top: 12px;
  display: flex; gap: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15.5px;
}
.wc-spark { font-size: 20px; flex: none; }
.wc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wc-note { color: var(--muted); font-size: 14.5px; }
.wc-note a { color: var(--accent-2); }

/* Иллюстрация героя: CSS-композиция без внешних картинок */
.hero-art { position: relative; }
.ha-logo {
  position: absolute; left: 6%; top: 12%;
  width: 84px; height: 84px; border-radius: 20px;
  background: linear-gradient(135deg, #f4b740, #e08c1f);
  color: #1c1408; font-weight: 800; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(229, 154, 16, .35);
  transform: rotate(-6deg);
}
.ha-card {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.ha-check { right: 4%; top: 4%; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; font-size: 15px; font-weight: 600; transform: rotate(2deg); }
.ha-check div { display: flex; align-items: center; gap: 8px; }
.ha-check i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ha-dots { left: 16%; bottom: 8%; padding: 14px 18px; display: flex; gap: 6px; transform: rotate(-3deg); }
.ha-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .55; }
.ha-bars { right: 14%; bottom: 2%; width: 130px; height: 96px; padding: 14px; display: flex; align-items: flex-end; gap: 9px; transform: rotate(2deg); }
.ha-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #b8c4d4, #8fa1b8); }
.ha-note {
  position: absolute; right: 0; top: 48%;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-size: 17px; color: var(--muted);
  transform: rotate(-4deg);
}

/* Тарифы v2 */
.plans-head b { font-size: 21px; }
.plan {
  position: relative;
  border-radius: 16px;
  font-size: 14px;
  padding: 8px 11px;
  gap: 1px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}
.plan-featured { box-shadow: 0 10px 30px rgba(229, 154, 16, .18); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-ico {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--panel-3); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.plan-ico svg { width: 18px; height: 18px; }
.plan-badge {
  position: absolute; top: -11px; right: 14px;
  background: var(--accent); color: #1c1408;
  font-size: 12.5px; font-weight: 700;
  border-radius: 999px; padding: 3px 12px;
  box-shadow: 0 4px 12px rgba(229, 154, 16, .4);
}
.plan ul { list-style: none; padding: 0; margin: 6px 0 8px; }
.plan ul li { position: relative; padding-left: 19px; line-height: 1.3; font-size: 14px; }
.plan ul li::before { content: '✓'; position: absolute; left: 2px; color: var(--accent-strong); font-weight: 700; }
.plan .plan-cta { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 5px 10px; font-size: 14px; }
.plan .plan-cta .arr { transition: transform .15s; }
.plan .plan-cta:hover .arr { transform: translateX(3px); }

/* Видимые информационные секции (бывш. скрытый SEO-блок) */
.info-section { max-width: 860px; margin: 26px auto 0; padding: 0 6px; }
.info-section h2 { font-size: 21px; margin: 22px 0 8px; }
.info-section p { color: var(--text); opacity: .92; }
.how-steps { padding-left: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.how-steps li {
  counter-increment: step;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
}
.how-steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #1c1408; font-weight: 800; font-size: 14px;
  margin-bottom: 8px;
}
.how-steps li b { display: block; margin-bottom: 4px; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.doc-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  text-decoration: none;
  color: var(--text);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.doc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-card b { font-size: 15px; }
.doc-card span { font-size: 13.5px; color: var(--muted); }

/* Мобильный drawer */
.burger { display: none; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(10, 14, 20, .5); z-index: 88; }
.drawer {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--panel);
  border-right: 1px solid var(--line);
  z-index: 90;
  padding: 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.drawer.hidden { display: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.drawer-head .logo { width: 36px; height: 36px; }
.drawer-head b { flex: 1; font-size: 16px; }
.drawer input[type="search"] {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-family: inherit; font-size: 15px;
}
.drawer-group { display: flex; flex-direction: column; gap: 2px; }
.drawer-title { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 6px 4px; }
.drawer a { display: block; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.drawer a:hover { background: var(--panel-3); }

/* Нижний таб-бар (мобильные) */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  z-index: 60;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--muted); text-decoration: none;
  padding: 4px 10px; border-radius: 10px;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.active { color: var(--accent-strong); font-weight: 600; }

/* Адаптив: сайдбар исчезает, появляется drawer/таб-бар */
@media (max-width: 1080px) {
  .input-dock { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 7; background: var(--bg); }
  .sidebar { display: none; }
  .burger, .burger.hidden { display: inline-flex; } /* меню открывает drawer */
  .tabbar { display: flex; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .contact-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .theme-picker { display: none; } /* тема — в шапке и настройках */
  .hero-body { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero-title { font-size: 34px; }
  .how-steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .statuses .st { font-size: 12.5px; padding: 2px 7px; }
}
@media print {
  .sidebar, .tabbar, .drawer { display: none !important; }
}

/* Правки каркаса v2 по результатам прогонов */
@media (min-width: 1081px) {
  .topbar .brand { display: none; } /* бренд живёт в сайдбаре */
}
.topnav .ghost-btn, .topnav .primary-btn, .topnav .user-chip { white-space: nowrap; flex: none; }
.topnav .ghost-btn { padding: 8px 11px; }

/* Статусы 1С/LLM/Офлайн — самостоятельный элемент шапки (дизайн v2) */
.statuses { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (min-width: 1081px) {
  .statuses { margin-right: auto; } /* чипы слева, кнопки — справа */
}
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .statuses { order: 5; flex-basis: 100%; justify-content: center; }
}

@media (max-width: 620px) {
  .topbar { justify-content: flex-start; } /* бургер и бренд — вместе, как в макете */
}

/* Мобильная посадка (как в макете): приветствие → поле ввода → популярные → тарифы */
@media (max-width: 1080px) {
  .hero { order: 0; }
  #messages { order: 1; flex: 0 0 auto; }
  .chat-input-row { order: 2; }
  .chat-pickers { order: 3; }
  #chips { order: 4; }
  .presets { order: 5; }
  #netBanner { order: 6; }
  #plansSection { order: 7; }
  .chat-status { order: 8; }
  .theme-picker { order: 9; display: none; }
}

/* На мобильной посадке пустая лента не резервирует 320px — ввод сразу под hero */
@media (max-width: 1080px) {
  body:not(.chat-started) #messages { flex: 0 0 auto; min-height: 0; height: auto; }
}

/* На мобильном «Написать нам» доступен из меню и таб-бара — FAB убираем, чтобы не наезжал на ввод */
@media (max-width: 1080px) {
  .contact-fab { display: none !important; }
}

/* ===== Правки дизайна v2 (раунд 2, по фидбеку) ===== */

/* Шапка: меню к правому краю */
.topnav { margin-left: auto; }

/* Иллюстрация из UI-kit вместо CSS-композиции */
.hero-art img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(15, 23, 42, .10); display: block; }
.ha-logo, .ha-card, .ha-note { display: none !important; }

/* Десктоп: чат-панель прибита к высоте экрана — тарифы и ввод всегда на экране */
@media (min-width: 1081px) {
  .topbar { padding-right: 14px; }
  /* Тарифы и строка ввода прибиты к низу окна. Прокручивается верхняя зона
     (приветствие + лента) — на экране одна полоса прокрутки, а сворачивание тарифов
     отдаёт освободившееся место ленте и ничего не «подпрыгивает». */
  .chat-panel { height: calc(100vh - var(--topbar-h, 61px)); overflow: hidden; }
  .chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .hero { flex: 0 0 auto; }
  #messages { flex: 0 0 auto; min-height: 0; overflow: visible; }
  #plansSection, .chips, .presets, .chat-status, #netBanner { flex: 0 0 auto; }
  .input-dock { flex: 0 0 auto; position: static; z-index: 7; background: var(--bg); padding-bottom: 4px; }
  #plansSection { max-height: none; overflow: visible; }
}

/* Просмотр статьи внутри шаблона (с сайдбаром и шапкой) */
#articleView { display: flex; flex-direction: column; gap: 10px; padding: 14px 6px; }
#articleView.hidden { display: none; }
#articleView iframe {
  width: 100%; height: calc(100vh - 130px);
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff;
}

/* Каталог моделей недоступен — кликабельный повтор */
.demo-dd-sep.retry { cursor: pointer; color: var(--accent-2); }
.demo-dd-sep.retry:hover { text-decoration: underline; }

/* ===== Страницы (Тарифы / Помощь) и сравнение тарифов ===== */
.page-view { max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; }
.page-view .plans-section { padding: 0; }

/* Страницы «Как это работает» и «Документация»: тот же контейнер, что у .page-view,
   иначе секции липли к краю окна и страница выглядела «странно». */
.info-pages { width: 100%; max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; }
.info-pages .info-section { margin: 0 auto; padding: 0; }
.info-pages .info-section h2:first-child { margin-top: 0; }
/* Пустой .layout на инфо-страницах не занимает высоту (чат скрыт). */
body.info-mode .layout { flex: 0 0 auto; }
.compare-section { margin-top: 26px; }
.compare-section h2 { font-size: 21px; margin: 0 0 10px; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14.5px;
}
.compare-table th, .compare-table td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--panel-3); font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--muted) 80%, var(--text)); } /* 80% приглушённого: контраст ≥ 4.5 во всех 12 темах (было до 4.14) */
.compare-table td:first-child { color: var(--text); }
.compare-table td.yes { color: var(--ok); font-weight: 700; white-space: nowrap; }
.compare-table td.no { color: var(--muted); white-space: nowrap; }
.compare-table tbody tr:hover { background: var(--panel-2); }

/* Полоса тарифов, прибитая к низу чата */
.plans-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 2px 2px; }
.strip-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; text-decoration: none; color: var(--text);
  cursor: pointer;
}
.strip-card:hover { border-color: var(--accent); }
.strip-card b { font-size: 14.5px; }
.strip-card span { font-size: 12.5px; color: var(--muted); }
.strip-card.strip-featured { border-color: var(--accent); background: var(--accent-soft); }
.strip-card.strip-featured span { color: var(--text); }

/* ===== Полировка под изначальный макет: только десктоп, чтобы не тронуть мобильную посадку ===== */
@media (min-width: 1081px) {
:root { --composer-h: 54px; }
.plans-section { padding: 10px 8px 18px; }
.plans-head { margin-bottom: 16px; }
.plans-toggle { background: var(--panel-2); border: 1px solid var(--line); }
.plans-toggle:hover { border-color: var(--accent); color: var(--accent-strong); }
.plans-head .muted { margin-top: 4px; }
.hero { padding: 18px 6px 14px; }
.hero-title { font-size: 44px; letter-spacing: -.02em; }
.hero-eyebrow { font-size: 12px; letter-spacing: .2em; margin-bottom: 8px; }
.chat-sub { font-size: 17px; }
.welcome-card {
  background: var(--panel);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.chip { background: var(--panel-2); font-size: 14px; padding: 7px 14px; }
.plans-head b { font-size: 26px; }
.plans-head .muted { font-size: 15px; }
.plan {
  padding: 16px 16px 14px;
  gap: 8px;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.plan-name { font-size: 19px; }
.plan-price { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.plan-price small { font-size: 15px; }
.plan ul { font-size: 14.5px; }
.plan .plan-cta { padding: 10px 14px; font-size: 15px; }
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 34px var(--accent-soft); }
.plan-featured:hover { box-shadow: 0 0 0 1px var(--accent), 0 18px 40px var(--accent-soft); }
.plan-badge { box-shadow: 0 6px 18px var(--accent-soft); }
.primary-btn, .ghost-btn { border-radius: 10px; padding: 10px 16px; font-size: 15px; }
/* Высоту строки ввода здесь задаёт --composer-h (54px, объявлена выше в этом же
   блоке): жёсткие height/min-height перебивали бы переменную. */
.send-btn { border-radius: 12px; }
#chatInput { border-radius: 14px; background: var(--panel); font-size: 17px; }
.icon-btn { border-radius: 10px; }
.info-section h2 { font-size: 26px; }
.doc-card { border-radius: 16px; padding: 16px 18px; box-shadow: var(--card-shadow); }
.compare-table { border-radius: 16px; box-shadow: var(--card-shadow); }
}

/* Статусы 1С/LLM открывают настройки подключений. Красим по семантике (role="button"),
   а не по классу из разметки: обновление статуса перезаписывает className и класс терялся. */
.st[role="button"] { cursor: pointer; }
.st[role="button"]:hover { border-color: var(--accent); background: var(--accent-soft); }
.st[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Главная иллюстрация: для тёмных тем своя картинка (в UI-ките она тоже тёмная) */
:root[data-theme-mode="dark"] .hero-art-light { display: none; }
:root[data-theme-mode="light"] .hero-art-dark { display: none; }

/* ===== Hero: подзаголовок одной строкой во всю ширину, карточка и иллюстрация на одном уровне ===== */
.hero { display: block; }
.hero-head { margin-bottom: 14px; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }

/* ===== Главная иллюстрация: крупно, целиком и без горизонтальной прокрутки =====
   Раньше картинка масштабировалась только по высоте (width: auto), поэтому широкая
   версия для тёмной темы вылезала за колонку и давала горизонтальный скролл.
   Теперь она занимает ширину колонки, а высота ограничена — обрезки и полосы нет. */
.hero-art { min-width: 0; }
.hero-art img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(440px, 52vh);
  object-fit: contain;
}
@media (min-width: 1081px) {
  /* Крупнее рабочая область и шире колонка иллюстрации — как на макете */
  .chat-panel { max-width: 1180px; }
  .hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 26px; align-items: start; }
  .plans { max-width: 1180px; }
  .plans-strip { max-width: 1180px; }
}

/* Низкие окна: если прибитый низ (тарифы + ввод) не помещается в панель,
   разрешаем прокрутку панели целиком — иначе контент просто обрезался бы. */
@media (min-width: 1081px) and (max-height: 700px) {
  .chat-panel { overflow-y: auto; }
}

/* Курсоры: тумблер темы и логотип — кликабельны */
.tri-track, .sb-theme { cursor: pointer; }
.sb-brand { cursor: pointer; }

/* На страницах (не чат) панель прокручивается страницей */
@media (min-width: 1081px) {
  body.page-mode .chat-panel { height: auto; overflow: visible; }
}

/* (дубликат прибитой раскладки удалён: действуют единые правила выше, в блоке «Десктоп: чат-панель прибита к высоте экрана») */

/* ==================== Мобильные правки (2026-09-16) ====================
   Что было: страницы «Тарифы» были шире экрана телефона (520 px при 360),
   строка навигации не влезала (кнопка «Войти» обрезалась краем),
   панель ввода вычитала высоту таб-бара второй раз и накрывала содержимое,
   ряд переключателей не влезал из-за мёртвых отступов.
   Проверено измерением в headless Chrome на 320 и 360 px. */

/* 1. Символьные иконки заменены на векторные: ⭳ ⎙ ⟳ ⧉ ⤴ ⤓ ◈
   на части Android рисуются пустым квадратом. */
.ico { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.drawer a .ico, .ghost-btn .ico, .act-btn .ico, .tbl-copy .ico, .code-copy .ico, .chip .ico { width: 16px; height: 16px; }

/* 2. Флекс-элементы страниц не должны раздуваться до ширины таблицы сравнения. */
.layout, .page-view { min-width: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan ul li { overflow-wrap: break-word; }
.plan-name, .plan-price { overflow-wrap: anywhere; }
/* На широких экранах прокрутка таблице не нужна, а обёртка обрезала бы тень карточки. */
@media (min-width: 1081px) {
  .table-scroll { overflow: visible; }
}

/* 3. Кнопки удаления в архиве чатов и шаблонах: 22 px — слишком мелкая цель. */
.arch-del { width: 28px; height: 28px; min-width: 28px; }
.arch-item .arch-title { padding-right: 34px; }
.preset-del { flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; }
/* .base-row .arch-del объявлена выше с большей специфичностью (flex-basis 26px). */
.base-row .arch-del { flex: 0 0 28px; }

/* 4. Высота с учётом динамической панели браузера: прокручиваемая область
   была выше видимой, и низ контента уезжал под таб-бар. */
body { min-height: 100vh; min-height: 100dvh; }

@media (max-width: 1080px) {
  /* Панель ввода и так заканчивается над таб-баром (body padding-bottom),
     поэтому второй раз вычитать высоту таб-бара не нужно. */
  .input-dock { position: sticky; bottom: env(safe-area-inset-bottom, 0px); }
  /* Плашка «Вниз» на мобильном раньше была absolute внутри прокручиваемой панели и уезжала
     вместе с содержимым (замер: при прокрутке уходила за экран). Закрепляем у окна,
     над панелью ввода: её высоту кладёт JS в --dock-h, иначе берём запасные 96px. */
  .scroll-down-fab { position: fixed; bottom: calc(60px + env(safe-area-inset-bottom, 0px) + var(--dock-h, 96px) + 16px); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* Пустая лента больше не резервирует 320px и после старта чата. */
  #messages { flex: 0 0 auto; min-height: 0; height: auto; }
  /* Поле ввода не должно быть выше кнопок рядом: 19px × 1.45 + 12+12 + рамка = 53,5px
     против --composer-h: 50px на этой ширине. Вертикальные поля 10px дают ровно 50px,
     и «скрепка», «микрофон» и «Отправить» встают с полем в одну линию. */
  #chatInput { padding: 10px 14px; }
}

@media (max-width: 620px) {
  /* Скрываем кнопки, дублирующие выдвижное меню: иначе строка не влезает и «Войти»
     режется краем экрана. Частые действия (тема, настройки) и вход в кабинет остаются. */
  #btnNewChat, #btnPrint, #btnHistory, #btnExport, #btnEntities { display: none; }
  /* Чип кабинета — единственный вход в личный кабинет на телефоне
     (кнопка кабинета скрыта всегда): длинное имя распирало шапку. */
  #userChip { max-width: 120px; }
  .topnav { gap: 6px; }
  /* Отступы под кнопку темы и «Написать нам»: обе на телефоне скрыты,
     а из-за них два переключателя не влезали и наезжали на поле ввода. */
  .chat-pickers { padding-left: 4px; padding-right: 0; }
  .chat-status { padding-left: 4px; padding-right: 0; }
  /* Иконки у переключателей на телефоне прячем, ширину ограничиваем: иначе ряд
     переносится на две строки и панель ввода становится высокой, накрывая приветствие. */
  .picker-ico { display: none; }
  #demoModelDd, #demoModelDd .demo-dd-btn { max-width: 165px; }
  .chat-pickers select { max-width: 145px; }
  /* Подсказка в поле: при 19px она занимала две строки и вторая обрезалась рамкой. */
  #chatInput::placeholder { font-size: 15px; }
  /* Таблица сравнения тарифов: переносим текст, а не растягиваем страницу. */
  .compare-table th, .compare-table td { white-space: normal; }
  /* Клетки с отметкой «✓ (демо-данные)» имеют класс yes/no и более высокую
     специфичность (td.yes — 0,2,1) — иначе остаются nowrap и не переносятся. */
  .compare-table td.yes, .compare-table td.no { white-space: normal; }
  .compare-table thead th { letter-spacing: 0; }
  /* Меньше поля и кегль — таблице нужно меньше прокрутки. */
  .compare-table { font-size: 13.5px; }
  .compare-table th, .compare-table td { padding: 7px 8px; }
}

/* Очень узкие экраны (например 320 px): чип кабинета, тема и настройки вместе не влезали. */
@media (max-width: 360px) {
  #userChip { max-width: 84px; }
}



/* ---------------------------------------------------------------------------
   Страницы-разделы (тарифы, помощь, документация) в режиме page-mode.
   Контент выходит за пределы body фиксированной высоты, поэтому прокручивался
   сам документ, а липкие шапка (.topbar) и левое меню (#sidebar) уезжали вместе
   с ним. Даём body расти по содержимому — липкие элементы остаются на месте.
   --------------------------------------------------------------------------- */
body.page-mode { height: auto; }
body.page-mode .main-wrap { min-height: 100vh; }


/* ---------------------------------------------------------------------------
   Верхнее меню в шапке не должно расширять страницу.
   На ширинах 621–1080 px кнопки шапки не помещались, навигация вылезала за
   край (документ становился шире экрана — страница ехала вбок). Раньше усадка
   была прописана только в мобильном блоке (max-width: 620px); переносим её на
   все ширины: меню сжимается и прокручивается внутри себя, а не растягивает
   страницу. Замеры: 768 px — было 982 px ширины документа, стало 768.
   --------------------------------------------------------------------------- */
.topbar > .topnav { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }


/* ---------------------------------------------------------------------------
   Архив чатов: закрепление и переименование.
   Раньше в строке была только кнопка удаления; теперь рядом «закрепить» и
   «переименовать», а закреплённые чаты подсвечиваются и уходят наверх.
   --------------------------------------------------------------------------- */
.arch-item { position: relative; padding-right: 84px; }
.arch-item.pinned { border-left: 3px solid var(--accent); }
.arch-pin-mark { margin-right: 6px; }
/* Кнопки строки живут в общем контейнере: промах мимо кнопки (микросдвиг мыши)
   попадает в контейнер, и строка не открывается — раньше панель «Чаты» закрывалась. */
.arch-actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; }
.arch-btn {
  position: static;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.arch-btn:hover { background: var(--panel-3); color: var(--text); }
.arch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arch-item { padding-right: 120px; }
.arch-item.pinned .arch-pin { color: var(--accent); }
.arch-name-input {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--text);
  background: var(--panel-3); border: 1px solid var(--accent);
  border-radius: 6px; padding: 2px 6px;
}

/* ==================== Мобильные доработки (2026-09-18) ====================
   1. Просвет между блоком ввода и нижним меню: из-за нижнего отступа панели в нём была
      видна строка таблицы из ответа (та самая оранжевая полоса). Убираем отступ — блок
      ввода встаёт вплотную к меню.
   2. Выпадашки модели и мышления растягиваем на всю ширину, каждая ровно на половину.
   Всё под мобильной посадкой (≤1080px). */
@media (max-width: 1080px) {
  .chat-panel { padding-bottom: 0; }
  /* Блок ввода: одинаковые отступы сверху и снизу. Раньше сверху было 2px, а снизу 18px —
     их давала пустая строка статуса под выпадашками. */
  .input-dock { padding: 8px 0; }
  .chat-input-row { padding-top: 0; padding-bottom: 0; }
  .chat-status { min-height: 0; padding: 0 4px; }
  .chat-status:empty { display: none; }
  /* Модель шире, мышление уже; зазор такой же, как между полем ввода и микрофоном (10px). */
  .chat-pickers { padding: 8px 0 0; gap: 10px; flex-wrap: nowrap; }
  .chat-pickers .picker-wrap { flex: 1 1 0; min-width: 0; }
  .chat-pickers .picker-wrap:first-child { flex-grow: 1.2; }
  .chat-pickers select { padding: 3px 18px 3px 6px; }
  .chat-pickers select,
  .chat-pickers .demo-dd,
  .chat-pickers .demo-dd-btn { width: 100%; max-width: none; min-width: 0; min-height: 40px; }
  /* Выше ширина демо-выпадашки ограничена правилом по id (165px) — оно сильнее класса,
     поэтому перекрываем здесь: иначе модель и мышление выглядели одинаково узкими. */
  #demoModelDd, #demoModelDd .demo-dd-btn { width: 100%; max-width: none; }
  /* Иконка съедала место у подписи — на мобильном оставляем только текст. */
  .chat-pickers .picker-ico { display: none; }
  /* Подсказка по центру строки: высота содержимого (50 − 2×11 − 2 рамки = 26) ровно равна
     строке, а вертикальные отступы одинаковые. */
  #chatInput { padding: 11px 14px; line-height: 26px; }
}

/* Статусы подключения на телефоне: вместо отдельной строки — две цветные точки в шапке,
   между названием и кнопками. Подписи остаются в подсказке при нажатии. */
@media (max-width: 620px) {
  .statuses { order: 0; flex-basis: auto; justify-content: flex-end; flex-wrap: nowrap; margin-left: 10px; gap: 8px; }
  .statuses .st {
    font-size: 0; line-height: 0; width: 12px; height: 12px; min-width: 12px;
    padding: 0; border: 0; border-radius: 50%; background: var(--muted);
  }
  .statuses .st.st-demo { background: var(--accent-strong); }
  .statuses .st.st-ok { background: var(--ok); }
  .statuses .st.st-off, .statuses .st.st-err { background: var(--err); }
  .statuses .st.st-check { background: var(--muted); }
}

/* Экран успешной отправки формы связи. */
.cf-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px 18px; }
.cf-done-ico { font-size: 40px; line-height: 1; }
.cf-done b { font-size: 18px; }
.cf-done .muted { margin: 0 0 12px; }