/* Дизайн, перенесённый из приложения.
 *
 * Палитра, скругления, карточки и нижняя панель здесь повторяют
 * `ios/Adjutant/Design/Theme.swift` и `WorkspaceView.swift` — веб и приложение должны
 * читаться одним продуктом, а не двумя похожими. Раньше значения разошлись: в вебе
 * карточки были на 8px и с плоской рамкой, в приложении — на 18px со световой линией
 * сверху и мягкой тенью.
 *
 * Слой намеренно последний и небольшой: переписывать 8 тысяч строк `app.css` ради
 * оттенков — работа без пользы и с гарантированными поломками. Здесь только то, что
 * действительно определяет облик. */

:root {
  /* Theme.Palette — один в один. */
  --surface: rgba(20, 31, 51, .72);
  --surface-strong: #141f33;
  --surface-soft: rgba(255, 255, 255, .05);
  --line: rgba(190, 211, 242, .16);
  --line-strong: rgba(190, 211, 242, .26);
  --text: #f2f7ff;
  --muted: #b9c8dc;
  --muted-strong: #f2f7ff;
  --mint: #55f2d3;
  --violet: #9c93ff;
  --blue: #6eb6ff;
  --amber: #f4cb73;
  --coral: #ff8fa3;

  /* Полоса, которую занимает панель снизу: её собственные 74 плюс 8 отступа и
     безопасная зона под ними. Содержимое резервирует всю полосу, сама панель — только
     свои 74. Раньше высотой панели была вся полоса вместе с безопасной зоной: на
     айфоне выходило 120 точек, из которых 34 — пустота под вкладками, и панель ещё и
     поднималась на те же 34. Безопасная зона считалась дважды. */
  --office-nav-height: calc(82px + env(safe-area-inset-bottom));

  /* Theme.Metric. */
  --card-radius: 18px;
  --control-radius: 14px;
  --gutter: 16px;
  --row-gap: 10px;
  --tap: 44px;

  /* Карточка второго слоя из `SurfaceCard`: разделение делают тон, световая линия
     сверху и мягкая тень, а не рамка. */
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 18px rgba(0, 0, 0, .28);
}

/* ── Карточки и строки списков ─────────────────────────────────────────────── */
.agenda-row,
.calendar-event,
.chat-row,
.mail-row,
.focus-card,
.decision,
.mail-connect,
.channel-option {
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, .06);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

/* Подсветка состояния — только тоном рамки, как в приложении: цветом кричит акцент,
   а не каждая вторая строка. */
.chat-row.pinned,
.mail-row.unread-mail {
  border-color: rgba(110, 182, 255, .28);
  background: rgba(20, 31, 51, .82);
}

/* ── Элементы управления ───────────────────────────────────────────────────── */
.search-field,
.compose-button,
.calendar-control,
.chat-settings,
.composer-input,
.primary-button,
.secondary-button,
.danger-button {
  border-radius: var(--control-radius);
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: var(--tap);
}

/* Фильтры в приложении — капсулы, а не прямоугольники со скруглением. */
.filter-chip,
.day-tag,
.task-filter-bar > button {
  border-radius: 999px;
}

/* Выбранный фильтр залит акцентом, а не подсвечен рамкой: в приложении он
   единственный цветной элемент в ряду, и это же делает его выбранным с одного
   взгляда. Полупрозрачная подсветка читалась «слегка активным». */
.filter-chip.active,
.filter-chip[aria-pressed="true"],
.task-filter-bar > button.active {
  color: #04231d;
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 6px 18px rgba(85, 242, 211, .22);
}

/* ── Знак ──────────────────────────────────────────────────────────────────── */
/* Плитка ровно та же, что на домашнем экране телефона: непрерывное скругление в
   22.37% стороны, диагональ 0A1523 → 11162B и мятное пятно сверху слева. */
.brand-mark,
.auth-logo,
.boot-mark,
.status-brand img {
  display: grid;
  place-items: center;
  border-radius: 22.37%;
  border: 0;
  background:
    radial-gradient(72% 72% at 18% 14%, rgba(31, 174, 166, .30), transparent 70%),
    linear-gradient(135deg, #0a1523, #11162b);
}

/* Знак занимает 70% плитки — то же поле, что на иконке телефона. */
.brand-mark > svg,
.auth-logo > svg,
.boot-mark > svg {
  width: 70%;
  height: 70%;
  overflow: visible;
}

/* ── Нижняя панель ─────────────────────────────────────────────────────────── */
/* Стекло, а не плоский прямоугольник: размытая подложка, тёмный тон поверх и световая
   линия по верхнему краю. Посередине — купол: проём под кнопку агента вырезан в самом
   силуэте панели, а не нарисован тёмным кругом поверх. Разница между «углублением» и
   «дыркой» ровно в этом — прежняя версия рисовала круг, и он читался пробитой дырой. */
.bottom-nav {
  /* Высоту не трогаем: 82px здесь — это те же 74 панели плюс 8 отступа снизу, что
     в приложении. Уменьшение ломало сетку вкладок, они вылезали за край. */
  left: 12px;
  right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto;
  /* Ровно как в приложении: 74 высоты, поле 5 по бокам и 7 сверху и снизу — вкладка
     выходит 60, как линза в `BottomNav`. */
  height: 74px;
  padding: 7px 5px;
  align-items: stretch;
  /* Проём посередине — пятая колонка, вкладки делятся на пары. */
  grid-template-columns: 1fr 1fr 68px 1fr 1fr;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(176, 200, 239, .10);
  background: rgba(10, 19, 34, .72);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .36);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  -webkit-mask: radial-gradient(circle 34px at 50% 0, transparent 33px, #000 34px);
  mask: radial-gradient(circle 34px at 50% 0, transparent 33px, #000 34px);
  transition: grid-template-columns .38s cubic-bezier(.2, .8, .2, 1);
}

/* Круглое гнездо от прежнего меню: кнопка уехала в купол, а тёмный круг продолжал
   торчать из верхнего края. */
.bottom-nav::before { content: none; }

/* Дугу проёма рисует сама кнопка — см. `#openBot::after`. На панели её рисовать
   нельзя: маска вырезает проём вместе со всем, что в нём нарисовано, и дуга исчезала
   вместе с ним. Вырез читался откушенным краем, а не углублением. */

/* Вкладки стоят по краям от проёма: первая пара слева, вторая справа. */
.bottom-nav > .nav-item:nth-child(1) { grid-column: 1; }
.bottom-nav > .nav-item:nth-child(2) { grid-column: 2; }
.bottom-nav > .nav-item:nth-child(3) { grid-column: 4; }
.bottom-nav > .nav-item:nth-child(4) { grid-column: 5; }

/* Активная вкладка шире соседа по паре: в ней помещается подпись. Пары считаются
   отдельно и остаются одинаковой ширины — проём обязан стоять ровно по центру, там же
   вырезан купол и сидит кнопка. */
.bottom-nav:has(> .nav-item:nth-child(1).active) { grid-template-columns: 1.42fr .58fr 68px 1fr 1fr; }
.bottom-nav:has(> .nav-item:nth-child(2).active) { grid-template-columns: .58fr 1.42fr 68px 1fr 1fr; }
.bottom-nav:has(> .nav-item:nth-child(3).active) { grid-template-columns: 1fr 1fr 68px 1.42fr .58fr; }
.bottom-nav:has(> .nav-item:nth-child(4).active) { grid-template-columns: 1fr 1fr 68px .58fr 1.42fr; }

.nav-item {
  flex-direction: row;
  gap: 8px;
  padding: 0 2px;
  /* Вкладке задавали min-height 68 — она распирала панель изнутри и вылезала на две
     точки ниже её края, а линза съезжала вниз. Высоту задаёт панель: 74 минус поля
     даёт 60, как в приложении. Площадь нажатия от этого не страдает — 60 на 66. */
  min-height: 0;
  border-radius: 19px;
  color: #7e8ca4;
  background: transparent;
  transition: background .3s ease, color .2s ease, box-shadow .3s ease;
}

/* Стеклянная линза активной вкладки: светлая кромка сверху, тёмная снизу — стекло
   читается объёмным, а не светлым пятном. */
.nav-item.active {
  color: var(--mint);
  background: rgba(109, 133, 174, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 3px 8px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Мятная чёрточка и точка под активной вкладкой: линза сама показывает, где ты, —
   вторая метка про то же самое только шумит. В приложении её нет. */
.nav-item::after,
.nav-item.active::after { content: none; }

/* Подпись — только у активной вкладки: подписи под каждым значком это ровно
   стандартная панель айфона, от которой уходим. Перевод бывает длиннее русского,
   поэтому подпись ужимается, а не обрезается. */
.nav-item .nav-label { display: none; }
.nav-item.active .nav-label {
  display: block;
  overflow: hidden;
  /* Кегль зависит от ширины экрана, а не задан числом. На 375 точках «Документы» в
     активную вкладку не влезало и обрезалось многоточием: четыре вкладки плюс проём в
     68 точек — тесно. Пусть подпись ужмётся на пол-кегля, чем потеряет хвост.
     Приложение делает то же самое через minimumScaleFactor. */
  font-size: clamp(9.5px, 2.7vw, 11px);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: nav-label-in .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes nav-label-in {
  from { opacity: 0; transform: scale(.8); transform-origin: left center; }
  to { opacity: 1; transform: scale(1); }
}

/* Значок 20, как в приложении: 21 делал панель чуть крупнее и съедал место у подписи. */
.bottom-nav .nav-icon svg { width: 20px; height: 20px; }

/* Значок подпрыгивает в момент выбора — как в телеграме. */
.nav-item.active .nav-icon { animation: nav-icon-bounce .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes nav-icon-bounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Кнопка агента ─────────────────────────────────────────────────────────── */
/* Садится центром на верхнюю кромку панели: половина в проёме, половина над бортом. */
#openBot {
  position: fixed;
  z-index: 21;
  left: 50%;
  /* Центр кнопки — ровно на верхней кромке панели: 8 отступа + 74 высоты − 29 радиуса. */
  bottom: calc(53px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  color: #fff;
  background: linear-gradient(135deg, #55f2d3, #9c93ff);
  box-shadow: 0 10px 16px rgba(72, 215, 208, .30);
  animation: bot-breathe 2.4s ease-in-out infinite;
  transition: filter .18s cubic-bezier(.2, .8, .2, 1);
}
#openBot::before { content: none; }
#openBot:active { filter: brightness(.92); }

/* Дуга проёма: кольцо ровно по краю выреза. Совпадение гарантировано геометрией —
   вырез и кольцо строятся от одного центра. Видна только нижняя половина: верхняя
   прошла бы по воздуху над панелью. */
#openBot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  clip-path: inset(50% -2px -2px -2px);
  pointer-events: none;
}

@keyframes bot-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.025; }
}

#openBot .bot-face {
  width: auto;
  height: auto;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#openBot .bot-eyes { display: flex; gap: 9px; }
/* Глаз — вертикальная капсула: при моргании она просто сплющивается в чёрточку,
   и отдельного «закрытого» рисунка не нужно. */
#openBot .bot-eye {
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  animation: bot-blink 5.4s infinite;
}
@keyframes bot-blink {
  0%, 96%, 100% { transform: scaleY(1); }
  97.5% { transform: scaleY(.16); }
}
#openBot .bot-smile { width: 16px; height: 7px; }

/* Пока агент думает — вместо лица три точки, как в переписке. */
#openBot .bot-dots { display: none; gap: 5px; }
#openBot .bot-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
#openBot[data-thinking="true"] .bot-face { display: none; }
#openBot[data-thinking="true"] .bot-dots { display: flex; }
#openBot .bot-dots i:nth-child(1) { animation: bot-dot .78s infinite; }
#openBot .bot-dots i:nth-child(2) { animation: bot-dot .78s .26s infinite; }
#openBot .bot-dots i:nth-child(3) { animation: bot-dot .78s .52s infinite; }
@keyframes bot-dot {
  0%, 100% { transform: scale(.85); opacity: .5; }
  33% { transform: scale(1.45); opacity: 1; }
}

/* ── Лист агента ───────────────────────────────────────────────────────────── */
.sheet-panel {
  border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #131d30, #0e172b 40%);
  /* Кривая и длительность системного листа iOS: приложение открывает переписку
     именно так, и любое другое движение сразу читается «не тем». */
  transition: transform 420ms cubic-bezier(.32, .72, 0, 1);
}
.sheet-backdrop { transition: opacity 420ms cubic-bezier(.32, .72, 0, 1); }

/* Знак агента в шапке переписки — тот же круг с градиентом, что у кнопки. */
.mini-bot {
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #55f2d3, #9c93ff);
}

/* Пузыри переписки — те же 17px и те же два тона, что в приложении. */
.bubble,
.msg,
.chat-bubble {
  border-radius: 17px;
}

/* ── Типографика ───────────────────────────────────────────────────────────── */
/* Шкала из `Theme.Font`: display 27 / title 21 / body 15 / caption 12 / label 11. */
.page-title,
.page-heading h2 { font-size: 27px; font-weight: 800; line-height: 1.08; }
.section-title { font-size: 21px; font-weight: 700; }
.agenda-title { font-size: 15px; font-weight: 600; }
.agenda-detail,
.section-meta { font-size: 12px; font-weight: 500; color: var(--muted); }
.eyebrow,
.date-line,
.nav-label { font-size: 11px; font-weight: 800; letter-spacing: .02em; }

/* ── «Печатает» ────────────────────────────────────────────────────────────── */
/* Волна, а не подпрыгивание по таймеру: те же кривая и сдвиг, что у точек на кнопке
   агента в приложении. Движение непрерывное, между кадрами нет пауз, в которые всё
   замирает. */
.typing i {
  background: var(--mint);
  animation: think-wave 1.24s ease-in-out infinite alternate;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes think-wave {
  from { transform: scale(.7); opacity: .4; }
  to { transform: scale(1.35); opacity: 1; }
}

/* ── Уважение к «уменьшению движения» ──────────────────────────────────────── */
/* Дыхание, моргание и прыжок значка — украшение. Тому, кто выключил анимации в
   системе, они не нужны: приложение в этом режиме тоже стоит смирно. */
@media (prefers-reduced-motion: reduce) {
  #openBot,
  #openBot .bot-eye,
  .typing i,
  #openBot .bot-dots i,
  .nav-item.active .nav-icon,
  .nav-item.active .nav-label {
    animation: none !important;
  }
  .bottom-nav,
  .nav-item,
  .sheet-panel,
  .sheet-backdrop {
    transition: none !important;
  }
}