/* ============================================================================
   Муравей — дизайн-система
   Токены → примитивы → компоненты → экраны → адаптив
   Правила: без градиентов и свечения, элевация — граница ИЛИ тень,
   отступы по шкале 4px, движение 120–220ms на transform/opacity.
   ========================================================================= */

/* ── Токены ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: dark;

  /* Нейтральная шкала (холодный серый, без чистого чёрного) */
  --n-950:#0e1014; --n-900:#14171c; --n-850:#191d23; --n-800:#1e222a;
  --n-700:#272c36; --n-600:#343a46; --n-500:#4b525f; --n-400:#6b7382;
  --n-300:#8b93a2; --n-200:#b6bcc7; --n-100:#dcdfe6; --n-050:#f2f3f6;

  /* Семантика поверхностей */
  --bg:var(--n-950);
  --surface:var(--n-900);
  --surface-2:var(--n-850);
  --surface-3:var(--n-800);
  --border:var(--n-600);
  --border-strong:var(--n-500);

  /* Текст */
  --text:#e8eaf0;
  --text-soft:var(--n-200);
  --muted:var(--n-300);
  --text-faint:var(--n-400);

  /* Акцент и статусы. Один на всю семью arambolsu-ai — бирюза; она стоит
     в логотипе и в meta theme-color, то есть это то, что новый человек
     видит первым. Тёмная тема берёт осветлённый вариант, светлая — базовый.
     docs/BRANDBOOK_MURAVEY_RU.md, раздел «Цвет». */
  --accent:#4db8a8;
  --accent-2:#3fa294;
  --accent-press:#35897d;
  --accent-fg:#08201d;
  --accent-soft:rgba(77,184,168,.14);
  --accent-line:rgba(77,184,168,.34);
  --ok:#46c08b;  --ok-soft:rgba(70,192,139,.14);
  --warn:#e5a44c; --warn-soft:rgba(229,164,76,.14);
  --danger:#e46a70; --danger-soft:rgba(228,106,112,.14);
  --danger-line:rgba(228,106,112,.38);

  /* Подложка под диалогом — одна на продукт */
  --scrim:rgba(14,16,20,.55);

  /* Совместимость со старой разметкой */
  --panel:var(--surface); --panel-2:var(--surface-2);
  --user:#1d3330; --bot:var(--surface);
  --code-bg:#0a0c10;

  /* Шкала отступов (4px) — раскладка: расстояния МЕЖДУ элементами */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px;

  /* Внутренние отступы контролов — своя короткая шкала, и это осознанно.
     Шкала 4px описывает раскладку; у кнопки 8px по вертикали читается тесно,
     12px — рыхло, поэтому оптический оптимум лежит между ступенями. Раньше
     эти значения стояли литералами в двух десятках правил и выглядели как
     «намерил на глаз». Значения те же — теперь у них есть имя и одно место. */
  --ctl-y:9px;    --ctl-x:14px;    /* кнопка, пункт меню */
  --ctl-y-sm:5px; --ctl-x-sm:11px; /* мелкая кнопка, сегмент */
  --fld-y:10px;   --fld-x:12px;    /* поле ввода, крупный пункт списка */

  /* Радиусы */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;
  --radius:var(--r-lg);

  /* Типографика */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-2xl:28px;

  /* Элевация: тень только для «летающего» (меню, диалоги, тосты) */
  --e1:0 1px 2px rgba(0,0,0,.28);
  --e2:0 4px 12px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24);
  --e3:0 16px 40px rgba(0,0,0,.44), 0 2px 8px rgba(0,0,0,.28);

  /* Движение */
  --dur-1:120ms; --dur-2:180ms; --dur-3:220ms;
  --ease-out:cubic-bezier(.22,.68,.42,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);

  /* Язык движения «Отклик + Механика» — docs/BRANDBOOK_MURAVEY_RU.md
     Появление данных стоит 0 мс. Двигается только то, чего касается
     пользователь, и числа, которые реально изменились. */
  --dur-tap:150ms;                          /* наведение, фокус, нажатие */
  --ease-tap:cubic-bezier(.34,1.3,.64,1);   /* короткий перелёт на отклике */
  --lift:2px;                               /* подъём при наведении */
  --press:.97;                              /* сжатие при нажатии */
  --ring:2px;                               /* толщина кольца фокуса */
  --ring-offset:2px;
  --dur-roll:420ms;                         /* «Механика»: перекат разряда */
  --ease-roll:cubic-bezier(.2,.9,.3,1);
  --roll-step:60ms;                         /* сдвиг между соседними разрядами */

  /* Слои — единственная шкала z-index в проекте */
  --z-sticky:10; --z-drawer:40; --z-popover:60; --z-modal:80; --z-toast:100;

  --sidebar-w:272px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* Светлая тема: по системе или принудительно data-theme */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#f4f5f8; --surface:#fbfbfd; --surface-2:#f1f2f6; --surface-3:#e8eaf0;
    --border:#d5dae3; --border-strong:#b2bac8;
    --text:#1b1f27; --text-soft:#3a4150; --muted:#5f6878; --text-faint:#828b9b;
    /* Акцент как ТЕКСТ на светлом требует 4.5:1 — брендовая #2f8f82 даёт 3.6.
       Заливка кнопки (--accent-2) и нажатая остаются светлее: на них белый. */
    --accent:#257066; --accent-2:#2a7f74; --accent-press:#236a61;
    --accent-fg:#ffffff;
    --accent-soft:rgba(37,112,102,.12); --accent-line:rgba(37,112,102,.34);
    /* Светлая тема не переопределяла семантику: зелёный/жёлтый/красный
       оставались тёмнотемными и давали 1.8–3.1:1 — статус было не прочесть. */
    --ok:#1d7350;  --ok-soft:rgba(29,115,80,.12);
    --warn:#8a5200; --warn-soft:rgba(138,82,0,.12);
    --danger:#b3261e; --danger-soft:rgba(179,38,30,.10);
    --danger-line:rgba(179,38,30,.32);
    --user:#e2f1ee; --code-bg:#f4f6fa;
    --e1:0 1px 2px rgba(20,24,33,.07);
    --e2:0 4px 12px rgba(20,24,33,.10), 0 1px 2px rgba(20,24,33,.06);
    --e3:0 16px 40px rgba(20,24,33,.16), 0 2px 8px rgba(20,24,33,.08);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f4f5f8; --surface:#fbfbfd; --surface-2:#f1f2f6; --surface-3:#e8eaf0;
    --border:#d5dae3; --border-strong:#b2bac8;
  --text:#1b1f27; --text-soft:#3a4150; --muted:#5f6878; --text-faint:#828b9b;
  /* Акцент как ТЕКСТ на светлом требует 4.5:1 — брендовая #2f8f82 даёт 3.6.
     Заливка кнопки (--accent-2) и нажатая остаются светлее: на них белый. */
  --accent:#257066; --accent-2:#2a7f74; --accent-press:#236a61;
  --accent-fg:#ffffff;
  --accent-soft:rgba(37,112,102,.12); --accent-line:rgba(37,112,102,.34);
  /* Светлая тема не переопределяла семантику: зелёный/жёлтый/красный
     оставались тёмнотемными и давали 1.8–3.1:1 — статус было не прочесть. */
  --ok:#1d7350;  --ok-soft:rgba(29,115,80,.12);
  --warn:#8a5200; --warn-soft:rgba(138,82,0,.12);
  --danger:#b3261e; --danger-soft:rgba(179,38,30,.10);
  --danger-line:rgba(179,38,30,.32);
  --user:#e2f1ee; --code-bg:#f4f6fa;
  --e1:0 1px 2px rgba(20,24,33,.07);
  --e2:0 4px 12px rgba(20,24,33,.10), 0 1px 2px rgba(20,24,33,.06);
  --e3:0 16px 40px rgba(20,24,33,.16), 0 2px 8px rgba(20,24,33,.08);
}

/* ── База ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:var(--t-md);line-height:1.55;-webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit;font-family:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:650}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:650;letter-spacing:-.01em}
/* фокус: системное кольцо гасим только для мыши — с клавиатуры его
   возвращает слой взаимодействия ниже через :focus-visible. */
:where(input,select,textarea,button,a,[tabindex]):focus{outline:none}
::selection{background:var(--accent-soft);color:var(--text)}
::placeholder{color:var(--text-faint)}

/* Скроллбары — тонкие, в тон поверхности */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--n-500);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ── Слой взаимодействия ────────────────────────────────────────────────────
   Язык «Отклик»: появление данных не анимируется вовсе, вся тактильность
   отдана наведению, фокусу и нажатию. Четыре состояния заданы здесь один
   раз списком — новый control достаточно вписать в список, и он получает
   их все, вместо того чтобы каждый раз дописывать :hover руками.

   Специфичность подобрана намеренно: :is() берёт вес самого «тяжёлого»
   аргумента (класс), поэтому кольцо фокуса весит (0,2,0) и переживает
   любое однокласcовое правило. Три места с id/оверрайдами чинятся адресно
   ниже по файлу — они помечены «фокус:».
   ───────────────────────────────────────────────────────────────────────── */

/* Кольцо фокуса с клавиатуры — единственное на весь продукт */
:is(button,a,input,select,textarea,summary,[tabindex],[role=button],
    .chip,.tab,.seg-btn,.nav-item,.menu-btn,.icon-btn,.new-chat,.send-btn,
    .starter,.model-card,.chat-item,.mail-row,.mail-box-btn,.popmenu-item,
    .code-copy,.api-key-popup-btn):focus-visible{
  outline:var(--ring) solid var(--accent);
  outline-offset:var(--ring-offset);
  /* Радиус кольцу не задаём: outline сам повторяет border-radius элемента.
     Жёсткий --r-sm здесь квадратил бы круглые chip и .ag-mode-btn. */
}

/* Нажатие — единое сжатие вместо разнобоя из translateY и scale */
:is(button,.chip,.tab,.seg-btn,.nav-item,.menu-btn,.icon-btn,.new-chat,
    .send-btn,.starter,.model-card,.chat-item,.popmenu-item,.mail-box-btn,
    .api-key-popup-btn,.code-copy):not(:disabled,[aria-disabled=true]):active{
  transform:scale(var(--press));
}

/* Наведение на «карточные» элементы — подъём */
:is(.starter,.model-card):hover{transform:translateY(calc(-1 * var(--lift)))}

/* Недоступно — одно правило на весь продукт */
:is(button,.chip,.tab,.seg-btn,.nav-item,.icon-btn,.new-chat,.send-btn,
    .starter,.model-card):is(:disabled,[aria-disabled=true]),
:is(input,select,textarea):disabled{
  opacity:.45;cursor:not-allowed;transform:none;
}
:is(button,.chip,.icon-btn):is(:disabled,[aria-disabled=true]):hover{
  transform:none;
}

/* Общий переход для всего, что откликается. transform — с перелётом,
   цвет — без: цветовой отскок читается как дребезг. */
:is(button,a,summary,.chip,.tab,.seg-btn,.nav-item,.menu-btn,.icon-btn,
    .new-chat,.send-btn,.starter,.model-card,.chat-item,.popmenu-item,
    .mail-row,.mail-box-btn,.code-copy,.api-key-popup-btn,
    input,select,textarea){
  transition:background-color var(--dur-tap) var(--ease-out),
             border-color var(--dur-tap) var(--ease-out),
             color var(--dur-tap) var(--ease-out),
             transform var(--dur-tap) var(--ease-tap);
}

/* ── «Механика»: перекат разрядов ───────────────────────────────────────────
   Единственное место, где движение обслуживает данные, а не жест.
   Катится ТОЛЬКО при реальной смене значения — static/odometer.js следит
   за этим сам, на первую отрисовку перекат не запускается. */
.odo{display:inline-flex;font-variant-numeric:tabular-nums;line-height:inherit}
.odo .odo-sep{width:.28em;flex:0 0 auto}
.odo .odo-d{display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom}
.odo .odo-d i{display:block;font-style:normal;transform:translateY(0)}
.odo.rolling .odo-d i{transition:transform var(--dur-roll) var(--ease-roll)}
.odo .odo-d b{display:block;height:1.15em;line-height:1.15;font-weight:inherit}

/* Любое число, которое пользователь читает как данные, — моноширинными
   цифрами, иначе колонки пляшут при обновлении. */
.num,.price,.qty,.quota,.balance,.pct,.money,
.dtable .num,.toolbar .count,.badge,.mail-row .m-date{
  font-variant-numeric:tabular-nums;
}

.app{display:flex;height:100dvh;overflow:hidden}

/* ── Примитивы: кнопки ──────────────────────────────────────────────────── */
.primary,.secondary,.ghost,.danger,
button:not(:where(.primary,.icon-btn,.chat-item,.popmenu-item,.tab,.menu-btn,.new-chat,.send-btn,.nav-item,.chip,.seg-btn,.starter,.mail-box-btn)){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:38px;padding:var(--ctl-y) var(--ctl-x);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:var(--t-sm);font-weight:550;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.primary{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-fg);font-weight:600}
.primary:hover{background:var(--accent);border-color:var(--accent)}
.primary:active{background:var(--accent-press)}
.secondary:hover,.ghost:hover,
button:not(:where(.primary,.icon-btn,.chat-item,.popmenu-item,.tab,.menu-btn,.new-chat,.send-btn,.nav-item,.chip,.seg-btn,.starter,.mail-box-btn)):hover{
  background:var(--surface-3);border-color:var(--border-strong);
}
/* Нажатие задаёт слой взаимодействия выше — здесь его больше нет,
   чтобы у продукта было одно значение сжатия, а не четыре разных. */
.ghost{background:transparent;border-color:transparent}
.danger{background:transparent;border-color:var(--danger-line);color:var(--danger)}
.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
button:disabled,.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
button:disabled:hover{background:var(--surface-2);border-color:var(--border)}
.primary:disabled:hover{background:var(--accent-2);border-color:var(--accent-2)}
.primary.small,button.small{min-height:30px;padding:var(--ctl-y-sm) var(--ctl-x-sm);font-size:var(--t-sm);font-weight:500}
.btn-block{width:100%}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);
  font-size:17px;line-height:1;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn.quiet{background:transparent;border-color:transparent}
.icon-btn.quiet:hover{background:var(--surface-2)}

/* ── Примитивы: поля ────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4);
  font-size:var(--t-sm);font-weight:550;color:var(--text-soft)}
.fld input,.fld select,.fld textarea,.btn-row input,.btn-row select,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  background-color:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--fld-y) var(--fld-x);color:var(--text);font-size:var(--t-sm);font-weight:400;
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out);
}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background-color:var(--surface-3)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
.fld textarea,textarea{resize:vertical;line-height:1.55}
select{cursor:pointer;
  appearance:none;-webkit-appearance:none;padding-right:30px;
  /* Не цветовой градиент, а способ нарисовать треугольную стрелку одним
     цветом currentColor: заливка сплошная, перехода тонов нет. */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) center,calc(100% - 10px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld-hint{font-size:var(--t-xs);font-weight:400;color:var(--text-faint);margin-top:-2px}

.chk,.chk-row{display:flex;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s3);
  font-size:var(--t-sm);cursor:pointer;color:var(--text);line-height:1.45}
.chk input[type=checkbox],.chk-row input[type=checkbox]{
  accent-color:var(--accent);width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;cursor:pointer}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--s1);max-height:220px;overflow:auto;padding:var(--s1)}

/* Переключатель */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-sm)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:var(--r-full);background:var(--surface-3);
  border:1px solid var(--border);flex:0 0 auto;position:relative;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:var(--r-full);background:var(--muted);
  transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.switch input:checked + .track{background:var(--accent-2);border-color:var(--accent-2)}
.switch input:checked + .track::after{transform:translateX(16px);background:var(--accent-fg)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}

.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s3) 0}
.btn-row input{flex:1;min-width:150px}
.status-row{display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0;font-size:var(--t-sm)}

/* ── Примитивы: текст и метки ───────────────────────────────────────────── */
.muted{color:var(--muted);font-size:var(--t-sm)}
.muted.small,.small{font-size:var(--t-xs)}
.ok{color:var(--ok)} .bad{color:var(--danger)} .warn{color:var(--warn)}
hr{border:none;border-top:1px solid var(--border);margin:var(--s5) 0}
code{font-family:var(--mono);font-size:.92em;background:var(--code-bg);
  border:1px solid var(--border);border-radius:6px;padding:1px 5px}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s3);overflow:auto;font-size:var(--t-sm);font-family:var(--mono);line-height:1.5}
pre code{background:none;border:none;padding:0}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:550;
  padding:3px 9px;border-radius:var(--r-full);background:var(--surface-3);
  border:1px solid var(--border);color:var(--muted);white-space:nowrap;min-height:0;
  line-height:1.4;font-family:inherit;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
button.chip:not(:disabled):hover{border-color:var(--border-strong);color:var(--text)}
button.chip.on:not(:disabled):hover{filter:brightness(1.12)}
button.chip:disabled{opacity:.55}
.chip.on{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip.off{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.chip.info{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--r-full);background:var(--accent-2);color:var(--accent-fg);
  font-size:var(--t-xs);font-weight:650;font-variant-numeric:tabular-nums}

.status-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s3);font-size:var(--t-sm);color:var(--muted);white-space:pre-wrap;
  max-height:200px;overflow:auto}
.login-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s4);margin-top:var(--s3)}
.callout{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--text-soft)}
.callout b{color:var(--text)}

/* Загрузка / пусто / ошибка */
.skeleton{background:var(--surface-3);border-radius:var(--r-sm);
  animation:pulse 1.4s var(--ease-out) infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.85}}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s7) var(--s4);text-align:center;color:var(--muted)}
.empty-state .glyph{font-size:26px;opacity:.75}
.empty-state b{color:var(--text-soft);font-size:var(--t-sm)}

/* ── Сайдбар ────────────────────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  padding-top:var(--safe-top);isolation:isolate}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s4) var(--s2)}
.brand{font-weight:700;font-size:var(--t-lg);display:flex;align-items:center;gap:var(--s2);
  letter-spacing:-.02em}
.logo{font-size:20px}
.brand-logo{display:block;width:auto;height:32px;max-width:190px}
.product-brand{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;color:var(--text);font-size:var(--t-sm);font-weight:650;text-decoration:none}
.product-brand img{display:block;width:148px;max-width:100%;height:auto}
.product-brand.compact img{width:126px}
.product-brand span{color:var(--muted);white-space:nowrap}
#closeSidebar{display:none}
.sidebar-actions{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2) var(--s3)}
.new-chat{display:flex;align-items:center;gap:var(--s2);padding:var(--fld-y) var(--fld-x);
  background:var(--accent-2);color:var(--accent-fg);border:1px solid var(--accent-2);
  border-radius:var(--r-md);font-weight:600;font-size:var(--t-sm);cursor:pointer;
  text-decoration:none;transition:background-color var(--dur-1) var(--ease-out)}
.new-chat:hover{background:var(--accent);text-decoration:none}
.new-chat-dialogue,.new-chat-vision{background:transparent;border-color:var(--border);
  color:var(--text-soft);font-weight:500}
.new-chat-dialogue:hover,.new-chat-vision:hover{background:var(--surface-2);border-color:var(--border-strong)}
.sidebar-sub{display:flex;gap:var(--s1)}
.sidebar-sub .new-chat{flex:1;justify-content:center;font-size:var(--t-xs);padding:8px 6px}

.chat-list{flex:1;overflow-y:auto;padding:var(--s2) var(--s2);display:flex;flex-direction:column;gap:1px}
.chat-list-label{font-size:var(--t-xs);font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);padding:var(--s3) var(--s2) var(--s1)}
.chat-item{display:flex;align-items:center;gap:var(--s2);padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-soft);background:transparent;border:none;text-align:left;width:100%;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.chat-item:hover{background:var(--surface-2);color:var(--text)}
.chat-item.active{background:var(--surface-3);color:var(--text);font-weight:550}
.chat-item .title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-sm)}
.chat-item .row-act{opacity:0;display:flex;gap:1px;transition:opacity var(--dur-1) var(--ease-out)}
.chat-item:hover .row-act,.chat-item.active .row-act,.chat-item:focus-within .row-act{opacity:1}
.row-act button{background:none;border:none;color:var(--text-faint);cursor:pointer;
  padding:3px 5px;border-radius:6px;font-size:var(--t-sm);min-height:0}
.row-act button:hover{color:var(--text);background:var(--surface-3)}

.sidebar-foot{padding:var(--s3) var(--s3) calc(var(--s3) + var(--safe-bottom));
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--s2)}
.menu-btn{display:flex;align-items:center;gap:var(--s2);width:100%;padding:var(--fld-y) var(--fld-x);
  background:transparent;border:1px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;color:var(--text-soft);font-size:var(--t-sm);text-align:left;
  transition:background-color var(--dur-1) var(--ease-out)}
.menu-btn:hover{background:var(--surface-2);color:var(--text)}
.user-pill{display:flex;align-items:center;gap:var(--s2);padding:6px 8px;border-radius:var(--r-md);
  font-size:var(--t-xs);color:var(--muted)}
.user-pill .avatar-sm{width:24px;height:24px;border-radius:var(--r-full);flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:var(--t-xs)}

/* ── Основная область / топбар ──────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;isolation:isolate}
.topbar{display:flex;align-items:center;gap:var(--s2);
  padding:calc(var(--s2) + var(--safe-top)) var(--s4) var(--s2);
  border-bottom:1px solid var(--border);background:var(--bg);
  position:sticky;top:0;z-index:var(--z-sticky)}
.topbar-title{flex:1;font-weight:600;font-size:var(--t-sm);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hamburger{display:none}
.topbar select{max-width:min(38vw,240px);font-size:var(--t-sm);padding:8px 30px 8px 10px}

.messages{flex:1;overflow-y:auto;padding:var(--s6) 0 var(--s2);scroll-behavior:smooth;
  overscroll-behavior:contain}
/* Пустой экран — по центру области сообщений, а не прижат к верху */
.messages:has(> .empty){display:flex;align-items:center;justify-content:center;padding:var(--s5)}
.msg{max-width:820px;margin:0 auto var(--s5);padding:0 var(--s5);display:flex;gap:var(--s3)}
/* Анимируется только реально пришедшее сообщение. Раньше правило висело на
   .msg, и при переключении чата заново въезжала вся история — это и есть
   «движение на загрузке», от которого мы уходим. Класс ставит app.js. */
.msg.is-new{animation:msg-in var(--dur-3) var(--ease-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .avatar{width:28px;height:28px;border-radius:var(--r-sm);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:15px;background:var(--surface-2);
  border:1px solid var(--border)}
.msg.user .avatar{background:var(--user);border-color:transparent}
.bubble{flex:1;min-width:0}
.bubble .who{font-size:var(--t-xs);font-weight:650;color:var(--text-faint);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.04em}
.bubble .body{line-height:1.65;font-size:var(--t-md);word-wrap:break-word;overflow-wrap:anywhere;
  max-width:72ch}
.bubble .body p{margin:0 0 10px}
.bubble .body p:last-child{margin-bottom:0}
.bubble .body ul,.bubble .body ol{margin:0 0 10px;padding-left:22px}
.bubble .body li{margin:3px 0}
.bubble .body pre{margin:0}
.codeblock{position:relative;margin:10px 0;isolation:isolate}
.codeblock pre{padding-top:var(--s6)}
.code-lang{position:absolute;top:6px;left:12px;z-index:1;font-family:var(--mono);
  font-size:var(--t-xs);color:var(--text-faint);letter-spacing:.03em}
.code-copy{position:absolute;top:5px;right:6px;z-index:1;min-height:26px;padding:2px 8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-faint);font-size:var(--t-sm);cursor:pointer;opacity:0;
  transition:opacity var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.codeblock:hover .code-copy,.code-copy:focus-visible{opacity:1}
.code-copy:hover{color:var(--text)}
.msg-actions{display:flex;gap:var(--s1);margin-top:var(--s2);opacity:0;
  transition:opacity var(--dur-1) var(--ease-out)}
.msg:hover .msg-actions,.msg:focus-within .msg-actions{opacity:1}
.msg-actions button{background:transparent;border:1px solid transparent;color:var(--text-faint);
  padding:3px 8px;min-height:26px;border-radius:var(--r-sm);font-size:var(--t-xs);cursor:pointer}
.msg-actions button:hover{background:var(--surface-2);border-color:var(--border);color:var(--text)}

.status-line{color:var(--muted);font-size:var(--t-sm);margin:2px 0;display:flex;
  align-items:center;gap:var(--s2)}
.status-line::before{content:"";width:6px;height:6px;border-radius:var(--r-full);
  background:var(--accent);animation:blink 1.2s var(--ease-out) infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.via{display:inline-flex;align-items:center;gap:5px;color:var(--text-faint);font-size:var(--t-xs);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);
  padding:2px 9px;margin-bottom:6px}
.cites{margin-top:var(--s3);font-size:var(--t-sm);border-top:1px solid var(--border);padding-top:var(--s2)}
.cites a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 0}
.ad-banner{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-md);
  padding:10px var(--s4);margin:var(--s2) 0;font-size:var(--t-sm);color:var(--muted);text-align:center}
.ad-banner a{font-weight:650}
.ad-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad-copy{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.ad-legal{font-size:10px;color:var(--muted);margin-top:5px}
.public-ad{margin:var(--s4) auto;padding:var(--s4);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);color:var(--text)}
.public-ad>a{display:block;margin:4px 0;color:var(--accent);font-weight:700}
.sidebar-ad{margin:8px 10px;padding:10px;border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft);font-size:12px;line-height:1.35}
.sidebar-ad>a{display:block;color:var(--accent);font-weight:650;text-decoration:none}
.chip-list{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.inline-chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);margin:0!important}

/* Пустой экран чата — точка входа: что тут можно спросить */
.empty{max-width:620px;margin:0 auto;padding:0 var(--s5) 6vh;text-align:center}
.empty h1{font-size:var(--t-2xl);margin-bottom:var(--s2);letter-spacing:-.02em}
.empty .lead{color:var(--muted);font-size:var(--t-md);margin:0 auto var(--s6);max-width:46ch}
.starters{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s2);
  text-align:left;margin-bottom:var(--s5)}
.starter{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:3px;padding:var(--s3) var(--s4);white-space:normal;font:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  cursor:pointer;color:var(--text);text-align:left;min-height:0;
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out)}
.starter:hover{border-color:var(--accent-line);background:var(--surface-2)}
.starter .st-title{font-weight:600;font-size:var(--t-sm)}
.starter .st-sub{font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.empty-tips{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  font-size:var(--t-xs);color:var(--text-faint)}
.empty-tips kbd{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-size:10px;color:var(--muted)}

/* ── Композитор ─────────────────────────────────────────────────────────── */
.composer{padding:var(--s2) var(--s3) calc(var(--s3) + var(--safe-bottom));
  border-top:1px solid var(--border);background:var(--bg)}
.composer-inner{max-width:820px;margin:0 auto;display:flex;gap:var(--s2);align-items:flex-end;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);
  transition:border-color var(--dur-2) var(--ease-out)}
/* фокус: кольцо снято с самого textarea намеренно — оно вело бы себя как
   рамка внутри рамки. Индикатор поднят на всю строку композитора, так что
   с клавиатуры видно, куда попал фокус. */
.composer-inner:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 var(--ring) var(--accent-soft);
}
#input{flex:1;background:none;border:none;resize:none;outline:none;max-height:200px;
  padding:8px 0;font-size:var(--t-md);line-height:1.5}
/* фокус: индикатор — кольцо на .composer-inner выше, см. комментарий там. */
#input:hover,#input:focus,#input:focus-visible{background:none;border:none;outline:none}
.send-btn{background:var(--accent-2);color:var(--accent-fg);border:none;width:38px;height:38px;
  border-radius:var(--r-md);cursor:pointer;font-size:16px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;
  transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.send-btn:hover{background:var(--accent)}
.send-btn:disabled{opacity:.4;cursor:default;transform:none}
.composer-hint{max-width:820px;margin:var(--s2) auto 0;color:var(--text-faint);
  font-size:var(--t-xs);text-align:center}
.route-hint{max-width:820px;margin:2px auto 0;padding:2px var(--s4);color:var(--text-faint);
  font-size:var(--t-xs);text-align:right}
.subscription-alert{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  max-width:820px;width:calc(100% - var(--s6));margin:var(--s2) auto 0;padding:8px var(--s3);
  border:1px solid color-mix(in srgb, var(--warn) 55%, var(--border));border-radius:var(--r-md);
  color:var(--text);background:color-mix(in srgb, var(--warn) 10%, var(--surface));font-size:var(--t-sm)}
.subscription-alert button{flex:0 0 auto;font-size:var(--t-xs)}

/* ── Оверлеи: меню, поповеры ────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-drawer);
  backdrop-filter:blur(2px);animation:fade-in var(--dur-2) var(--ease-out)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.popmenu{position:fixed;left:var(--s3);bottom:64px;z-index:var(--z-popover);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s1);min-width:224px;box-shadow:var(--e3);display:flex;flex-direction:column;
  isolation:isolate;transform-origin:bottom left;
  animation:pop-in var(--dur-2) var(--ease-out)}
@keyframes pop-in{from{opacity:0;transform:scale(.97) translateY(4px)}to{opacity:1;transform:none}}
.popmenu-item{display:flex;align-items:center;gap:10px;background:none;border:none;
  color:var(--text-soft);text-align:left;padding:var(--ctl-y) var(--ctl-x-sm);border-radius:var(--r-sm);
  cursor:pointer;text-decoration:none;font-size:var(--t-sm);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.popmenu-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.popmenu-sep{height:1px;background:var(--border);margin:var(--s1) 6px}
.popmenu-section-label{font-size:var(--t-xs);font-weight:650;color:var(--text-faint);
  padding:var(--s2) 11px 3px;text-transform:uppercase;letter-spacing:.06em}

.api-key-popup{position:fixed;top:60px;right:var(--s5);z-index:var(--z-popover);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s4);min-width:360px;box-shadow:var(--e3);display:flex;flex-direction:column;
  gap:var(--s2);isolation:isolate;animation:pop-in var(--dur-2) var(--ease-out)}
.api-key-popup-title{font-weight:650;font-size:var(--t-sm);margin-bottom:2px}
.api-key-popup-row{display:flex;align-items:center;gap:var(--s2)}
.api-key-popup-label{color:var(--text-faint);font-size:var(--t-xs);min-width:54px}
.api-key-popup-val{flex:1;background:var(--surface-2);border:1px solid var(--border);
  border-radius:6px;padding:5px 9px;font-size:var(--t-xs);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-key-popup-key{color:var(--ok)}
.api-key-popup-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:4px 9px;cursor:pointer;font-size:var(--t-sm);flex:0 0 auto;min-height:0}
.api-key-popup-btn:hover{background:var(--surface-3)}
.api-key-popup-hint{color:var(--text-faint);font-size:var(--t-xs);line-height:1.5}
.api-key-popup-actions{display:flex;align-items:center;gap:var(--s3);margin-top:2px}

/* ── Тосты ──────────────────────────────────────────────────────────────── */
#toasts{position:fixed;bottom:var(--s5);left:50%;transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s2);
  pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:10px;pointer-events:auto;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:11px var(--s3);box-shadow:var(--e3);
  font-size:var(--t-sm);color:var(--text);
  animation:toast-in var(--dur-3) var(--ease-out) both}
.toast.ok{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--danger)}
.toast .toast-text{flex:1;min-width:0}
.toast button{background:none;border:none;color:var(--text-faint);cursor:pointer;
  padding:0 2px;min-height:0;font-size:var(--t-sm)}
.toast button:hover{color:var(--text);background:none}
.toast.leaving{animation:toast-out var(--dur-2) var(--ease-in) both}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}

/* ── Модальные окна ─────────────────────────────────────────────────────── */
.modal-back{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
  backdrop-filter:blur(3px);isolation:isolate;
  animation:fade-in var(--dur-2) var(--ease-out)}
.modal{width:min(680px,100%);max-height:88dvh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--e3);overflow:hidden;
  animation:modal-in var(--dur-3) var(--ease-out) both}
@keyframes modal-in{from{opacity:0;transform:scale(.98) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);flex:0 0 auto}
.modal-head h2{font-size:var(--t-md)}
.modal-body{padding:var(--s5);overflow:auto;flex:1}
.modal-foot{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s4);
  border-top:1px solid var(--border);flex:0 0 auto}

/* ── Каталог моделей ───────────────────────────────────────────────────── */
.model-catalog-modal{width:min(1040px,100%)}
.model-catalog-body{display:flex;flex-direction:column;gap:var(--s3)}
.model-catalog-search input{width:100%;font-size:var(--t-md)}
.model-catalog-filters{display:flex;gap:var(--s2);flex-wrap:wrap}
.model-catalog-filters .chip.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.model-catalog-note{margin:0;color:var(--text-faint);font-size:var(--t-xs)}
.model-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.model-admin-list{display:flex;flex-direction:column;gap:var(--s2)}
.model-admin-card{margin:0}
.model-admin-title{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.model-admin-title .chk{margin:0}
.model-admin-controls{display:flex;align-items:flex-end;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.model-admin-controls .fld{margin:0;min-width:138px;flex:0 1 180px}
.model-admin-controls .fld input,.model-admin-controls .fld select{min-width:0}
.model-admin-equivalent{margin:0 0 9px 0;max-width:270px}
.model-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:var(--s2);
  padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);
  color:var(--text);cursor:pointer;font:inherit;transition:border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
/* фокус: раньше hover и focus-visible делили одно правило с outline:none,
   и с клавиатуры карточка была неотличима от наведённой мышью. */
.model-card:hover,.model-card:focus-visible{border-color:var(--accent-line);background:var(--surface-3)}
.model-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.model-card-top,.model-card-bottom,.model-card-meta,.model-card-tags{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.model-card-top{justify-content:space-between}.model-card-title{font-weight:650}.model-card-family{color:var(--text-faint);font-size:var(--t-xs)}
.model-card-summary{margin:0;color:var(--text-soft);font-size:var(--t-sm);line-height:1.45}
.model-card-meta{color:var(--text-faint);font-size:var(--t-xs)}
.model-card .chip{font-weight:500}.model-card-empty{grid-column:1/-1;color:var(--text-faint);padding:var(--s5);text-align:center}

.tabs{display:flex;gap:var(--s1);flex-wrap:wrap}
.tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 12px;
  border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-sm);font-weight:550;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.tab:hover{background:var(--surface-2);color:var(--text)}
.tab.active{color:var(--text);background:var(--surface-3);border-color:var(--border)}
.tabpane{display:none}
/* Панель появляется мгновенно: pane-in срабатывал в том числе на панели,
   открытой по умолчанию, то есть просто на загрузке экрана настроек. */
.tabpane.active{display:block}

/* ── Настройки: полноэкранная панель с боковой навигацией ───────────────── */
.sheet-back{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);
  backdrop-filter:blur(3px);isolation:isolate;animation:fade-in var(--dur-2) var(--ease-out)}
.sheet{width:min(1080px,100%);height:min(760px,90dvh);display:flex;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--e3);animation:modal-in var(--dur-3) var(--ease-out) both}

.sheet-nav{width:236px;flex:0 0 236px;background:var(--bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:var(--s3) 0}
.sheet-nav-head{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.sheet-nav-head h2{font-size:var(--t-lg);padding:0 2px}
.nav-search{position:relative}
.nav-search input{width:100%;padding-left:30px;font-size:var(--t-sm)}
.nav-search::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);font-size:15px;pointer-events:none}
.sheet-nav-list{flex:1;overflow-y:auto;padding:0 var(--s2)}
.nav-group{font-size:var(--t-xs);font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);padding:var(--s4) 10px var(--s1)}
.nav-group:first-child{padding-top:var(--s1)}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border-radius:var(--r-sm);background:transparent;border:none;color:var(--text-soft);
  font-size:var(--t-sm);cursor:pointer;text-align:left;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.nav-item .ico{width:18px;text-align:center;flex:0 0 auto;font-size:14px}
.nav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}

.sheet-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);flex:0 0 auto}
.sheet-head h3{font-size:var(--t-lg)}
.sheet-head .sub{font-size:var(--t-xs);color:var(--muted);margin-top:2px}
.sheet-body{flex:1;overflow-y:auto;padding:var(--s5);scroll-behavior:smooth}
.sheet-body > .tabpane.active{max-width:760px}
.section-title{font-size:var(--t-sm);font-weight:650;margin:var(--s6) 0 var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--border)}
.section-title:first-child{margin-top:0}

/* ── Таблица данных (пользователи, заказы, устройства) ──────────────────── */
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.dtable th{text-align:left;font-size:var(--t-xs);font-weight:650;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-faint);padding:0 var(--s3) var(--s2);white-space:nowrap}
.dtable td{padding:10px var(--s3);border-top:1px solid var(--border);vertical-align:middle}
.dtable tbody tr{transition:background-color var(--dur-1) var(--ease-out)}
.dtable tbody tr:hover{background:var(--surface-2)}
.dtable .num{font-variant-numeric:tabular-nums;text-align:right}
.dtable .actions{text-align:right;white-space:nowrap}
.dtable .actions button{min-height:28px;padding:4px 9px;font-size:var(--t-xs)}
.dtable .u-name{font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.dtable .u-sub{font-size:var(--t-xs);color:var(--text-faint);font-weight:400}
.table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:auto;
  background:var(--surface-2)}
.table-wrap .dtable th{padding-top:var(--s3);background:var(--surface-2);position:sticky;top:0;z-index:1}
.table-wrap .dtable tr:first-child td{border-top-color:var(--border-strong)}

.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.toolbar .grow{flex:1;min-width:160px}
.toolbar .count{font-size:var(--t-xs);color:var(--text-faint);font-variant-numeric:tabular-nums}

.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:2px;gap:2px}
.seg-btn{background:transparent;border:none;color:var(--muted);padding:var(--ctl-y-sm) var(--ctl-x-sm);
  border-radius:7px;font-size:var(--t-xs);font-weight:550;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--e1)}

/* ── Почта ──────────────────────────────────────────────────────────────── */
.mail{display:grid;grid-template-columns:212px minmax(280px,1fr);gap:var(--s3);
  height:100%;min-height:0;isolation:isolate}
.mail.reading{grid-template-columns:212px minmax(280px,360px) minmax(320px,1.3fr)}
.mail-col{display:flex;flex-direction:column;min-height:0;min-width:0;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden}
.mail-col-head{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);
  border-bottom:1px solid var(--border);flex:0 0 auto;min-height:44px}
.mail-col-head .ttl{flex:1;min-width:0;font-size:var(--t-sm);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-col-body{flex:1;overflow-y:auto;min-height:0}

.mail-box-btn{display:flex;align-items:center;gap:var(--s2);width:100%;padding:var(--ctl-y) var(--s3);
  background:transparent;border:none;border-left:2px solid transparent;color:var(--text-soft);
  text-align:left;cursor:pointer;font-size:var(--t-sm);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.mail-box-btn:hover{background:var(--surface-3);color:var(--text)}
.mail-box-btn.active{background:var(--accent-soft);border-left-color:var(--accent);
  color:var(--accent);font-weight:600}
.mail-box-btn .bx{flex:1;min-width:0}
.mail-box-btn .bx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-box-btn .bx-addr{font-size:var(--t-xs);color:var(--text-faint);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mail-row{display:flex;align-items:flex-start;gap:10px;padding:10px var(--s3);
  border-bottom:1px solid var(--border);cursor:pointer;
  border-left:2px solid transparent;
  transition:background-color var(--dur-1) var(--ease-out)}
.mail-row:hover{background:var(--surface-3)}
.mail-row.active{background:var(--accent-soft);border-left-color:var(--accent)}
.mail-row.unseen .m-subject{font-weight:650;color:var(--text)}
.mail-row.unseen .m-from{color:var(--text-soft)}
.mail-row.unseen::after{content:"";width:7px;height:7px;border-radius:var(--r-full);
  background:var(--accent);flex:0 0 auto;margin-top:6px}
.mail-row input[type=checkbox]{margin-top:3px;flex:0 0 auto;accent-color:var(--accent);
  width:16px;height:16px;cursor:pointer}
.mail-row .m-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mail-row .m-top{display:flex;align-items:baseline;gap:var(--s2)}
.mail-row .m-from{flex:1;min-width:0;font-size:var(--t-xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row .m-date{font-size:var(--t-xs);color:var(--text-faint);flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.mail-row .m-subject{font-size:var(--t-sm);color:var(--text-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row .m-preview{font-size:var(--t-xs);color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row .m-tags{display:flex;gap:var(--s1);margin-top:3px;flex-wrap:wrap}

.mail-subhead{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--border);flex:0 0 auto}
.mail-subhead .small{min-height:28px;padding:4px 10px;font-size:var(--t-xs)}
.mail-subhead .muted{flex:1;min-width:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mail-bulk{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  background:var(--accent-soft);border-bottom:1px solid var(--accent-line);
  font-size:var(--t-xs);flex:0 0 auto;
  animation:bulk-in var(--dur-2) var(--ease-out) both}
@keyframes bulk-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mail-bulk .sel-count{flex:1;font-weight:600;color:var(--accent)}
.mail-bulk button{min-height:28px;padding:4px 10px;font-size:var(--t-xs)}

.mail-reader-head{padding:var(--s4);border-bottom:1px solid var(--border);flex:0 0 auto}
.mail-reader-head h4{font-size:var(--t-md);margin-bottom:var(--s2);line-height:1.35}
.mail-meta{display:flex;flex-direction:column;gap:3px;font-size:var(--t-xs);color:var(--muted)}
.mail-meta .row{display:flex;gap:var(--s2)}
.mail-meta .k{color:var(--text-faint);min-width:44px;flex:0 0 auto}
.mail-meta .v{min-width:0;overflow-wrap:anywhere}
.mail-reader-body{flex:1;overflow:auto;padding:var(--s4);min-height:0}
.mail-reader-body pre{background:none;border:none;padding:0;white-space:pre-wrap;
  font-family:var(--font);font-size:var(--t-sm);line-height:1.6;color:var(--text-soft)}
.mail-html{width:100%;border:none;background:var(--n-050);border-radius:var(--r-md);min-height:320px;
  display:block}
.mail-view-toggle{display:flex;gap:var(--s1);margin-bottom:var(--s3)}

/* Почта занимает всю панель, без ограничения ширины контента */
.sheet-body:has(> .tabpane[data-pane="mail"].active){padding:var(--s4);display:flex;
  flex-direction:column}
.tabpane[data-pane="mail"].active{display:flex;flex-direction:column;flex:1;
  max-width:none;min-height:0;min-width:0}
.tabpane[data-pane="mail"] .mail{flex:1;min-height:0}
.mail-col-head input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;
  cursor:pointer;flex:0 0 auto}
.mail-col-head .small{min-height:28px;padding:4px 9px;font-size:var(--t-xs)}
.mail .empty-state{padding:var(--s6) var(--s4)}

/* ── Карточки провайдеров / ключей / интеграций ─────────────────────────── */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s3)}
.card-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.card-head .t{flex:1;min-width:0;font-weight:600;font-size:var(--t-sm)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}

/* ── Диалог моделей / справка ───────────────────────────────────────────── */
#dlgOutput{max-height:420px;overflow:auto;margin-top:var(--s3)}
.dlg-chunk{margin:var(--s2) 0;padding:var(--s3);background:var(--surface-2);
  border-radius:var(--r-md);border-left:3px solid var(--accent)}
.dlg-synth{margin:var(--s3) 0;padding:var(--s4);background:var(--surface-2);
  border-radius:var(--r-md);border:1px solid var(--accent-line)}
#helpBody h3{margin:0 0 var(--s3);font-size:var(--t-lg)}
#helpBody h4{margin:var(--s5) 0 var(--s2);color:var(--accent);font-size:var(--t-sm)}
#helpBody ul,#helpBody ol{margin:var(--s2) 0 var(--s2) var(--s5);padding:0;line-height:1.7}
#helpBody p{margin:var(--s2) 0;line-height:1.65;max-width:70ch}
#integrationsList .login-box{margin-bottom:var(--s3)}
#integrationsList pre{margin:var(--s2) 0;font-size:var(--t-xs)}

details > summary{cursor:pointer;padding:var(--s2) 0;list-style:none;
  display:flex;align-items:center;gap:var(--s2);color:var(--text-soft);font-size:var(--t-sm)}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"▸";color:var(--text-faint);
  transition:transform var(--dur-1) var(--ease-out);display:inline-block}
details[open] > summary::before{transform:rotate(90deg)}
details > summary:hover{color:var(--text)}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .sheet{width:100%;height:100%;max-height:100dvh;border-radius:0;border:none}
  .sheet-back{padding:0}
  .sheet-nav{position:absolute;inset:0 auto 0 0;z-index:2;width:min(280px,84vw);
    transform:translateX(-101%);transition:transform var(--dur-3) var(--ease-out);
    box-shadow:var(--e3)}
  .sheet.nav-open .sheet-nav{transform:none}
  .sheet-head .nav-toggle{display:inline-flex}
  /* Почта на узком экране: ящики — лента сверху, ниже список ИЛИ письмо */
  .mail,.mail.reading{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .mail .mail-col.boxes{max-height:none}
  .mail .mail-col.boxes .mail-col-head{display:none}
  .mail .mail-col.boxes .mail-col-body{display:flex;gap:var(--s1);padding:var(--s2);
    overflow-x:auto;overflow-y:hidden}
  .mail .mail-col.boxes .mail-box-btn{flex:0 0 auto;width:auto;border-left:none;
    border-bottom:2px solid transparent;border-radius:var(--r-md)}
  .mail .mail-col.boxes .mail-box-btn.active{border-bottom-color:var(--accent);
    background:var(--accent-soft)}
  .mail .mail-col.boxes .bx-addr{display:none}
  .mail .mail-col.boxes .mail-imap{display:none}
  .mail.reading .mail-col.list{display:none}
}
@media (min-width:961px){
  .sheet-head .nav-toggle{display:none}
}
@media (max-width:860px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed;z-index:var(--z-drawer);top:0;bottom:0;left:0;
    transform:translateX(-100%);transition:transform var(--dur-3) var(--ease-out);
    box-shadow:var(--e3)}
  body.sidebar-open .sidebar{transform:none}
  #closeSidebar{display:inline-flex}
  .msg{padding:0 var(--s4)}
  .popmenu{left:var(--s3);right:var(--s3);bottom:var(--s3);min-width:0}
  .api-key-popup{right:var(--s2);left:var(--s2);min-width:0}
  .empty{padding-top:5vh}
  .modal{max-height:92dvh}
  .model-catalog-grid{grid-template-columns:1fr}
  .model-admin-controls{align-items:stretch}
  .model-admin-controls .fld{flex:1 1 140px}
  .modal-body{padding:var(--s4)}
  #toasts{bottom:var(--s3);width:calc(100vw - 24px)}
  .composer-inner{border-radius:var(--r-lg)}
}
@media (min-width:861px){
  .scrim{display:none!important}
}

/* Крупные касания на тач-устройствах */
@media (pointer:coarse){
  .icon-btn{width:42px;height:42px}
  .mail-row{padding:12px var(--s3)}
  .row-act{opacity:1!important}
  .msg-actions{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Конструктор тарифов ────────────────────────────────────────────────────
   Атомарные единицы: поля тарифа, окна лимитов подписки и окна на каждую
   модель. Сетка держит окна в одну строку, пока хватает ширины, и переносит
   их, а не растягивает панель. */
.tb-toolbar{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.tb-h{margin:var(--s6) 0 var(--s1);font-size:var(--t-md)}
.tb-wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2);margin-top:var(--s2)}
.tb-win{display:flex;flex-direction:column;gap:4px;font-size:var(--t-xs);color:var(--muted);min-width:0}
.tb-win input{width:100%;min-width:0;font-variant-numeric:tabular-nums}
.tb-model{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s2)}
.tb-model-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-width:0}
.tb-model-hd b{overflow-wrap:anywhere}
.tb-add{display:flex;align-items:flex-end;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.tb-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}