/* Системные шрифты — никаких внешних загрузок.
   Раньше здесь был @import с fonts.googleapis.com: он блокировал отрисовку страницы
   до ответа внешнего сервера, из-за чего первая загрузка была очень долгой,
   а при недоступности Google Fonts — заканчивалась ошибкой. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Палитра. Тёмно-синий — цвет строгости и официального документа,
     песочный фон мягче белого и не утомляет при долгой работе с текстом. */
  --ink: #1f2a38;
  --ink-soft: #2f4a6b;
  --paper: #f6f4ef;
  --surface: #ffffff;
  --surface-sunk: #faf9f5;
  --line: #e2ddcf;
  --line-strong: #cfc9bb;
  --text: #242220;
  --text-muted: #5c584f;
  --text-faint: #8a8578;
  --danger: #9c2b1f;
  --success: #2f6f4f;

  /* Движение: одна короткая скорость для отклика на действие, одна для
     раскрытий. Всё приложение работает в этом ритме — так интерфейс
     ощущается цельным, а не собранным из разных частей. */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Тени — только там, где элемент реально «над» страницей: меню, окна.
     Карточки различаются оттенком фона, а не тенью под каждой. */
  --shadow-pop: 0 8px 24px rgba(31, 42, 56, .12), 0 2px 6px rgba(31, 42, 56, .08);
  --shadow-modal: 0 24px 60px rgba(31, 42, 56, .28);
}

/* Уважение к системной настройке: если человек просил уменьшить движение,
   анимации отключаются — это не украшение, а вопрос доступности. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: #f6f4ef;
  color: #242220;
}
.hidden { display: none !important; }
input, select, button, textarea { font-family: inherit; font-size: 13.5px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid #2f4a6b; outline-offset: 1px; }
.num { font-family: var(--font-mono); }

/* ---------- auth ---------- */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1f2a38; padding: 20px; }
.auth-card { background: #fff; border-radius: 10px; padding: 28px; width: 100%; max-width: 380px; }
.auth-title { font-family: var(--font-serif); font-weight: 700; font-size: 20px; margin-bottom: 18px; color: #1f2a38; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 8px; border: 1px solid #cfc9bb; background: #fff; border-radius: 6px; cursor: pointer; color: #5c584f; }
.auth-tab.active { background: #eaf0f7; border-color: #2f4a6b; color: #2f4a6b; font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #5c584f; }
.auth-form input { padding: 9px 10px; border: 1px solid #cfc9bb; border-radius: 6px; }
.auth-form button { margin-top: 4px; background: #2f4a6b; color: #fff; border: none; border-radius: 6px; padding: 10px; font-weight: 500; cursor: pointer; }
.auth-error { color: #9c2b1f; font-size: 12.5px; min-height: 16px; }
.auth-note { margin-top: 16px; font-size: 12px; color: #a39e8f; line-height: 1.5; }

/* ---------- layout ---------- */
.topbar { background: #1f2a38; color: #f3efe6; border-bottom: 3px solid #2f4a6b; }
.topbar-inner { max-width: 1060px; margin: 0 auto; padding: 24px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9db3c9; margin-bottom: 6px; }
h1 { font-family: var(--font-serif); font-weight: 700; font-size: 26px; margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-size: 13px; color: #9db3c9; }
.container { max-width: 1060px; margin: 0 auto; padding: 20px 24px 60px; }

.btn { border-radius: 6px; padding: 9px 14px; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; }
.btn.primary { background: #2f4a6b; color: #fff; }
.btn.dark { background: #1f2a38; color: #fff; width: 100%; padding: 10px; font-weight: 500; }
.btn.ghost { background: rgba(255,255,255,0.08); color: #f3efe6; border: 1px solid rgba(255,255,255,0.2); }
.container .btn.ghost { background: #fff; color: #3a362e; border: 1px solid #cfc9bb; }
.btn.danger { background: #fff; color: #9c2b1f; border: 1px solid #e3b3ac; }
.topbar-inner.tabs-row { padding-top: 0; padding-bottom: 16px; }
.workspace-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-tab { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 7px; font-size: 13.5px; font-weight: 500; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: #b9c6d6; }
.ws-tab.active { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.14); color: #fff; }
.ws-badge { background: #a6631a; color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; margin-left: 2px; }

.btn.small { padding: 6px 10px; font-size: 12.5px; }
.ref-filter.active { border-color: #2f4a6b !important; background: #eaf0f7 !important; color: #2f4a6b !important; }
.task-card { background: #fff; border: 1px solid #e2ddcf; border-radius: 8px; overflow: hidden; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.task-check { background: none; border: none; cursor: pointer; flex-shrink: 0; color: #a39e8f; }
.task-check.done { color: #2f6f4f; }
.task-title { font-size: 14px; font-weight: 500; }
.task-title.done { text-decoration: line-through; color: #a39e8f; }
.task-meta { font-size: 12px; color: #8a8578; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Справочник статей: единый список с тонкими разделителями вместо отдельно
   обведённой рамкой карточки на каждую статью — тот же принцип «нажал и
   открылось на месте», но без «коробочного» вида. */
#reference-list.records-list { gap: 0; border: 1px solid #e2ddcf; border-radius: 12px; overflow: hidden; background: #fff; }
.ref-card { border-bottom: 1px solid #ede8db; }
.ref-card:last-child { border-bottom: none; }
.ref-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.ref-row:hover { background: #fbfaf6; }
.ref-pin { background: none; border: none; cursor: pointer; color: #cfc9bb; flex-shrink: 0; }
.ref-pin.active { color: #a6631a; }
/* Шеврон нарисован рамками, как в выборе модели ИИ (.model-picker-caret) —
   тот же приём, ради единого почерка интерфейса, а не символ «▾»/«▲». */
.ref-caret {
  width: 7px; height: 7px; flex-shrink: 0; margin-right: 2px;
  border-right: 1.5px solid #a39e8f; border-bottom: 1.5px solid #a39e8f;
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.ref-caret.open { transform: rotate(-135deg); margin-top: -4px; }

.btn:disabled { opacity: .5; cursor: default; }

/* ---------- summary ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.summary-card { background: #fff; border: 1px solid #e2ddcf; border-top: 3px solid; border-radius: 8px; padding: 12px 14px; }
.summary-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1; }
.summary-label { font-size: 12px; color: #8a8578; margin-top: 4px; }

/* ---------- задачи: полоска дат (ежедневник) ---------- */
.day-nav { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.day-strip { display: flex; gap: 6px; flex: 1; min-width: 0; }
.day-cell {
  flex: 1; min-width: 0; text-align: center; font-size: 11px; line-height: 1.4;
  padding: 8px 2px; border-radius: 8px; border: 1px solid #e2ddcf; background: #fff;
  color: #5c584f; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.day-cell:hover { border-color: #a39e8f; }
.day-cell .wd { display: block; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.day-cell .num { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.day-cell.is-today { border-color: #2f4a6b; color: #2f4a6b; }
.day-cell.selected { background: #2f4a6b; border-color: #2f4a6b; color: #fff; }
.day-cell.selected .wd { opacity: .8; }
.day-cell.has-tasks:not(.selected)::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: #a6631a; margin: 4px auto 0;
}
.day-arrow {
  flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #e2ddcf; border-radius: 8px;
  background: #fff; color: #5c584f; cursor: pointer; font-size: 15px; line-height: 1;
}
.day-arrow:hover { border-color: #a39e8f; }
.day-heading { font-size: 15px; font-weight: 600; margin: 12px 2px 4px; color: #2b2a26; }
@media (max-width: 480px) {
  .day-strip { gap: 4px; }
  .day-cell { padding: 6px 1px; font-size: 10px; }
  .day-cell .num { font-size: 13px; }
}

/* ---------- задачи: форма добавления ---------- */
/* Раньше форма была видна всегда — плотная сетка одинаковых прямоугольных
   полей отъедала место над списком дня и выглядела как бланк, а не как
   «добавить задачу». Теперь она свёрнута за кнопкой (тот же приём, что уже
   есть у «+ Добавить статью» в справочнике), а внутри — крупное поле
   названия сверху и мелкие подписанные поля в ряд под ним. */
.task-form {
  background: #fbfaf6; border: 1px solid #ede8db; border-radius: 12px;
  padding: 16px; margin-top: 10px;
}
.task-form-title {
  width: 100%; border: none; background: none; font-size: 16px; font-weight: 500;
  padding: 4px 2px 12px; border-bottom: 1px solid #e2ddcf;
}
.task-form-title:focus { outline: none; border-bottom-color: #2f4a6b; }
.task-form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.task-form-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8a8578; flex: 1; min-width: 130px; }
.task-form-field-wide { flex: 1.6; min-width: 180px; }
.task-form-field input, .task-form-field select {
  padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; background: #fff; font-size: 13.5px;
}
.task-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- panels & forms ---------- */
.panel { background: #fff; border: 1px solid #e2ddcf; border-radius: 8px; padding: 18px; margin-top: 20px; }
.panel-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.hint { font-size: 12.5px; color: #8a8578; line-height: 1.6; background: #faf8f2; border: 1px solid #ede8db; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.hint.warn { background: #faf1e3; color: #8a5316; border-color: #f0d9b0; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.grid4 label, .grid-form-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5c584f; }
.grid4 input, .grid-form-fields input, .grid-form-fields select { padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #5c584f; cursor: pointer; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.tg-result { font-size: 13px; }
.tg-result.ok { color: #2f6f4f; }
.tg-result.error { color: #9c2b1f; }

.controls-row { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; margin-bottom: 4px; flex-wrap: wrap; gap: 12px; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.type-tab { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid #cfc9bb; background: #fff; color: #5c584f; }
.type-tab.active { border-color: #2f4a6b; background: #eaf0f7; color: #2f4a6b; }
.grid-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.span-all { grid-column: 1 / -1; }

/* ---------- records ---------- */
.records-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.empty-state { text-align: center; padding: 48px 20px; color: #8a8578; border: 1px dashed #cfc9bb; border-radius: 8px; background: #fff; margin-top: 14px; }

.record-card { background: #fff; border: 1px solid #e2ddcf; border-left-width: 4px; border-radius: 8px; overflow: hidden; }
.record-card.closed { opacity: .75; }
/* Дела в отношении лица — синим оттенком фирменного цвета. Выбран именно
   он: левая полоса уже занята статусом срока (красный/жёлтый/зелёный/серый),
   красноватая подсветка — стражей, так что выделение не спорит ни с тем,
   ни с другим. Правило стоит ВЫШЕ стражного: где действуют оба, стража
   сильнее и перекрывает фон (см. .record-card.custody.person ниже). */
.record-card.person { background: #edf2f9; border-color: #d3deec; }
.person-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #dbe5f2; color: #2f4a6b; font-weight: 600;
}
.record-header { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.record-number { font-family: var(--font-mono); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.record-sub { font-size: 12px; color: #8a8578; margin-top: 2px; }
.record-col-label { font-size: 11px; color: #a39e8f; text-transform: uppercase; letter-spacing: .05em; }
.record-col { font-size: 13px; color: #5c584f; }
.type-icon { color: #8a8578; flex-shrink: 0; }

.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ---------- организации ---------- */
.org-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid #cfc9bb; border-radius: 8px;
  margin-top: 4px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.org-search-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #ede8db; font-size: 13px; }
.org-search-item:last-child { border-bottom: none; }
.org-search-item:hover { background: #fbfaf6; }
.org-subtab.active { border-color: #2f4a6b !important; background: #eaf0f7 !important; color: #2f4a6b !important; }
.cases-type-btn.active { border-color: #2f4a6b !important; background: #eaf0f7 !important; color: #2f4a6b !important; }

/* ---------- чат с ИИ ---------- */
/* На вкладке чата общий контейнер сайта (обычно max-width: 1060px, одно
   правило на все вкладки) расширяется — так намного удобнее читать длинные
   ответы. Остальные вкладки эта строка не трогает — расширение срабатывает
   только пока сама вкладка чата видима. */
.container:has(#tab-content-ai-chat:not(.hidden)) { max-width: 1440px; }

/* Высоту задаёт JS (sizeAiChatLayout в app.js) — меряет реальный остаток
   места до низа окна, а не угадывает его числом. Сначала было 84vh (не
   учитывало шапку — поле ввода уезжало за край на невысоких экранах),
   потом calc(100vh - 300px) (число всё ещё угадано — на большом мониторе
   оставляло пустую полосу внизу страницы вместо того, чтобы использовать
   место). min-height здесь — только запасной вариант на случай, если JS
   почему-то не успел отработать. */
.ai-chat-layout { display: flex; gap: 16px; min-height: 320px; }
.ai-chat-sidebar {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  border: 1px solid #e2ddcf; border-radius: 12px; background: #fff; padding: 14px;
}
.ai-chat-list { overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.ai-chat-list-item {
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-left: 3px solid transparent; transition: background .12s;
}
.ai-chat-list-item:hover { background: #fbfaf6; }
.ai-chat-list-item.active { background: #eaf0f7; color: #2f4a6b; font-weight: 600; border-left-color: #2f4a6b; }
.ai-chat-list-item .ai-chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ai-chat-list-item .ai-chat-delete { opacity: 0; flex-shrink: 0; color: #9c2b1f; font-size: 12px; padding: 2px 4px; }
.ai-chat-list-item .ai-chat-rename { opacity: 0; flex-shrink: 0; color: #5c584f; font-size: 12px; padding: 2px 4px; cursor: pointer; }
.ai-chat-list-item:hover .ai-chat-rename { opacity: 1; }
.ai-chat-list-item:hover .ai-chat-delete { opacity: 1; }
.ai-chat-list-item .ai-chat-case-tag {
  flex-shrink: 0; font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: #eaf0f7; color: #2f4a6b; font-weight: 600;
}

.ai-chat-case-bar { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-chat-case-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: #eaf0f7; color: #2f4a6b; font-size: 13px; font-weight: 600;
}
.ai-chat-case-select {
  padding: 6px 10px; border: 1px solid #cfc9bb; border-radius: 999px; font-size: 13px; background: #fff;
}

/* ---------- выпадающий список моделей ИИ ----------
   Раскрывается ВВЕРХ: кнопка стоит в нижней части раздела чата, прямо над
   полем ввода, и список, открытый вниз, у большинства упирался бы в край
   окна. Вверх — там большая область сообщений, места хватает всегда. */
.model-picker { position: relative; display: inline-block; }
.model-picker-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: #fff;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.model-picker-btn:hover { background: var(--surface-sunk); }
.model-picker-btn.open { border-color: #2f4a6b; color: #2f4a6b; }
/* Стрелка нарисована рамками, а не символом «▾»: символ в разных шрифтах
   выглядит по-разному и прыгает по вертикали */
.model-picker-caret {
  width: 7px; height: 7px; flex-shrink: 0; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.model-picker-btn.open .model-picker-caret { transform: rotate(-135deg); margin-top: 2px; }

.model-picker-menu {
  position: absolute; bottom: 100%; left: 0; z-index: 40; min-width: 280px;
  margin-bottom: 6px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31,42,56,.14);
  max-height: 340px; overflow-y: auto;
}
.model-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
  cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.model-picker-item:hover:not(.locked) { background: var(--surface-sunk); }
.model-picker-item.selected { background: #eaf0f7; color: #2f4a6b; font-weight: 600; }
.model-picker-item:focus-visible { outline: 2px solid #2f4a6b; outline-offset: -2px; }
.model-picker-item.locked { color: var(--text-faint); cursor: default; }

.model-picker-mark {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.model-picker-radio {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box;
}
.model-picker-item.selected .model-picker-radio { border-color: #2f4a6b; border-width: 4px; }
.model-picker-lock { width: 13px; height: 13px; display: block; color: var(--text-faint); }

.model-picker-label { flex: 1; min-width: 0; }
.model-picker-star { flex-shrink: 0; color: #d99a1e; font-size: 12px; line-height: 1; }
/* Кружок с «i» — подсказка через нативный title, без своего всплывающего
   окна: меньше кода и работает одинаково во всех браузерах */
.model-picker-info {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text-faint);
  font-size: 10px; font-style: italic; font-weight: 600; line-height: 14px; text-align: center;
  cursor: help;
}
.model-picker-info:hover { border-color: var(--ink-soft); color: var(--ink-soft); }
.model-picker-empty { padding: 10px; font-size: 13px; color: var(--text-faint); }

/* ---------- перетаскивание файлов в чат ----------
   Зона охватывает весь раздел чата, а подсказка появляется поверх него.
   position: relative нужен, чтобы подсказка легла по границам зоны */
.ai-chat-drop-area { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-chat-dropzone {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247,245,239,.92);
  border: 2px dashed #2f4a6b; border-radius: var(--r-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast);
  /* Подсказка не должна перехватывать события мыши: иначе при появлении
     она сама вызовет dragleave у зоны под ней, и подсветка замигает */
  pointer-events: none;
}
.ai-chat-dropzone.active { opacity: 1; visibility: visible; }
.ai-chat-dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #2f4a6b; font-size: 15px; font-weight: 600; text-align: center; padding: 0 20px;
}

/* Переключатель «Размышление» — обычный чекбокс визуально спрятан,
   вместо него рисуем трек с бегунком; так самый надёжный способ сделать
   тумблер без лишнего JS — переключение работает через нативный чекбокс. */
.ai-chat-reasoning-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #5c584f; user-select: none;
}
.ai-chat-reasoning-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-chat-toggle-track {
  position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 999px;
  background: #cfc9bb; transition: background-color .15s; flex-shrink: 0;
}
.ai-chat-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ai-chat-reasoning-toggle input:checked ~ .ai-chat-toggle-track { background: #2f4a6b; }
.ai-chat-reasoning-toggle input:checked ~ .ai-chat-toggle-track .ai-chat-toggle-thumb { transform: translateX(16px); }
.ai-chat-toggle-label { white-space: nowrap; }
.ai-chat-case-panel {
  border: 1px solid #e2ddcf; border-radius: 12px; background: #fbfaf6; padding: 14px; margin-bottom: 10px;
}
.ai-chat-case-panel-title { font-weight: 600; margin-bottom: 8px; }
.ai-chat-case-docs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ai-chat-case-doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; background: #fff; border: 1px solid #e2ddcf; border-radius: 8px; font-size: 13px;
}
.ai-chat-case-doc-item .doc-meta { color: #8a8578; font-size: 12px; }
.ai-chat-case-doc-item .doc-delete { color: #9c2b1f; cursor: pointer; padding: 2px 6px; flex-shrink: 0; }
.ai-chat-case-add-tabs { display: flex; gap: 6px; }
.ai-chat-case-add-tab {
  padding: 5px 12px; border: 1px solid #cfc9bb; border-radius: 999px; background: #fff;
  font-size: 12px; cursor: pointer; color: #5c584f;
}
.ai-chat-case-add-tab.active { border-color: #2f4a6b; background: #eaf0f7; color: #2f4a6b; font-weight: 600; }

.ai-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ai-chat-messages {
  /* min-height обязателен: без него flex:1 разрешает области сжаться сколько
     угодно, вплоть до нуля, когда поле ввода растёт под длинный вставленный
     текст (у него своя min-height:44px, "тянущая" на себя оставшееся место).
     Ответы ИИ должны быть видны всегда, даже пока следователь печатает вопрос. */
  flex: 1; min-height: 200px; overflow-y: auto; overflow-anchor: none; border: 1px solid #e2ddcf; border-radius: 12px;
  background: #fff; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}
.ai-chat-greeting {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #2b2b28; text-align: center;
}
.ai-chat-greeting-icon { font-size: 48px; line-height: 1; }
.ai-chat-greeting-text { font-size: 22px; font-weight: 600; }
.ai-chat-greeting-hint {
  max-width: 560px; font-size: 13px; line-height: 1.6; color: #8a8578; font-weight: 400;
}
.ai-chat-bubble-wrap {
  display: flex; flex-direction: column; gap: 4px; max-width: 82%;
  animation: ai-chat-bubble-in .28s ease-out;
}
@keyframes ai-chat-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-chat-bubble-wrap.user { align-self: flex-end; align-items: flex-end; }
.ai-chat-bubble-wrap.assistant { align-self: flex-start; align-items: flex-start; }
.ai-chat-copy-btn {
  background: none; border: none; padding: 3px 6px; cursor: pointer;
  font-size: 12px; color: #a39e8f; display: inline-flex; align-items: center; gap: 4px;
  opacity: .55; transition: opacity .15s, color .15s;
}
.ai-chat-bubble-wrap:hover .ai-chat-copy-btn { opacity: 1; }
.ai-chat-copy-btn:hover, .ai-chat-copy-btn:active { color: #2f4a6b; opacity: 1; }
.ai-chat-copy-btn.copied { color: #2f6f4f; opacity: 1; }
.ai-chat-bubble { display: inline-block; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; transition: background-color .2s; max-width: 100%; box-sizing: border-box; }
.ai-chat-bubble.user { background: #2f4a6b; color: #fff; border-bottom-right-radius: 3px; }
.ai-chat-bubble.assistant { background: #f3f1e8; color: #2b2b28; border-bottom-left-radius: 3px; }
.ai-chat-bubble strong { font-weight: 700; }
.ai-chat-bubble code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 13px; font-family: "Courier New", monospace; }
.ai-chat-bubble a, #ai-chat-status a { color: #2f4a6b; text-decoration: underline; }
.ai-chat-citation { font-size: inherit; }
a.ai-chat-citation { cursor: pointer; }

/* ---------- ответ ИИ без пузыря, во всю ширину ----------
   Вопрос остаётся плашкой справа — по ней видно, где чья реплика.
   А ответ занимает всю ширину и читается как обычный документ:
   рамка вокруг длинного юридического текста только сжимала строку. */
.ai-chat-bubble-wrap.assistant { width: 100%; align-self: stretch; }
.ai-chat-bubble.assistant {
  background: transparent; border-radius: 0;
  display: block; width: 100%;
  /* Боковые поля обязательны. Вместе с пузырём ушли и его отступы, и текст
     ответа прилипал к рамке, тогда как вопрос справа свои поля сохранил —
     разница бросалась в глаза. Здесь поля меньше прежних 16 px: строка всё
     равно должна тянуться во всю ширину, ради этого пузырь и убирали. */
  padding: 2px 10px 2px 4px;
}

/* ---------- ссылки на источники внутри ответа ----------
   Спокойное подчёркивание вместо прежней зелёной заливки с галочкой:
   пометки спорили с самим текстом и пестрили. Пояснение теперь
   показывается карточкой при наведении. */
.ai-src {
  color: #2f4a6b; text-decoration: underline;
  text-decoration-color: rgba(47,74,107,.35); text-underline-offset: 3px;
  cursor: help; transition: text-decoration-color .15s var(--ease), background .15s var(--ease);
  border-radius: 3px;
}
.ai-src:hover { text-decoration-color: #2f4a6b; background: rgba(47,74,107,.07); }
a.ai-src { cursor: pointer; }
.ai-src-quote { font-style: italic; }

.ai-src-card {
  position: fixed; z-index: 200; box-sizing: border-box;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(31,42,56,.16);
  font-size: 13px; line-height: 1.5; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  pointer-events: none;
}
.ai-src-card.shown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.ai-src-card-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: 6px;
}
.ai-src-card-title { font-weight: 600; margin-bottom: 6px; }
.ai-src-card-body { color: var(--ink-soft); }
.ai-src-card-foot {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-faint);
}

/* ---------- расход ИИ в карточке пользователя (админ-панель) ----------
   Раньше для этого был отдельный список внизу страницы. В нём не было ни
   поиска, ни сортировки, и найти нужного человека среди десятков было
   невозможно — поэтому всё переехало сюда, в блок «Пользователи». */
.ai-lim-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink-soft);
}
.ai-lim-muted { color: var(--text-faint); }
.ai-lim-own { color: #2f4a6b; font-weight: 600; }
.ai-lim-grant { color: #2f6f4f; font-weight: 600; }
/* Упёрлись в потолок — их жалобы придут первыми, поэтому видно сразу */
.ai-lim-out { color: #b43c3c; }
.ai-lim-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-lim-edit input {
  width: 62px; padding: 4px 7px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 5px;
}
.ai-chat-bubble a:hover, #ai-chat-status a:hover { color: #1f2a38; }

/* Значки уверенности источника — зелёная галочка: модель реально видела
   точный текст (справочник/Гарант-фрагмент/веб-поиск). Жёлтый — только
   название/ссылка без проверенного текста, или общие знания модели —
   стоит перепроверить самостоятельно перед тем как полагаться на это. */
.ai-chat-cite-badge {
  display: inline-block; font-size: 10px; margin-right: 2px; font-style: normal;
}
.ai-chat-cite-verified { color: #1f7a4d; text-decoration: underline dotted; }
.ai-chat-cite-verified:hover { color: #145a37; }
.ai-chat-cite-verified .ai-chat-cite-badge { color: #1f7a4d; }
a.ai-chat-cite-unverified, a.ai-chat-cite-unverified:visited {
  color: #a3730f; text-decoration: underline dotted;
}
a.ai-chat-cite-unverified:hover { color: #7a5608; }
.ai-chat-cite-unverified .ai-chat-cite-badge { color: #c9922a; }
.ai-chat-bubble.pending {
  opacity: .85; animation: ai-chat-pending-breathe 1.8s ease-in-out infinite;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@keyframes ai-chat-pending-breathe {
  0%, 100% { background-color: #f3f1e8; }
  50% { background-color: #ece7d8; }
}
.ai-thinking-dots { display: inline-flex; gap: 5px; align-items: center; height: 14px; padding: 2px 0; flex-shrink: 0; }
.ai-chat-elapsed-timer { font-size: 12px; color: #a39e8f; margin-left: 4px; vertical-align: middle; flex-shrink: 0; }
/* Фраза «чем занят ИИ». Переносится, а не обрезается: фразы теперь пишет
   сама модель под конкретный вопрос, и они бывают длиннее заготовок.
   Смена — через угасание, иначе текст дёргано перескакивает */
.ai-chat-stage-label {
  font-size: 15px; font-style: italic; color: #8a8578;
  white-space: normal; line-height: 1.35;
  transition: opacity .18s var(--ease);
}
.ai-chat-stage-label.fading { opacity: 0; }

/* Ход рассуждений при включённом режиме размышления — свёрнут по умолчанию
   в готовых сообщениях, развёрнут пока идёт генерация (видно, как ИИ думает) */
.ai-chat-reasoning {
  background: #f7f5ef; border: 1px solid #e2ddcf; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 6px; font-size: 13px; max-width: 100%;
}
.ai-chat-reasoning summary {
  cursor: pointer; color: #6b6558; font-weight: 600; user-select: none; list-style: none;
}
.ai-chat-reasoning summary::-webkit-details-marker { display: none; }
.ai-chat-reasoning summary:hover { color: #2f4a6b; }
.ai-chat-reasoning-text {
  margin-top: 8px; color: #5c584f; line-height: 1.6; white-space: pre-wrap;
  max-height: 320px; overflow-y: auto; font-style: italic;
}
.ai-thinking-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #2f4a6b;
  animation: ai-thinking-bounce 1.2s infinite ease-in-out;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-thinking-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: .5; }
  30% { transform: translateY(-5px) scale(1.15); opacity: 1; }
}
.ai-chat-input-row { margin-top: 12px; }
.ai-chat-input-inner {
  position: relative;
  border: 1px solid #cfc9bb; border-radius: 14px; background: #fff; padding: 10px 56px 10px 12px;
  box-shadow: 0 1px 3px rgba(31,42,56,.06);
}
.ai-chat-input-inner textarea {
  width: 100%; border: none; outline: none; resize: none; font-family: inherit;
  font-size: 15px; padding: 6px 2px; line-height: 1.55;
  /* Растёт по мере набора (высоту задаёт JS), но не бесконечно: после
     потолка появляется прокрутка внутри самого поля — иначе длинный
     вставленный текст съел бы всё место у ответов ИИ.
     min-height: пустое поле = 56px (~2 строки). Было 96px — на экране, где
     под чат остаётся ~500px, пустое поле ввода вместе с отведённой под
     скрепку и кнопку отправки полосой занимало 165px, и области ответов
     доставался её голый минимум в 200px. Поле по-прежнему растёт под текст
     до 260px, так что при наборе длинного вопроса просторно ровно тогда,
     когда это действительно нужно. */
  min-height: 56px; max-height: 260px; overflow-y: auto;
}
.ai-chat-stop { background: #9c2b1f; }
.ai-chat-stop:hover { background: #7a2117; }
#ai-chat-provider-block .tm-provider-btn.disabled-indicator { cursor: default; opacity: .85; }
/* Кнопка вызова списка чатов — только на телефоне */
.ai-mobile-bar { display: none; }

@media (max-width: 720px) {
  /* Переписка занимает весь экран, список чатов уезжает в панель —
     как в мессенджерах. Раньше список висел сверху и съедал полэкрана. */
  .ai-chat-layout { display: block; height: auto; }

  .ai-mobile-bar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  }
  .ai-mobile-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--line-strong);
    color: var(--ink-soft); cursor: pointer; font-family: inherit; flex-shrink: 0;
  }
  .ai-mobile-btn:active { background: var(--surface-sunk); }
  .ai-mobile-title {
    font-size: 13px; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Панель выезжает слева поверх переписки */
  .ai-chat-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
    z-index: 300; margin: 0 !important; border-radius: 0 !important;
    overflow-y: auto; box-shadow: var(--shadow-modal);
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    padding: 14px !important;
  }
  body.ai-chats-open .ai-chat-sidebar { transform: translateX(0); }

  /* Затемнение под панелью */
  body.ai-chats-open::after {
    content: ""; position: fixed; inset: 0; z-index: 299;
    background: rgba(31, 42, 56, .45);
    animation: overlay-in var(--t-base) var(--ease);
  }

  /* Переписке — максимум высоты, ради неё всё и затевалось */
  .ai-chat-messages { height: 58vh; padding: 14px !important; }
  .ai-chat-bubble { max-width: 92% !important; }
  /* Ограничение ширины касается только вопроса. Ответ тянется во всю
     ширину — пузыря у него больше нет, и сужать текст незачем */
  .ai-chat-bubble.assistant { max-width: 100% !important; padding: 2px 2px 2px 0; }
  .ai-msg-images img { max-width: 150px; max-height: 150px; }

  /* Настройки чата в одну колонку, чтобы не разъезжались */
  .ai-chat-case-bar { flex-direction: column; align-items: stretch; gap: 6px !important; }
  .ai-chat-case-bar .fs-select, .ai-chat-case-bar .fs-trigger { width: 100%; }
  .ai-chat-case-select { width: 100%; }
  /* Кнопка модели ведёт себя как остальные настройки — во всю ширину,
     а сам список не должен вылезать за край узкого экрана */
  .model-picker { display: block; width: 100%; }
  .model-picker-btn { width: 100%; justify-content: space-between; }
  .model-picker-menu { min-width: 0; left: 0; right: 0; }

  /* Заготовки прокручиваются вбок, а не переносятся на три строки */
  .ai-quick-bar {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ai-quick-bar::-webkit-scrollbar { display: none; }
  .ai-quick-btn { flex-shrink: 0; }

  /* Действия под сообщением всегда видны: наведения на телефоне нет */
  .ai-chat-bubble-actions { opacity: 1 !important; }
  .ai-attach-remove, .ai-file-thumb .ai-attach-remove { opacity: 1 !important; }
  .tl-delete, .tl-edit { opacity: .6 !important; }
}

.record-body { border-top: 1px solid #ede8db; padding: 16px; background: #fbfaf6; }
.alert-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.body-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.section-label { font-size: 12px; font-weight: 600; color: #5c584f; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.ext-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ext-row input { padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; }
.ext-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ext-item { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #5c584f; background: #fff; border: 1px solid #ede8db; border-radius: 5px; padding: 6px 10px; }
.ext-item button { background: none; border: none; color: #a39e8f; cursor: pointer; }
.actions-col { display: flex; flex-direction: column; gap: 8px; }
.outcome-btn { display: flex; align-items: center; gap: 7px; border: none; border-radius: 6px; padding: 8px 12px; font-size: 13px; cursor: pointer; width: 100%; text-align: left; }
.notes-block { margin-top: 18px; }
.notes-block textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; font-family: inherit; resize: vertical; }
.app-footer { text-align: center; padding: 24px 0 32px; font-size: 12px; color: #a39e8f; }

/* ---------- админ-панель ---------- */
.admin-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.record-body textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.record-body a { color: #2f4a6b; }

/* ============================================================
   АДАПТИВНАЯ ВЁРСТКА ДЛЯ ТЕЛЕФОНОВ И ПЛАНШЕТОВ
   ============================================================ */

/* Планшеты и узкие окна */
@media (max-width: 900px) {
  .container { padding: 16px 16px 48px; }
  .topbar-inner { padding: 18px 16px; }
  h1 { font-size: 22px; }
}

/* Телефоны */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }

  .container { padding: 14px 12px 40px; }
  .topbar-inner { padding: 16px 12px; gap: 10px; }
  .topbar-inner.tabs-row { padding-top: 0; padding-bottom: 12px; }
  h1 { font-size: 20px; }
  .eyebrow { font-size: 11px; }

  /* Кнопки в шапке: в строку с переносом, крупнее для пальца */
  .topbar-actions { width: 100%; gap: 8px; }
  .topbar-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .who { width: 100%; font-size: 12px; }

  /* Вкладки прокручиваются по горизонтали, не ломая строку */
  .workspace-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .workspace-tabs::-webkit-scrollbar { display: none; }
  .ws-tab { flex: 0 0 auto; padding: 9px 13px; font-size: 13px; }

  /* Плитки статистики — по две в ряд */
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-value { font-size: 22px; }
  .summary-label { font-size: 11px; }

  /* ГЛАВНОЕ: карточка дела перестраивается в три ряда вместо пяти колонок */
  .record-header {
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    padding: 12px 14px;
  }
  .record-header > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .record-header > *:nth-child(5) { grid-column: 3;     grid-row: 1; align-self: start; }
  .record-header > *:nth-child(2) { grid-column: 1;     grid-row: 2; }
  .record-header > *:nth-child(3) { grid-column: 2;     grid-row: 2; }
  .record-header > *:nth-child(4) { grid-column: 1 / 4; grid-row: 3; }

  .record-number { font-size: 14px; }
  .record-col { font-size: 12.5px; }
  .record-col-label { font-size: 10px; }
  .record-body { padding: 14px 12px; }

  /* Формы — по одному полю в ряд, чтобы не жались */
  .grid4, .grid-form-fields { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 14px; }

  /* Поля ввода: 16px обязательно, иначе iPhone увеличивает страницу при нажатии */
  input, select, textarea,
  .grid4 input, .grid-form-fields input, .grid-form-fields select,
  .ext-row input, .admin-controls input, .admin-controls select,
  .auth-form input, .notes-block textarea, .record-body textarea {
    font-size: 16px;
    min-height: 42px;
  }
  textarea { min-height: 80px; }

  /* Кнопки крупнее — попасть пальцем */
  .btn { min-height: 42px; padding: 10px 14px; }
  .btn.small { min-height: 36px; padding: 8px 12px; }

  /* Ряды продления/приостановления — в столбик */
  .ext-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ext-row > * { width: 100%; }
  .ext-row input[type="number"] { width: 100% !important; }
  .body-cols { flex-direction: column; gap: 18px; }

  /* Переключатель типа записи */
  .tabs { flex-direction: column; gap: 6px; }
  .type-tab { width: 100%; justify-content: center; }

  /* Строка управления над списком */
  .controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .controls-row .btn { width: 100%; }

  /* Задачи и справочник */
  .task-row, .ref-row { padding: 12px; gap: 10px; }
  .task-title { font-size: 13.5px; }
  .ext-item { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Админ-панель */
  .admin-controls { width: 100%; flex-direction: column; align-items: stretch; }
  .admin-controls .btn { width: 100%; }

  /* Экран входа */
  .auth-screen { padding: 14px; align-items: flex-start; padding-top: 32px; }
  .auth-card { padding: 20px; }
  .auth-title { font-size: 18px; }

  .status-badge { font-size: 11px; padding: 4px 8px; }
  .hint { font-size: 12px; padding: 9px 10px; }
}

/* Очень узкие экраны (iPhone SE и подобные) */
@media (max-width: 380px) {
  .summary-grid { grid-template-columns: 1fr; }
  .record-header { grid-template-columns: 1fr auto; }
  .record-header > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .record-header > *:nth-child(3) { grid-column: 1; grid-row: 3; }
  .record-header > *:nth-child(4) { grid-column: 1 / 3; grid-row: 4; }
}

/* Перекрываем inline-ширины, заданные в шаблонах JS: на узком экране
   они распирали бы страницу и включали горизонтальную прокрутку. */
@media (max-width: 720px) {
  .record-body input[style],
  .record-body label[style],
  .record-body select[style],
  .row.gap > label[style] {
    min-width: 0 !important;
    width: 100% !important;
  }
  .row.gap { flex-direction: column; align-items: stretch; }
  .row.gap > * { width: 100%; }
  /* Страховка от горизонтальной прокрутки на любых экранах */
  body { overflow-x: hidden; }
  .record-card, .task-card, .ref-card, .panel { max-width: 100%; }
}

/* Админ-панель на телефоне */
@media (max-width: 720px) {
  .ref-row > div[style*="flex:1 1"] { flex: 1 1 100% !important; min-width: 0 !important; }
  .ref-row { flex-wrap: wrap; }
}

/* ============================================================
   УВЕДОМЛЕНИЯ: колокольчик, панель и всплывающие окна
   ============================================================ */

.bell-btn { position: relative; font-size: 16px; line-height: 1; padding: 9px 12px; }
.bell-badge {
  position: absolute; top: -6px; right: -6px;
  background: #9c2b1f; color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #1f2a38;
}

/* Панель со списком уведомлений */
.bell-panel {
  position: fixed; top: 64px; right: 20px; z-index: 60;
  width: 380px; max-width: calc(100vw - 24px); max-height: 70vh;
  background: #fff; border: 1px solid #e2ddcf; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(31, 42, 56, 0.18);
  display: flex; flex-direction: column; overflow: hidden;
}
.bell-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #ede8db;
  font-weight: 600; font-size: 14px; background: #fbfaf6;
}
.bell-close { background: none; border: none; cursor: pointer; color: #8a8578; font-size: 14px; padding: 4px; }
.bell-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bell-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid #f2efe6;
  cursor: pointer;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: #fbfaf6; }
.bell-item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.bell-item-title { font-size: 13.5px; font-weight: 500; color: #242220; }
.bell-item-sub { font-size: 12px; color: #8a8578; margin-top: 2px; }
.bell-empty { padding: 28px 16px; text-align: center; color: #a39e8f; font-size: 13px; }

/* Всплывающие уведомления */
.toast-area {
  position: fixed; bottom: 20px; right: 20px; z-index: 70;
  display: flex; flex-direction: column; gap: 10px;
  max-width: calc(100vw - 24px); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: 10px; align-items: flex-start;
  width: 360px; max-width: 100%;
  background: #fff; border: 1px solid #e2ddcf; border-left: 4px solid #a6631a;
  border-radius: 9px; padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(31, 42, 56, 0.16);
  animation: toast-in .28s ease-out;
}
.toast.leaving { animation: toast-out .3s ease-in forwards; }
.toast.overdue { border-left-color: #9c2b1f; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13.5px; font-weight: 600; color: #242220; }
.toast-text { font-size: 12.5px; color: #5c584f; margin-top: 2px; }
.toast-close { background: none; border: none; cursor: pointer; color: #a39e8f; padding: 2px 4px; font-size: 13px; flex-shrink: 0; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(30px); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.leaving { animation: none; }
}

/* Уведомления на телефоне */
@media (max-width: 720px) {
  .bell-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-width: none;
                border-radius: 12px 12px 0 0; max-height: 75vh; }
  .toast-area { bottom: 12px; right: 12px; left: 12px; }
  .toast { width: 100%; }
  .bell-btn { flex: 0 0 auto !important; }
}

/* Объявление от владельца системы */
.announcement {
  background: #fdf6e3; border: 1px solid #e8d9a8; border-left: 4px solid #a6631a;
  color: #6b4a12; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap;
}

/* Ссылка-кнопка (например «Забыли пароль?») */
.link-btn {
  background: none; border: none; cursor: pointer;
  color: #2f4a6b; font-size: 13px; text-decoration: underline;
  padding: 8px 0; width: 100%; text-align: center;
}
.link-btn:hover { color: #1f2a38; }
.auth-form .recover-step { display: flex; flex-direction: column; gap: 12px; }

/* Поле выбора файла */
input[type="file"] { padding: 7px 9px; border: 1px solid #cfc9bb; border-radius: 6px; background: #fff; font-size: 13px; }

/* Пошаговая инструкция по шаблонам документов */
.doc-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f2efe6; font-size: 13.5px; line-height: 1.6; color: #3a362e; }
.doc-step:last-of-type { border-bottom: none; }
.doc-step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #2f4a6b; color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.doc-example {
  margin-top: 8px; padding: 10px 12px; background: #faf8f2;
  border: 1px solid #ede8db; border-radius: 6px; font-size: 12.5px; line-height: 1.7; color: #5c584f;
}
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.doc-table td { padding: 7px 8px; border-bottom: 1px solid #f2efe6; color: #5c584f; vertical-align: top; }
.doc-table td:first-child { width: 190px; white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: none; }
@media (max-width: 720px) {
  .doc-table td:first-child { width: auto; }
  .doc-table td { display: block; border-bottom: none; padding: 3px 0; }
  .doc-table tr { display: block; padding: 8px 0; border-bottom: 1px solid #f2efe6; }
}

/* Перевод показаний */
.tm-output {
  padding: 14px 16px; background: #fff; border: 1px solid #cfc9bb; border-radius: 8px;
  font-size: 14px; line-height: 1.75; color: #242220; white-space: pre-wrap; word-break: break-word;
  max-height: 60vh; overflow-y: auto; min-height: 120px;
}
/* Поле результата редактируется — показываем это как обычное поле ввода */
.tm-output:focus { outline: 2px solid #2f4a6b; outline-offset: 1px; }
.tm-output:hover { border-color: #a39e8f; }
mark.tm-warn { background: #ffeaa0; color: #6b4a00; padding: 1px 3px; border-radius: 3px; font-weight: 500; }
#tm-input { width: 100%; padding: 10px 12px; border: 1px solid #cfc9bb; border-radius: 6px; font-family: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }

/* Массовая загрузка из таблицы */
.imp-preview { max-height: 46vh; overflow: auto; border: 1px solid #ede8db; border-radius: 8px; background: #fff; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-table th {
  position: sticky; top: 0; background: #fbfaf6; text-align: left; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: #a39e8f; font-weight: 600;
  padding: 8px; border-bottom: 1px solid #ede8db; z-index: 1;
}
.imp-table td { padding: 7px 8px; border-bottom: 1px solid #f2efe6; color: #3a362e; vertical-align: middle; }
.imp-table tr:last-child td { border-bottom: none; }
.imp-table tr.imp-bad td { background: #fdf3f1; color: #8a5a52; }
.imp-note { font-size: 12px; color: #9c2b1f; }
@media (max-width: 720px) {
  .imp-table { font-size: 12px; }
  .imp-table td, .imp-table th { padding: 6px 5px; }
}

/* Настройка колонок — свёрнутый блок */
.imp-details { border: 1px solid #ede8db; border-radius: 8px; padding: 10px 12px; margin: 12px 0; background: #fbfaf6; }
.imp-details > summary { cursor: pointer; font-size: 13px; color: #2f4a6b; font-weight: 500; list-style: none; }
.imp-details > summary::-webkit-details-marker { display: none; }
.imp-details > summary::before { content: "▸ "; }
.imp-details[open] > summary::before { content: "▾ "; }

/* Массовое проставление значений */
.imp-bulk { border: 1px solid #ede8db; border-radius: 8px; padding: 12px; background: #faf8f2; margin-bottom: 4px; }
.imp-bulk input { padding: 7px 9px; border: 1px solid #cfc9bb; border-radius: 6px; font-size: 13px; }

/* Поля прямо в таблице предпросмотра */
.imp-cell { width: 100%; padding: 5px 7px; border: 1px solid #e2ddcf; border-radius: 5px; font-size: 12.5px; background: #fff; }
.imp-cell:focus { border-color: #2f4a6b; }
.imp-table tr.imp-bad .imp-cell { background: #f7f2f1; }
.imp-th-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: #bdb7a8; font-size: 10px; }
.imp-table input[type="date"].imp-cell { min-width: 128px; }

/* Область перетаскивания файла */
.imp-drop { border: 2px dashed #cfc9bb; border-radius: 8px; padding: 12px; background: #fbfaf6; transition: border-color .15s, background .15s; }
.imp-drop.dragover { border-color: #2f4a6b; background: #eaf0f7; }
.imp-drop input[type="file"] { width: 100%; border: none; background: transparent; padding: 0; }
.imp-drop-hint { font-size: 11.5px; color: #a39e8f; margin-top: 6px; text-align: center; }

/* Блок исправления данных записи */
.edit-details { border: 1px solid #ede8db; border-radius: 8px; padding: 10px 12px; margin-top: 16px; background: #fbfaf6; }
.edit-details > summary { cursor: pointer; font-size: 13px; color: #2f4a6b; font-weight: 500; list-style: none; }
.edit-details > summary::-webkit-details-marker { display: none; }
.edit-details > summary::before { content: "▸ "; }
.edit-details[open] > summary::before { content: "▾ "; }
.edit-details .grid4 { margin-top: 10px; }

/* Сводка в раскрытой карточке */
.record-info { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; margin-bottom: 14px;
               background: #fff; border: 1px solid #ede8db; border-radius: 8px; font-size: 12.5px; color: #5c584f; }
.record-info b { color: #242220; font-weight: 600; }
/* Строка с КУСП в свёрнутом списке */
.record-kusp { font-size: 11.5px; color: #a39e8f; margin-top: 2px; }

/* Удаление и добавление строк в таблице загрузки */
.imp-del { background: none; border: none; color: #c9a49e; cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 4px; }
.imp-del:hover { background: #fbeae7; color: #9c2b1f; }
.imp-add-row { padding: 10px; border-top: 1px solid #ede8db; background: #fbfaf6; text-align: center; }

/* ============================================================
   ОПРОС ПОЛЬЗОВАТЕЛЕЙ
   ============================================================ */
.poll-block {
  background: #fff; border: 1px solid #d8cfae; border-left: 4px solid #a6631a;
  border-radius: 10px; padding: 16px 18px; margin-top: 18px;
}
.poll-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.poll-badge {
  display: inline-block; background: #faf1e3; color: #8a5316;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; margin-bottom: 8px;
}
.poll-question { font-size: 15px; font-weight: 600; color: #242220; line-height: 1.4; }
.poll-desc { font-size: 12.5px; color: #8a8578; margin-top: 4px; line-height: 1.5; }
.poll-hide { background: none; border: none; cursor: pointer; color: #bdb7a8; font-size: 13px; padding: 4px 6px; flex-shrink: 0; }
.poll-hide:hover { color: #8a8578; }

.poll-options { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.poll-option {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid #e2ddcf; border-radius: 7px; cursor: pointer;
  font-size: 13.5px; color: #3a362e; background: #fbfaf6;
}
.poll-option:hover { border-color: #cfc9bb; background: #faf8f2; }
.poll-option input { margin: 0; flex-shrink: 0; }

#poll-comment { width: 100%; padding: 8px 10px; border: 1px solid #cfc9bb; border-radius: 6px; font-family: inherit; font-size: 13.5px; resize: vertical; }

.poll-results { margin-top: 12px; }
.poll-thanks { font-size: 13px; color: #2f6f4f; font-weight: 500; margin-bottom: 10px; }
.poll-result-row { display: grid; grid-template-columns: 1fr 120px 72px; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12.5px; color: #5c584f; }
.poll-result-label b { color: #a6631a; font-weight: 600; }
.poll-bar { height: 8px; background: #f2efe6; border-radius: 999px; overflow: hidden; }
.poll-bar-fill { height: 100%; background: #cfc9bb; border-radius: 999px; }
.poll-bar-fill.mine { background: #a6631a; }
.poll-result-num { text-align: right; color: #8a8578; font-size: 12px; }

@media (max-width: 720px) {
  .poll-block { padding: 14px; }
  .poll-result-row { grid-template-columns: 1fr; gap: 3px; margin-bottom: 12px; }
  .poll-result-num { text-align: left; }
}

/* Выбор способа перевода показаний */
.tm-engine-block { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tm-engine-option {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid #e2ddcf; border-radius: 7px; cursor: pointer;
  font-size: 13px; color: #3a362e; background: #fbfaf6;
}
.tm-engine-option:hover { border-color: #cfc9bb; }
.tm-engine-option input { margin-top: 2px; flex-shrink: 0; }
.tm-engine-option.hidden { display: none; }

/* ============================================================
   РАБОТА С ТЕКСТОМ — интерфейс в стиле чата
   ============================================================ */

.tm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-chip {
  background: #fff; border: 1px solid #d8d2c2; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: #5c584f; cursor: pointer;
}
.tm-chip:hover { border-color: #2f4a6b; color: #2f4a6b; background: #f4f7fa; }

.tm-composer {
  position: relative; background: #fff; border: 1px solid #cfc9bb; border-radius: 14px;
  padding: 14px 56px 14px 16px; box-shadow: 0 1px 3px rgba(31,42,56,.05);
}
.tm-composer:focus-within { border-color: #2f4a6b; box-shadow: 0 0 0 3px rgba(47,74,107,.10); }
.tm-composer textarea {
  width: 100%; border: none; outline: none; resize: vertical; font-family: inherit;
  font-size: 14.5px; line-height: 1.6; color: #242220; background: transparent;
  padding: 0; min-height: 100px;
}
.tm-composer textarea::placeholder { color: #a39e8f; }

.tm-send {
  position: absolute; right: 12px; bottom: 12px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #2f4a6b; color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.tm-send:hover { background: #1f2a38; }
.tm-send:active { transform: scale(.94); }
.tm-send:disabled { background: #cfc9bb; cursor: default; }

@media (max-width: 720px) {
  .tm-composer { padding: 12px 50px 12px 12px; border-radius: 12px; }
  .tm-composer textarea { min-height: 140px; font-size: 16px; }
  .tm-send { width: 36px; height: 36px; right: 10px; bottom: 10px; }
}

/* Переключатель провайдера (YandexGPT / GigaChat) в разделе «Работа с текстом» */
.tm-top-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-provider-block { display: flex; gap: 4px; background: #ede8db; border-radius: 999px; padding: 3px; }
.tm-provider-btn {
  background: none; border: none; border-radius: 999px; padding: 6px 13px;
  font-size: 12px; color: #8a8578; cursor: pointer; transition: background .15s, color .15s;
}
.tm-provider-btn.active { background: #fff; color: #2f4a6b; font-weight: 600; box-shadow: 0 1px 2px rgba(31,42,56,.08); }
.tm-provider-btn:hover:not(.active) { color: #5c584f; }

@media (max-width: 720px) {
  .tm-top-row { flex-direction: column; align-items: stretch; }
  .tm-provider-block { align-self: flex-start; }
}

/* ---------- Хронология следственных действий ---------- */
/* Панель выбора дела и добавления — одной строкой, без крупных панелей */
.tl-record-select {
  width: 100%; padding: 9px 11px; border: 1px solid #cfc9bb; border-radius: 8px;
  font-size: 14px; background: #fff; margin-bottom: 10px;
}
/* Полоса «нет связи». Тёплый предупреждающий тон, а не красный: это не
   поломка, а режим работы — приложение продолжает быть полезным */
.offline-bar {
  background: #faf1e3; border: 1px solid #f0d9b0; color: #8a5316;
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}

/* ---------- работа по делу: подвкладки, карточки, формы ---------- */

.case-subtabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin: 16px 0 14px;
}
.case-subtab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-size: 14px; font-family: inherit; color: var(--text-muted); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.case-subtab:hover { color: var(--text); }
.case-subtab.active { color: var(--ink-soft); border-bottom-color: var(--ink-soft); font-weight: 600; }

/* Счётчик показывает не «сколько всего», а сколько требует действия —
   поэтому он и окрашен тревожно, а при нуле просто исчезает */
.case-badge {
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-align: center;
  background: var(--surface-sunk); color: var(--text-faint);
}
.case-badge.danger { background: #fdf0ee; color: var(--danger); }

.case-add-btn {
  padding: 9px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: none; font-size: 13.5px; font-family: inherit; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.case-add-btn:hover { background: var(--surface-sunk); border-color: var(--ink-soft); }

.case-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 8px;
}
.case-card-main { flex: 1; min-width: 0; }
.case-card-title { font-size: 14px; font-weight: 500; color: var(--text); }
.case-card-meta { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; line-height: 1.5; }

.case-status {
  flex-shrink: 0; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.case-status.done { background: #eaf3ee; color: var(--success); }
.case-status.wait { background: var(--surface-sunk); color: var(--text-muted); }
.case-status.warn { background: #faf1e3; color: #8a5316; }
.case-status.danger { background: #fdf0ee; color: var(--danger); }

.case-edit, .case-delete {
  cursor: pointer; opacity: 0; padding: 0 4px; flex-shrink: 0; font-size: 13px;
}
.case-edit { color: var(--ink-soft); }
.case-delete { color: var(--danger); font-size: 12px; }
.case-card:hover .case-edit, .case-card:hover .case-delete { opacity: 1; }

/* Раскрытая форма — та же карточка, но развёрнутая по вертикали: правка
   идёт на месте записи, а не в отдельном окне */
.case-card-edit { display: block; background: #f4f7fb; }
.case-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
.case-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.case-field.wide { grid-column: span 2; }
.case-field input, .case-field select, .case-field textarea {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text);
}
.case-field textarea { resize: vertical; }
.case-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ---------- лица: раскрывающаяся карточка с допросами ---------- */

.case-card-toggle { cursor: pointer; }
.case-person { margin-bottom: 8px; }
.case-person > .case-card { margin-bottom: 0; }
/* Раскрытая карточка и её содержимое читаются как одно целое */
.case-person.open > .case-card {
  border-color: var(--ink-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.person-body {
  border: 1px solid var(--ink-soft); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--surface-sunk); padding: 12px 14px;
}

.tst-row { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin-bottom: 6px; }
.tst-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px;
}
.tst-title { flex: 1; min-width: 0; color: var(--text); }
.tst-date { color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
.tst-tag {
  flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #faf1e3; color: #8a5316;
}
/* Значки правки и удаления у допроса — те же, что у карточек, и так же
   появляются по наведению на свою строку */
.tst-head:hover .case-edit, .tst-head:hover .case-delete { opacity: 1; }
.tst-text {
  border-top: 1px solid var(--line); padding: 10px 12px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; max-height: 420px; overflow-y: auto; color: var(--text);
}
.tst-name { background: #dbe5f2; color: #2f4a6b; border-radius: 3px; padding: 0 2px; }
.tst-form { margin-top: 8px; margin-bottom: 0; }
.tst-form textarea { min-height: 160px; }
.tst-pd-bar { margin-top: 8px; flex-wrap: wrap; }
.tst-pd-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- анализ показаний ---------- */

.tst-analysis-box { margin-bottom: 14px; }
.tst-analysis-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tst-analysis-meta { font-size: 13px; color: var(--text-muted); }

.tst-analysis {
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 10px 14px;
}
.tst-analysis > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); padding: 2px 0; }
.tst-analysis[open] > summary { margin-bottom: 10px; }
.tst-stale {
  display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; background: #faf1e3; color: #8a5316;
}

.tst-item {
  border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 10px 12px; margin-bottom: 8px;
}
.tst-item.change { border-left-color: #a6631a; }
.tst-item.minor { border-left-color: var(--line-strong); }
.tst-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tst-item-topic { font-size: 13.5px; font-weight: 600; color: var(--text); }
.tst-quote {
  font-size: 13px; line-height: 1.55; color: var(--text);
  border-left: 2px solid var(--line-strong); padding-left: 9px; margin-bottom: 5px;
}
.tst-quote-who { color: var(--text-faint); }
/* Вопросы для очной ставки — отдельным блоком в конце анализа */
.tst-conf-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tst-conf-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tst-conf-note { font-size: 12px; color: var(--text-faint); margin: 3px 0 10px; }
.tst-conf {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px;
  background: #fbfcfe;
}
.tst-conf-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text); margin-bottom: 6px;
}
.tst-conf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tst-conf-group { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 8px 0 3px; }
.tst-conf-list { margin: 0; padding-left: 24px; font-size: 13px; line-height: 1.55; color: var(--text); }
.tst-conf-list li { margin-bottom: 3px; }

/* Статус человека в подписи к цитате — сразу видно, чьи это слова */
.tst-role { color: var(--ink-soft); font-weight: 600; }
.tst-date-note { font-size: 11.5px; color: #8a5316; min-height: 14px; }
/* Рамка фокуса у заголовков анализа — только для клавиатуры: после щелчка
   мышью браузер обводил заголовок синей рамкой, и это выглядело как ошибка */
.tst-analysis > summary:focus, .tst-minor > summary:focus { outline: none; }
.tst-analysis > summary:focus-visible, .tst-minor > summary:focus-visible {
  outline: 2px solid var(--ink-soft); outline-offset: 2px; border-radius: 4px;
}
.tst-suggestion {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  background: #eaf0f7; color: #2f4a6b; font-size: 13px; line-height: 1.5;
}
.tst-minor { margin: 4px 0 8px; }
.tst-minor > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.tst-foot { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

@media (max-width: 720px) {
  .tst-head .case-edit, .tst-head .case-delete { opacity: .6 !important; }
  .tst-analysis-bar .btn { width: 100%; }
}

@media (max-width: 720px) {
  .case-field.wide { grid-column: span 1; }
  .case-edit, .case-delete { opacity: .6 !important; }
  /* На узком экране описание занимает всю ширину строки, а статус и значки
     уходят под него. Без flex-basis описание просто сжималось в узкий
     столбец, и плашка статуса налезала на текст. */
  .case-card { flex-wrap: wrap; row-gap: 8px; }
  .case-card-main { flex: 1 1 100%; }
  .case-status { margin-right: auto; }
}

.tl-add-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #faf9f5; border: 1px solid #e2ddcf; border-radius: 10px; padding: 10px;
  margin-bottom: 14px;
}
.tl-add-bar input {
  padding: 7px 10px; border: 1px solid #cfc9bb; border-radius: 6px; font-size: 14px; background: #fff;
}
.tl-add-bar .tl-input-title { flex: 1; min-width: 200px; }
.tl-add-bar .btn { padding: 7px 16px; }

/* Компактная лента: день — строка-заголовок, события — плотные строки без
   отдельных панелей, чтобы на экран помещалось сразу несколько дней */
.tl-day { margin-bottom: 18px; }
.tl-day-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 0 6px;
  border-bottom: 2px solid #e2ddcf; margin-bottom: 4px;
}
.tl-day-date { font-weight: 700; font-size: 15px; color: #2b2b28; }
.tl-day-count {
  background: #eaf0f7; color: #2f4a6b; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 1px 8px;
}
.tl-event {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 8px;
  border-radius: 6px; font-size: 14px; line-height: 1.4;
}
.tl-event:nth-child(odd) { background: #faf9f5; }
.tl-event.conflict { background: #fdf0ee; }
.tl-time {
  font-weight: 600; color: #2f4a6b; flex-shrink: 0;
  font-variant-numeric: tabular-nums; min-width: 92px;
}
.tl-event.conflict .tl-time { color: #9c2b1f; }
.tl-title { flex: 1; min-width: 0; }
.tl-delete { color: #9c2b1f; cursor: pointer; opacity: 0; padding: 0 4px; flex-shrink: 0; font-size: 12px; }
.tl-event:hover .tl-delete { opacity: 1; }
.tl-edit { color: #2f4a6b; cursor: pointer; opacity: 0; padding: 0 4px; flex-shrink: 0; font-size: 13px; }
.tl-event:hover .tl-edit { opacity: 1; }

/* Строка правки встаёт на место самой записи, поэтому выравнивание по
   центру, а не по базовой линии: иначе поля и кнопки разъезжаются */
.tl-event-edit {
  align-items: center; flex-wrap: wrap; gap: 8px;
  background: #f4f7fb !important; padding: 8px;
}
.tl-event-edit input {
  padding: 6px 9px; border: 1px solid #cfc9bb; border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.tl-event-edit .tl-edit-title { flex: 1; min-width: 200px; }
.tl-conflict-warn {
  margin-left: auto; font-size: 12px; font-weight: 600; color: #9c2b1f;
  background: #fdf0ee; border-radius: 999px; padding: 2px 10px;
}
.tl-free { margin: 5px 0 0 8px; font-size: 12px; color: #2f6f4f; }

@media (max-width: 640px) {
  .tl-time { min-width: 0; }
  .tl-event { flex-wrap: wrap; gap: 6px; }
}

/* ---------- Предпросмотр документа Word ---------- */
.ai-chat-bubble-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.docx-preview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.docx-preview-modal {
  background: #f7f5ef; border-radius: 12px; max-width: 820px; width: 100%;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.docx-preview-head {
  display: flex; gap: 12px; align-items: flex-end; padding: 14px 18px;
  border-bottom: 1px solid #e2ddcf; background: #fff;
}
.docx-preview-head label { font-size: 13px; color: #5c584f; display: flex; flex-direction: column; gap: 4px; }
.docx-preview-head input {
  padding: 7px 10px; border: 1px solid #cfc9bb; border-radius: 6px; font-size: 14px; width: 100%;
}
.docx-preview-page {
  flex: 1; overflow-y: auto; background: #fff; margin: 18px; padding: 40px 50px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  font-family: "Times New Roman", Georgia, serif; font-size: 15px; line-height: 1.7; color: #111;
}
.docx-preview-header { text-align: right; margin-bottom: 24px; white-space: pre-line; }
.docx-preview-title { text-align: center; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; }
.docx-preview-body { white-space: pre-wrap; text-align: justify; }
.docx-preview-foot {
  padding: 14px 18px; border-top: 1px solid #e2ddcf; background: #fff; display: flex; justify-content: flex-end;
}

/* Недоступные модели в списке — приглушены, с замком в подписи */
#ai-chat-model option:disabled { color: #a39e8f; }

/* Таблицы в админ-панели (расходы на ИИ) */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 6px 10px; border-bottom: 2px solid #e2ddcf;
  color: #5c584f; font-weight: 600;
}
.admin-table td { padding: 6px 10px; border-bottom: 1px solid #f0ece2; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td:not(:first-child), .admin-table th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ============================================================
   ФИРМЕННЫЕ ВЫПАДАЮЩИЕ СПИСКИ
   Системный <select> выглядит по-разному в каждой ОС и не поддаётся
   оформлению. Здесь свой: тот же <select> остаётся в разметке как
   источник данных и для доступности, но визуально скрыт — работает
   собственное меню с плавным раскрытием и подсветкой выбранного.
   ============================================================ */
.fs-select { position: relative; display: inline-block; }
.fs-select select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.fs-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  font-family: inherit; white-space: nowrap;
}
.fs-trigger:hover { border-color: var(--ink-soft); }
.fs-trigger[aria-expanded="true"] { border-color: var(--ink-soft); background: #f4f7fb; }
.fs-trigger-caret {
  width: 8px; height: 8px; border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint); transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base) var(--ease); flex-shrink: 0;
}
.fs-trigger[aria-expanded="true"] .fs-trigger-caret { transform: rotate(-135deg) translateY(-2px); }

.fs-menu {
  position: absolute; z-index: 200; min-width: 100%; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 5px; overflow: hidden;
  /* Раскрытие: короткое движение вверх с проявлением — показывает,
     что меню «вышло» из кнопки, а не появилось ниоткуда */
  animation: fs-menu-in var(--t-base) var(--ease);
  max-height: 320px; overflow-y: auto;
}
@keyframes fs-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fs-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; color: var(--text);
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.fs-option:hover { background: var(--surface-sunk); }
.fs-option[aria-selected="true"] { background: #eaf0f7; color: var(--ink-soft); font-weight: 600; }
.fs-option[aria-disabled="true"] { color: var(--text-faint); cursor: not-allowed; opacity: .65; }
.fs-option[aria-disabled="true"]:hover { background: transparent; }
.fs-option-check { width: 14px; flex-shrink: 0; color: var(--ink-soft); }

/* ============================================================
   ДВИЖЕНИЕ И ОТКЛИК
   Анимации отвечают на действие человека и показывают, что изменилось.
   Ничего не двигается само по себе без причины.
   ============================================================ */

/* Появление содержимого вкладки — короткое, чтобы не задерживать работу */
.tab-enter { animation: tab-in var(--t-base) var(--ease); }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Кнопки: заметный отклик на нажатие — палец/курсор чувствует контакт */
.btn, .ws-tab, .tm-provider-btn, .auth-tab, .link-btn {
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active, .ws-tab:active, .tm-provider-btn:active { transform: translateY(1px); }

/* Поля ввода: мягкое кольцо фокуса вместо резкой рамки */
input, select, textarea {
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, textarea:focus {
  border-color: var(--ink-soft) !important;
  box-shadow: 0 0 0 3px rgba(47, 74, 107, .12);
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; }
button:focus-visible, .fs-trigger:focus-visible {
  outline: 2px solid var(--ink-soft); outline-offset: 2px;
}

/* Вкладки: подчёркивание выезжает под активной, а не появляется скачком */
.ws-tab { position: relative; }
.ws-tab::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--ink-soft); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-base) var(--ease);
}
.ws-tab.active::after { transform: scaleX(1); }

/* Модальные окна: появляются с лёгким приближением — видно, что окно
   «пришло» поверх страницы */
.docx-preview-overlay { animation: overlay-in var(--t-base) var(--ease); }
.docx-preview-modal {
  animation: modal-in var(--t-base) var(--ease);
  box-shadow: var(--shadow-modal);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Строки списков: подсветка при наведении — показывает, что строка живая */
.record-card, .tl-event, .ai-chat-list-item, .org-row {
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

/* Редактируемое тело документа в предпросмотре */
.docx-preview-body[contenteditable="true"] { outline: none; min-height: 200px; }
.docx-preview-body[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px rgba(47,74,107,.12); border-radius: 4px;
}
.docx-preview-foot { justify-content: space-between !important; align-items: center; }
.docx-hint { font-size: 12px; color: var(--text-faint); }

/* ---------- Вложения к сообщениям чата ---------- */
#ai-chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-attach-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; color: var(--text-muted);
  animation: fs-menu-in var(--t-base) var(--ease);
}
.ai-attach-warn { color: #a6631a; font-size: 11px; }
.ai-attach-remove { cursor: pointer; color: var(--danger); opacity: .6; }
.ai-attach-remove:hover { opacity: 1; }

/* ---------- Живое мышление ИИ ----------
   Короткие законченные мысли по ходу генерации — видно, в правильную ли
   сторону идут рассуждения, ещё до появления самого ответа */
.ai-think-live { margin-bottom: 8px; }
.ai-think-step {
  font-size: 12.5px; line-height: 1.55; color: var(--text-faint);
  padding: 4px 0 4px 16px; position: relative;
  /* Появление медленнее обычного: мысль должна «проступить», а не мелькнуть */
  animation: think-in 420ms var(--ease);
  transition: color var(--t-base) var(--ease);
}
.ai-think-step::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong);
}
.ai-think-step.current { color: var(--text-muted); }
.ai-think-step.current::before { background: var(--ink-soft); }
@keyframes think-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}


/* ============================================================
   ЧАТ С ИИ — переработанный облик
   Рабочее пространство, а не форма: боковая панель уходит в тень,
   диалог выходит вперёд, сообщения читаются как переписка.
   ============================================================ */

.ai-chat-layout { gap: 18px; }

/* Боковая панель — приглушённая, чтобы не спорить с диалогом */
.ai-chat-sidebar {
  background: var(--surface-sunk) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px !important;
}
.ai-chat-list-item {
  border-radius: var(--r-md) !important;
  border-left: 2px solid transparent !important;
  padding: 9px 10px !important;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.ai-chat-list-item:hover { background: var(--surface) !important; transform: translateX(2px); }
.ai-chat-list-item.active {
  background: var(--surface) !important;
  border-left-color: var(--ink-soft) !important;
  box-shadow: 0 1px 3px rgba(31,42,56,.06);
}

/* Область диалога — «лист», на котором идёт переписка */
.ai-chat-messages {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px !important;
  scroll-behavior: smooth;
}

/* Сообщения: свои — плотный синий, ответы — светлые, с мягким появлением */
.ai-chat-bubble-wrap { animation: msg-in var(--t-base) var(--ease); }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ai-chat-bubble {
  border-radius: 16px !important;
  line-height: 1.62 !important;
  transition: box-shadow var(--t-base) var(--ease);
}
.ai-chat-bubble.user {
  background: var(--ink) !important;
  border-bottom-right-radius: 5px !important;
  box-shadow: 0 2px 8px rgba(31,42,56,.14);
}
.ai-chat-bubble.assistant {
  background: var(--surface-sunk) !important;
  border: 1px solid var(--line) !important;
  border-bottom-left-radius: 5px !important;
}

/* Панель настроек — компактный ряд, а не набор разнородных элементов */
.ai-chat-case-bar {
  gap: 8px !important;
  padding: 7px 12px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Поле ввода — приподнято над страницей, реагирует на фокус */
.ai-chat-input-inner {
  border-radius: 18px !important;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.ai-chat-input-inner:focus-within {
  border-color: var(--ink-soft) !important;
  box-shadow: 0 0 0 3px rgba(47,74,107,.10), 0 2px 10px rgba(31,42,56,.06) !important;
}

/* Кнопки действий под ответом — появляются при наведении на сообщение */
.ai-chat-bubble-actions { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.ai-chat-bubble-wrap:hover .ai-chat-bubble-actions { opacity: 1; }
.ai-chat-copy-btn {
  border-radius: var(--r-sm) !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ai-chat-copy-btn:hover { background: var(--surface-sunk) !important; color: var(--ink-soft) !important; }

/* Пузырь ожидания — «дышит», чтобы было видно, что работа идёт */
.ai-chat-bubble.pending { animation: pending-pulse 2.4s ease-in-out infinite; }
@keyframes pending-pulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

/* Быстрые действия — частые запросы одним нажатием, только в пустом чате */
.ai-quick-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-quick-bar.hidden { display: none; }
.ai-quick-btn {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ai-quick-btn:hover {
  border-color: var(--ink-soft); color: var(--ink-soft);
  background: #f4f7fb; transform: translateY(-1px);
}
.ai-quick-btn:active { transform: translateY(0); }

.ai-quick-bar { margin-bottom: 10px; }

/* Точка у текущей мысли мягко пульсирует — видно, что работа идёт */
.ai-think-step.current::before { animation: think-dot 1.8s ease-in-out infinite; }
@keyframes think-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .6; }
}

/* Убираем внутреннюю рамку у поля чата — светится только внешний контейнер */
.ai-chat-input-inner textarea:focus { box-shadow: none !important; border: none !important; }

/* Файлы, закреплённые за чатом */
#ai-chat-files { margin-bottom: 8px; }
.ai-files-head {
  font-size: 11.5px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 5px;
}
.ai-attach-chip.saved { background: #eef3f9; border-color: #cfdcea; color: var(--ink-soft); }

/* Состояния загрузки файла: в работе и с ошибкой */
.ai-attach-chip.loading { color: var(--text-faint); }
.ai-attach-spin {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line-strong); border-top-color: var(--ink-soft);
  animation: attach-spin .7s linear infinite;
}
@keyframes attach-spin { to { transform: rotate(360deg); } }

.ai-attach-chip.failed {
  background: #fdf0ee; border-color: #e5b4ad; color: #7a2117;
}
.ai-attach-retry {
  cursor: pointer; color: var(--ink-soft); font-weight: 600; font-size: 11.5px;
  padding: 0 4px; border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.ai-attach-retry:hover { background: rgba(47,74,107,.10); }

/* Миниатюры приложенных изображений — видно, что именно ушло в обработку */
.ai-file-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ai-file-thumb {
  position: relative; display: inline-block; width: 72px; height: 72px;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-sunk); flex-shrink: 0;
  animation: fs-menu-in var(--t-base) var(--ease);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ai-file-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.ai-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-file-thumb .ai-attach-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border-radius: 50%; font-size: 11px;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.ai-file-thumb:hover .ai-attach-remove { opacity: 1; }

/* Изображения внутри сообщения — видно, к какому вопросу они относятся */
.ai-msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-msg-images img {
  max-width: 220px; max-height: 220px; border-radius: var(--r-md);
  display: block; cursor: zoom-in; border: 1px solid rgba(255,255,255,.15);
  transition: transform var(--t-fast) var(--ease);
}
.ai-msg-images img:hover { transform: scale(1.02); }
.ai-chat-bubble.assistant .ai-msg-images img { border-color: var(--line); }

/* Файлы чата — свёрнутая строка вместо развёрнутого списка */
.ai-files-toggle {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--text-faint); padding: 2px 0;
  transition: color var(--t-fast) var(--ease);
}
.ai-files-toggle:hover { color: var(--ink-soft); }
.ai-files-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  animation: fs-menu-in var(--t-base) var(--ease);
}

/* Скрепка внутри поля ввода. Выровнена по нижнему краю на одной линии
   с кнопкой отправки — поле растёт вверх, а кнопки остаются на месте.
   Слева освобождено место через padding самого поля. */
.ai-attach-btn {
  /* Привязана к ВЕРХУ поля, а не к низу: подсказка и первая строка текста
     идут сверху, поэтому скрепка должна стоять с ними на одной линии.
     При отступе поля 10px и высоте кнопки 32px центр совпадает с первой строкой. */
  position: absolute; left: 8px; top: 6px;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--text-faint);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ai-attach-btn:hover { color: var(--ink-soft); background: var(--surface-sunk); }
.ai-attach-btn:active { transform: scale(.94); }
.ai-attach-btn svg { display: block; }

/* Скрепка переехала ВНИЗ поля и встала на одну линию с кнопкой отправки.
   Причина: миниатюры вложений теперь занимают верх поля, и на прежнем месте
   (top: 6px) кнопка налезала бы прямо на них. Заодно снизу освобождена
   полоса под обе кнопки, поэтому левый отступ текста больше не нужен. */
/* Скрепка, настройки чата и кнопка отправки стоят одной строкой в нижней
   полосе поля ввода. Раньше скрепка и кнопка отправки висели абсолютно по
   краям, а под них резервировалась пустая полоса в 52px — теперь эта полоса
   занята делом, и настройкам не нужна отдельная строка над полем. */
.ai-chat-input-inner { padding: 10px 12px !important; }
.ai-chat-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.ai-chat-tools .ai-attach-btn {
  position: static !important; top: auto !important; bottom: auto; left: auto;
  flex-shrink: 0;
}
/* Кнопка отправки прижата к правому краю строки настроек */
.ai-chat-tools .tm-send { position: static; margin-left: auto; flex-shrink: 0; }
/* Список режима поиска раскрывается ВВЕРХ: строка стоит у самого низа окна,
   вниз меню ушло бы за край экрана (у выбора модели так было изначально) */
.ai-chat-tools .fs-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; }

/* ---------- миниатюры вложений внутри поля ввода ----------
   :not(:empty) — чтобы пустой контейнер не давал отступ и полоску,
   когда ничего не приложено */
#ai-chat-attachments:not(:empty) {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 9px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
/* Миниатюры крупные: на маленьких было не разобрать, тот ли снимок
   приложен, а перепутать протокол с постановлением легко.
   На телефоне чуть меньше — там поле ввода само по себе узкое */
#ai-chat-attachments .ai-file-thumb { width: 78px; height: 78px; }
#ai-chat-attachments .ai-attach-chip { max-width: 100%; }

/* ---------- виджет «Файлы чата» ----------
   Панель раскрывается вверх — кнопка стоит над полем ввода, у нижнего
   края экрана, и вниз списку места не хватило бы */
.files-widget { position: relative; display: inline-block; }
.files-widget-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-family: inherit; color: var(--ink-soft); background: #fff;
  cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.files-widget-btn:hover { background: var(--surface-sunk); }
.files-widget-btn[aria-expanded="true"] { border-color: var(--ink-soft); }
.files-widget-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #2f4a6b; color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.files-widget-panel {
  position: absolute; bottom: 100%; left: 0; z-index: 30;
  min-width: 300px; max-width: 420px; max-height: 320px; overflow-y: auto;
  margin-bottom: 6px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31,42,56,.14);
}
.files-widget-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 6px; border-radius: 8px; font-size: 13px;
  transition: background var(--t-fast) var(--ease);
}
.files-widget-row:hover { background: var(--surface-sunk); }
.files-widget-row img {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 6px; object-fit: cover; border: 1px solid var(--line);
}
.files-widget-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
/* Длинные имена файлов обрезаем, а не переносим: иначе строка растёт
   на три ряда и список перестаёт читаться */
.files-widget-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-widget-del {
  flex-shrink: 0; width: 22px; height: 22px; border: none; background: none;
  color: var(--text-faint); font-size: 13px; cursor: pointer; border-radius: 50%;
}
.files-widget-del:hover { background: rgba(180,60,60,.10); color: #b43c3c; }
.files-widget-hint { padding: 4px 6px 8px; font-size: 11px; color: var(--text-faint); }

/* ---------- остаток запросов к ИИ ----------
   Обычно приглушённый, чтобы не мозолил глаза. Цвет набирает только когда
   запросов осталось мало — тогда на него и надо посмотреть */
.ai-limit-counter {
  font-size: 12px; color: var(--text-faint); white-space: nowrap;
  padding: 4px 0; cursor: default;
}
.ai-limit-counter.low { color: #8a5316; font-weight: 600; }
.ai-limit-counter.out { color: #b43c3c; font-weight: 600; }

@media (max-width: 720px) {
  #ai-chat-attachments .ai-file-thumb { width: 64px; height: 64px; }
  .ai-chat-input-inner { padding: 10px 12px !important; }
  .files-widget-panel { min-width: 0; width: min(340px, 78vw); }
  /* На телефоне настройки в строку не помещаются — переносятся, но скрепка
     и кнопка отправки должны остаться на одной линии друг с другом */
  .ai-chat-tools .model-picker, .ai-chat-tools .ai-chat-case-select,
  .ai-chat-tools .fs-select, .ai-chat-tools .fs-trigger { width: auto; }
}

/* ---------- Стража ---------- */
.custody-form {
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px; margin: 10px 0;
}
.custody-box {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-md);
  border-left: 3px solid var(--line-strong); background: var(--surface-sunk);
  font-size: 13px; line-height: 1.55;
}
.custody-box.soon { border-left-color: #a6631a; background: #fdf6ec; }
.custody-box.urgent { border-left-color: var(--danger); background: #fdf0ee; }
.custody-box.overdue { border-left-color: var(--danger); background: #fbe4e0; }
.custody-title { font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.custody-row { color: var(--text-muted); }
.custody-hint {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-faint);
}

/* ---------- Оценка ответов ИИ ---------- */
.ai-rate { display: inline-flex; gap: 2px; margin-left: 4px; }
.ai-rate-btn {
  background: none; border: none; cursor: pointer; font-size: 14px;
  padding: 3px 6px; border-radius: var(--r-sm); opacity: .45;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ai-rate-btn:hover { opacity: 1; background: var(--surface-sunk); }
.ai-rate-btn.chosen { opacity: 1; background: #eaf0f7; }
.ai-rate.rated .ai-rate-btn:not(.chosen) { opacity: .2; pointer-events: none; }

/* Разбор оценок в админ-панели */
.fb-item {
  border: 1px solid var(--line); border-left: 3px solid var(--danger);
  border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; background: var(--surface);
}
.fb-item.reviewed { border-left-color: var(--line-strong); opacity: .6; }
.fb-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-faint); margin-bottom: 8px;
}
.fb-head .btn { padding: 4px 10px; font-size: 12px; }
.fb-done { color: var(--success); font-weight: 600; }
.fb-comment {
  background: #fdf6ec; border-radius: var(--r-sm); padding: 7px 10px;
  font-size: 13px; margin-bottom: 10px; color: #7a5320;
}
.fb-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: 3px;
}
.fb-text {
  font-size: 13px; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap;
  color: var(--text);
}
.fb-answer {
  max-height: 200px; overflow-y: auto; background: var(--surface-sunk);
  padding: 8px 10px; border-radius: var(--r-sm);
}
.fb-meta {
  font-size: 12px; color: var(--text-muted); padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* Стражные дела в реестре — заметно выделены: сроки жёстче, цена ошибки выше */
.record-card.custody {
  background: linear-gradient(to right, #fdf6f4 0%, var(--surface) 220px);
  box-shadow: inset 3px 0 0 rgba(156, 43, 31, .35);
}
/* Стража бывает только по делу в отношении лица, поэтому красноватая
   подсветка переходит не в белый, а в синий фон дел с лицом */
.record-card.custody.person {
  background: linear-gradient(to right, #fdf6f4 0%, #edf2f9 220px);
}
.record-card.custody::before {
  content: "🔒"; position: absolute; top: 10px; right: 12px;
  font-size: 13px; opacity: .5;
}
.record-card { position: relative; }

/* Форма стражи — три поля в ряд, не выходит за рамки */
.custody-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px;
}
.custody-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.custody-grid input {
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 14px; width: 100%; box-sizing: border-box;
}
.field-hint { font-size: 11px; color: var(--text-faint); }
.cd-over { color: var(--danger); }
@media (max-width: 720px) { .custody-grid { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  /* Кнопки шапки прокручиваются в ряд, а не переносятся на три строки */
  .user-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
  }
  .user-row::-webkit-scrollbar { display: none; }
  .user-row .btn { flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; }

  /* Хронология: время и название в две строки, чтобы не сжималось */
  .tl-event { align-items: flex-start; }
  .tl-time { min-width: auto; font-size: 13px; }

  /* Окно документа — почти во весь экран, поля меньше */
  .docx-preview-overlay { padding: 8px; }
  .docx-preview-page { margin: 10px; padding: 20px 18px; font-size: 14px; }
  .docx-preview-head { flex-wrap: wrap; gap: 8px; }

  /* Поле ввода не должно прыгать при появлении клавиатуры */
  .ai-chat-input-inner textarea { font-size: 16px; }
}

/* Правка дат стражи прямо в карточке — даты меняются часто (апелляция,
   изменение меры), и ради этого не должно открываться отдельное окно */
.custody-edit {
  margin-top: 8px; background: none; border: none; padding: 0;
  font-size: 12px; color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; font-family: inherit;
}
.custody-edit:hover { color: var(--ink); }
.custody-editor {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;
  animation: fs-menu-in var(--t-base) var(--ease);
}
.custody-editor label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.custody-editor input {
  padding: 6px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 13px; width: 100%; box-sizing: border-box;
}
.custody-editor-actions {
  grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.custody-editor-actions .btn { padding: 6px 14px; font-size: 12.5px; }
.custody-release { color: var(--danger) !important; }
@media (max-width: 720px) { .custody-editor { grid-template-columns: 1fr; } }

/* ============================================================
   Публичная страница (витрина)
   ============================================================
   Живёт на том же адресе, что и приложение. Показывается тем, кто ещё
   ни разу не входил на этом устройстве; экран входа открывается кнопкой. */
.landing {
  min-height: 100vh; background: var(--surface);
  color: var(--ink); overflow-y: auto;
}
.landing-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1040px; margin: 0 auto; padding: 18px 20px;
}
.landing-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.landing-brand img { border-radius: 7px; }
.landing-login {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.landing-login:hover { background: var(--surface-sunk); }

.landing-hero { max-width: 780px; margin: 0 auto; padding: 30px 20px 10px; text-align: center; }
.landing-hero h1 {
  font-size: clamp(26px, 5vw, 40px); line-height: 1.18; margin: 0 0 16px; letter-spacing: -.02em;
}
.landing-sub { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 auto 26px; max-width: 620px; }
.landing-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.landing-cta {
  padding: 13px 26px; border: none; border-radius: 999px;
  background: #2f4a6b; color: #fff; font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.landing-cta:hover { opacity: .92; transform: translateY(-1px); }
.landing-cta.ghost { background: #fff; color: #2f4a6b; border: 1px solid var(--line); }

/* Пример карточек реестра: показать нагляднее, чем объяснить словами */
.landing-demo {
  max-width: 440px; margin: 34px auto 0; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(31,42,56,.07); text-align: left;
}
.landing-demo-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 10px; }
.landing-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 9px; margin-bottom: 7px;
  font-size: 13px; border-left: 3px solid var(--line); background: var(--surface-sunk);
}
.landing-card:last-child { margin-bottom: 0; }
.landing-card span { color: var(--ink-soft); white-space: nowrap; font-size: 12px; }
.landing-card.overdue { border-left-color: #b43c3c; }
.landing-card.overdue span { color: #b43c3c; font-weight: 600; }
.landing-card.soon { border-left-color: #d99a1e; }
.landing-card.soon span { color: #8a5316; font-weight: 600; }
.landing-card.today { border-left-color: #2f4a6b; }
.landing-card.today span { color: #2f4a6b; font-weight: 600; }
.landing-card.ok { border-left-color: #2f6f4f; }

.landing-features, .landing-honest { max-width: 1040px; margin: 0 auto; padding: 46px 20px 0; }
.landing-features h2, .landing-honest h2 { font-size: 22px; margin: 0 0 20px; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.landing-feature {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.landing-feature b { font-size: 15px; }
.landing-feature span { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* Блок честных оговорок. Стоит ДО регистрации осознанно: узнать об
   ограничениях лучше сразу, чем после ввода данных по делу */
.landing-honest ul { margin: 0; padding-left: 20px; }
.landing-honest li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 9px; }

.landing-foot {
  max-width: 1040px; margin: 50px auto 0; padding: 20px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--text-faint);
}

@media (max-width: 720px) {
  .landing-hero { padding-top: 16px; }
  .landing-actions { flex-direction: column; }
  .landing-cta { width: 100%; }
  .landing-features, .landing-honest { padding-top: 34px; }
}

/* ---------- админ-панель: пульс активности и здоровье уведомлений ---------- */
.pulse-wrap { margin-top: 16px; }
.pulse-title { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.pulse-title span { color: var(--ink-soft); }
/* Столбики выровнены по низу: так провалы читаются как провалы,
   а не как смещение всего ряда */
.pulse {
  display: flex; align-items: flex-end; gap: 3px;
  height: 72px; padding: 8px 10px;
  background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pulse-bar {
  flex: 1; min-width: 0; border-radius: 2px 2px 0 0;
  background: #2f4a6b; transition: background var(--t-fast) var(--ease);
  cursor: help;
}
.pulse-bar:hover { background: #1f3550; }
.pulse-bar.weekend { background: #7d93ad; }
/* Дни без единого действия — еле заметная риска, но она есть:
   пустое место было бы неотличимо от «данных нет» */
.pulse-bar.empty { background: #d8d3c6; }

.push-warn {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(180,60,60,.08); color: #9c2b1f; font-size: 13px; line-height: 1.5;
}
.push-ok {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(47,111,79,.09); color: #2f6f4f; font-size: 13px; font-weight: 600;
}

/* ---------- подписи под графиком активности ---------- */
.pulse-axis {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 11px; color: var(--text-faint);
}
.pulse-axis span:nth-child(2) { color: var(--ink-soft); font-weight: 600; }
.pulse-total { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

/* ---------- свёрнутый разбор оценок ---------- */
.fb-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.fb-item.reviewed { opacity: .72; }
.fb-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; cursor: pointer; font-size: 13px; list-style: none;
  border-radius: 10px;
}
.fb-summary::-webkit-details-marker { display: none; }
.fb-summary:hover { background: var(--surface-sunk); }
.fb-who { font-weight: 600; }
.fb-when { color: var(--text-faint); font-size: 12px; }
/* Начало вопроса или комментария прямо в свёрнутой строке: по нему видно,
   стоит ли раскрывать, без щелчка по каждой записи */
.fb-preview { flex: 1; min-width: 120px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-new {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  background: rgba(166,99,26,.14); color: #a6631a; font-size: 11px; font-weight: 600;
}
.fb-body { padding: 0 12px 12px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 10px; }

/* ---------- предупреждение о персональных данных ----------
   Стоит внутри поля ввода, над строкой набора: решение принимается ровно
   там, где человек собирается отправить текст */
.pd-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px; padding: 11px 13px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px;
}
.pd-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.pd-text b { color: var(--ink); font-weight: 600; }
.pd-text span { color: var(--text-faint); font-size: 12px; line-height: 1.4; }
.pd-bar .btn { flex-shrink: 0; }

@media (max-width: 720px) {
  /* На узком экране кнопки во всю ширину: попасть в мелкую кнопку
     рядом с текстом пальцем тяжело */
  .pd-bar { flex-direction: column; align-items: stretch; }
  .pd-bar .btn { width: 100%; }
}

/* Кнопка отправки, пока не сделан выбор по персональным данным.
   Именно приглушённая, а не отключённая: отключённая кнопка не показывает
   подсказку при наведении, и человек не поймёт, почему ничего не происходит.
   Сама отправка останавливается в обработчике — в том числе при отправке
   с клавиатуры, минуя кнопку. */
.tm-send.pd-blocked, #btn-ai-chat-send.pd-blocked {
  opacity: .45;
  cursor: not-allowed;
}
.tm-send.pd-blocked:hover, #btn-ai-chat-send.pd-blocked:hover {
  opacity: .55;
  transform: none;
}