/* ── Глобальная палитра (single source) ────────────────────────────────
 * Light-дефолты: резолвят var(--…) на ВСЕХ страницах, включая те, где нет
 * своего :root (offline.html и др.). Per-page :root (в body) имеет ту же
 * специфичность и грузится позже → перебивает (значения те же). Тёмную тему
 * включает html[data-theme="dark"] ниже — специфичность (0,1,1) > :root,
 * поэтому перебивает и глобальный, и per-page :root независимо от порядка. */
:root{
  --purple:#3B5BFF; --bg:#fff; --bg2:#F4F6FB; --text:#14161D; --muted:#5C6275;
  --border:#E4E7F0; --teal:#0F6E56; --amber:#854F0B; --gray:#5C6275;
  --ok:#085041; --success:#085041; --err:#C0392B; --error:#C0392B;
  /* Семантические чипы/плашки (bg + парный fg). Light-дефолты = прежние
     пастели; тёмные значения — в html[data-theme="dark"] ниже. */
  --c-info-bg:#EAEFFF; --c-info-fg:#2A3C9E;
  --c-ok-bg:#E1F5EE;   --c-ok-fg:#085041;
  --c-err-bg:#FCEBEB;  --c-err-fg:#791F1F;
  --c-warn-bg:#FAEEDA; --c-warn-fg:#633806; --c-amber-fg:#854F0B;
  --c-done-bg:#EAF3DE; --c-done-fg:#27500A;
  --c-blue-bg:#E6F1FB; --c-blue-fg:#185FA5;
  --c-new-bg:#F0E9FF;  --c-new-fg:#5B2BB5;
  --c-accent-soft:#AEBCFF; --purple-strong:#2A3C9E;
  /* Ховер-поверхность интерактивных плиток (.metric и пр.): кремовый в light,
     приподнятый тёмный в dark. Прежние хардкоды #EFEDE6/#F1EFE8/#D9D6CC. */
  --hover-bg:#EFEDE6;
  /* Фон disabled-кнопок (прежний хардкод #ccc). Текст обычно var(--bg). */
  --btn-disabled-bg:#ccc;
}

/*
 * theme.css — фирменная стилистика B2C-лендинга для всех страниц приложения.
 *
 * Подключается ОДИН раз через pages/_document.tsx как
 *   <link rel="stylesheet" href="/theme.css">
 * в реальный <head>, поэтому покрывает и HTML-страницы (рендерятся через
 * [slug].tsx / index.tsx / admin/disputes.tsx из public/*.html), и
 * React-маршруты (/dashboard).
 *
 * Палитра (значения --purple/--bg2/--border/--text/--muted) живёт в
 * инлайновых <style> самих страниц и правится там же — здесь её НЕТ,
 * чтобы не конфликтовать с каскадом. theme.css держит только то, что
 * не пересекается с per-page правилами:
 *   1. @font-face (self-hosted woff2 — CSP font-src 'self')
 *   2. типографику заголовков (Unbounded) — прямое правило на элемент
 *      бьёт наследование от body, поэтому порядок подключения не важен
 *   3. базовый body-шрифт Onest (для React-страниц; HTML-страницы задают
 *      тот же шрифт в своём <style> — значения совпадают)
 *   4. мягкие тени и accent-мелочи (аддитивные свойства, конфликтов нет)
 *
 * Палитра B2C: акцент #3B5BFF (кобальт), холодный фон #F4F6FB,
 * чернила #14161D, приглушённый #5C6275.
 */

/* ── Self-hosted fonts (CSP: font-src 'self') ──────────────────────────
   Onest — текст/UI. Unbounded — display/заголовки. Вариативные woff2,
   latin + cyrillic как отдельные unicode-range (покрывают EN + RU). */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Базовый шрифт (в основном для React-страниц вроде /dashboard) ──────
   HTML-страницы переопределяют body своим инлайновым <style> тем же
   стеком — конфликта значений нет. */
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Display-типографика заголовков (Unbounded) ────────────────────────
   Страницы НЕ задают font-family на этих селекторах (проверено), поэтому
   прямое правило применяется независимо от порядка подключения. */
h1, h2, h3, h4,
.nav-logo, .ah-nav-logo, .brand, .title, .hero-title, .page-title,
.ah-footer-brand {
  font-family: 'Unbounded', 'Onest', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  letter-spacing: -0.015em;
}

/* ── Мягкая «воздушная» подложка (как карточки на лендинге) ─────────────
   Аддитивно: страницы не задают box-shadow на .card (проверено). */
.card {
  box-shadow: 0 1px 2px rgba(20, 22, 45, 0.04),
    0 14px 34px -18px rgba(20, 22, 45, 0.16);
}
.btn-primary {
  box-shadow: 0 10px 22px -10px rgba(59, 91, 255, 0.35);
}

/* ── Accent-мелочи ─────────────────────────────────────────────────────*/
html {
  scroll-behavior: smooth;
}
::selection {
  background: var(--purple);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   Этап 2 — полное сходство с B2C-лендингом.

   Группа A (детали бренда) — применяется ГЛОБАЛЬНО (все страницы).
   Группы B/C/D (атмосфера / анимации / воздушный лейаут) — ТОЛЬКО под
   `.lp` (landing-page) — класс на div-обёртке, который [slug].tsx /
   index.tsx ставит лишь для маркетинг/auth/legal-слагов. Плотные
   служебные страницы (back-office, дашборды, таблицы) НЕ затрагиваются.
   ════════════════════════════════════════════════════════════════════════ */

/* ── A. Словомарка «Gentora.AI»: имя чернилами + «.AI» акцентом ─────────
   Разметка даёт Gentora<span class="lg-ai">.AI</span>; базовый цвет логотипа
   перебиваем на ink удвоением класса (specificity 0,2,0 > per-page 0,1,0),
   поэтому работает независимо от порядка подключения. */
.nav-logo.nav-logo,
.ah-nav-logo.ah-nav-logo,
.brand.brand.brand, /* triple class: beats `.admin-side .brand` (0,2,0) regardless of load order */
.ah-footer-brand.ah-footer-brand {
  color: var(--text); /* было #14161d — флипается тёмной темой, иначе логотип/бренд футера невидимы на тёмном */
}
/* «.AI» — акцентная часть словомарки: цвет бренда + чуть плотнее ink-части
   (600 → 700) и слегка поджатый трекинг, чтобы капслок не выглядел рыхлым.
   .lg-hub — легаси-селектор прежней двухтонной марки «Gen|tora»: оставлен на
   случай внешней разметки (письма/статические заглушки), которую не переписали. */
.lg-ai,
.lg-hub {
  color: var(--purple);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── A. Кобальтовые CTA: стрелка → с микро-сдвигом на hover ─────────────
   Сам цвет .btn-primary (ink → cobalt) меняется в разметке страниц;
   здесь — стрелка, и только на лендинг-страницах (чтобы служебные
   «Сохранить»/«Удалить» не обрастали стрелками). */
.lp .btn-primary::after,
.lp .cta-btn.primary::after {
  content: "→";
  margin-left: 0.45em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.lp .btn-primary:hover::after,
.lp .cta-btn.primary:hover::after {
  transform: translateX(3px);
}

/* ── A. Подъём карточек на hover ───────────────────────────────────────
   Глобально — только для интерактивных карточек каталога; на лендинге —
   для всех .card. Удвоение класса перебивает per-page transition. */
.agent-card.agent-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease;
}
.agent-card.agent-card:hover {
  transform: translateY(-2px);
}
.lp .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(20, 22, 45, 0.06), 0 22px 48px -20px rgba(20, 22, 45, 0.22);
}

/* ── Motion keyframes (общие; гасятся prefers-reduced-motion ниже) ──────*/
@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes lp-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.25); }
}

/* ════════ B. Атмосфера — halo-свечения + grain (только .lp) ════════════ */
.lp {
  position: relative;
  min-height: 100vh;
  isolation: isolate; /* свой stacking-контекст для grain-оверлея */
  background-image:
    radial-gradient(42rem 42rem at -8% -12%, rgba(59, 91, 255, 0.14), transparent 60%),
    radial-gradient(36rem 36rem at 112% 26%, rgba(59, 91, 255, 0.12), transparent 60%);
}
/* Fine grain — мягкий шум поверх страницы (как .grain на лендинге). */
.lp::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════ C. Анимации появления (только .lp) ══════════════════════════ */
.lp .hero,
.lp .card,
.lp section,
.lp .auth-card {
  animation: lp-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* The hero is the above-the-fold LCP block, and its whole subtree — title,
   search bar AND the category chips — lives inside `.hero`. `lp-fade-up`'s
   `both` fill holds the element at the keyframe `from` state (opacity:0) until
   the animation's first frame actually runs; on a slow client that first style
   recalc is delayed behind hydration/heavy body scripts, so the entire top of
   the page rendered EMPTY for seconds before fading in (issue: "hero+категории
   +поиск иногда пустые"). Fix: give the hero a transform-only entrance — it
   still rises 18px, but stays fully opaque (backwards-fill = translateY only),
   so it can NEVER be held invisible regardless of when the animation starts.
   Only `animation-name` is overridden; duration/timing/`both` are inherited
   from the shorthand above. Below-the-fold cards/sections keep the opacity fade
   (a brief invisible state there isn't perceived as broken). The React.memo in
   lib/raw-html.tsx still prevents the subtree re-commit that used to RESTART
   this animation, so no flicker regression. */
.lp .hero { animation-name: lp-rise; }
@keyframes lp-rise {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
/* Пульсирующая точка в pill-бейдже. */
.lp .hero-badge span[style*="border-radius:50%"],
.lp .lp-dot {
  animation: lp-glow 4s ease-in-out infinite;
}

/* ════════ D. Воздушный лейаут (только .lp; в осн. для index hero) ══════ */
.lp .hero {
  padding-top: 36px;
  padding-bottom: 22px;
}
/* Tighter hero on phones — the 64/44 desktop padding wasted a lot of
   vertical space above/below the fold on small screens. */
@media (max-width: 720px) {
  .lp .hero { padding-top: 24px; padding-bottom: 18px; }
}
.lp .hero-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lp .hero-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.lp .hero-badge {
  font-size: 12px;
  padding: 5px 13px;
}

/* ── D+. Парящие чипы-примеры в hero + ink-CTA секция (как на лендинге) ──
   Разметка есть только в index.html; на прочих .lp-страницах этих
   элементов нет, поэтому правила там ни на что не влияют. */
.lp .hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 40rem;
  margin: 24px auto 4px;
}
.lp .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 28px -18px rgba(20, 22, 45, 0.38);
  animation: lp-float 6s ease-in-out infinite;
}
.lp .hero-chip > span {
  font-size: 16px;
  line-height: 1;
}
.lp .cta-band {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 12px auto 44px;
  padding: clamp(36px, 6vw, 56px) 28px;
  text-align: center;
  background: #14161d;
  border-radius: 32px;
}
.lp .cta-band h2 {
  margin: 0 0 10px;
  color: #f4f6fb;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
}
.lp .cta-band p {
  max-width: 30rem;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.55;
}
.lp .cta-band .btn {
  background: #3b5bff;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.lp .cta-band .btn::after {
  content: "→";
  margin-left: 0.45em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.lp .cta-band .btn:hover::after {
  transform: translateX(3px);
}

/* ── prefers-reduced-motion: глушим всё движение ───────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp .hero, .lp .card, .lp section, .lp .auth-card,
  .lp .hero-badge span[style*="border-radius:50%"], .lp .lp-dot,
  .agent-card.agent-card, .lp .card:hover, .lp .hero-chip,
  .lp .btn-primary::after, .lp .cta-btn.primary::after, .lp .cta-band .btn::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Нативный мобильный полиш (issue «нативнее без нативных приложений») ──
 * theme.css грузится на ВСЕХ маршрутах (pages/_document.tsx) → один источник.
 * Всё безопасно на десктопе: env(safe-area-*)=0 без выреза, touch-action и
 * tap-highlight не влияют на мышь, user-select снят только с UI-хрома.
 */

/* Текст как в нативных приложениях; не даём iOS раздувать шрифт при повороте. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Серая вспышка при тапе по интерактиву — главный «вебовский» маркер; убираем,
 * обратную связь оставляем на :active. */
a, button, [role="button"], .btn, .tag, input[type="submit"], label.seg-opt {
  -webkit-tap-highlight-color: transparent;
}
/* Моментальный тап: без 300мс ожидания double-tap-zoom на интерактиве. */
a, button, [role="button"], .btn, .tag { touch-action: manipulation; }

/* Брендовый акцент нативных контролов (чекбокс/радио/прогресс/слайдер). */
:root { accent-color: var(--purple); }

/* Жесты прокрутки не протекают за скролл-контейнеры; нет случайного
 * pull-to-refresh всей страницы (в standalone-режиме PWA — нативное поведение). */
html, body { overscroll-behavior-y: none; }

/* UI-хром не выделяется при долгом тапе (как в нативном UI). Текстовый
 * контент — НЕ в списке, остаётся выделяемым/копируемым. */
.nav, .nav-inner, .nav-links, .nav-logo, .btn, .tag, .tab-item, .badge,
.cat-badge, .metric-label, .side-link, [role="button"] {
  -webkit-user-select: none; user-select: none;
}

/* Safe-area: контент и навигация не лезут под «чёлку»/жест-полоску. На
 * устройствах без выреза env()=0 → нет эффекта. Реально работает в standalone. */
@supports (padding: max(0px, env(safe-area-inset-top))) {
  .nav-inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Нижняя таб-навигация (Tier 2) ─────────────────────────────────────
 * Рендерит /bottom-nav.js (role-aware, только для авторизованных
 * заказчика/провайдера). Mobile-only: на > 720px скрыта. Палитра берётся
 * из per-page :root (--purple/--muted/--border) с фолбэками. */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex;
    /* Нативный iOS-таб-бар: полупрозрачный фон + блюр (frosted glass).
       Solid-фолбэк первым — браузеры без color-mix берут его. */
    background: var(--bg, #fff);
    background: color-mix(in srgb, var(--bg, #fff) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--border, #E4E7F0);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 12px rgba(20, 22, 29, 0.04);
  }
  .bottom-nav .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; padding: 9px 4px 7px; min-height: 56px;
    text-decoration: none; color: var(--muted, #5C6275);
    font-size: 11px; font-weight: 500; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav .bn-item.active { color: var(--purple, #3B5BFF); }
  .bottom-nav .bn-ic { display: flex; }
  .bottom-nav .bn-ic svg { width: 27px; height: 27px; }
  /* Контент не уезжает под бар. Переопределяет body padding из Tier 0. */
  body.has-bottom-nav { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ── Skeleton-плейсхолдеры (Tier 2) ────────────────────────────────────
 * Мерцающая заглушка вместо пустоты при загрузке списков. Глобально
 * (у catalog есть своя локальная копия с keyframe `shimmer` — конфликта
 * нет, имя кадров здесь иное). */
.skeleton {
  background: linear-gradient(90deg, var(--bg2, #F4F6FB) 25%, #ececf2 50%, var(--bg2, #F4F6FB) 75%);
  background-size: 200% 100%;
  animation: ah-shimmer 1.2s infinite;
  border-radius: 9px;
}
@keyframes ah-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } }

/* ── Sticky bottom-CTA (Tier 2) ────────────────────────────────────────
 * Главное действие всегда под большим пальцем на «create»-флоу (task-form).
 * Десктоп: .sticky-cta — обычный поток (без изменений). Телефон: фикс-бар
 * снизу. Страница исключена из нижней таб-навигации (bottom-nav DENY),
 * чтобы не было двух баров. */
@media (max-width: 720px) {
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    /* var(--bg): белый в light, тёмный в dark — прежний хардкод #fff давал
       белую плашку под кнопкой «Поставить задачу» в тёмной теме на телефоне. */
    background: var(--bg, #fff); border-top: 0.5px solid var(--border, #E4E7F0);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 12px rgba(20, 22, 29, 0.06);
  }
  .sticky-cta .btn, .sticky-cta button { margin-bottom: 0 !important; }
  body:has(.sticky-cta) { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ── Тёмная тема ───────────────────────────────────────────────────────
 * html[data-theme="dark"] (ставит /theme-init.js до отрисовки). Специфичность
 * (0,1,1) > :root (0,1,0) → перебивает и глобальный, и per-page :root. Светлые
 * структурные hex уже заменены на var(--…) (bin/dark-theme-migrate.py), поэтому
 * поверхности/текст/границы флипаются автоматически. Семантические переменные
 * (--ok/--err/--teal/--amber) осветлены для контраста на тёмном; самодостаточные
 * цветные чипы (пастель bg + тёмный fg) читаемы и без изменений. */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1117;
  --bg2: #181B23;
  --text: #E6E8EE;
  --muted: #9BA1B0;
  --border: #2A2E3A;
  --purple: #6E86FF;
  --gray: #9BA1B0;
  --ok: #5DCAA5; --success: #5DCAA5;
  --err: #F09595; --error: #F09595;
  --teal: #5DCAA5; --amber: #E0A458;
  accent-color: #6E86FF;
  /* Семантические чипы/плашки: фон — полупрозрачный тинт поверх тёмного,
     текст — осветлённый парный. */
  --c-info-bg: rgba(110,134,255,.16); --c-info-fg: #AEBCFF;
  --c-ok-bg:   rgba(93,202,165,.15);  --c-ok-fg:   #5DCAA5;
  --c-err-bg:  rgba(240,149,149,.14); --c-err-fg:  #F09595;
  --c-warn-bg: rgba(224,164,88,.15);  --c-warn-fg: #E0A458; --c-amber-fg: #E0A458;
  --c-done-bg: rgba(124,196,124,.15); --c-done-fg: #9BD66E;
  --c-blue-bg: #16263A;               --c-blue-fg: #7FB4E8;
  --c-new-bg:  rgba(150,120,255,.18); --c-new-fg:  #C6B0FF;
  --c-accent-soft: #3A4470; --purple-strong: #5872E8;
  --hover-bg: #20242E;
  --btn-disabled-bg: #3A3F4D;
}

/* Сегментный переключатель темы (/profile-settings#profile). */
.theme-seg { display: inline-flex; gap: 4px; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 14px; padding: 3px; }
.theme-seg button { font: inherit; font-size: 13px; padding: 7px 14px; border: none; border-radius: 11px; background: none; color: var(--muted); cursor: pointer; min-height: 40px; }
.theme-seg button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── Поля ввода в тёмной теме ───────────────────────────────────────────
 * Карточки и инпуты оба на var(--bg) → в тёмной поля сливались с картой
 * (бордер var(--border) еле виден). Даём инпутам приподнятый фон var(--bg2)
 * + гарантированный светлый текст. !important перебивает per-page
 * `input{background:var(--bg)}`/без color (withdraw полагался на color-scheme).
 * Чекбоксы/радио/range — мимо (у них accent-color). Light-тема не тронута. */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border);
}
/* Плейсхолдер читаем в обеих темах (var--muted, без UA-затемнения). */
::placeholder { color: var(--muted); opacity: 1; }

/* Top-nav "Провайдер" link (→ /provider-dashboard) is a provider-side
 * entry. Hidden BY DEFAULT here (loaded in <head> before paint, so no
 * FOUC flash), revealed only for:
 *   - logged-in providers — html.ah-provider-role, set synchronously by
 *     theme-init.js before the body paints;
 *   - open provider self-signup — html.ah-provider-signup-on, set by
 *     footer.js after the unauth feature projection.
 * Scoped to .nav-links so in-page provider links (agent pages) are untouched. */
.nav-links a[href="/provider-dashboard"],
.ah-nav-links a[href="/provider-dashboard"] { display: none; }
html.ah-provider-role .nav-links a[href="/provider-dashboard"],
html.ah-provider-role .ah-nav-links a[href="/provider-dashboard"],
html.ah-provider-signup-on .nav-links a[href="/provider-dashboard"],
html.ah-provider-signup-on .ah-nav-links a[href="/provider-dashboard"] { display: revert; }

/* ── PWA «нативные» ощущения (блок A) ─────────────────────────────────
   Меньше «вебовости»: серая вспышка тапа, 300ms/double-tap-zoom на
   интерактиве; в установленном PWA — без «резинки» и без выделения/
   долгого-нажатия на UI-хроме (кнопки/чипы/навигация). Текст контента
   выделяется по-прежнему. */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], .tag, input[type="submit"], input[type="button"], label {
  touch-action: manipulation;
}
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  button, .tag, .badge, .nav, .bottom-nav, [role="button"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Кросс-документные View Transitions (block C) — СНЯТО.
   `@view-transition { navigation: auto }` включал нативный кросс-фейд на КАЖДУЮ
   same-origin навигацию. Проблема: снапшот `::view-transition-new(root)` LP-страниц
   (login/register/…) захватывается в момент, когда `.card` держится на opacity:0
   `lp-fade-up`-энтранс-анимацией (`animation-fill-mode: both` фиксирует кадр
   `from{opacity:0}` до первого тика). Итог — новый снапшот содержит ПУСТУЮ карточку;
   если браузер не финализирует переход мгновенно (зависит от версии/композитора),
   пользователь видит застывший пустой кадр (только шапка), пока не сделает reload.
   Это косметика PWA, ломающая функциональность формы входа → убрана целиком.
   Без опт-ина (и без единого startViewTransition в JS) псевдоэлементы
   `::view-transition-*` не создаются, поэтому reduced-motion-оверрайд тоже снят. */

/* ── Search-chat: гостевой ПОЛНОЭКРАННЫЙ чат-подбор (search-chat.js) ─────────
 * Оверлей на всю страницу, раскрывается анимированно при фокусе в поиске;
 * фокус уходит в композер. Палитра — из инлайн-переменных страницы (фолбэки на
 * светлую тему), адаптируется к теме автоматически. Публичная фича; исполнение
 * гейтится за входом. */
html.sc-locked, html.sc-locked body { overflow: hidden; }
.sc-ov {
  position: fixed; inset: 0; z-index: 200; background: var(--bg, #fff);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
.sc-ov.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sc-ov { transition: opacity .12s ease; transform: none; } }
.sc-ov-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 0.5px solid var(--border, #E4E7F0); flex: none; }
.sc-ov-title { font-size: 16px; font-weight: 600; color: var(--text, #14161D); }
.sc-ov-close { width: 34px; height: 34px; border-radius: 10px; border: 0.5px solid var(--border, #E4E7F0); background: var(--bg, #fff); color: var(--text, #14161D); font-size: 15px; cursor: pointer; line-height: 1; }
.sc-ov-close:hover { background: var(--bg2, #F4F6FB); }
.sc-ov-scroll { flex: 1; overflow-y: auto; }
.sc-ov-col { max-width: 760px; margin: 0 auto; width: 100%; padding: 0 20px; }
.sc-ov-scroll .sc-ov-col { padding-top: 20px; padding-bottom: 14px; }
/* Welcome */
.sc-welcome { text-align: center; padding: 40px 8px 8px; }
.sc-welcome .sc-orb { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--purple, #3B5BFF) 15%, transparent); border: 0.5px solid var(--border, #E4E7F0); }
/* Вошедшему — ссылка в его переписку: история живёт на странице чата, а не в
   этом виджете, и без неё «чистый» оверлей читался как пропавший диалог. */
.sc-welcome .sc-resume { margin: 0 0 14px; font-size: 13.5px; }
.sc-welcome .sc-resume a { color: var(--purple, #3B5BFF); font-weight: 500; }
.sc-welcome .sc-resume a:hover { text-decoration: underline; }
.sc-welcome h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text, #14161D); }
.sc-welcome p { color: var(--muted, #5C6275); font-size: 14.5px; max-width: 46ch; margin: 0 auto 20px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 600px; margin: 0 auto; }
.sc-chip { font: inherit; font-size: 13.5px; text-align: left; color: var(--text, #14161D); cursor: pointer; background: var(--bg, #fff); border: 0.5px solid var(--border, #E4E7F0); border-radius: 12px; padding: 11px 14px; transition: border-color .12s, transform .12s; }
.sc-chip:hover { border-color: var(--purple, #3B5BFF); transform: translateY(-1px); }
/* Thread */
.sc-thread { display: flex; flex-direction: column; gap: 16px; }
.sc-msg { display: flex; gap: 11px; align-items: flex-start; }
.sc-msg.you { flex-direction: row-reverse; }
.sc-msg .sc-av { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: color-mix(in srgb, var(--purple, #3B5BFF) 16%, transparent); }
.sc-msg .sc-b { max-width: 82%; font-size: 14.5px; line-height: 1.55; color: var(--text, #14161D); }
.sc-msg.you .sc-b { background: var(--bg2, #F4F6FB); border-radius: 14px 14px 4px 14px; padding: 10px 14px; }
/* Think dots */
.sc-think { display: inline-flex; align-items: center; gap: 8px; color: var(--muted, #5C6275); font-size: 13.5px; }
.sc-dots { display: inline-flex; gap: 4px; }
.sc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, #5C6275); opacity: .5; animation: scblink 1.2s infinite; }
.sc-dots i:nth-child(2) { animation-delay: .2s; } .sc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes scblink { 0%,60%,100% { opacity: .25; } 30% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sc-dots i { animation: none; opacity: .6; } }
/* Agent card / result */
.sc-lead { font-size: 11.5px; color: var(--muted, #5C6275); margin-bottom: 9px; }
.sc-agent { display: flex; align-items: center; gap: 11px; text-decoration: none; border: 0.5px solid var(--border, #E4E7F0); border-radius: 12px; padding: 11px 13px; }
.sc-agent:hover { border-color: var(--purple, #3B5BFF); }
.sc-agent .sc-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--bg2, #F4F6FB); border: 0.5px solid var(--border, #E4E7F0); }
.sc-agent .sc-meta { display: flex; flex-direction: column; }
.sc-agent .sc-nm { font-weight: 600; font-size: 14.5px; color: var(--text, #14161D); }
.sc-agent .sc-sub { font-size: 12.5px; color: var(--muted, #5C6275); margin-top: 2px; }
.sc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted, #5C6275); }
.sc-cta > span { width: 100%; }
.sc-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; background: var(--purple, #3B5BFF); color: #fff; border: 0.5px solid transparent; }
.sc-btn:hover { background: var(--purple-strong, #2A3C9E); }
.sc-btn.ghost { background: var(--bg, #fff); color: var(--text, #14161D); border-color: var(--border, #E4E7F0); }
.sc-alts { margin-top: 12px; border-top: 0.5px solid color-mix(in srgb, var(--text, #14161D) 12%, transparent); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sc-alts-l { font-size: 11.5px; color: var(--muted, #5C6275); }
.sc-alt { font-size: 13.5px; color: var(--text, #14161D); text-decoration: none; padding: 4px 0; }
.sc-alt:hover { color: var(--purple, #3B5BFF); }
.sc-say { font-size: 14.5px; line-height: 1.6; color: var(--text, #14161D); white-space: pre-wrap; }
.sc-note { font-size: 13.5px; color: var(--muted, #5C6275); }
.sc-note a { color: var(--purple, #3B5BFF); }
/* Composer (прибит снизу) */
.sc-ov-composer { border-top: 0.5px solid var(--border, #E4E7F0); background: var(--bg, #fff); padding: 13px 0 calc(16px + env(safe-area-inset-bottom)); flex: none; }
.sc-inputrow { display: flex; align-items: flex-end; gap: 10px; background: var(--bg, #fff); border: 0.5px solid var(--border, #E4E7F0); border-radius: 16px; padding: 8px 8px 8px 15px; }
.sc-inputrow:focus-within { border-color: var(--purple, #3B5BFF); }
.sc-ov-composer textarea { flex: 1; border: none; outline: none; resize: none; background: none; color: var(--text, #14161D); font: inherit; font-size: 14.5px; max-height: 140px; padding: 6px 0; line-height: 1.45; }
.sc-send { flex: none; width: 38px; height: 38px; border-radius: 11px; border: none; background: var(--purple, #3B5BFF); color: #fff; cursor: pointer; font-size: 16px; }
.sc-send:disabled { background: var(--border, #E4E7F0); color: var(--muted, #5C6275); cursor: default; }
.sc-foot { text-align: center; font-size: 11.5px; color: var(--muted, #5C6275); margin-top: 9px; }
