/* ============================================================
   Панель поддержки TOS CONNECT — ядро интерфейса

   Написано заново вместо наслоений, накопившихся за время работы.
   Здесь живут каркас, типографика и общие детали: карточки, кнопки,
   формы, таблицы, метрики. Узкие блоки отдельных страниц —
   в legacy.css, он подключается перед этим файлом.

   Правила ядра:
   • одна мера отступа — шаг 4px;
   • пять размеров текста, база 14px;
   • три скругления;
   • один акцент — оранжевый, только для действий;
   • граница вместо тени: в тёмной теме тень не читается;
   • никакого !important — специфичность держим низкой и ровной.
   ============================================================ */

:root {
  /* Поверхности: страница → карточка → вложенный элемент */
  --bg: var(--c-bg);
  --surface: var(--c-nav-bg);
  --surface-2: var(--c-surface);
  --line: var(--c-line);
  --line-strong: var(--c-line-2);

  /* Текст: основной, второстепенный, служебный */
  --text: var(--c-ink);
  --text-dim: var(--c-ink-3);
  /* 5,1 к 1 на карточке. Прежний var(--c-ink-4) давал 3,89 — этого хватает
     крупному тексту, а им набраны 12-пиксельные подсказки. */
  --text-faint: var(--c-ink-3);

  /* Один акцент на всю панель */
  --accent: var(--c-teal);
  --accent-soft: color-mix(in srgb, var(--c-teal) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--c-teal) 40%, transparent);

  /* Состояния */
  --ok: var(--c-green);
  --warn: var(--c-warn);
  --danger: var(--c-coral);
  --ok-soft: color-mix(in srgb, var(--c-green) 12%, transparent);
  --warn-soft: color-mix(in srgb, var(--c-warn) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--c-coral) 12%, transparent);

  /* Ритм */
  /* Отступы в rem: они считаются от размера шрифта, который человек
     задаёт в браузере или в системе. В пикселях панель оставалась
     прежней, сколько бы он ни увеличил шрифт. */
  --s1: .25rem; --s2: .5rem; --s3: .625rem;
  --s4: .875rem; --s5: 1.125rem; --s6: 1.5rem;

  /* Скругления */
  --r-sm: 8px; --r-md: 12px; --r-pill: 999px;

  /* Текст */
  /* Шкала размеров. Шаг между ступенями — не меньше двух пикселей:
     разницу в один глаз не замечает, и иерархия пропадает.
       page — заголовок страницы
       head — заголовок карточки
       base — основной текст и ячейки таблиц
       sub  — вторичное: подписи полей, второстепенные строки
       note — служебное: время, единицы, подписи под цифрами */
  --t-page: 1.625rem; --t-head: 1.25rem; --t-base: 1rem;
  --t-sub: .875rem; --t-note: .75rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Ширина меню тоже в rem: при крупном шрифте пункты иначе
     не помещаются в колонку. */
  --sidebar-w: 14rem;
  --sidebar-w-collapsed: 4rem;   /* только иконки: кнопка .sidebar-toggle из base.html */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* Клавиатура должна быть видна всегда */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Каркас: боковое меню + рабочая область
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.topbar {
  grid-row: 1 / -1;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  font-weight: 600;
  font-size: var(--t-base);
}

.brand-logo { width: 26px; height: 26px; border-radius: var(--r-sm); flex: 0 0 26px; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s2); }

/* Заголовок группы: тише основного текста, обычным регистром.
   Капс читается медленнее и выдаёт шаблонную панель. */
.nav-group {
  padding: var(--s4) var(--s3) var(--s1);
  font-size: var(--t-note);
  color: var(--text-faint);
  letter-spacing: 0;
}
.nav-group:first-child { padding-top: 0; }

.nav a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--t-sub);
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }

/* Активный пункт: полоска слева — заметно и не кричит цветом фона */
.nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Иконка и подпись пункта. В свёрнутом меню (класс .sidebar-collapsed на .app,
   ставит кнопка из base.html) остаются только иконки, подпись — подсказкой
   справа по наведению; на телефоне (< 900px) своё меню, сворачивания нет. */
.nav-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a { position: relative; }

.app.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
.app.sidebar-collapsed .topbar { overflow: visible; }   /* иначе подсказка режется прокруткой меню */
.app.sidebar-collapsed .brand { justify-content: center; padding: 0; }
.app.sidebar-collapsed .brand-logo { width: 32px; height: 32px; flex-basis: 32px; }
.app.sidebar-collapsed .brand-name,
.app.sidebar-collapsed .nav-group,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .user-name { display: none; }
.app.sidebar-collapsed .nav a { justify-content: center; padding: var(--s2); }
.app.sidebar-collapsed .user { align-items: center; padding-left: 0; padding-right: 0; }
.app.sidebar-collapsed .nav a:hover::after,
.app.sidebar-collapsed .logout:hover::after {
  content: attr(data-title);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--text); color: var(--surface);
  font-size: var(--t-note); font-weight: 500; white-space: nowrap;
  z-index: 120; pointer-events: none;
}
.app.sidebar-collapsed .logout { position: relative; }
.app.sidebar-collapsed ~ .sidebar-toggle { left: var(--sidebar-w-collapsed); }
.app.sidebar-collapsed ~ .sidebar-toggle svg { transform: rotate(180deg); }

.user {
  margin-top: auto;
  padding: var(--s3) var(--s4) 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--t-note);
  color: var(--text-dim);
}
.logout, .btn-logout { color: var(--danger); font-size: var(--t-note); }
.logout { display: inline-flex; align-items: center; gap: var(--s2); }

.content {
  padding: var(--s4) var(--s5);
  min-width: 0;            /* иначе широкие таблицы растягивают страницу */
  max-width: 1400px;
}

/* ============================================================
   Кнопки
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 36px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sub);
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--line); color: var(--text); }

.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.tag-btn.active, .filter-tab.active, .period-tab.active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}

.form-input, input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 38px;
  padding: var(--s2) var(--s3);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-base);
  transition: border-color .15s ease;
}
.form-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.form-input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-faint); }

textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

/* ============================================================
   Оповещения
   ============================================================ */

.alert {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s4);
  font-size: var(--t-sub);
}
.alert-ok, .alert-success { border-left-color: var(--ok); background: var(--ok-soft); }
.alert-error { border-left-color: var(--danger); background: var(--danger-soft); }
.alert-warn, .alert-warning { border-left-color: var(--warn); background: var(--warn-soft); }
.sla-dot.ok, .status-dot.ok { background: var(--ok); }
.sla-dot.red, .status-dot.danger { background: var(--danger); }

table, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sub);
}

.data-table th, table th {
  padding: var(--s2) var(--s3);
  text-align: left;
  font-size: var(--t-note);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td, table td {
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table tbody tr:hover, table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Мелочи
   ============================================================ */

.muted { color: var(--text-dim); }
.small { font-size: var(--t-note); }

code, .code-block {
  font-family: var(--mono);
  font-size: var(--t-note);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px var(--s1);
}

hr { border: none; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* ============================================================
   Телефон и планшет
   ============================================================ */

@media (max-width: 1024px) {
  .content { padding: var(--s4) var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Надпись на кнопке не должна ломаться пополам, когда рядом
   в строке стоит растущее поле или селект. */
.form-inline > .btn { flex: 0 0 auto; }

/* Ряд действий внутри оповещения стоит под текстом, а не впритык. */
.alert > .form-inline { margin-top: var(--s3); }

/* Ширины узких колонок списка: без них «Канал», «Номер» и «Статус»
   меняют ширину от страницы к странице и глаз теряет столбец. */
.tickets-table th:nth-child(1) { width: 72px; }
.tickets-table th:nth-child(2) { width: 88px; }
.tickets-table th:nth-child(3) { width: 26%; }
.tickets-table th:nth-child(4) { width: 96px; }
.tickets-table th:nth-child(5) { width: 104px; }

/* Поле выбора файла: видимая часть — label с классом кнопки, само
   поле убрано с глаз, но остаётся доступным с клавиатуры
   (display:none отобрал бы у него фокус). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Форма-кнопка в ячейке таблицы: собственных отступов у неё нет,
   кнопка стоит по центру своей колонки. */
.data-table .form-inline { margin: 0; justify-content: center; }
.thumb .btn { width: 100%; margin-top: var(--s2); }
.srv-metric-value .value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.prose .alert { margin: var(--s4) 0; }

/* Раскрывашка-подсказка внутри формы: по шапке кликают. */
summary { cursor: pointer; }

/* Переключатель периода. Активную кнопку задаёт класс is-active:
   цвета лежали и в разметке, и в скрипте, и расходились между собой. */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ============================================================
   Мобильное меню и режим приложения на домашнем экране
   ------------------------------------------------------------
   Панель выезжает слева и держится на классе, а не на анимации:
   раньше видимость давал первый кадр slideDown, и стоило анимации
   не проиграть — меню растягивалось на весь экран, оставалось
   невидимым и перехватывало нажатия.

   Отступы берём из env(safe-area-inset-*): сохранённая на домашний
   экран страница рисуется во весь экран, под Dynamic Island и
   полосой жеста.
   ============================================================ */

.mobile-menu-btn { display: none; }
.nav-scrim { display: none; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }

  .topbar {
    position: sticky;
    top: 0;
    /* Закреплённая шапка создаёт свой слой, и меню внутри неё не может
       подняться выше этого слоя. При открытом меню поднимаем всю шапку
       над затемнением — иначе оно ложится поверх панели, и та выглядит
       тусклой и не нажимается. */
    z-index: 60;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    padding-top: calc(var(--s2) + env(safe-area-inset-top));
    padding-left: calc(var(--s4) + env(safe-area-inset-left));
    padding-right: calc(var(--s4) + env(safe-area-inset-right));
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;

    /* Размытие подложки делает шапку точкой отсчёта для всего, что
       внутри неё позиционировано фиксированно. Из-за этого панель меню
       растягивалась по высоте шапки, а не по экрану: 60 пикселей вместо
       852 — она превращалась в незаметную полоску и перехватывала
       нажатия. На телефоне красота размытия всё равно не видна. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    font: inherit;
    font-size: var(--t-head);
    line-height: 1;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-btn:active { background: var(--line); }

  /* Панель меню. Спрятана сдвигом, а не прозрачностью: пока она
     закрыта, её не видно и нажатия сквозь неё не ловятся. */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: min(82vw, 320px);
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s4);
    padding-top: calc(var(--s4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
    padding-left: calc(var(--s4) + env(safe-area-inset-left));
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  .nav a {
    white-space: normal;
    min-height: 46px;
    display: flex;
    align-items: center;
  }
  .nav-group { display: block; }

  /* Затемнение под панелью: закрывает меню по нажатию мимо него. */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .nav-scrim.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility 0s;
  }

  /* Пока меню открыто, страница под ним не прокручивается. */
  body.nav-locked { overflow: hidden; }

  .user { margin: 0; border: none; padding: 0; }

  .content {
    padding: var(--s4);
    padding-left: calc(var(--s4) + env(safe-area-inset-left));
    padding-right: calc(var(--s4) + env(safe-area-inset-right));
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  }

  /* Палец нуждается в цели не меньше 44px */
  .btn, .tag-btn, .filter-tab, .period-tab, .seg-btn { min-height: 44px; }

  /* Ниже 16px Safari увеличивает страницу при касании поля.
     Селекторы повторяют базовое правило: там поля адресованы по типу,
     и короткий список проигрывал по приоритету — размер оставался 14px. */
  .form-input,
  input[type="text"], input[type="password"], input[type="number"],
  input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"],
  select, textarea,
  /* У части полей свои классы в старых стилях с меньшим размером —
     перечисляем их явно, иначе Safari увеличивает страницу при касании. */
  textarea.text-textarea,
  input.sub-mgmt-input,
  input.input-xs, input.input-md, input.input-sm,
  .form-input.mono { font-size: var(--t-base); }

  table { min-width: 560px; }
}

/* Приложение на домашнем экране: фон под безопасными зонами должен
   совпадать с фоном страницы, иначе сверху и снизу белые полосы. */
@media (display-mode: standalone) {
  html { background: var(--bg); }
  body { min-height: 100svh; }
}

/* Открытое меню: шапка вместе с панелью поднимается над затемнением. */
body.nav-locked .topbar { z-index: 80; }

/* ============================================================
   Телефон: экран отдан работе
   ------------------------------------------------------------
   С телефона отвечают на обращения, а не изучают графики. Ленты
   аналитики убраны, список обращений собран в карточки: таблица на
   восемь колонок требовала горизонтальной прокрутки, и на ходу
   работать с ней было нельзя.
   ============================================================ */

@media (max-width: 768px) {

  /* --- Список обращений карточками --- */
  .tickets-table,
  .tickets-table tbody,
  .tickets-table tr,
  .tickets-table td {
    display: block;
    width: auto;
    min-width: 0;
  }
  .tickets-table { border-collapse: separate; border-spacing: 0; }
  .tickets-table thead { display: none; }

  .tickets-table tr {
    position: relative;
    margin-bottom: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }
  /* Правило плотности таблиц идёт ниже и возвращало ячейкам отступы
     8×12 — на четырёх ячейках это 64 лишних пикселя в каждой карточке. */
  .tickets-table td {
    padding: 0 !important;
    border: none;
  }
  .tickets-table .cell-client { padding-right: 110px !important; }

  /* Канал и номер видны в самой карточке клиента, статус дублирует
     пометку ожидания, счётчик сообщений на ходу не нужен. */
  .tickets-table .cell-channel,
  .tickets-table .cell-id,
  .tickets-table .cell-status,
  .tickets-table .cell-count { display: none; }

  .tickets-table .cell-client {
    font-size: var(--t-sub);
    font-weight: 600;
    padding-right: 110px;         /* место под пометку ожидания */
  }
  .tickets-table .cell-client .muted { font-weight: 400; }

  .tickets-table .cell-preview {
    max-width: none;
    white-space: normal;
    margin-top: var(--s2);
    line-height: 1.45;
  }

  /* Пометка ожидания — в правом верхнем углу карточки */
  .tickets-table .cell-waiting {
    position: absolute;
    top: var(--s3);
    right: var(--s4);
  }

  .tickets-table .cell-activity {
    margin-top: var(--s2);
    font-size: var(--t-note);
    color: var(--text-faint);
  }

  /* Форма ответа: поле выше, кнопка во всю ширину */
  .reply-textarea { min-height: 120px; }
  .reply-card .form-inline > .btn { flex: 1 1 100%; }
}

/* Совсем узкие экраны */
@media (max-width: 380px) {
  .tickets-table .cell-client { padding-right: 96px; }
}

/* ============================================================
   Плотность рабочих экранов
   ------------------------------------------------------------
   Список обращений листают весь день: чем больше строк помещается,
   тем меньше прокрутки. Ужимаем таблицы и карточки, но не цели для
   пальца — кнопки и поля остаются прежнего размера.
   ============================================================ */

.data-table th,
.data-table td { padding: 8px 12px; }

.card + .card,
.card + section,
section + section { margin-top: var(--s4); }

/* Строка обращения: одна строка текста вместо двух */
.tickets-table td { line-height: 1.35; }

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

@media (max-width: 768px) {
  .data-table.as-cards { min-width: 0; }
  .data-table.as-cards thead { display: none; }

  .data-table.as-cards,
  .data-table.as-cards tbody,
  .data-table.as-cards tr,
  .data-table.as-cards td {
    display: block;
    width: auto;
  }

  .data-table.as-cards tr {
    margin-bottom: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }

  .data-table.as-cards td {
    display: flex;
    gap: var(--s3);
    align-items: baseline;
    justify-content: space-between;
    padding: 1px 0;
    border: none;
    text-align: right;
    font-size: var(--t-sub);
    line-height: 1.4;
  }

  /* Подпись колонки слева — её проставляет скрипт в base.html */
  .data-table.as-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    color: var(--text-dim);
    font-size: var(--t-note);
  }
  .data-table.as-cards td:not([data-label])::before { content: none; }

  /* Первая ячейка — заголовок карточки, подпись ей не нужна */
  .data-table.as-cards td:first-child {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: var(--t-base);
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft, var(--line));
  }
  .data-table.as-cards td:first-child::before { content: none; }

  /* Кнопки в строке — в ряд под содержимым, во всю ширину карточки */
  .data-table.as-cards td .form-inline,
  .data-table.as-cards td form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    justify-content: flex-end;
  }
}

/* ============================================================
   Плотный телефон: поиск, фильтры, узкие таблицы
   ============================================================ */

@media (max-width: 768px) {
  .filters-form .btn { width: auto; white-space: nowrap; }

  /* Узкая таблица остаётся таблицей — так втрое компактнее. */
  .data-table:not(.as-cards):not(.tickets-table) th,
  .data-table:not(.as-cards):not(.tickets-table) td {
    padding: 6px 8px;
    font-size: var(--t-sub);
  }
  .data-table:not(.as-cards):not(.tickets-table) { min-width: 0; }
}

/* ============================================================
   Отклик на нажатие
   ------------------------------------------------------------
   Наведение мыши было описано 68 правилами, само нажатие — двумя.
   На телефоне наведения нет вовсе, поэтому касание оставалось без
   ответа до загрузки следующей страницы: человек не понимал, попал
   он или нет, и жал второй раз.

   Отклик срабатывает в момент нажатия, а не после отпускания, и
   длится ровно столько, чтобы глаз успел заметить.
   ============================================================ */

.btn,
.tag-btn,
.filter-tab,
.period-tab,
.seg-btn,
.choice,
.nav a,
.mobile-menu-btn {
  transition: transform .08s ease-out, background-color .12s ease,
              border-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
.tag-btn:active,
.filter-tab:active,
.period-tab:active,
.seg-btn:active,
.choice:active {
  transform: scale(.97);
  filter: brightness(1.12);
}

/* У ссылок меню и строк списка сжимать нечего — они во всю ширину.
   Отвечаем фоном: он заметен и не смещает соседние строки. */
.nav a:active { background: var(--line); }

/* Ссылки внутри карточек и хлебных крошек */
a:not(.btn):active { opacity: .7; }

/* Поле, в которое попали пальцем, подсвечивает рамку сразу */
.form-input:active, input:active, select:active, textarea:active {
  border-color: var(--line-strong);
}

@media (prefers-reduced-motion: reduce) {
  /* Движение убираем, но отклик оставляем: он не вестибулярный. */
  .btn:active, .tag-btn:active, .filter-tab:active,
  .period-tab:active, .seg-btn:active, .choice:active {
    transform: none;
  }
}

body { line-height: 1.55; }

/* ============================================================
   Список обращений: размер по важности
   ------------------------------------------------------------
   Текст обращения был помечен как служебная подпись и набран
   двенадцатью пикселями — наравне со временем и значком канала.
   Оператор ищет глазами именно его, поэтому он идёт основным
   размером, а время и канал уходят в служебный.
   ============================================================ */

.tickets-table .cell-client,
.tickets-table .cell-client .row-link {
  font-size: var(--t-base);          /* имя клиента — первое, что ищут */
  font-weight: 600;
}
.tickets-table .cell-client .muted { font-size: var(--t-note); font-weight: 400; }

.tickets-table .cell-preview,
.tickets-table .cell-preview.small {
  font-size: var(--t-sub);           /* сам вопрос — читаемый размер */
  color: var(--text-dim);
  line-height: 1.45;
}

.tickets-table .cell-activity,
.tickets-table .cell-activity.small { font-size: var(--t-note); }

.tickets-table .cell-id { font-size: var(--t-note); }

/* ============================================================
   Переписка на телефоне
   ------------------------------------------------------------
   Пузырь занимал 72% ширины — правило с широкого экрана. На
   393 пикселях это 228 точек, и фраза рвалась по три слова.
   Лента при этом прокручивалась внутри себя поверх прокрутки
   страницы: два движения там, где нужно одно.
   ============================================================ */

@media (max-width: 768px) {

  /* Тот же вес селектора, что у правила с широкого экрана,
     иначе 72% остаются в силе. */
  .msg .msg-bubble { max-width: 88%; }
  .msg-bubble { backdrop-filter: none; }

  /* Дата в шапке пузыря рвалась на две строки и занимала место,
     которого просит текст. */
  .msg-head { gap: var(--s2); flex-wrap: nowrap; }
  .msg-time {
    white-space: nowrap;
    font-size: var(--t-note);
    margin-left: auto;
  }
  .msg-text { line-height: 1.45; }
}

/* ============================================================
   Переписка: чьё сообщение видно по стороне
   ------------------------------------------------------------
   Вопрос клиента и ответ оператора стояли слева одним цветом и
   различались только подписью в шапке. Своё — вправо, чужое —
   влево: правило, которое читателю не нужно объяснять.
   ============================================================ */

.msg-in  { align-items: flex-start; }
.msg-out { align-items: flex-end; }

/* Ответ чуть светлее вопроса: сторона несёт основной сигнал,
   цвет только поддерживает её. */
.msg-out .msg-bubble {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line-2) !important;
}

/* Разделитель дня: тонкая линия во всю ширину с датой посередине. */
.chat-day {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0 var(--s2);
  color: var(--text-faint);
  font-size: var(--t-note);
}
.chat-day::before,
.chat-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.chat-day span { font-variant-numeric: tabular-nums; }

/* Мелкие ссылки в шапке и списках получают область нажатия в 44 точки:
   столько накрывает палец. Сама надпись остаётся прежнего размера —
   растёт только невидимая область вокруг неё. */
@media (max-width: 768px) {
  .topbar .logout,
  .topbar a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--s2);
  }
}

/* Вложения клиента в карточке обращения (спека 2026-09-18) */
.att { margin-top: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.att-img { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: .5rem; }  /* не шире пузыря на телефоне */
.att-video { display: block; width: 100%; max-width: 320px; border-radius: .5rem; background: #000; }
.att-audio { width: 100%; max-width: 320px; }
.att-file { font-weight: 500; text-decoration: none; }
.att-dl, .att-tg { font-size: .85em; opacity: .75; }
.att-tg { display: inline-block; margin-top: .3rem; }