@import url('/static/cloud_brand.css');

  /* ─────────────────────────────────────────────────────────────────────
     Shared design tokens. Single source of truth — used by every
     authenticated app page (assistant, project, account). Public pages
     (landing, pricing, login) define their own copies because they have
     additional public-facing tokens (gradient grids etc).
     ───────────────────────────────────────────────────────────────────── */
  :root {
    --bg:         #0a0c11;
    --bg-card:    #12151e;
    --bg-soft:    #161a25;
    --bg-deep:    #07090d;
    --border:     #1c2233;
    --border-mid: #252d40;
    --border-hot: #324061;
    --fg:         #e6ebf2;
    --fg-soft:    #cbd5e1;
    --fg-dim:     #93a0b3;
    --fg-mute:    #5e6a7d;
    --fg-faint:   #3d4655;
    --accent:     #d97757;
    --accent-hov: #b85d3e;
    --accent-soft:rgba(217, 119, 87, 0.10);
    --accent-dim: rgba(217, 119, 87, 0.45);
    --accent-ink: #1a0f0a;          /* текст НА акценте */
    /* Статусы. Названы по СМЫСЛУ, а не по цвету: на светлом фоне «зелёный»
       #4ade80 не читается, и подменять его приходится значением, а не именем. */
    --ok:  #4ade80;  --ok-fg:  #86efac;  --ok-bg:  #0d2413;  --ok-bd:  #1f5c33;
    --warn:#fbbf24;  --warn-fg:#fde68a;  --warn-bg:#2d2a0a;  --warn-bd:#7f5f1d;
    --err: #f87171;  --err-fg: #fca5a5;  --err-bg: #2d0a0a;  --err-bd: #7f1d1d;
    --err-strong: #dc2626;
    --info:#60a5fa;  --info-fg:#93c5fd;
    --gold:#e6b45a;  --gold-bd:#b9883a;  --gold-hi:#f2cd83;
    --gold-soft: rgba(185,136,58,0.10);  --gold-soft-hi: rgba(185,136,58,0.20);
    --accent-quiet: #b08968;   /* приглушённый акцент для пояснений */
    --shadow-card: none;            /* в темноте карточку отделяет граница */
    --shadow-soft: none;
    --stage:      radial-gradient(ellipse at 50% 30%, #151a24 0%, #07090d 75%);
    --label-bg:   rgba(9, 12, 20, 0.82);   /* подложка подписи НА сцене */
    --label-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:    'TT Firs Neue', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
    color-scheme: dark;
  }

  /* ── СВЕТЛАЯ ТЕМА ───────────────────────────────────────────────────────
     Не инверсия темной: на светлом фоне работают другие средства — границы
     вместо заливок, мягкая тень вместо свечения. Акцент ОДИН и тот же
     (бренд не зависит от темы), но на белом он темнее на пару тонов, иначе
     оранжевый по белому не читается.
     Тема выбирается атрибутом на <html>, а не классом на <body>: атрибут
     ставится ДО первой отрисовки, поэтому светлая страница не мигает
     тёмной. Значение ставит скрипт в <head> (см. ниже).
     ───────────────────────────────────────────────────────────────────── */
  :root[data-theme="light"] {
    --bg:         #f4f5f8;
    --bg-card:    #ffffff;
    --bg-soft:    #eef0f5;
    --bg-deep:    #f9fafc;
    --border:     #e2e6ee;
    --border-mid: #d3d9e5;
    --border-hot: #b9c2d4;
    --fg:         #1c2333;
    --fg-soft:    #3f4a5e;
    --fg-dim:     #5a6478;
    --fg-mute:    #737c8f;
    --fg-faint:   #9aa3b4;
    /* Оранжевый на белом взят на два тона темнее макетного #d05f38: белая
       надпись по нему давала 3.9:1 (кнопка «Отправить», пузырь запроса), а
       на этом — 4.5:1. Тон тот же, бренд не меняется. */
    --accent:     #c2542f;
    --accent-hov: #a5451f;
    --accent-soft:rgba(194, 84, 47, 0.10);
    --accent-dim: rgba(194, 84, 47, 0.45);
    --accent-ink: #ffffff;
    --ok:  #15803d;  --ok-fg:  #166534;  --ok-bg:  #eaf7ee;  --ok-bd:  #a7d8b6;
    --warn:#b45309;  --warn-fg:#92400e;  --warn-bg:#fdf3e2;  --warn-bd:#ebd3a2;
    --err: #dc2626;  --err-fg: #b91c1c;  --err-bg: #fdecec;  --err-bd: #f0b4b4;
    --err-strong: #b91c1c;
    --info:#1d4ed8;  --info-fg:#1e40af;
    --gold:#8a6414;  --gold-bd:#c8a24d;  --gold-hi:#6f4f0c;
    --gold-soft: rgba(185,136,58,0.12);  --gold-soft-hi: rgba(185,136,58,0.22);
    --accent-quiet: #8c5a3a;
    --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05);
    --shadow-soft: 0 1px 3px rgba(16,24,40,.06);
    --stage:      radial-gradient(ellipse at 50% 30%, #ffffff 0%, #eceff5 75%);
    --label-bg:   rgba(255, 255, 255, 0.9);
    --label-shadow: 0 2px 10px rgba(16, 24, 40, 0.14);
    color-scheme: light;
  }

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

  /* Базовый кегль приложения. Интерфейс писался в rem от браузерных 16 px и
     на рабочем мониторе читался мелко: инженер сидит от экрана дальше, чем
     верстальщик. Один множитель здесь поднимает ВСЁ разом и сохраняет
     пропорции — это честнее, чем править шестьдесят мест по одному.
     rem-отступы растут вместе с текстом, поэтому вёрстка не рассыпается. */
  html { font-size: 17.5px; }
  @media (max-width: 640px) { html { font-size: 16.5px; } }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; text-decoration: none; }

  /* ─────────────────────────────────────────────────────────────────────
     App shell header — present on /assistant, /project, /account.
     Logo, three nav tabs, no extra clutter on the right. The active page
     is highlighted by the `active` class added server-side.
     ───────────────────────────────────────────────────────────────────── */
  /* Куки-баннер фиксирован внизу и перекрывал поле ввода чата. Пока он показан,
     ужимаем высоту full-height приложений на его высоту (--cc-h задаёт JS
     баннера). На обычных скролл-страницах правила нет — там оверлап не мешает. */
  body.cc-open { height: calc(100vh - var(--cc-h, 88px)); }

  .app-header {
    position: sticky; top: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    height: 52px; flex-shrink: 0; z-index: 100;
  }
  .app-header-logo {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.02em; white-space: nowrap;
    transition: color 0.15s;
  }
  .app-header-logo:hover { color: var(--accent); }
  .app-header-logo .logo-mark {
    width: 20px; height: 20px;
    background: var(--accent);
    -webkit-mask: url("/static/brand/logo.svg") center / contain no-repeat;
            mask: url("/static/brand/logo.svg") center / contain no-repeat;
    transition: background 0.15s;
  }
  .app-nav {
    display: flex;
    gap: 0.15rem;
    padding-left: 0.4rem;
    border-left: 1px solid var(--border);
    margin-left: 0.2rem;
    height: 28px;
    align-items: center;
  }
  .app-nav a {
    color: var(--fg-mute);
    font-size: 0.85rem; font-weight: 500;
    padding: 0.35rem 0.85rem; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
  }
  .app-nav a:hover { color: var(--fg); background: var(--bg-soft); }
  .app-nav a.active { color: var(--fg); background: var(--border); }
  .app-header-spacer { flex: 1; }
  .app-header-extras {
    display: flex; align-items: center; gap: 0.5rem;
  }
  .app-header-user {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--fg-mute);
    padding-left: 0.75rem; border-left: 1px solid var(--border);
    margin-left: 0.25rem;
  }
  .app-header-user .user-email {
    color: var(--fg-mute); text-decoration: none;
    max-width: 200px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .app-header-user .user-email:hover { color: var(--fg); }
  .app-header-user .sep { color: var(--border); }
  .app-header-user .btn-logout {
    background: none; border: none; cursor: pointer;
    color: var(--fg-mute); font-family: inherit;
    font-size: 0.78rem; padding: 0;
  }
  .app-header-user .btn-logout:hover { color: var(--err); }
  @media (max-width: 640px) {
    .app-header-user { padding-left: 0.5rem; gap: 0.35rem; }
    .app-header-user .user-email { max-width: 110px; }
  }
  .app-header-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--fg-mute);
    font-size: 1.1rem; line-height: 1;
    padding: 0.25rem 0.5rem; border-radius: 5px;
  }
  .app-header-toggle:hover { color: var(--fg); background: var(--bg-soft); }

  @media (max-width: 640px) {
    .app-header { padding: 0 0.75rem; gap: 0.7rem; }
    .app-nav { padding-left: 0.3rem; }
    .app-nav a { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .app-header-logo span:not(.logo-mark) { display: none; }
  }

  /* Глобальные toast-уведомления (window.toast) — единый стиль на всех экранах */
  .app-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 92vw);
    pointer-events: none;
  }
  .app-toast {
    pointer-events: auto;
    background: var(--bg-card); color: var(--fg);
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.88rem; line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: appToastIn 0.18s ease-out;
    word-break: break-word;
  }
  .app-toast.error { border-left-color: var(--err); }
  .app-toast.ok    { border-left-color: var(--ok); }
  .app-toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
  @keyframes appToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Модальное подтверждение (напр. списание за скачивание). */
  .app-confirm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(4, 6, 11, 0.62);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: appToastIn 0.14s ease-out;
  }
  .app-confirm-box {
    background: var(--bg-card); color: var(--fg);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 1.1rem 1.2rem 1rem; max-width: min(420px, 94vw);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  }
  .app-confirm-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
  .app-confirm-msg { font-size: 0.9rem; line-height: 1.5; color: var(--fg-dim); }
  .app-confirm-actions {
    display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.1rem;
  }
  .app-confirm-actions button {
    font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
    border-radius: 8px; padding: 0.5rem 0.9rem; border: 1px solid transparent;
  }
  .app-confirm-cancel {
    background: transparent; color: var(--fg-dim);
    border-color: var(--border);
  }
  .app-confirm-cancel:hover { color: var(--fg); }
  .app-confirm-ok {
    background: var(--accent); color: #fff;
  }
  .app-confirm-ok:hover { filter: brightness(1.08); }
  .app-confirm-ok:focus-visible, .app-confirm-cancel:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }


  /* ── КНОПКИ: одна система вместо инлайн-стилей ────────────────────────────
     Было: у каждой кнопки свои inline-стили — 4 фона (#2a2a2a, #1a1410,
     transparent, rgba), 3 бордера (#444, var(--border-mid), var(--accent)) и 5 размеров
     шрифта (0.68…0.88rem). Отсюда «колхозный» вид: рядом стоят кнопки,
     нарисованные по разным правилам. Здесь один набор на все страницы. */
  .ui-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
    line-height: 1.2; white-space: nowrap;
    padding: 0.5rem 0.9rem; border-radius: 9px;
    border: 1px solid var(--border-mid);
    background: var(--bg-soft); color: var(--fg);
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .06s;
  }
  .ui-btn:hover { background: var(--bg-soft); border-color: var(--border-hot); }
  .ui-btn:active { transform: translateY(1px); }
  .ui-btn:disabled, .ui-btn[aria-disabled="true"] {
    opacity: .5; cursor: default; transform: none;
  }
  /* Главное действие на экране — ровно одно. */
  .ui-btn--primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  }
  .ui-btn--primary:hover { background: var(--accent-hov); border-color: var(--accent-hov); }
  /* Второстепенное: видно, но не спорит с главным. */
  .ui-btn--ghost {
    background: transparent; border-color: var(--border-mid); color: var(--fg-dim);
  }
  .ui-btn--ghost:hover { background: var(--bg-soft); color: var(--fg); }
  /* Тихое действие внутри плашки (закрыть, убрать). */
  .ui-btn--quiet {
    background: transparent; border-color: transparent; color: var(--fg-mute);
    padding: 0.3rem 0.5rem;
  }
  .ui-btn--quiet:hover { background: var(--bg-soft); color: var(--fg); }
  /* Кнопка в ДВЕ строки: название и пояснение. Без этого модификатора обе
     строки ложатся в ряд (у .ui-btn flex-direction: row и white-space: nowrap)
     и вылезают за края — так и выглядел выбор «Одна модель / Проект». */
  .ui-btn--stack {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0.15rem; text-align: left; white-space: normal;
    padding: 0.7rem 0.95rem; line-height: 1.35;
  }
  .ui-btn--stack .b-title { font-size: 0.88rem; font-weight: 600; }
  .ui-btn--stack .b-sub { font-size: 0.78rem; font-weight: 400; color: var(--fg-dim); }
  .ui-btn--sm { font-size: 0.76rem; padding: 0.35rem 0.7rem; border-radius: 7px; }
  .ui-btn--wide { width: 100%; }
  /* Ряд кнопок: одинаковые отступы вместо разнобоя. */
  .ui-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }


  /* ── Блок пользователя: единственный вход в кабинет, поэтому он заметный ── */
  .user-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.28rem 0.7rem 0.28rem 0.3rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-soft); color: var(--fg-dim);
    text-decoration: none; font-size: 0.8rem; max-width: 230px;
    transition: border-color .15s, color .15s, background .15s;
  }
  .user-chip:hover { border-color: var(--border-hot); color: var(--fg); background: var(--bg-soft); }
  .user-avatar {
    width: 22px; height: 22px; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--accent-ink);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  }
  .user-chip .user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 720px) {
    .user-chip .user-email { display: none; }   /* на телефоне — только кружок */
    .user-chip { padding: 0.28rem; }
  }

/* Preserve established component names while assigning qualified visual roles.
   The selector pair overrides the historical palette in both themes. */
:root, :root[data-theme="light"] {
  --bg: var(--ne-page);
  --bg-deep: var(--ne-deep);
  --bg-card: var(--ne-surface);
  --bg-soft: var(--ne-raised);
  --fg: var(--ne-text);
  --fg-soft: var(--ne-text);
  --fg-dim: var(--ne-muted);
  --fg-mute: var(--ne-faint);
  --fg-faint: var(--ne-faint);
  --border: var(--ne-line);
  --border-mid: var(--ne-control);
  --border-hot: var(--ne-control);
  --accent: var(--ne-accent-text);
  --accent-hov: var(--ne-solid-hover);
  --accent-ink: #fff;
  --accent-soft: color-mix(in srgb, var(--ne-accent) 10%, transparent);
  --accent-dim: color-mix(in srgb, var(--ne-accent) 45%, transparent);
  --font-display: var(--ne-body);
  --font-body: var(--ne-body);
  --shadow-card: none;
  --shadow-soft: none;
}

.app-header {
  background: var(--ne-page);
  border-bottom-color: var(--ne-line);
  min-height: 64px;
  height: auto;
}
.app-header-logo { font-size: .91rem; letter-spacing: -.025em; }
.app-header-logo .logo-mark { background: var(--ne-accent); }
.app-header-logo:hover { color: var(--ne-accent-text); }
.user-chip { border-color: var(--ne-control); border-radius: 2px; }
.user-avatar { background: var(--ne-solid); color: #fff; border-radius: 2px; }
.ui-btn { border-color: var(--ne-control); border-radius: 2px; }
.ui-btn--primary, .app-confirm-ok { background: var(--ne-solid); border-color: var(--ne-solid); color: #fff; }
.ui-btn--primary:hover, .app-confirm-ok:hover { background: var(--ne-solid-hover); border-color: var(--ne-solid-hover); }
.ui-btn--quiet { border-color: transparent; }
.app-confirm-cancel { border-color: var(--ne-control); }
.app-confirm-ok:focus-visible, .app-confirm-cancel:focus-visible { outline: 3px solid var(--ne-focus); }
@media (max-width: 640px) {
  .app-header { min-height: 56px; }
}