/* ══════════════════════════════════════════════════════════════════════════
   Track · ux-v4 — дизайн-система «дисциплинированный премиум» (вариант A, бирюза)
   Свод 3 скиллов: Impeccable (floor качества) · Taste (ритм/сдержанность) ·
   Emil Kowalski (моушн). Слой ПОВЕРХ style.css+ux-v3.css — правит токены и полиш,
   разметку не ломает. Обе темы. 2026-10-27.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. Моушн-токены (Emil): сильные кривые вместо «ватных» встроенных ───────
   ease-out — вход/выход (из уже видимого); ease-in-out — движение на экране;
   drawer — iOS-подобный выезд. Длительности <300мс. Переопределяем --ease/--spring,
   чтобы ВСЕ существующие transition получили лучший отклик без правки каждого. */
:root {
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-1: 120ms;   /* отклик нажатия */
  --dur-2: 180ms;   /* hover, мелкие поповеры */
  --dur-3: 240ms;   /* dropdown, панели */
  --ease:   var(--ease-out);
  --spring: var(--ease-out);
}

/* ── 2. Акцент подняли до каноничного уровня (бирюза живее, но один акцент) ── */
:root {
  --a1: #0E9E8C; --a2: #12B3A0; --accent: #0E9E8C; --accent-ink: #0A6E62;
  --accent-tint: rgba(14,158,140,.09); --accent-tint-2: rgba(14,158,140,.14);
}
html[data-theme="dark"] {
  --a1: #1FBCA9; --a2: #45D6C6; --accent: #1FBCA9; --accent-ink: #7FEADB;
  --accent-tint: rgba(31,188,169,.13); --accent-tint-2: rgba(31,188,169,.20);
  /* нейтрали с лёгким холодным уклоном под бренд (Refactoring UI: серый ≠ чистый) */
  --sub: #AEB6BC; --muted: #6C7579; --line: #1E2524; --edge: #222A28;
}

/* ── 3. Типографика: дисплейный шрифт бренда (Unbounded подключён в index) ── */
.brand-word, .brand-mark, .empty h2, .drop-overlay .dz {
  font-family: 'Unbounded', var(--display);
  letter-spacing: -.03em;
}
.brand-word { font-weight: 700; }
.brand-mark { font-weight: 800; }
/* Impeccable: над заголовком воздуха больше, чем под ним */
.bubble .mdh { margin-top: 1.5em; margin-bottom: .5em; }
.bubble .mdh:first-child { margin-top: 0; }
/* Taste: основной текст — полным цветом (не приглушённым серым) */
.bubble { color: var(--txt); font-size: 15px; }
.bubble p, .bubble li { line-height: 1.6; }

/* ── 4. Тематизация браузерных поверхностей (floor Impeccable) ───────────────
   выделение · каретка · скроллбары · фокус-ринги — часть качества, не опция. */
:root { caret-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--txt); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 26%, transparent) transparent; }

/* Видимый фокус с клавиатуры (WCAG 2.4.11/2.4.13) — на всём интерактиве.
   Мышью не мозолит (:focus-visible), с клавиатуры — чёткий бирюзовый ринг. */
:where(button, a, input, textarea, select, [tabindex], .chip, .side-btn, .rail-tab,
       .starter-chip, .chat-item, .icon-btn, .cmd-item, .ask-opt, .enh-opt):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}
.composer-box:focus-within { outline: none; } /* у композера свой ring через box-shadow */

/* ── 5. Глубина = свет сверху, только там где реально приподнято (Taste: не на
   покоящихся). Композер/модалки/поповеры/тосты — приподняты; карточки-списки — плоские. */
html[data-theme="dark"] {
  --hi: inset 0 1px 0 rgba(255,255,255,.04);
  --shadow: 0 1px 2px rgba(0,0,0,.28);
}
.composer-box { box-shadow: 0 10px 30px rgba(0,0,0,.30), var(--hi); }
html[data-theme="dark"] .modal-card { box-shadow: 0 32px 70px rgba(0,0,0,.55), var(--hi); }
.cmd-pop, .settings-pop, .sys-panel, .toast { box-shadow: 0 14px 38px rgba(0,0,0,.34), var(--hi); }

/* ── 6. Pressable-отклик (Emil: быстрый, из видимого) + hover-подъём только на
   устройствах с настоящим курсором (тач не даёт ложный «залипший» hover). ── */
.side-btn, .chip, .rail-tab, .starter-chip, .icon-btn, .new-chat, .btn-primary,
.send, .teamtog, .fu-chip, .cmd-item, .ask-opt, .enh-opt, .mini-btn, .bench-apply {
  transition: transform var(--dur-1) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.side-btn:active, .chip:active, .starter-chip:active, .icon-btn:active,
.cmd-item:active, .ask-opt:active, .fu-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .new-chat:hover, .btn-primary:hover, .send:hover { transform: translateY(-1px); }
  .starter-chip:hover, .fu-chip:hover { transform: translateY(-1px); }
}
/* акцентные кнопки: читаемый текст на бирюзе в обеих темах */
.new-chat, .btn-primary, .send, .chip.on, .teamtog.on, .tool-install button,
.acc-add, .acc-go, .enh-go, .bench-apply, .ask-send, .ask-submit, .artifact-open, .ac-send {
  color: #04221E;
}
html[data-theme="dark"] .new-chat, html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .send { font-weight: 700; }

/* ── 7. Единый язык иконок: stroke 1.75, насыщенные края (Impeccable) ────────
   SVG-иконки уже inline (.ic svg). Делаем штрих тоньше/ровнее и центрируем. */
.ic svg { stroke-width: 1.75; }
.side-btn .ic svg, .icon-btn .ic svg { width: 17px; height: 17px; }
.rail-tab .ic svg { width: 15px; height: 15px; }

/* иконка+текст в составных метках (Deep Research, авто-роут, заголовки инфры,
   секция автоматизации, кнопка примерки) — ровный ряд с воздухом */
.cs-t, .dr-badge, .bench-apply, .route-note { display: inline-flex; align-items: center; gap: 6px; }
.isec .ihdr { display: flex; align-items: center; gap: 7px; }
.cs-t .ic svg, .dr-badge .ic svg, .route-note .ic svg, .isec .ihdr .ic svg, .bench-apply .ic svg { width: 14px; height: 14px; }
.td-ic .ic svg { width: 14px; height: 14px; }
.td.td-done .td-ic { color: var(--ok); }
.td.td-now .td-ic { color: var(--accent); }

/* каретка сворачивания секции диалогов — chevron с поворотом (не глиф-треугольник) */
.cs-caret { display: inline-flex; align-items: center; transition: transform var(--dur-2) var(--ease-out); }
.cs-caret .ic svg { width: 13px; height: 13px; }
.cs-caret.closed { transform: rotate(-90deg); }

/* бейдж «Без цензуры» и Deep Research: иконка в ряд с текстом */
.dr-badge .ic svg { width: 13px; height: 13px; }

/* кнопки/метки рельса с иконкой+текстом — ровный ряд с воздухом */
.bench-keep, .bench-drop, .acc-reveal, .acc-add2 { display: inline-flex; align-items: center; gap: 6px; }
.bench-keep .ic svg, .bench-drop .ic svg, .acc-reveal .ic svg { width: 13px; height: 13px; }
.acc-ed .ic svg, .acc-rm .ic svg { width: 14px; height: 14px; }

/* themed статус-точки вместо эмодзи 🟢🟡🔴 (health/fresh) */
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; flex: none; }
.sdot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 15%, transparent); }
.sdot.warn { background: var(--accent-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-warn) 15%, transparent); }
.sdot.bad { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 15%, transparent); }
.sdot.mut { background: var(--muted); }
.fresh-dot .sdot, .health-dot .sdot { margin-right: 2px; }
.fresh-row > span:first-child, .health-dot { display: inline-flex; align-items: center; }

/* ── 8. Статус-пилюля агента: ровнее, в ритме (Taste) ───────────────────────*/
.agent-state { font-weight: 600; letter-spacing: -.01em; }
.agent-state .dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }

/* ── 9. Состояния: hover/disabled/empty — единообразно (floor Impeccable) ────*/
button:disabled, .btn-primary:disabled, .send:disabled, [disabled] { opacity: .5; cursor: default; }
button:disabled:hover { transform: none; filter: none; }
.empty { gap: 6px; }
.empty h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.05; }

/* чат активный — чуть более читаемый акцент слева (как в ux-v3), ровный фон */
.chat-item.active { background: var(--accent-tint); box-shadow: inset 2px 0 var(--accent); }

/* ── 10. Моушн-гигиена (Emil): данные не двигаются ради стиля; reduced-motion —
   «меньше и мягче», а не ноль (оставляем opacity/цвет, убираем перемещение). ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .08ms !important;
    scroll-behavior: auto !important;
  }
  .msg, .tool, .status, .skill, .agent-head { animation: none !important; }
  .msg { opacity: 1 !important; transform: none !important; }
}

/* ══ iPhone 16 / 16 Pro Max и прочие notch-устройства: safe-area + клавиатура ══
   display:standalone → контент идёт ПОД Dynamic Island/статус-бар и домашний
   индикатор. Раньше ни одного safe-area-inset — шапка и дровера лезли под остров.
   Фикс: отступы по всем небезопасным краям + высота по visualViewport (клавиатура). */
@media (max-width: 900px) {
  /* высоту приложения ведёт JS через --app-h (visualViewport): композер держится
     над клавиатурой; когда клавиатуры нет — честный 100dvh */
  #app { height: var(--app-h, 100dvh); }

  /* верхняя шапка чата — ниже Dynamic Island, и не под «ушами» в ландшафте */
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  /* шапки выезжающих панелей (диалоги/контекст) — тоже ниже острова */
  .side-head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .rail-heading { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  /* дровера занимают всю высоту — их низ не должен уходить под home-индикатор */
  .sidebar, .rail { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* композер — по бокам учесть «уши», низ уже учтён (style.css) */
  .composer {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  /* кластер навигации не должен налезать на остров/композер/home-бар */
  .navfab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* экран логина — карточка не прилипает к острову/индикатору */
#login {
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}