/**
 * UnifiedHeader styles (v3.8.7).
 *
 * Ручной CSS-subset визуала Vuetify v-app-bar/v-toolbar dark.
 * Target: ≤ 15 KB gzipped (фактически измеряется при билде).
 *
 * CSS custom properties для тематизации:
 *   --uh-bg, --uh-text, --uh-text-muted, --uh-accent, --uh-border,
 *   --uh-menu-bg, --uh-menu-hover, --uh-height, --uh-font
 *
 * Light theme (отложена в v3.8.8+) — переопределит переменные через .uh-light.
 * Сейчас сохранена только .uh-dark — стиль для большинства сценариев.
 */

/* ─── Reset внутри Shadow DOM ────────────────────────────────────── */
:host {
  display: block;
  width: 100%;
  min-width: 0;
  /* v3.8.7-fix5 (FIX-C): контекстный flex. Shadow DOM CSS не знает flex-
     направление родителя, а шапка встраивается в ДВА разных контекста:
       - Wiki.js: Vuetify .v-toolbar__content — ROW-flex (нужен рост по ширине)
       - RAG-UI:  #rag-app — COLUMN-flex (рост по высоте КАТЕГОРИЧЕСКИ НЕ нужен)
     Единое fix3r2-правило `flex:1 1 auto` ломало RAG-UI: в column-flex это
     «расти по вертикали» → шапка съедала 100vh, .rag-body коллапсировал
     (BUG-3). Безопасный базовый default — `flex:0 0 auto` (фикс. высота,
     никогда не коллапсирует тело). Атрибут `context` уже передаётся обеими
     оболочками (OBSERVED_ATTRS; SpaShell→'rag-ui', nav-header.vue→'wikijs'). */
  flex: 0 0 auto;
  /* v3.19.3: безопасный default — обычный sans. Конкретный шрифт задаётся per-context
     ниже (--uh-font): rag-ui → IBM Plex Mono (E2B), wikijs → Roboto/sans (как было). */
  font-family: var(--uh-font, 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px;
  line-height: 1.4;
  color-scheme: dark;
}

/* RAG-UI (column-flex родитель): шапка фикс. высоты, тело занимает остаток */
:host([context="rag-ui"]) { flex: 0 0 auto; }

/* Wiki.js (row-flex родитель): шапка тянется по ширине тулбара (как fix3r2) */
:host([context="wikijs"]) { flex: 1 1 auto; }

*, *::before, *::after { box-sizing: border-box; }

/* ─── Tokens (dark theme — default; light отложен в v3.8.8+) ──── */
.uh-dark {
  --uh-bg: #000000;
  --uh-text: rgba(255, 255, 255, 0.92);
  --uh-text-muted: rgba(255, 255, 255, 0.62);
  --uh-accent: #7c4dff;             /* deep-purple accent (Wiki.js default) */
  --uh-border: rgba(255, 255, 255, 0.08);
  --uh-menu-bg: #1e1e1e;
  --uh-menu-hover: rgba(255, 255, 255, 0.08);
  --uh-menu-danger: #ef5350;
  --uh-height: 64px;
}

/* Placeholder for future light theme — kept minimal until v3.8.8+ */
.uh-light {
  --uh-bg: #f5f5f5;
  --uh-text: rgba(0, 0, 0, 0.87);
  --uh-text-muted: rgba(0, 0, 0, 0.6);
  --uh-accent: #1976d2;
  --uh-border: rgba(0, 0, 0, 0.12);
  --uh-menu-bg: #ffffff;
  --uh-menu-hover: rgba(0, 0, 0, 0.04);
  --uh-menu-danger: #d32f2f;
  --uh-height: 64px;
}

/* ─── E2B-цвета для ОБОИХ контекстов; ШРИФТ — per-context (v3.19.3) ─────────────
   Цвета E2B (оранжевый акцент, тёмные/светлые поверхности) — общие для rag-ui и
   wikijs (DRY, ниже). А вот ШРИФТ разделён по запросу заказчика:
     - rag-ui  → IBM Plex Mono (E2B, продуктовый терминальный вид);
     - wikijs  → обычный sans (Roboto) — Wiki.js «как было», без моноширинного chrome.
   Shadow DOM на каждой странице изолирует scope; имена --uh-* не трогаем. ──── */
:host([context="rag-ui"]) {
  --uh-font: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:host([context="wikijs"]) {
  --uh-font: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:host([context="rag-ui"]) .uh-dark,
:host([context="wikijs"]) .uh-dark {
  --uh-bg: #0a0a0a;
  --uh-text: #ffffff;
  --uh-text-muted: #777777;
  --uh-accent: #ff8800;            /* E2B brand orange — focus/outline/акцент */
  --uh-on-accent: #0a0a0a;         /* dark text on orange CTA (§138 primary) */
  --uh-border: #292929;
  --uh-menu-bg: #141414;
  --uh-menu-hover: #1f1f1f;
  --uh-menu-danger: #ff4400;
}
/* Оранжевый focus-ring (alpha) поверх auto-outline от --uh-accent */
:host([context="rag-ui"]) :focus-visible,
:host([context="wikijs"]) :focus-visible {
  box-shadow: 0 0 0 3px #ff880029;
}
/* Светлая тема шапки — паритет с body-light (E2B). */
:host([context="rag-ui"]) .uh-light,
:host([context="wikijs"]) .uh-light {
  --uh-bg: #fafafa;
  --uh-text: #000000;
  --uh-text-muted: #666666;
  --uh-accent: #e56f00;            /* E2B light-вариант оранжевого */
  --uh-on-accent: #ffffff;         /* white text on darker light-orange CTA */
  --uh-border: #d6d6d6;
  --uh-menu-bg: #ffffff;
  --uh-menu-hover: #ebebeb;
  --uh-menu-danger: #ff4400;
}

/* ─── Root layout ────────────────────────────────────────────────── */
.uh-root {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* v3.8.7-fix3: logo left, all else right */
  height: var(--uh-height);
  padding: 0 16px;
  background: var(--uh-bg);
  color: var(--uh-text);
  border-bottom: 1px solid var(--uh-border);
  position: relative;
  gap: 16px;
}

/* ─── Left section (logo + breadcrumb) ──────────────────────────── */
.uh-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
  /* v3.8.7-fix5 (регресс-очистка): `margin-right:auto` удалён — дублировал
     `.uh-root{justify-content:space-between}` (fix3). Один механизм прижатия
     вправо достаточен (DRY/KISS). space-between оставлен как более идиоматичный
     для two-element left/right раскладки. */
}

.uh-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.uh-logo:hover { background: var(--uh-menu-hover); }

.uh-logo-img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
}
/* v3.8.7-fix1: .uh-logo-fallback удалён — fallback теперь
   <img src="/_assets/svg/logo-0intel.svg"> (re-uses .uh-logo-img выше). */

.uh-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.uh-breadcrumb-sep {
  color: var(--uh-text-muted);
  font-size: 16px;
  padding: 0 2px;
}

.uh-breadcrumb {
  color: var(--uh-text-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* v3.8.7-fix2: .uh-spacer удалён — заменён auto-margin trick'ом на .uh-left
   (margin-right: auto). Flex layout с margin auto не зависит от min-width
   на сиблингах и работает deterministic в любом viewport. */

/* ─── Right section ──────────────────────────────────────────────── */
.uh-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;        /* v3.8.7-fix3: allow shrink on narrow viewports */
  flex-wrap: nowrap;     /* v3.8.7-fix3: never wrap behind .uh-left */
  min-width: 0;          /* v3.8.7-fix3: required for flex shrink */
}

.uh-btn-icon {
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--uh-text);
  cursor: pointer;
  transition: background-color 120ms ease;
  /* v3.8.7-fix3r4: <a class="uh-btn-icon"> variant for new-tab support */
  text-decoration: none;
  /* v3.8.7-fix5 (FIX-D): тег-агностичность. <a> наследует line-height:1.4
     от :host, у <button> UA-default line-height:normal → разная высота
     строкового бокса → смещение базовой линии при align-items:center в
     .uh-right (BUG-1, иконки криво). line-height:1 нормализует оба тега. */
  line-height: 1;
  vertical-align: middle;
}
.uh-btn-icon:visited { color: var(--uh-text); }
.uh-btn-icon:hover { background: var(--uh-menu-hover); }
/* v3.34.0: переключатель языка — компактный код текущего языка (RU/EN) */
.uh-lang-code {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.uh-btn-icon:focus-visible {
  outline: 2px solid var(--uh-accent);
  outline-offset: -2px;
}
.uh-btn-icon[aria-expanded="true"] { background: var(--uh-menu-hover); }
/* ─── iPhone-style Pro/Light slider (v3.15.0, T2) ────────────────────
   Заменяет icon-кнопку .uh-variant-toggle. role="switch" + клавиатура (Enter/Space).
   ON (workspace) = оранжевый трек, бегунок справа, лейбл «Pro» оранжевый.
   OFF (classic)  = серый трек, бегунок слева, лейбл «Light» приглушён.
   Рендерится только в rag-ui (при !isWiki) → Wiki.js не затрагивается.
   Акцент флипается per-theme через --uh-accent (оранжевый / light-оранжевый). */
.uh-variant-slider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 10px;
  margin: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 20px;
  color: var(--uh-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  transition: color 150ms ease, background-color 120ms ease;
}
.uh-variant-slider:hover { background: var(--uh-menu-hover); }
.uh-variant-slider:focus-visible { outline: 2px solid var(--uh-accent); outline-offset: 2px; }
.uh-variant-slider__label {
  min-width: 38px;
  text-align: right;
  transition: color 150ms ease;
}
.uh-variant-slider--on .uh-variant-slider__label { color: var(--uh-accent); }
.uh-variant-slider__track {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  background: var(--uh-border);
  border: 1px solid var(--uh-border);
  border-radius: 999px;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0, 0, 0.2, 1);
}
.uh-variant-slider--on .uh-variant-slider__track {
  background: var(--uh-accent);
  border-color: var(--uh-accent);
}
.uh-variant-slider__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: left 200ms cubic-bezier(0, 0, 0.2, 1);
}
.uh-variant-slider--on .uh-variant-slider__knob { left: 22px; }
@media (prefers-reduced-motion: reduce) {
  .uh-variant-slider__track,
  .uh-variant-slider__knob,
  .uh-variant-slider__label { transition: none; }
}

/* ─── User menu trigger ──────────────────────────────────────────── */
.uh-btn-user {
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  color: var(--uh-text);
  cursor: pointer;
  transition: background-color 120ms ease;
  font-family: inherit;
  font-size: 14px;
  max-width: 220px;
}
.uh-btn-user:hover { background: var(--uh-menu-hover); }
.uh-btn-user:focus-visible {
  outline: 2px solid var(--uh-accent);
  outline-offset: -2px;
}

.uh-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.uh-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--uh-accent);
  color: #0a0a0a; /* MQ-A02: on-accent тёмный текст (E2B); белый давал 2.4-3.2:1 < AA */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.uh-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ─── Dropdown menus ─────────────────────────────────────────────── */
.uh-dropdown {
  position: relative;
}

.uh-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--uh-menu-bg);
  border: 1px solid var(--uh-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  z-index: 1000;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.uh-menu-wide { min-width: 240px; }

.uh-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--uh-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 80ms ease;
}
.uh-menu li:hover:not(.uh-menu-divider):not([role="separator"]) {
  background: var(--uh-menu-hover);
}
.uh-menu li.uh-active { color: var(--uh-accent); }

.uh-menu li svg { color: var(--uh-text-muted); flex-shrink: 0; }

/* v3.8.7-fix3r4: navigation menu items use WAI-ARIA pattern
   <li role="none"><a role="menuitem" href>. Anchor fills li, no padding on li,
   text-decoration removed. Action items keep <li role="menuitem" onClick>. */
.uh-menu li[role="none"] { padding: 0; }
.uh-menu li[role="none"] > a[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--uh-text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 80ms ease;
}
.uh-menu li[role="none"] > a[role="menuitem"]:visited { color: var(--uh-text); }
.uh-menu li[role="none"] > a[role="menuitem"]:hover { background: var(--uh-menu-hover); }
.uh-menu li[role="none"] > a[role="menuitem"]:focus-visible {
  outline: 2px solid var(--uh-accent);
  outline-offset: -2px;
}
.uh-menu li[role="none"] > a[role="menuitem"] svg { color: var(--uh-text-muted); flex-shrink: 0; }

.uh-menu-divider {
  height: 1px;
  background: var(--uh-border);
  margin: 4px 0;
  padding: 0;
  cursor: default;
}

.uh-menu-danger { color: var(--uh-menu-danger) !important; }
.uh-menu-danger svg { color: var(--uh-menu-danger) !important; }

.uh-lang-code {
  display: inline-block;
  min-width: 28px;
  font-weight: 600;
  color: var(--uh-text-muted);
  font-size: 12px;
}

/* ─── Loading indicator ──────────────────────────────────────────── */
.uh-loading {
  width: 16px;
  height: 16px;
  border: 2px solid var(--uh-text-muted);
  border-top-color: var(--uh-accent);
  border-radius: 50%;
  animation: uh-spin 0.8s linear infinite;
  margin: 0 8px;
}

@keyframes uh-spin {
  to { transform: rotate(360deg); }
}

/* ─── Mobile menu button (v3.25.2-m1): открывает drawer диалогов в RAG-UI.
   Скрыта по умолчанию (десктоп + wikijs-контекст), показывается ≤768px. ──── */
.uh-menu-btn { display: none; }

/* ─── Wiki.js drawer hamburger (v3.25.2-m17): открывает боковое меню admin/
   profile/tags. Заменяет плавающую кнопку в углу (перекрывала контент).
   Скрыт по умолчанию; виден при mdAndDown (<1264px) — ровно когда drawer
   становится temporary (на lgAndUp drawer permanent, гамбургер не нужен). ── */
.uh-wiki-menu-btn { display: none; }
@media (max-width: 1263px) {
  .uh-wiki-menu-btn { display: inline-flex; }
}

/* ─── Responsive (mobile-first) ──────────────────────────────────── */
@media (max-width: 768px) {
  /* v3.25.2-m1: safe-area сверху (notch) + расширение тач-таргетов до 44px */
  .uh-root {
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    height: calc(var(--uh-height) + env(safe-area-inset-top));
    gap: 8px;
  }
  .uh-menu-btn { display: inline-flex; }
  /* v3.25.2-m1: на телефоне принудительно classic → переключатель вида Pro/Light
     не нужен и сбивает с толку. Скрываем (классик-вариант форсится в rag-ui-v4.js). */
  .uh-variant-slider { display: none; }
  /* v3.25.2-m1: в RAG-UI «Задачи» в нижней навигации, «Админка» — в шите «Ещё»
     → убираем дубли из шапки на телефоне. В Wiki.js (нет нижней навигации) — оставляем. */
  :host([context="rag-ui"]) .uh-tasks-btn,
  :host([context="rag-ui"]) .uh-admin-btn { display: none; }
  .uh-btn-icon { width: 44px; height: 44px; }
  .uh-title { max-width: 120px; font-size: 15px; }
  .uh-breadcrumb { max-width: 100px; font-size: 12px; }
  .uh-breadcrumb-sep { display: none; }
  /* v3.8.7-fix1: .uh-center удалён — search убран из шапки */
  .uh-user-name { display: none; }
}

@media (max-width: 480px) {
  .uh-title { display: none; }
  .uh-breadcrumb { display: none; }
  /* v3.8.7-fix1: search в шапке отсутствует, mobile-collapse не нужен */
}

/* ─── A11y: hidden but kept in tab flow for screen readers ───── */
.uh-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;
}

/* mobile QA 2026-07-01 (D-03): интерактивные элементы шапки ≥44px по высоте
   на телефоне (лого-«Главная», кнопка профиля/аватар, кнопка-меню, иконки). */
@media (max-width: 600px) {
  .uh-logo, .uh-btn-user, .uh-menu-btn, .uh-btn-icon { min-height: 44px; }
}
/* v3.47.0 BM-01 (P0): восстановлена потерянная закрывающая скобка мобильного
   @media (merge-артефакт mobile 3.44 x E2B 3.20). Без неё весь Voice-CTA был
   заперт внутри @media max-width:600px, и на десктопе .uh-voice-cta рендерилась
   неоформленной ссылкой. Теперь Voice-CTA на верхнем уровне (все контексты). */
/* ─── Voice Agent CTA (v3.20.0) ──────────────────────────────────
   Prominent entry to the standalone Voice Agent (/voice). Filled-accent
   pill (E2B orange + dark on-accent text) — deliberately МORE prominent
   than the in-composer voice-input mic. Shown in all contexts. */
.uh-voice-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  margin-right: 4px;
  border: none;
  border-radius: 6px;
  background: var(--uh-accent);
  color: var(--uh-on-accent, #0a0a0a);
  font-family: var(--uh-font);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
.uh-voice-cta:hover { filter: brightness(1.08); box-shadow: 0 2px 10px var(--uh-accent); }
.uh-voice-cta:active { transform: translateY(1px); }
.uh-voice-cta .uh-voice-ico { display: inline-flex; }
.uh-voice-cta svg { width: 18px; height: 18px; display: block; }
.uh-voice-cta .uh-voice-label { display: inline-block; }
/* Narrow viewports: keep the (prominent) icon, drop the label. */
@media (max-width: 600px) {
  .uh-voice-cta { padding: 0 11px; gap: 0; }
  .uh-voice-cta .uh-voice-label { display: none; }
}