/* ==================================================================
   Визуальная тема портала — фирменный стиль агентства «Комета»
   (палитра, типографика и пластика взяты с cometa.agency):
   светлый фон, синий акцент #2468C9, тонкие рамки вместо теней,
   лёгкие заголовки Commissioner 300, кнопки-пилюли.
   ================================================================== */

@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/commissioner-300-cyrillic.02d381b238a6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/commissioner-300-latin.5639dfe67576.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/commissioner-400-cyrillic.02d381b238a6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/commissioner-400-latin.5639dfe67576.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/commissioner-500-cyrillic.02d381b238a6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/commissioner-500-latin.5639dfe67576.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/commissioner-600-cyrillic.02d381b238a6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/commissioner-600-latin.5639dfe67576.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }

:root {
  /* фирменная палитра */
  --accent: #2468C9;
  --accent-hover: #1D57AB;
  --accent-active: #174A93;
  --accent-bg: #DDEAFB;
  --ink: #1B2430;
  --ink-2: #465060;
  --muted: #6E7A88;
  --box: #F3F6FA;
  --line: #E3E8EE;
  --field-line: #C9D2DC;
  --bg: #FFFFFF;
  --ok: #1E7F4F;
  --ok-bg: #E8F5EE;
  --warn: #B8791B;
  --warn-bg: #FBF0DC;
  --err: #B4362D;
  --err-bg: #FBE9E7;
  --mail: #6E5BD6;
  --mail-bg: #EDEAFA;
  /* пластика */
  /* высота элементов управления — одна на портал: кнопка, поле, выбор, переключатель */
  --h-ctl: 38px;
  --h-ctl-sm: 30px;
  --r-pill: 999px;
  --r-plate: 14px;
  --r-card: 12px;
  --r-small: 8px;
  --shadow: 0 1px 2px rgba(27, 36, 48, .04);
  --shadow-hover: 0 6px 18px rgba(27, 36, 48, .10);
  --font: 'Commissioner', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 400 14px/1.5 var(--font);
  color: var(--ink);
  background: var(--box);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1, h2, h3 { font-weight: 300; letter-spacing: -.01em; }

/* ------------------------------------------------------- верхняя панель */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60;
  display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink);
}
.topbar .logo { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.topbar .logo:hover { text-decoration: none; }
.topbar .logo img { height: 26px; width: auto; display: block; }
/* плашка тестового стенда — чтобы не перепутать с боевым порталом */
.stand-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 6px; background: #f59e0b; color: #1f1400; font-size: 12px;
  font-weight: 600; white-space: nowrap; cursor: help;
}
.topbar .logo .sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 9px;
}
/* разделы — вкладки с подчёркиванием, тот же приём, что у .subtabs в карточках:
   пилюли отданы фильтрам и кнопкам, шапка читается строкой вкладок */
.topbar nav {
  display: flex; align-items: stretch; align-self: stretch; gap: 22px;
  flex: 1; min-width: 0; overflow-x: auto;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--muted); font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 2px;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.active { color: var(--accent); border-color: var(--accent); font-weight: 500; }
.topbar .right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.topbar form.search { position: relative; display: flex; align-items: center; }
.topbar form.search .ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.topbar form.search input[name=q] {
  background: var(--box); border: 1px solid var(--line); border-radius: var(--r-pill);
  height: var(--h-ctl); padding: 0 14px 0 38px; color: var(--ink); width: 220px; outline: none;
  font: inherit; font-size: 13px;
}
.topbar form.search input[name=q]::placeholder { color: var(--muted); }
.topbar form.search input[name=q]:focus { border-color: var(--accent); background: var(--bg); }
.topbar form.search:focus-within .ico { color: var(--accent); }

/* Шапка с блоком CRM — девять вкладок, самая длинная строка на портале.
   Спецификация (промежуток 22 px, поиск 220 px) помещается от 1400 px, поэтому
   на экранах уже строка поджимается в два приёма — замерено на Commissioner:
     до 1600 px — промежуток 18, поиск 190 (на 1366 остаётся 49 px запаса);
     до 1340 px — промежуток 16, поиск 170, часы убираются (на 1280 — 45 px).
   Уже ~1240 px девять пунктов не помещаются ни при каком промежутке: там
   полоса листается вбок (`overflow-x: auto` выше). У ролей без CRM пунктов
   пять — им поджатие не мешает. */
@media (min-width: 901px) and (max-width: 1600px) {
  .topbar nav { gap: 18px; }
  .topbar form.search input[name=q] { width: 190px; }
}
@media (min-width: 901px) and (max-width: 1340px) {
  .topbar nav { gap: 16px; }
  .topbar form.search input[name=q] { width: 170px; }
  .topbar .right .desktop-only.small { display: none; }
}

/* ---------------------------------------------------------- левое меню */
.sidebar {
  position: fixed; top: 56px; bottom: 0; left: 0; width: 232px; z-index: 50;
  background: var(--bg); border-right: 1px solid var(--line);
  padding: 12px 0 24px; overflow-y: auto; color: var(--ink-2);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sidebar a.item {
  display: flex; align-items: center; gap: 11px; padding: 9px 16px; color: var(--ink-2);
  font-size: 14px; border-radius: var(--r-pill); margin: 1px 12px;
}
.sidebar a.item:hover { background: var(--box); color: var(--ink); text-decoration: none; }
.sidebar a.item.active { background: var(--accent-bg); color: var(--accent-active); font-weight: 500; }
.sidebar .ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.sidebar a.item:hover .ico { color: var(--ink-2); }
.sidebar a.item.active .ico { color: var(--accent); }
.sidebar .group-title {
  padding: 16px 28px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
}
.sidebar .counter {
  margin-left: auto; background: var(--err); color: #fff; border-radius: var(--r-pill);
  font-size: 11px; padding: 1px 7px; font-weight: 600;
}
.sidebar .counter.blue { background: var(--accent); }

/* ------------------------------------------------------------ контент */
.content { margin: 56px 0 0 232px; padding: 22px 26px 60px; max-width: 1560px; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-size: 30px; font-weight: 300; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.page-head .spacer { flex: 1; }

.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate); }
.panel-pad { padding: var(--pad-y) var(--pad-x); --pad-y: 20px; --pad-x: 22px; }
.panel + .panel { margin-top: 16px; }
.panel-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 12px;
}

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-ctl); box-sizing: border-box;
  padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--box); border-color: var(--field-line); text-decoration: none; color: var(--ink); }
.btn-primary, .btn-blue { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-blue:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-light { background: var(--bg); border-color: var(--line); color: var(--ink-2); }
.btn-light:hover { background: var(--box); color: var(--ink); }
.btn-sm { height: var(--h-ctl-sm); font-size: 13px; padding: 0 13px; }

/* вкладки-фильтры */
/* все линейные иконки рисуются обводкой текущим цветом */
svg.ico { stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
/* иконка внутри кнопки-пилюли: размер по тексту, не растягивается */
.btn svg.ico { width: 16px; height: 16px; flex: none; }
.btn-sm svg.ico { width: 15px; height: 15px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a {
  padding: 6px 15px; border-radius: var(--r-pill); font-size: 14px; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line);
}
.tabs a:hover { background: var(--box); text-decoration: none; color: var(--ink); }
.tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }

.subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.subtabs a { padding: 11px 2px; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; }
.subtabs a.active { color: var(--accent); border-color: var(--accent); font-weight: 500; }
.subtabs a:hover { text-decoration: none; color: var(--ink); }

/* таблицы-гриды */
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em;
}
table.grid td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tr:hover td { background: var(--box); }
table.grid td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* карточки-канбан */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 20px; align-items: flex-start; }
.kanban-col { min-width: 262px; width: 262px; flex: none; }
.kanban-col .col-head {
  border-radius: var(--r-small) var(--r-small) 0 0; padding: 8px 12px; color: #fff; font-size: 12px;
  display: flex; justify-content: space-between; font-weight: 500; letter-spacing: .01em;
}
.kanban-col .col-sum {
  background: var(--box); border: 1px solid var(--line); border-top: 0; padding: 7px 12px;
  font-size: 13px; font-weight: 600; text-align: center; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kanban-col .col-body { padding: 10px 0; display: flex; flex-direction: column; gap: 9px; }
.k-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 12px 14px; font-size: 13px; display: block; color: var(--ink);
  transition: box-shadow .15s, border-color .15s;
}
.k-card:hover { text-decoration: none; border-color: var(--field-line); box-shadow: var(--shadow-hover); }
.k-card .t { font-weight: 500; margin-bottom: 5px; color: var(--ink); }
.k-card .sum { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-card .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* бейджи и метки */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px;
  font-weight: 500; color: #fff; background: var(--accent);
}
.badge.green { background: var(--ok-bg); color: var(--ok); }
.badge.orange { background: var(--warn-bg); color: var(--warn); }
.badge.red { background: var(--err-bg); color: var(--err); }
.badge.violet { background: var(--accent-bg); color: var(--accent-active); }
.badge.grey { background: var(--box); color: var(--muted); }
.badge.light { background: var(--box); color: var(--ink-2); }

/* полоса стадий — ступени воронки: кружок с номером шага и подпись под ним.
   Цвет каждой стадии свой (рампа «приближение к цели», команда `stage_colors`):
   пройденные и текущая залиты им, перемычка красится цветом предыдущей,
   поэтому пройденный путь читается как заполняющаяся шкала. */
/* шапка стадий: блок занимает верх панели целиком и залит бледным цветом
   текущей стадии — воронка отделена от данных по сделке цветом, без лишних рамок.
   Растяжка опирается на токены паддинга панели, своих чисел здесь нет. */
.stage-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: color-mix(in srgb, var(--stage-now, var(--accent)) 7%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--stage-now, var(--accent)) 20%, #fff);
  margin: calc(var(--pad-y, 0px) * -1) calc(var(--pad-x, 0px) * -1) 18px;
  padding: 18px var(--pad-x, 0px) 16px;
  border-radius: calc(var(--r-plate) - 1px) calc(var(--r-plate) - 1px) 0 0;
}
/* карточка задачи: полоса — единственное, что лежит в панели, поэтому заливка
   занимает её целиком и нижней линии не нужно */
.panel-pad > .stage-head:only-child > .stage-block {
  margin-bottom: calc(var(--pad-y, 0px) * -1); border-bottom: 0;
  border-radius: calc(var(--r-plate) - 1px);
}
.stage-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  flex: none; margin-top: 9px;
}
/* строка текущей стадии — вид полосы на телефоне, на большом экране не нужна */
.stage-now { display: none; align-items: center; gap: 9px; min-width: 0; }
.stage-now i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.stage-now b { font-size: 15px; font-weight: 500; }
.stage-line { display: flex; flex: 1; min-width: 0; gap: 0; margin: 0; }
.stage-line button {
  flex: 1 1 0; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative;
  font: 400 11px/1.35 var(--font); color: var(--muted);
}
.stage-line button[disabled] { cursor: default; }
/* перемычка между ступенями проходит под кружком — цепочка не рвётся */
.stage-line button::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--line);
}
.stage-line button:first-of-type::before { display: none; }
.stage-line button b {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--line); color: var(--muted); position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.stage-line button b .ico { width: 14px; height: 14px; }
.stage-line button span {
  max-width: 96px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.stage-line button.done b, .stage-line button.current b {
  background: var(--stage); border-color: var(--stage); color: #fff;
}
.stage-line button.done::before, .stage-line button.current::before {
  background: var(--stage-prev, var(--field-line));
}
.stage-line button.current b { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage) 22%, #fff); }
.stage-line button.done span, .stage-line button.current span { color: var(--ink); }
.stage-line button.current span { font-weight: 500; }

/* наведение на будущую ступень: она и все до неё заливаются её цветом,
   остальные гаснут — до клика видно, какой кусок пути закроет переход */
.stage-line:has(button:hover) button b {
  background: var(--bg); border-color: var(--line); color: var(--muted);
}
.stage-line:has(button:hover) button::before { background: var(--line); }
.stage-line:has(button:hover) button span { color: var(--muted); }
.stage-line:has(button:nth-of-type(1):hover) button:nth-of-type(-n+1) b {
  background: var(--c1); border-color: var(--c1); color: #fff; }
.stage-line:has(button:nth-of-type(1):hover) button:nth-of-type(-n+1)::before { background: var(--c1); }
.stage-line:has(button:nth-of-type(1):hover) button:nth-of-type(-n+1) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(2):hover) button:nth-of-type(-n+2) b {
  background: var(--c2); border-color: var(--c2); color: #fff; }
.stage-line:has(button:nth-of-type(2):hover) button:nth-of-type(-n+2)::before { background: var(--c2); }
.stage-line:has(button:nth-of-type(2):hover) button:nth-of-type(-n+2) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(3):hover) button:nth-of-type(-n+3) b {
  background: var(--c3); border-color: var(--c3); color: #fff; }
.stage-line:has(button:nth-of-type(3):hover) button:nth-of-type(-n+3)::before { background: var(--c3); }
.stage-line:has(button:nth-of-type(3):hover) button:nth-of-type(-n+3) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(4):hover) button:nth-of-type(-n+4) b {
  background: var(--c4); border-color: var(--c4); color: #fff; }
.stage-line:has(button:nth-of-type(4):hover) button:nth-of-type(-n+4)::before { background: var(--c4); }
.stage-line:has(button:nth-of-type(4):hover) button:nth-of-type(-n+4) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(5):hover) button:nth-of-type(-n+5) b {
  background: var(--c5); border-color: var(--c5); color: #fff; }
.stage-line:has(button:nth-of-type(5):hover) button:nth-of-type(-n+5)::before { background: var(--c5); }
.stage-line:has(button:nth-of-type(5):hover) button:nth-of-type(-n+5) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(6):hover) button:nth-of-type(-n+6) b {
  background: var(--c6); border-color: var(--c6); color: #fff; }
.stage-line:has(button:nth-of-type(6):hover) button:nth-of-type(-n+6)::before { background: var(--c6); }
.stage-line:has(button:nth-of-type(6):hover) button:nth-of-type(-n+6) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(7):hover) button:nth-of-type(-n+7) b {
  background: var(--c7); border-color: var(--c7); color: #fff; }
.stage-line:has(button:nth-of-type(7):hover) button:nth-of-type(-n+7)::before { background: var(--c7); }
.stage-line:has(button:nth-of-type(7):hover) button:nth-of-type(-n+7) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(8):hover) button:nth-of-type(-n+8) b {
  background: var(--c8); border-color: var(--c8); color: #fff; }
.stage-line:has(button:nth-of-type(8):hover) button:nth-of-type(-n+8)::before { background: var(--c8); }
.stage-line:has(button:nth-of-type(8):hover) button:nth-of-type(-n+8) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(9):hover) button:nth-of-type(-n+9) b {
  background: var(--c9); border-color: var(--c9); color: #fff; }
.stage-line:has(button:nth-of-type(9):hover) button:nth-of-type(-n+9)::before { background: var(--c9); }
.stage-line:has(button:nth-of-type(9):hover) button:nth-of-type(-n+9) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(10):hover) button:nth-of-type(-n+10) b {
  background: var(--c10); border-color: var(--c10); color: #fff; }
.stage-line:has(button:nth-of-type(10):hover) button:nth-of-type(-n+10)::before { background: var(--c10); }
.stage-line:has(button:nth-of-type(10):hover) button:nth-of-type(-n+10) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(11):hover) button:nth-of-type(-n+11) b {
  background: var(--c11); border-color: var(--c11); color: #fff; }
.stage-line:has(button:nth-of-type(11):hover) button:nth-of-type(-n+11)::before { background: var(--c11); }
.stage-line:has(button:nth-of-type(11):hover) button:nth-of-type(-n+11) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(12):hover) button:nth-of-type(-n+12) b {
  background: var(--c12); border-color: var(--c12); color: #fff; }
.stage-line:has(button:nth-of-type(12):hover) button:nth-of-type(-n+12)::before { background: var(--c12); }
.stage-line:has(button:nth-of-type(12):hover) button:nth-of-type(-n+12) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(13):hover) button:nth-of-type(-n+13) b {
  background: var(--c13); border-color: var(--c13); color: #fff; }
.stage-line:has(button:nth-of-type(13):hover) button:nth-of-type(-n+13)::before { background: var(--c13); }
.stage-line:has(button:nth-of-type(13):hover) button:nth-of-type(-n+13) span { color: var(--ink); }
.stage-line:has(button:nth-of-type(14):hover) button:nth-of-type(-n+14) b {
  background: var(--c14); border-color: var(--c14); color: #fff; }
.stage-line:has(button:nth-of-type(14):hover) button:nth-of-type(-n+14)::before { background: var(--c14); }
.stage-line:has(button:nth-of-type(14):hover) button:nth-of-type(-n+14) span { color: var(--ink); }

/* аватары */
.ava {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: 600; flex: none; overflow: hidden;
}
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava.lg { width: 78px; height: 78px; font-size: 26px; font-weight: 400; }
.ava.sm { width: 26px; height: 26px; font-size: 10px; }

/* поля форм */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field-input, input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=number], input[type=search], input[type=tel],
input:not([type]), select, textarea {
  width: 100%; border: 1px solid var(--field-line); border-radius: var(--r-small);
  padding: 9px 12px; font: inherit; background: var(--bg); color: var(--ink); outline: none;
  box-sizing: border-box;
}
/* однострочное поле и выбор — той же высоты, что кнопка рядом */
.field-input, input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=number], input[type=search], input[type=tel],
input:not([type]), select {
  height: var(--h-ctl); padding-top: 0; padding-bottom: 0;
}
.field-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.help { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* карточка сущности */
.entity { display: grid; grid-template-columns: 390px 1fr; gap: 16px; align-items: start; }
.entity + .panel, .tiles + .entity { margin-top: 16px; }

/* в карточке сотрудника колонки заканчиваются на одной линии */
.entity .prop, .props .prop { padding: 11px 0; border-bottom: 1px solid var(--line); }
.entity .prop:last-child, .props .prop:last-child { border-bottom: 0; }
.entity .prop .k, .props .prop .k {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.4;
}
.entity .prop .v, .props .prop .v { font-size: 14px; margin-top: 4px; word-break: break-word; line-height: 1.45; }
.entity .prop .v select, .props .prop .v select { max-width: 240px; margin-top: 2px; }
.entity .prop .v .btn, .props .prop .v .btn { margin-top: 6px; }
/* пояснение под значением — одинаковое во всех строках */
.prop-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 5px; }
/* между блоками карточки — одна линия: у строки перед заголовком свою убираем
   (заголовок блока уже рисует разделитель сверху) */
.card-side .prop:has(+ .prop-title), .props .prop:has(+ .prop-title),
.card-side .prop-source { border-bottom: 0; }
/* подзаголовок внутри блока сведений */
.prop-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 20px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* таймлайн */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.tl-item { display: flex; gap: 12px; }
.tl-item .dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--box); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  border: 1px solid var(--line);
}
.tl-item .body { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 11px 15px; }
.tl-item.comment .body { background: var(--accent-bg); border-color: #C6DBF7; }
.tl-item.robot .body { background: var(--warn-bg); border-color: #F0DEBC; }
.tl-item.convert .body { background: var(--ok-bg); border-color: #CCE7D8; }
.tl-item .when { color: var(--muted); font-size: 12px; }

/* ====================================================================
   Мессенджер: слева единый список чатов и задач, посередине переписка,
   справа сведения. Лента и поле ввода — те же .tchat-*, что в карточке
   задачи: своей вёрстки переписки у раздела нет.
   ==================================================================== */
/* мессенджер занимает ровно один экран: высота задана, прокручиваются только
   список чатов и лента переписки — страница целиком не едет */
.content:has(> .im) {
  display: flex; flex-direction: column; height: calc(100vh - 56px); padding-bottom: 22px;
}
.im {
  display: grid; grid-template-columns: 272px minmax(0, 1fr) auto;
  flex: 1; min-height: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate);
  overflow: hidden;
}
.im-col {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 1px solid var(--line);
}
/* поиск и отбор стоят одной строкой: поле тянется, отбор прижат к правому краю */
.im-head {
  padding: 12px 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.im-head-form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.im-head .fsearch { flex: 1 1 auto; min-width: 0; }
/* селектор отбора справа от поиска — обычное значение-ссылка портала */
.im-head .im-tab, .im-head .pick { flex: none; }
.im-head .pick .pick-toggle { white-space: nowrap; }
.im-head .fsearch { position: relative; display: flex; align-items: center; }
.im-head .fsearch .ico {
  position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.im-head .fsearch input {
  width: 100%; height: var(--h-ctl); border: 1px solid var(--line); background: var(--box);
  border-radius: var(--r-pill); padding: 0 14px 0 37px; font-size: 13px;
}
.im-head .fsearch input:focus { background: var(--bg); }

.im-rows { flex: 1; min-height: 0; overflow-y: auto; }
/* хвост списка: кнопка догрузки следующих карточек */
.im-more-rows { display: flex; justify-content: center; padding: 12px 14px 18px; }
.im-rows::-webkit-scrollbar { width: 6px; }
.im-rows::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* карточка чата: одна разметка у переписки с человеком и у переписки по задаче */
.im-row {
  display: flex; gap: 11px; padding: 11px 14px; align-items: flex-start;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.im-row:hover { background: var(--box); text-decoration: none; }
.im-row.on { background: var(--accent-bg); border-bottom-color: #CBDFF8; }
/* завершённая задача остаётся в списке, но не спорит с живой перепиской */
.im-row.done .im-t, .im-row.done .im-p { color: var(--muted); }
.im-ava {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex: none;
  overflow: hidden;
}
.im-ava img { width: 100%; height: 100%; object-fit: cover; }
.im-ava .ico { width: 20px; height: 20px; stroke-width: 1.7; }
.im-b { flex: 1; min-width: 0; }
.im-r1 { display: flex; align-items: baseline; gap: 9px; }
.im-t {
  font-size: 14.5px; font-weight: 500; line-height: 1.3; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-when { font-size: 11.5px; color: var(--muted); flex: none; }
.im-r2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.im-p {
  font-size: 12.5px; color: var(--muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-row.unread .im-p { color: var(--ink-2); }
.im-n {
  background: var(--err); color: #fff; border-radius: var(--r-pill); font-size: 11px;
  font-weight: 600; padding: 1px 7px; flex: none; line-height: 16px;
}
.im-m {
  display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11.5px;
  color: var(--muted); white-space: nowrap; overflow: hidden;
}
.im-m .status { font-size: 11.5px; }
.sep { width: 3px; height: 3px; border-radius: 50%; background: var(--field-line); flex: none; }

/* середина: шапка переписки и сама лента */
.im-talk { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.im-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.im-top .im-ava { width: 36px; height: 36px; font-size: 12px; }
/* приглашение в переписку: выбор людей и кнопка — в колонке сведений */
.im-invite { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.im-invite .btn { align-self: flex-start; }
.im-invite-note { margin: 0 0 6px; line-height: 1.4; }

/* поиск по открытой переписке — строка под шапкой чата */
.im-find {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--box);
}
.im-find > .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.im-find input {
  flex: 1; min-width: 0; height: var(--h-ctl-sm); border: 1px solid var(--line);
  background: var(--bg); border-radius: var(--r-pill); padding: 0 12px; font-size: 13px;
}
.im-find input:focus { border-color: var(--accent); }
.im-find-n { font-size: 12px; color: var(--muted); flex: none; white-space: nowrap; }
.im-find .icobtn { width: 28px; height: 28px; }
.im-find .icobtn .ico { width: 15px; height: 15px; }
mark.find-hit { background: #FFEFA8; color: inherit; border-radius: 3px; padding: 0 1px; }
.im-top-main { flex: 1; min-width: 0; }
.im-top-t {
  display: block; font-size: 15px; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-top-s {
  display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 12px;
  color: var(--muted); white-space: nowrap; overflow: hidden;
}
.icobtn {
  width: 34px; height: 34px; border-radius: var(--r-pill); display: flex; align-items: center;
  justify-content: center; color: var(--muted); flex: none; border: 0; background: none;
  cursor: pointer; position: relative;
}
.icobtn:hover { background: var(--box); color: var(--ink); text-decoration: none; }
.icobtn .ico { width: 18px; height: 18px; }
.ico-left { transform: rotate(90deg); }
.ico-right { transform: rotate(-90deg); }

/* переписка в мессенджере занимает колонку целиком, высоту ей чат не задаёт */
.im-talk.tchat { padding: 14px 16px 12px; gap: 12px; height: auto; position: static; }
.im-talk.tchat .tchat-feed { flex: 1; min-height: 0; }
.im-talk .tchat-compose { flex: none; }
.im-talk > .empty { margin: auto; }

/* справа сведения; сворачиваются в полосу со значками */
.im-side {
  border-left: 1px solid var(--line); background: var(--bg); width: 300px;
  display: flex; flex-direction: column; min-height: 0;
}
.im-side-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 16px;
  border-bottom: 1px solid var(--line);
}
.im-side-head .panel-title { margin: 0; flex: 1; }
.im-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; }
.im-side-body .prop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px; }
.im-side-title { margin: 16px 0 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.v-who { display: flex; align-items: center; gap: 8px; }
.im-side .file-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ink); }
.im-side .file-row .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.im-side .file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-side-act { margin-top: 18px; }
.im-side-act .btn { width: 100%; }
.im-strip {
  border-left: 1px solid var(--line); background: var(--bg); width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0;
}
.im-strip .icobtn { width: 32px; height: 32px; }
.im-strip .n {
  position: absolute; top: -1px; right: -2px; background: var(--accent); color: #fff;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 600; line-height: 13px; padding: 0 4px;
}
.im-strip-rule { width: 20px; height: 1px; background: var(--line); margin: 4px 0; }
/* свёрнутая колонка сведений: вид меняется сразу, без перезагрузки */
.im .im-strip { display: none; }
.im.side-off .im-side { display: none; }
.im.side-off .im-strip { display: flex; }

/* отметки сотрудника на карточке: закреплено наверху, без звука */
.im-item { position: relative; }
.im-flag { width: 14px; height: 14px; color: var(--muted); flex: none; }
.im-flag[hidden] { display: none; }
.im-n.quiet { background: var(--box); color: var(--muted); }
/* новое в переписке появляется на месте: счётчик всплывает, строка мигает */
@keyframes im-pop {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes im-lit {
  0% { background: var(--accent-bg); }
  100% { background: transparent; }
}
.im-n.is-new, .counter.is-new { animation: im-pop .32s ease-out; }
.im-item.is-new .im-row { animation: im-lit 1.4s ease-out; }
.im-more { position: absolute; right: 8px; top: 8px; }
.im-more > summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill); color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.im-more > summary::-webkit-details-marker { display: none; }
.im-item:hover .im-more > summary, .im-more[open] > summary { opacity: 1; }
/* на сенсорном экране наведения нет: прозрачное троеточие ловило тап вслепую */
@media (hover: none) {
  .im-more > summary { opacity: 1; color: var(--field-line); }
}
.im-more > summary:hover { background: #fff; color: var(--accent); }
.im-more .ico { width: 16px; height: 16px; }
.im-menu {
  /* тоже влево: правый край меню по правому краю троеточия */
  position: absolute; right: 0; left: auto; top: calc(100% + 4px); z-index: 120; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 30px rgba(20, 38, 64, .16); padding: 6px; display: flex;
  flex-direction: column;
}
.im-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0;
  background: none; border-radius: var(--r-small); font: 400 13px/1.3 var(--font);
  color: var(--ink); cursor: pointer; text-align: left;
}
.im-menu button:hover { background: var(--box); }
.im-menu .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }

/* ====================================================================
   Окно вставки: эмодзи и стикеры. Сверху вкладки наборов, внизу
   переключатель, между ними — прокручиваемое тело с секциями.
   ==================================================================== */
.picker { position: absolute; right: 10px; bottom: 10px; }
.picker > summary.picker-face {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill); color: var(--muted); cursor: pointer;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary:hover { background: var(--box); color: var(--accent); }
.picker .picker-face .ico { width: 17px; height: 17px; }
/* ширину и высоту окну задаёт picker.js: по ширине поля сообщения и по
   свободному месту над ним — здесь только запасные значения */
.picker-box {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40;
  width: 372px; max-width: calc(100vw - 24px); height: min(430px, 70dvh);
  max-height: calc(100dvh - 24px); display: flex;
  flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-plate); box-shadow: 0 16px 40px rgba(20, 38, 64, .18); overflow: hidden;
}
.picker-tabs {
  display: flex; align-items: center; gap: 2px; padding: 8px 10px; flex: none;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.picker-tabs::-webkit-scrollbar { display: none; }
.picker-tab {
  width: 44px; height: 44px; flex: none; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-small); display: flex; align-items: center; justify-content: center;
  color: var(--muted); position: relative; padding: 4px;
}
.picker-tab img { width: 100%; height: 100%; object-fit: contain; display: block; }
.picker-tab .ico { width: 22px; height: 22px; }
.picker-tab:hover { background: var(--box); color: var(--ink); text-decoration: none; }
.picker-tab.on { color: var(--accent); }
.picker-tab.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.picker-add { color: var(--accent); }
.picker-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }
.picker-body::-webkit-scrollbar { width: 6px; }
.picker-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.picker-k {
  display: flex; align-items: center; gap: 8px; padding: 12px 2px 8px;
  font-size: 14px; color: var(--muted); position: sticky; top: 0; background: #fff; z-index: 1;
}
.picker-dots { margin-left: auto; color: var(--field-line); }
.picker-dots .ico { width: 16px; height: 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.picker-sticker {
  border: 0; background: none; cursor: pointer; padding: 4px; border-radius: var(--r-card);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.picker-sticker img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.picker-sticker:hover { background: var(--box); }
.picker-empty { padding: 18px 4px 22px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.picker-emoji { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-top: 8px; }
.picker-emoji .tchat-emoji-pick { width: 100%; height: 52px; font-size: 26px; }
.picker-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px;
  border-top: 1px solid var(--line); background: #fff; flex: none;
}
.picker-mode {
  padding: 0 22px; height: var(--h-ctl); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line); background: #fff; font: 500 14px/1 var(--font);
  color: var(--ink-2);
}
.picker-mode:hover { background: var(--box); color: var(--ink); }
.picker-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* стикер в переписке — картинка без плашки файла */
.tchat-sticker {
  display: block; width: 128px; max-width: 100%; height: auto; margin: 2px 0 4px;
  object-fit: contain;
}
@media (max-width: 900px) { .tchat-sticker { width: 112px; } }

/* ---- телефон: шапка переписки, свайп по карточке и лист отбора ---- */
/* свёрнутая шапка — то же, что третья колонка на компьютере */
.im-mob { display: none; border-bottom: 1px solid var(--line); background: var(--bg); flex: none; }
/* окно уже 1180 px: третья колонка не помещается рядом с лентой,
   её содержимое переезжает в шапку переписки */
@media (max-width: 1180px) {
  .im .im-side, .im .im-strip, .im.side-off .im-side, .im.side-off .im-strip { display: none; }
  .im-mob { display: block; }
}
@media (min-width: 1181px) and (max-width: 1360px) {
  .im { grid-template-columns: 237px minmax(0, 1fr) auto; }
  .im-side { width: 252px; }
}
.im-mob > summary {
  list-style: none; display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.im-mob > summary::-webkit-details-marker { display: none; }
.im-mob .im-mob-go { width: 15px; height: 15px; margin-left: auto; transition: transform .15s; }
.im-mob[open] .im-mob-go { transform: rotate(180deg); }
.im-mob-body { padding: 0 14px 12px; }
.im-mob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.im-mob-grid .prop { display: flex; flex-direction: column; gap: 2px; }
.im-mob-body .btn { width: 100%; }
.im-mob-people { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.im-mob-people .v-who { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }

/* карточка сдвигается пальцем, под ней — два действия */
.im-item { position: relative; overflow: hidden; touch-action: pan-y; }
.im-acts {
  position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: stretch;
}
.im-acts form { display: flex; align-items: stretch; margin: 0; }
.im-act {
  width: 92px; align-self: stretch; border: 0; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font: 400 11px/1.2 var(--font); padding: 0;
}
.im-act .ico { width: 19px; height: 19px; }
.im-act-pin { background: var(--accent); }
.im-act-mute { background: var(--ink-2); }
.im-item .im-row { position: relative; transition: transform .18s ease; background: var(--bg); }
.im-item.is-open .im-row { transform: translateX(-184px); }

/* отбор списка: на телефоне одна кнопка, выбор — листом снизу */
.im-pick {
  display: none; align-items: center; gap: 8px; height: var(--h-ctl); padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg);
  font: 500 14px/1 var(--font); color: var(--ink); cursor: pointer; align-self: flex-start;
}
.im-pick b { font-size: 12px; font-weight: 600; color: var(--muted); }
.im-pick .ico { width: 16px; height: 16px; color: var(--muted); }
.im-sheet { position: fixed; inset: 0; z-index: 130; }
.im-sheet-back { position: absolute; inset: 0; background: rgba(27, 36, 48, .3); }
.im-sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg);
  border-radius: 18px 18px 0 0; box-shadow: 0 -14px 40px rgba(27, 36, 48, .18);
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom));
}
.im-sheet-grip {
  width: 40px; height: 4px; border-radius: 2px; background: var(--field-line); margin: 0 auto 10px;
}
.im-sheet-opt {
  display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: var(--ink); font-size: 15px;
}
.im-sheet-opt:hover { text-decoration: none; background: var(--box); }
.im-sheet-opt .ico { width: 20px; height: 20px; color: var(--muted); }
.im-sheet-opt b { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.im-sheet-opt.on { background: var(--accent-bg); color: var(--accent-active); }
.im-sheet-opt.on .ico, .im-sheet-opt.on b { color: var(--accent); }

/* ничто в переписке не должно распирать колонку: длинные ссылки переносятся,
   плашки файлов и цитаты ужимаются по месту */
.im .tchat-feed, .im .tchat-msg, .im .tchat-body, .im .tchat-compose { min-width: 0; }
.im .tchat-feed { overflow-x: hidden; }
.tchat-feed { overflow-x: hidden; }
.im .tchat-body { overflow-wrap: anywhere; }
.im .tchat-file { max-width: 100%; }
.im .tchat-file-name, .im .tchat-file-note { min-width: 0; }
.im .im-top-main, .im .im-top-t, .im .im-top-s { min-width: 0; }
.content:has(> .im) { overflow-x: hidden; }
@media (min-width: 901px) {
  /* страница мессенджера не прокручивается: список и переписка ездят сами */
  html:has(main.content > .im) { overflow: hidden; }
}

/* --------------------------------------------------------------- почта
   Список писем и письмо: раскладка своя, мессенджер её не задаёт. */
.mail-im { display: grid; grid-template-columns: 330px 1fr; height: calc(100vh - 150px); }
.mail-im .list { border-right: 1px solid var(--line); overflow-y: auto; }
.mail-im .list a.row {
  display: flex; gap: 11px; padding: 12px 16px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mail-im .list a.row:hover { background: var(--box); text-decoration: none; }
.mail-im .list a.row.active { background: var(--accent-bg); }
.mail-im .list .grow { flex: 1; min-width: 0; }
.mail-im .list .t { font-weight: 500; font-size: 14px; display: block; }
.mail-im .list .p {
  color: var(--muted); font-size: 12px; margin-top: 3px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}
.mail-im .talk { display: flex; flex-direction: column; min-width: 0; }
.mail-im .talk .head {
  padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: 500;
}
.mail-im .talk .head .grow { flex: 1; min-width: 0; }
.mail-im .talk .msgs { flex: 1; overflow-y: auto; padding: 20px; }
/* плитки статистики */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate); padding: 18px 20px; }
.tile .v { font-size: 32px; font-weight: 300; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .k { color: var(--muted); font-size: 12px; margin-top: 8px; }
a.tile { display: block; color: var(--ink); text-decoration: none; }
a.tile:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-hover); }
.tile.accent .v { color: var(--accent); }
.tile.green .v { color: var(--ok); }
.tile.red .v { color: var(--err); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate);
  padding: 18px; color: var(--ink); display: block; transition: box-shadow .15s, border-color .15s;
}
.card:hover { text-decoration: none; border-color: var(--field-line); box-shadow: var(--shadow-hover); }

.flex { display: flex; align-items: center; gap: 10px; }
.mt { margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.messages { margin-bottom: 14px; }
.msg-flash {
  background: var(--ok-bg); border: 1px solid #CCE7D8; color: var(--ok); padding: 11px 16px;
  border-radius: var(--r-small); margin-bottom: 8px; font-size: 14px;
}
.chart-wrap { position: relative; height: 280px; }
code { background: var(--box); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

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

.mobile-only { display: none; }
.backdrop { display: none; position: fixed; inset: 0; background: rgba(27, 36, 48, .38); z-index: 55; }
.backdrop.show { display: block; }

@media (max-width: 900px) {
  /* на телефоне те же элементы, только крупнее под палец */
  :root { --h-ctl: 44px; --h-ctl-sm: 34px; }
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }

  .topbar { height: 56px; gap: 10px; padding: 0 12px; }
  .topbar .right .hide-mobile { display: none; }

  /* верхнее меню разделов на телефоне — своя полоса под шапкой, листается вбок;
     оформление то же, что на большом экране: текст и черта под активным */
  .topbar nav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 59; gap: 22px;
    height: 44px; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* на телефоне полоса разделов уходит из потока (position: fixed), поэтому
     растягивать шапку больше нечем: пустоту между логотипом слева и поиском
     с аватаром справа держит margin-left: auto у правой группы */
  .topbar .right { margin-left: auto; }
  .topbar .logo img { height: 22px; }
  .topbar .logo .sub { display: none; }
  /* на телефоне поиск — круглая кнопка, поле раскрывается по нажатию;
     кружок ровно с аватаром рядом (34 px), иначе в шапке два разных круга */
  .topbar form.search input[name=q] {
    width: 34px; height: 34px; padding: 0; border-radius: 50%; color: transparent;
    transition: width .2s, padding .2s, border-radius .2s;
  }
  .topbar form.search input[name=q]::placeholder { color: transparent; }
  .topbar form.search .ico { left: 50%; transform: translate(-50%, -50%); }
  .topbar form.search:focus-within input[name=q] {
    width: 190px; padding: 0 12px 0 34px; border-radius: var(--r-pill); color: var(--ink);
  }
  .topbar form.search:focus-within input[name=q]::placeholder { color: var(--muted); }
  .topbar form.search:focus-within .ico { left: 11px; transform: translateY(-50%); }

  .burger {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 0; background: transparent; color: var(--ink); font-size: 20px; cursor: pointer;
    margin-left: -6px;
  }

  .sidebar {
    /* 101 px — под шапкой и под полосой разделов (та fixed и лежит выше меню,
       иначе накрывала бы его первый пункт); то же число, что у .content */
    top: 101px; width: 278px; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(27, 36, 48, .18);
    /* выше затемнения (55), иначе тёмный слой лежит поверх открытого меню и
       забирает нажатия себе — любой пункт вместо перехода просто закрывал меню */
    z-index: 56;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar a.item { padding: 13px 18px; font-size: 15px; }

  /* создание на телефоне — только плавающей кнопкой в правом нижнем углу;
     дубль рядом с заголовком отнимает место и уводит палец на верх экрана */
  .page-head .btn-create { display: none; }

  /* 56 px шапки + 44 px полосы разделов + её нижняя линия */
  .content { margin: 101px 0 calc(76px + env(safe-area-inset-bottom)); padding: 14px 12px 24px; }
  .page-title { font-size: 23px; }
  .page-head { gap: 10px; margin-bottom: 14px; }

  .panel-pad { --pad-y: 15px; --pad-x: 15px; }

  .tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 12px 4px; margin: 0 -12px 14px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; }
  .subtabs { overflow-x: auto; gap: 18px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs a { white-space: nowrap; padding: 12px 2px; }

  /* таблицы → карточки с подписями полей */
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 14px 16px; margin-bottom: 10px;
  }
  table.grid td { border: 0; padding: 3px 0; }
  table.grid td.num { text-align: left; }
  table.grid td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  table.grid td.main[data-label]::before { content: none; }
  table.grid td.main { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
  table.grid tr:hover td { background: transparent; }

  .kanban { gap: 10px; margin: 0 -12px; padding: 0 12px 16px; scroll-snap-type: x mandatory; }
  .kanban-col { min-width: 83vw; width: 83vw; scroll-snap-align: start; }
  /* на телефоне колонка во весь экран: шапка крупнее и не прилипает к первой
     карточке, между карточками тоже больше воздуха */
  .kanban-col .col-head {
    padding: 11px 14px; font-size: 13px; border-radius: var(--r-card) var(--r-card) 0 0;
  }
  .kanban-col .col-body { padding: 14px 0 0; gap: 12px; }

  /* minmax(0, 1fr), а не 1fr: у 1fr минимум считается по содержимому, и полоса
     стадий (ступени по 98 px) растягивала единственную колонку до 433 px —
     карточка уезжала за правый край, а страница ходила вбок */
  .entity { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form-row { grid-template-columns: 1fr; }

  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 14px 16px; }
  .tile .v { font-size: 24px; }
  .cards { grid-template-columns: 1fr; }

  .mail-im { grid-template-columns: 1fr; height: calc(100dvh - 260px); min-height: 320px; }
  .mail-im.has-current { height: calc(100dvh - 196px); }
  .mail-im .list { border-right: 0; }
  .mail-im.has-current .list { display: none; }

  /* телефон: один экран за раз — список или переписка, сведения уходят в задачу */
  .content:has(> .im) {
    height: auto;
    min-height: calc(100dvh - 105px - 76px - env(safe-area-inset-bottom));
    padding-bottom: 14px;
  }
  .im { grid-template-columns: 1fr; min-height: 320px; }
  .im-talk.tchat { padding-bottom: 8px; }
  .im .tchat-compose { padding-bottom: 2px; }
  .im-col { border-right: 0; }
  .im.has-current .im-col { display: none; }
  .im .im-side, .im .im-strip, .im.side-off .im-side, .im.side-off .im-strip { display: none; }
  .im-mob { display: block; }
  .im-pick { display: inline-flex; }
  .im-row { padding: 13px 14px; }
  /* вся строка карточки должна помещаться в экран: ничего не обрезаем вбок */
  .im-t {
    white-space: normal; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .im-m { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
  .im-p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
  .im-rows { overflow-x: hidden; }
  /* на телефоне действия карточки живут под свайпом — меню-троеточие лишнее */
  .im-more { display: none; }
  .im-ava { width: 44px; height: 44px; font-size: 14px; }
  .im-ava .ico { width: 22px; height: 22px; }
  .im-t { font-size: 15px; }
  .im-p { font-size: 13px; }
  .im-m { font-size: 12px; }
  .im-top { padding: 8px 8px 8px 4px; }
  .im-talk.tchat { padding: 10px 10px 8px; gap: 8px; }
  /* плашка считает ширину от свободного места, а не от всей ленты:
     иначе вместе с аватаром она выходила за экран */
  .im-talk .tchat-body { max-width: 100%; }
  .im-talk .tchat-msg { gap: 8px; }
  .im-talk .tchat-msg.own .tchat-body { max-width: 92%; }
  /* участников показывает шапка-выжимка, в заголовке это лишний дубль */
  .im-top .im-top-s { display: none; }

  /* строка фильтров не сжимается в узкие поля, а раскладывается по строкам */
  .panel form.flex { flex-wrap: wrap; }
  .panel form.flex > input, .panel form.flex > select { flex: 1 1 100%; min-width: 0; }
  .panel form.flex > .btn, .panel form.flex > button { flex: 0 0 auto; }
  .panel form.flex > label.flex { flex: 1 1 auto; }
  .panel form.flex > label.flex input { flex: 0 0 auto; width: 20px; height: 20px; }

  /* на телефоне ступени не подписать честно: сверху строка текущей стадии,
     сама лента тянется пальцем и остаётся кликабельной */
  .stage-block { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; }
  .stage-label { margin-top: 0; }
  .stage-now { display: flex; }
  /* прокрутка обрезает и по вертикали: без отступа сверху у текущей ступени
     срезается ореол в 4 px — отступ компенсируем отрицательным margin */
  .stage-line { overflow-x: auto; padding: 6px 0 4px; margin-top: -6px; scrollbar-width: none; }
  .stage-line::-webkit-scrollbar { display: none; }
  .stage-line button { flex: 0 0 98px; }
  .btn { padding: 0 18px; }
  input, select, textarea { font-size: 16px; }  /* iOS не зумит поле при фокусе */

  .chart-wrap { height: 230px; }
}

/* нижняя навигация — основной способ перемещения на телефоне */
.bottombar { display: none; }
@media (max-width: 900px) {
  /* пунктов больше, чем влезает — полоса листается вбок */
  .bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    /* высота = сама полоса + безопасная зона, иначе Safari съедает её из 64px
       и значки с подписями сжимаются */
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg); border-top: 1px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .bottombar::-webkit-scrollbar { display: none; }
  .bottombar a {
    flex: 0 0 auto; min-width: 20vw; padding: 8px 4px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 5px; color: var(--muted); font-size: 11px; text-decoration: none; position: relative;
    white-space: nowrap;
  }
  .bottombar a .ico { width: 24px; height: 24px; flex: none; }
  .bottombar a.active { color: var(--accent); }
  .bottombar a .dot {
    position: absolute; top: 9px; right: 50%; margin-right: -16px; background: var(--err);
    color: #fff; border-radius: var(--r-pill); font-size: 9px; padding: 1px 5px; font-weight: 600;
  }
  .fab {
    position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom));
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--accent); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 26px; box-shadow: 0 8px 20px rgba(36, 104, 201, .35);
    z-index: 59; text-decoration: none;
  }
  .fab:hover { color: #fff; text-decoration: none; }
  /* плюс — тот же значок портала, что и на кнопке «Создать»: текстовый «+»
     сидел выше середины кружка (глиф стоит на математической оси, а не по
     центру строки), и на телефоне это было видно */
  .fab .ico { width: 26px; height: 26px; stroke-width: 2; }

  /* пока открыт выпадающий список, плавающая кнопка не спорит с ним за место:
     она лежит ровно поверх нижних пунктов длинного меню */
  body.pick-open .fab { opacity: 0; pointer-events: none; }
  /* меню среза не шире экрана */
  .slice-menu { max-width: calc(100vw - 24px); }

  /* Открытое левое меню перекрывалось нижней полосой и плавающей кнопкой: они
     fixed и лежат выше меню (z-index 60 и 59 против 50), поэтому нижние пункты
     — вплоть до «Выйти» — нажать было нельзя. Пока меню открыто, полоса
     уезжает вниз, а кнопка гаснет. И то и другое — соседи .sidebar в разметке
     (backdrop · sidebar · content · bottombar · fab), так что хватает CSS. */
  .bottombar { transition: transform .22s ease; }
  .sidebar.open ~ .bottombar { transform: translateY(100%); }
  .fab { transition: opacity .18s ease; }
  .sidebar.open ~ .fab { opacity: 0; pointer-events: none; }
}

@media (max-width: 420px) {
  .kanban-col { min-width: 89vw; width: 89vw; }
}

/* герой главной — фирменная плашка с «хвостом кометы» */
.hero {
  background:
    radial-gradient(120% 160% at 88% -30%, rgba(196, 231, 251, .55) 0%, rgba(196, 231, 251, 0) 55%),
    linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%);
  border-color: #DDE7F4;
}
@media (max-width: 900px) { .hero .ava.lg { width: 60px; height: 60px; font-size: 20px; } }

/* ------------------------------------------------------- экран входа */
.auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; background: var(--bg); }
.auth-promo {
  padding: 56px 60px; color: var(--ink);
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(196, 231, 251, .55) 0%, rgba(196, 231, 251, 0) 60%),
    linear-gradient(180deg, #F7FAFE 0%, #EEF4FC 100%);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.auth-logo { height: 34px; width: auto; align-self: flex-start; }
.auth-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.auth-h1 { font-size: 42px; font-weight: 300; margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.auth-lead { font-size: 16px; color: var(--ink-2); margin: 0; max-width: 440px; }
.auth-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 440px; }
.auth-list li { position: relative; padding-left: 26px; color: var(--ink-2); }
.auth-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg);
}
.auth-since { margin-top: 20px; font-size: 13px; color: var(--muted); }

.auth-form { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px; gap: 18px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-logo-sm { height: 28px; display: none; margin-bottom: 18px; }
.auth-title { font-size: 26px; font-weight: 300; margin: 0 0 4px; letter-spacing: -.02em; }
.auth-foot { text-align: center; }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-max { width: 100%; background: #1B2430; border-color: #1B2430; color: #fff; }
.btn-max:hover { background: #0F1723; border-color: #0F1723; color: #fff; }
.max-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 6px; background: #fff; color: #1B2430; font-weight: 700; font-size: 12px;
}
.max-code {
  font-size: 40px; font-weight: 300; letter-spacing: .22em; color: var(--accent);
  background: var(--accent-bg); border-radius: var(--r-plate); padding: 18px 10px;
  margin: 14px 0 6px; font-variant-numeric: tabular-nums;
}
.auth-wait { margin: 16px 0 4px; color: var(--muted); font-size: 13px; }
.auth-wait.bad { color: var(--err); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-promo { display: none; }
  .auth-logo-sm { display: block; }
  .auth-form { justify-content: flex-start; padding: 42px 20px 24px; }
  .auth-title { font-size: 23px; }
}

/* ================================================================== */
/*  Выдвижные панели (как слайдеры Битрикс24): карточка открывается    */
/*  поверх списка, панели складываются стопкой, предыдущие видно       */
/*  корешками слева.                                                  */
/* ================================================================== */

.sl-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.sl-root.open { pointer-events: auto; }
.sl-overlay {
  position: absolute; inset: 0; background: rgba(27, 36, 48, .32);
  opacity: 0; transition: opacity .2s;
}
.sl-root.open .sl-overlay { opacity: 1; }
body.sl-lock { overflow: hidden; }

.sl-panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(232px + var(--depth) * 56px);
  background: var(--box); box-shadow: -12px 0 38px rgba(27, 36, 48, .16);
  display: flex; flex-direction: column;
  transform: translateX(30px); opacity: 0;
  transition: transform .22s ease, opacity .18s ease;
}
.sl-panel.shown { transform: translateX(0); opacity: 1; }

.sl-head {
  display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px;
  background: var(--bg); border-bottom: 1px solid var(--line); flex: none;
}

/* колонка кнопок управления слева от панели — единым блоком, в стиле портала */
.sl-tools {
  position: absolute; left: -46px; top: 16px; display: flex; flex-direction: column; gap: 0;
  background: var(--bg); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r-plate) 0 0 var(--r-plate); overflow: hidden;
  box-shadow: -4px 4px 16px rgba(27, 36, 48, .10);
}
.sl-tool {
  width: 45px; height: 44px; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  background: var(--bg); color: var(--ink-2); display: flex; align-items: center;
  justify-content: center; text-decoration: none; transition: background .15s, color .15s;
}
.sl-tool:last-child { border-bottom: 0; }
.sl-tool:hover { background: var(--box); color: var(--accent); text-decoration: none; }
.sl-tool.sl-close { background: var(--accent); color: #fff; border-bottom-color: var(--accent); }
.sl-tool.sl-close:hover { background: var(--accent-hover); color: #fff; }
.sl-tool .ico {
  width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* развёрнутая панель: инструменты внутри, но контент не уезжает под них,
   а сам контент держим в читаемой ширине, а не во весь экран */
.sl-panel.wide { left: 0 !important; }
.sl-panel.wide .sl-tools {
  left: 14px; border-right: 1px solid var(--line); border-radius: var(--r-plate);
}
.sl-panel.wide .sl-head { padding-left: 76px; }
.sl-panel.wide .sl-body { padding-left: 76px; }
.sl-panel.wide .sl-head > *, .sl-panel.wide .sl-body > * { max-width: 1180px; }
.sl-panel.wide .sl-body { display: flex; flex-direction: column; align-items: stretch; }
.sl-panel.wide .sl-body > * { width: 100%; margin-left: auto; margin-right: auto; }

/* всплывающая подсказка после копирования ссылки */
.sl-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 13px; z-index: 120; opacity: 0; transition: opacity .18s, transform .18s;
}
.sl-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sl-title {
  font-size: 20px; font-weight: 300; letter-spacing: -.01em; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-actions { display: flex; gap: 8px; align-items: center; }


.sl-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.sl-body > .panel:first-child { margin-top: 0; }
.sl-loading { padding: 60px 20px; text-align: center; color: var(--muted); }

/* корешок панели, которая осталась под верхней */
.sl-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(27, 36, 48, .06);
}

@media (max-width: 900px) {
  /* на телефоне панель занимает весь экран: ни полоски фона сверху, ни скруглений.
     Стопку панелей сдвигом больше не показываем — на форме во весь экран этот
     сдвиг только отъедал высоту, а увидеть под ним всё равно нечего. */
  .sl-panel { left: 0; top: 0; border-radius: 0; overflow: hidden; }
  .sl-head { height: 56px; padding: 0 10px; gap: 8px; }
  .sl-title { font-size: 16px; }
  .sl-actions { display: none; }
  /* управление панелью — плавающий столбик у правого края поверх содержимого.
     Строкой наверху он съедал целый ряд высоты. Порядок перевёрнут: печать
     сверху, крестик снизу — под большой палец. Столбик стоит по середине
     высоты, поэтому не спорит с липкими кнопками сохранения внизу экрана. */
  .sl-tools {
    position: fixed; left: auto; right: 10px; top: 50%; transform: translateY(-50%);
    flex-direction: column-reverse; gap: 0; z-index: 90;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate);
    box-shadow: 0 6px 22px rgba(27, 36, 48, .18); overflow: hidden;
  }
  .sl-panel { display: flex; flex-direction: column; }
  .sl-panel .sl-tools { margin: 0; align-self: auto; }
  .sl-panel .sl-head { order: 1; border-top: 0; }
  .sl-panel .sl-body { order: 2; }
  /* столбик перевёрнут, поэтому и разделитель переезжает с низа на верх кнопки;
     у последней в разметке (она же верхняя на экране) его нет */
  .sl-tool {
    width: 44px; height: 44px;
    border-right: 0; border-bottom: 0; border-top: 1px solid var(--line);
  }
  .sl-tool:last-child { border-top: 0; }
  .sl-tool.sl-wide { display: none; }
  .sl-body { padding: 12px 12px 40px; }
}

/* --------------------------------------------------- главная и лента */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 16px; align-items: start; }
.home-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 72px; }
.home-side .panel + .panel { margin-top: 0; }

/* карточка «это я» */
.me-card { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.me-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-hover); }
.me-text { min-width: 0; flex: 1; }
.me-name { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; }
.me-pos { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.me-role { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.me-open { display: none; }
.me-card:hover .me-name { color: var(--accent); }

/* подвал блока со сводкой */
.panel-foot {
  display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.panel-foot .link-action { margin-left: auto; }

/* сводка цифр строками */
.stat-list { display: flex; flex-direction: column; }
.stat-row {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.stat-row:last-child { border-bottom: 0; }
.stat-row:hover { background: var(--box); text-decoration: none; }
.stat-value {
  font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-value.accent { color: var(--accent); }
.stat-label { font-size: 12px; color: var(--muted); }

/* публикация записи */
.publisher textarea { border: 0; background: var(--box); border-radius: var(--r-card); resize: none; }
.publisher textarea:focus { box-shadow: none; background: var(--bg); border: 1px solid var(--accent); }
.pub-attach {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
  color: var(--ink-2); background: var(--box); border-radius: var(--r-pill); padding: 7px 14px;
}
.pub-attach:hover { background: var(--accent-bg); color: var(--accent-active); }

/* запись ленты */
.post-head { display: flex; align-items: flex-start; gap: 12px; }
.post-author { font-weight: 500; color: var(--ink); }
.post-author:hover { color: var(--accent); text-decoration: none; }
.post-important { border-color: #F0DEBC; background: #FFFCF5; }
/* закреплённая запись ленты: та же карточка, но с меткой и подсветкой края —
   закрепление видно и в блоке «Закреплено» над лентой, и в самой ленте */
.post-pinned { border-color: var(--accent-bg); box-shadow: 0 2px 10px rgba(36, 104, 201, .06); }
.post-pin-badge { display: inline-flex; align-items: center; gap: 5px; }
.post-pin-badge .ico { width: 13px; height: 13px; }
.feed-pinned { margin-bottom: 6px; }
.feed-pinned .panel-title { display: flex; align-items: center; gap: 6px; }
.feed-pinned .panel-title .ico { width: 14px; height: 14px; }
.feed-pinned .post + .post { margin-top: 10px; }
.post-text { margin-top: 12px; font-size: 15px; line-height: 1.55; }
.post-image { margin-top: 12px; border-radius: var(--r-card); max-width: 100%; display: block; }
.post-file { display: inline-block; margin-top: 10px; font-size: 13px; }
.post-actions {
  display: flex; align-items: center; gap: 4px; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.post-btn {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-pill);
}
.post-btn:hover { background: var(--box); color: var(--ink); }
.post-btn.on { color: var(--accent); font-weight: 500; }
.post-comments { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.post-comment { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.post-comment-author { font-weight: 500; font-size: 14px; }

/* поле комментария: аватар, поле и круглая кнопка отправки */
.comment-form { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.comment-form textarea {
  flex: 1; resize: none; min-height: 40px; padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--box); border-color: transparent;
}
.comment-form textarea:focus { background: var(--bg); border-color: var(--accent); }

@media (max-width: 1100px) {
  .home { grid-template-columns: 1fr; }
  .home-side { position: static; }
}
@media (max-width: 900px) {
  .me-card .ava.lg { width: 60px; height: 60px; font-size: 20px; }
  .stat-row { padding: 12px 15px; }
}

/* ------------------------------------------------- карточка сотрудника */
.ava.xl { width: 96px; height: 96px; font-size: 32px; font-weight: 400; }
.emp-name { font-size: 26px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; }
.emp-position { color: var(--ink-2); margin-top: 4px; font-size: 15px; }

/* реквизиты: три смысловые группы, в каждой — подпись и значение в строку */
.req-title { font-size: 18px; font-weight: 500; }
.req-legal { color: var(--muted); font-size: 13px; margin-top: 2px; }
.req-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 30px; margin-top: 16px;
}
.req-group { background: var(--box); border-radius: var(--r-card); padding: 14px 16px; }
.req-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin-bottom: 10px;
}
.req-line {
  display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.req-line:last-child { border-bottom: 0; }
.req-line span { color: var(--muted); font-size: 12px; flex: 0 0 44%; }
.req-line b { font-weight: 500; font-size: 14px; flex: 1; word-break: break-word; }
.num-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* место сотрудника в оргструктуре — цепочка отделов сверху вниз */
.dep-path { display: flex; flex-direction: column; gap: 0; margin-bottom: 2px; }
.dep-step {
  position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--line);
  margin-left: 5px;
}
.dep-step::before {
  content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--field-line);
}
.dep-step.current { border-left-color: var(--accent); }
.dep-step.current::before { background: var(--accent); border-color: var(--accent); }
.dep-step:last-child { border-left-color: transparent; }
.dep-step-name { display: block; font-weight: 500; }

/* кликабельные плитки карточки */
/* четыре плитки в ряд помещаются рядом с колонкой человека */
.emp-tiles { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.emp-tiles .tile { display: block; text-decoration: none; color: var(--ink); }
.emp-tiles .tile:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-hover); }

@media (max-width: 900px) {
  .ava.xl { width: 72px; height: 72px; font-size: 24px; }
  .emp-name { font-size: 21px; }
  .req-grid { grid-template-columns: 1fr; }
}

/* блок «моя карточка» на главной */
.me-card { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.me-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-hover); }
.me-name { display: block; font-size: 18px; font-weight: 400; letter-spacing: -.01em; }
.me-open { margin-left: auto; color: var(--accent); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) { .me-open { display: none; } }


/* ------------------------------------------------------------- печать */
@media print {
  .topbar, .sidebar, .bottombar, .backdrop, .fab, .sl-tools, .sl-toast { display: none !important; }
  body.sl-printing .content { display: none !important; }
  body.sl-printing .sl-panel { display: none !important; }
  body.sl-printing .sl-panel.printing {
    display: flex !important; position: static; inset: auto; left: 0 !important;
    box-shadow: none; background: #fff;
  }
  body.sl-printing .sl-panel.printing .sl-head { border-bottom: 1px solid #ddd; padding: 0 0 10px; }
  body.sl-printing .sl-panel.printing .sl-body { overflow: visible; padding: 12px 0; }
  body.sl-printing .sl-root { position: static; }
  .panel { break-inside: avoid; border-color: #ddd; }
  a { color: #1B2430; text-decoration: none; }
}

/* --------------------------------------- выбор значения ссылкой-надписью */
.pick { position: relative; display: inline-block; max-width: 100%; }
.pick-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-search {
  width: 100%; margin-bottom: 6px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-small); background: var(--box);
}
.pick-search:focus { box-shadow: none; border-color: var(--accent); background: var(--bg); }
.pick-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.pick-menu.up { top: auto; bottom: calc(100% + 8px); }
.pick-toggle {
  border: 0; background: none; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  text-align: left; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(36, 104, 201, .35);
}
.pick-toggle:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.pick-arrow {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; margin-top: 2px;
  transition: transform .15s;
}
.pick.open .pick-arrow { transform: rotate(180deg); }
.pick-menu {
  /* z-index 70: на телефоне нижняя полоса (60) и плавающая кнопка (59) — fixed,
     и при z-index 30 меню открывалось под ними, а нижние пункты было не нажать */
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 190px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(27, 36, 48, .14); padding: 5px; display: flex;
  flex-direction: column;
}
.pick-item {
  border: 0; background: none; text-align: left; font: inherit; font-size: 14px;
  color: var(--ink); padding: 8px 12px; border-radius: var(--r-small); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* список — флекс-колонка с max-height: без этого пункты сжимаются
     до нечитаемых полосок, когда их больше, чем влезает в меню */
  flex: none;
}
.pick-item { display: flex; align-items: center; gap: 9px; transition: background .12s; }
/* число справа у пункта (сколько задач в статусе) и то же число у выбранного значения */
.pick-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-item .pick-count { margin-left: auto; padding-left: 10px; }
.pick-item.on .pick-count { color: var(--accent); }
.pick-item::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--field-line);
}
.pick-item:hover { background: var(--box); }
.pick-item:hover::before { border-color: var(--accent); }
.pick-item.on { color: var(--accent); font-weight: 500; background: var(--accent-bg); }
.pick-item.on::before {
  border-color: var(--accent); background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

/* в формах поле выбора выглядит как обычное поле ввода */
.pick.as-field { display: block; width: 100%; }
/* селектор — значение-ссылка: иконка, надпись, пунктир (как дата) */
.pick.as-field { display: inline-flex; max-width: 100%; width: auto; }
.pick.as-field .pick-toggle {
  width: auto; max-width: 100%; justify-content: flex-start; gap: 7px;
  border: 0; border-bottom: 1px dashed rgba(36, 104, 201, .5); border-radius: 0;
  background: none; color: var(--accent); padding: 2px 0; min-height: 0;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.pick.as-field .pick-toggle .ico { width: 16px; height: 16px; flex: none; color: currentColor; }
.pick.as-field .pick-toggle:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
.pick.as-field.open .pick-toggle { color: var(--accent-hover); border-bottom-style: solid; }
.pick.as-field .pick-toggle.empty { color: var(--muted); border-bottom-color: var(--field-line); }
.pick.as-field .pick-toggle.empty .pick-label { color: inherit; }
.pick.as-field .pick-arrow { opacity: .5; }
.pick.as-field .pick-menu { min-width: 220px; max-width: 340px; }
.org-form .pick, form.flex .pick { display: inline-flex; }
.pick-menu { min-width: 190px; max-width: 330px; }
@media (max-width: 900px) {
  /* на телефоне меню — панель у нижнего края экрана: рядом с полем оно не
     помещается. Раньше положение считалось от поля (`top`/`bottom: 100%`), и
     при fixed это давало отсчёт от края экрана — длинное меню уезжало за верх,
     а нижние пункты прятались под полосой навигации и плавающей кнопкой. */
  .pick-menu, .pick-menu.up {
    position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .pick-list { max-height: 50vh; }
}

/* ссылки-действия внутри строк сведений */
.link-ok {
  color: var(--ok); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(30, 127, 79, .4);
}
.link-ok:hover { color: #17663f; text-decoration-color: currentColor; }
.link-muted {
  border: 0; background: none; padding: 0; font: inherit; color: var(--muted);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-muted:hover { color: var(--err); }

/* ==================================================================== */
/*  Формы портала: смысловые разделы, переключатели, фото и цвет         */
/* ==================================================================== */

.form-section + .form-section { margin-top: 14px; }
.form-section-head { margin-bottom: 16px; }
.form-section-title { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.form-section-note { color: var(--muted); font-size: 13px; margin-top: 3px; }

.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.req-mark { color: var(--err); }
.field-error { color: var(--err); font-size: 12px; margin-top: 5px; }
.msg-error { background: var(--err-bg); border-color: #F0CFCB; color: var(--err); }

/* фото сотрудника: кружок-превью и кнопка выбора */
.emp-form-top { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.avatar-field { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 6px; }
.avatar-preview {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 400;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-field label.btn { cursor: pointer; }
.avatar-name { font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-input input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-input input[type=file] + label { display: none; }
.avatar-input a { font-size: 12px; }
.avatar-input { font-size: 12px; color: var(--muted); }

/* переключатели вместо голых галочек */
.switch-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 4px; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-box {
  width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--field-line);
  position: relative; flex: none; transition: background .15s; margin-top: 2px;
}
.switch-box::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch input:checked + .switch-box { background: var(--accent); }
.switch input:checked + .switch-box::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-box { box-shadow: 0 0 0 3px var(--accent-bg); }
.switch b { display: block; font-weight: 500; font-size: 14px; }
.switch .help { margin-top: 2px; }

/* цвет аватара кружками фирменной палитры */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(27, 36, 48, .08);
}
.swatch:hover { transform: scale(1.06); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-bg); }
.color-native { display: none; }

/* панель действий формы прилипает к низу и не накрывает последний блок */
.emp-form { padding-bottom: 6px; }
.emp-form .form-section:last-of-type { margin-bottom: 8px; }
.form-actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px;
  padding: 14px 0 10px; margin-top: 14px;
  background: linear-gradient(180deg, rgba(243, 246, 250, 0) 0%, var(--box) 45%);
}
.sl-body .form-actions { background: linear-gradient(180deg, rgba(243, 246, 250, 0), var(--box) 40%); }
/* действия у правого края формы: «Отмена» слева от главной кнопки, «Сохранить»
   последней у самого края. На телефоне обе кнопки и так во всю ширину. */
.form-actions-end { justify-content: flex-end; }
/* действия у правого края формы: «Отмена» слева от главной кнопки, «Сохранить»
   последней у самого края. На телефоне обе кнопки и так во всю ширину. */

/* автозаполнение браузера не красит поля в свой жёлтый */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--bg) inset;
  caret-color: var(--ink);
}

@media (max-width: 900px) {
  .emp-form-top { gap: 16px; }
  .avatar-preview { width: 72px; height: 72px; font-size: 24px; }
  .switch-row { gap: 16px; flex-direction: column; }
}

/* фирменные галочки во всех формах портала */
input[type=checkbox]:not(.switch input) {
  appearance: none; width: 20px; height: 20px; border: 1px solid var(--field-line);
  border-radius: 6px; background: var(--bg); cursor: pointer; position: relative;
  vertical-align: -4px; flex: none;
}
input[type=checkbox]:not(.switch input):hover { border-color: var(--accent); }
input[type=checkbox]:not(.switch input):checked {
  background: var(--accent); border-color: var(--accent);
}
input[type=checkbox]:not(.switch input):checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type=checkbox]:not(.switch input):focus-visible { box-shadow: 0 0 0 3px var(--accent-bg); }
.field input[type=checkbox] { margin-top: 4px; }

/* ==================================================================== */
/*  Элементы по карте docs/ui-map.md — один элемент = один смысл         */
/* ==================================================================== */

/* --- статусы: цветной текст вместо плашки --- */
.status { font-weight: 600; font-size: 13px; white-space: nowrap; }
.home-side .status, .list-side .status { font-size: 12px; }
.status--work { color: var(--accent); }
.status--wait { color: var(--warn); }
.status--ok { color: var(--ok); }
.status--fail { color: var(--err); }
.status--idle { color: var(--muted); }

/* точка-маркер для цвета стадии из базы */
.dot-color {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; flex: none;
}

/* --- строка списка --- */
.list-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { text-decoration: none; }
.list-row:hover .list-title { color: var(--accent); }
.list-main { flex: 1; min-width: 0; }
.list-title {
  display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35;
  color: var(--ink); transition: color .12s;
}
.list-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.list-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: right; flex: none;
}
.list-side .num { font-weight: 600; font-size: 14px; }

/* --- ссылки-действия --- */
.link-action {
  color: var(--accent); font-size: 13px; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(36, 104, 201, .35);
}
.link-action:hover { text-decoration-color: currentColor; }
/* то же действие, но отправляющее форму: ссылка, а не кнопка с обводкой */
button.link-action {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
  cursor: pointer; line-height: 1.4;
}
/* ссылка-действие в ряду с кнопкой: по центру, а не по верхнему краю */
.tl-foot .link-action, .dp-ask-foot .link-action, .dp-head .link-action,
.meet-card .link-action, .tl-head .link-action { align-self: center; }
.tl-foot form, .dp-ask-foot form { display: inline-flex; align-items: center; }
.link-danger {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-danger:hover { color: var(--err); }

/* --- кнопка-иконка --- */
.btn-icon {
  width: var(--h-ctl); height: var(--h-ctl); padding: 0; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer;
}
.btn-icon:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- шапка блока: заголовок слева, действие справа --- */
.panel-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.panel-head .panel-title { margin: 0; flex: 1; }

/* ------------------------------------------------- схема оргструктуры */
.org { display: flex; flex-direction: column; gap: 14px; }
.org-node { position: relative; }

.org-dep {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate);
  padding: 16px 18px;
}
.org-dep-free { border-style: dashed; }
.org-dep-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.org-dep-name { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }

/* люди отдела — карточками в сетку */
.org-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.org-person {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg);
}
.org-person:hover { border-color: var(--field-line); }
.org-person-name { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }
.org-person-name:hover { color: var(--accent); text-decoration: none; }
.org-person-role { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.org-move select { width: auto; max-width: 190px; padding: 4px 10px; font-size: 12px; }

/* вложенные отделы: линия ведёт от родителя и обрывается на последнем */
.org-children {
  margin: 12px 0 0 26px; padding-left: 22px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
}
.org-children > .org-node { position: relative; }
.org-children > .org-node::after {
  content: ""; position: absolute; left: -22px; top: -12px; bottom: -12px;
  width: 2px; background: var(--line);
}
.org-children > .org-node:last-child::after { bottom: auto; height: 40px; }
.org-children > .org-node::before {
  content: ""; position: absolute; left: -22px; top: 28px; width: 20px; height: 2px;
  background: var(--line); z-index: 1;
}

/* форма отдела */
.org-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.org-form input, .org-form select { width: auto; min-width: 170px; flex: 1 1 170px; }
.org-form.panel-pad { margin-bottom: 16px; margin-top: 0; }

/* коллеги и место в структуре в карточке сотрудника */
.dep-step {
  position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--line);
  margin-left: 5px;
}
.dep-step::before {
  content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--field-line);
}
.dep-step.current { border-left-color: var(--accent); }
.dep-step.current::before { background: var(--accent); border-color: var(--accent); }
.dep-step:last-child { border-left-color: transparent; }
.dep-step-name { display: block; font-weight: 500; }

@media (max-width: 900px) {
  .org-people { grid-template-columns: 1fr; }
  .org-children { margin-left: 10px; padding-left: 12px; }
  .org-children > .org-node::before { left: -12px; width: 10px; }
  .org-form input, .org-form select { flex: 1 1 100%; }
  .org-move select { max-width: 140px; }
}

/* иконки в ленте — того же линейного набора, что и в меню */
.pub-attach .ico, .post-btn .ico, .post-file .ico { width: 17px; height: 17px; }
.pub-attach { line-height: 1; }
.post-btn { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }
.post-btn.on .ico { color: var(--accent); }
.post-file { display: inline-flex; align-items: center; gap: 7px; }
.pub-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pub-spacer { flex: 1; min-width: 0; }
@media (max-width: 620px) {
  .pub-actions { flex-wrap: wrap; }
  .pub-actions .btn-primary { width: 100%; justify-content: center; }
  .pub-spacer { display: none; }
}
.pub-check {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2);
  cursor: pointer; padding: 7px 2px;
}
.pub-check input { margin: 0; }

/* ------------------------------------------------------- уведомления */
.alert-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg);
  margin-bottom: 10px;
}
.alert-row:last-child { margin-bottom: 0; }
.alert-row:hover { border-color: var(--field-line); }
/* непрочитанное — цветная полоса слева, а не заливка: строки не сливаются */
.alert-row.unread { border-left: 3px solid var(--accent); padding-left: 12px; }
.alert-icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--box); color: var(--ink-2);
}
.alert-icon .ico { width: 18px; height: 18px; }
.alert-icon--task { background: var(--accent-bg); color: var(--accent-active); }
.alert-icon--deal { background: #E4EEDF; color: var(--ok); }
.alert-icon--money { background: var(--warn-bg); color: var(--warn); }
.alert-icon--chat { background: var(--mail-bg); color: var(--mail); }
.alert-main { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; display: block; }
.alert-main:hover { text-decoration: none; }
.alert-main:hover .alert-title { color: var(--accent); }
.alert-title { display: block; font-weight: 500; font-size: 14.5px; }
.alert-text { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.alert-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.alert-side { flex: none; padding-top: 2px; }
.alert-row.unread .alert-title { font-weight: 600; }
.btn-icon-sm { width: var(--h-ctl-sm); height: var(--h-ctl-sm); }
.btn-icon-sm svg { width: 15px; height: 15px; }
.alerts-note {
  color: var(--muted); font-size: 13px; line-height: 1.55; margin: 4px 2px 0;
  max-width: 900px;
}



@media (max-width: 900px) {
  .alert-row { padding: 12px 0; gap: 10px; }
  .alert-side { display: none; }
}

/* счётчик в верхнем меню — всегда красный, и у активной вкладки тоже:
   он говорит «есть непрочитанное», а не «вы здесь»; отбивка держится gap вкладки */
.topbar nav .nav-count {
  display: inline-block; min-width: 18px; padding: 0 5px;
  background: var(--err); color: #fff; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; flex: none;
}

/* форма отдела в схеме структуры */
.dep-form {
  background: var(--box); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; margin: 12px 0 14px;
}
.dep-form.panel-pad { background: var(--bg); margin-top: 0; }
.dep-form-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 12px;
}
.dep-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px;
}
.dep-form-grid .field { margin-bottom: 12px; }
.dep-form-grid .field-narrow { max-width: 150px; }
.dep-form-grid input, .dep-form-grid select, .dep-form-grid .pick { width: 100%; }
.dep-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .dep-form-grid { grid-template-columns: 1fr; }
  .dep-form-grid .field-narrow { max-width: none; }
}

/* ======================================================== раздел «Диск» */
/* файловый менеджер портала и Яндекс.Диска: строка-файл с иконкой-плиткой,
   тихие иконочные действия справа, групповая панель появляется по отметкам */

/* путь: Диск / Папка / Подпапка */
.disk-crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px;
  color: var(--muted); min-width: 0;
}
.disk-crumbs a { color: var(--ink-2); }
.disk-crumbs a:hover { color: var(--accent); text-decoration: none; }
.disk-crumbs .sep { color: var(--field-line); }
.disk-crumbs .here { color: var(--ink); font-weight: 500; }

/* панель действий над списком */
.disk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.disk-bar form { display: flex; align-items: center; gap: 8px; }
.disk-bar .grow { flex: 1; min-width: 0; }
.disk-bar input[type=text], .disk-bar input:not([type]) { width: 190px; }

/* выбор файлов вместо серой кнопки браузера */
.file-pick { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.file-pick .pick-label { display: inline-flex; align-items: center; gap: 7px; }
.file-pick .pick-label .ico { width: 15px; height: 15px; }
.file-pick input[type=file] {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.file-pick .pick-name {
  font-size: 13px; color: var(--muted); max-width: 210px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* место на диске */
.disk-space { margin: 16px 0 6px; }
.disk-usage { height: 6px; border-radius: var(--r-pill); background: var(--box); overflow: hidden; }
.disk-usage-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.disk-usage-fill.warn { background: var(--warn); }
.disk-usage-fill.full { background: var(--err); }
.disk-space .legend {
  display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 7px;
}

/* групповые действия по отметкам */
.disk-bulk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--box); border-radius: var(--r-card); padding: 10px 12px; margin: 14px 0 4px;
}
.disk-bulk .picked { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.disk-bulk input[name=destination] { width: 220px; height: var(--h-ctl-sm); font-size: 13px; }

/* строка списка */
input[type=checkbox].check {
  width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
table.grid td.tight { width: 40px; }
.disk-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.disk-ico {
  width: 34px; height: 34px; border-radius: var(--r-small); flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--box); color: var(--muted);
}
.disk-ico svg { width: 18px; height: 18px; }
.disk-ico.dir { background: var(--accent-bg); color: var(--accent-active); }
.disk-name .t { font-weight: 500; color: var(--ink); min-width: 0; word-break: break-word; }
.disk-name a.t:hover { color: var(--accent); text-decoration: none; }
.disk-name .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.disk-actions { display: flex; gap: 6px; justify-content: flex-end; }
.disk-actions form { display: inline-flex; }
.disk-actions .btn-icon-sm svg { stroke-width: 1.7; }
/* «на уровень выше» — отдельная тихая строка над списком */
.disk-up td { padding-top: 10px; padding-bottom: 10px; }
.disk-up a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); }
.disk-up a:hover { color: var(--accent); text-decoration: none; }
.disk-up svg { width: 16px; height: 16px; }

/* пустая папка и подсказка подключения */
.disk-empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.disk-empty svg { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--field-line); }
.disk-steps { margin: 0 0 16px; padding-left: 22px; font-size: 14px; color: var(--ink-2); line-height: 1.95; }
.disk-steps code { font-size: 13px; }

.btn { white-space: nowrap; }
/* кнопка «обновить» — в одну строку с путём, а не отдельным рядом */
.disk-bar .refresh { margin-left: auto; }

@media (max-width: 900px) {
  .disk-bar { gap: 8px; }
  .disk-bar form { flex: 1 1 100%; flex-wrap: wrap; }
  .disk-bar input[type=text], .disk-bar input:not([type]) { width: auto; flex: 1; }
  .disk-bar .btn-blue { flex: 1 1 100%; }
  .disk-bar .refresh { order: -1; flex: none; }
  .disk-crumbs { flex: 1 1 auto; }
  .disk-bulk input[name=destination] { width: auto; flex: 1 1 100%; }
  .file-pick { flex: 1 1 100%; justify-content: space-between; }
  .disk-actions { justify-content: flex-start; margin-top: 10px; }
  table.grid td.tight { position: absolute; right: 16px; width: auto; }
  table.grid tr { position: relative; }
  .disk-up td { padding: 0; }
}

/* срез списка: на виду «Все N» и выбранный отбор, остальные — в меню,
   поэтому строка одной высоты, сколько бы отборов ни завели */
.slice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
button.slice-chip { font-family: var(--font); cursor: pointer; }
.slice-chip {
  display: inline-flex; align-items: center; gap: 8px; height: var(--h-ctl-sm); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.slice-chip b { font-size: 12px; font-weight: 500; background: var(--box); border-radius: var(--r-pill);
  padding: 1px 7px; font-variant-numeric: tabular-nums; }
a.slice-chip:hover { text-decoration: none; border-color: var(--field-line); background: var(--box); }
/* выбранный срез окрашен своим цветом — заливка бледная, чтобы светлые стадии читались */
.slice-chip.on {
  background: color-mix(in srgb, var(--stage, var(--accent)) 12%, #fff);
  border-color: color-mix(in srgb, var(--stage, var(--accent)) 42%, #fff);
  color: color-mix(in srgb, var(--stage, var(--accent)) 82%, #1B2430); font-weight: 500;
}
.slice-chip.on b { background: color-mix(in srgb, var(--stage, var(--accent)) 18%, #fff); color: inherit; }
a.slice-chip.on:hover { background: color-mix(in srgb, var(--stage, var(--accent)) 18%, #fff); }
/* крестик снимает срез, не задевая саму ссылку отбора */
button.slice-off { border: 0; background: none; font: inherit; cursor: pointer; }
.slice-off { display: inline-flex; align-items: center; margin: 0 -6px 0 -2px; padding: 0 5px;
  color: inherit; opacity: .6; }
.slice-off:hover { opacity: 1; color: inherit; }
.slice-off .ico { width: 13px; height: 13px; }

.slice-pick { position: relative; }
.slice-pick > summary {
  display: inline-flex; align-items: center; gap: 7px; height: var(--h-ctl-sm); padding: 0 12px;
  border: 1px dashed var(--field-line); border-radius: var(--r-pill); background: var(--bg);
  font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; list-style: none;
}
.slice-pick > summary::-webkit-details-marker { display: none; }
.slice-pick > summary:hover { border-color: var(--accent); color: var(--accent); }
.slice-pick[open] > summary { border-style: solid; border-color: var(--accent); color: var(--accent); }
.slice-arrow {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform .15s;
}
.slice-pick[open] .slice-arrow { transform: rotate(180deg); }
.slice-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 268px; padding: 5px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(27, 36, 48, .14); display: flex; flex-direction: column;
}
/* кнопки меню — там, где отбор идёт без перезагрузки (лента карточки) */
.slice-menu button { border: 0; background: none; font-family: var(--font); cursor: pointer; text-align: left; }
.slice-menu a, .slice-menu button {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-small);
  font-size: 14px; color: var(--ink); white-space: nowrap;
}
.slice-menu a:hover, .slice-menu button:hover { background: var(--box); text-decoration: none; }
.slice-menu a b, .slice-menu button b { margin-left: auto; padding-left: 12px; font-size: 12px; font-weight: 400;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.slice-menu a.on, .slice-menu button.on { color: var(--accent); font-weight: 500; background: var(--accent-bg); }
.slice-menu a.on b, .slice-menu button.on b { color: var(--accent); }
/* пустой отбор гасим: кликать по нему незачем, но знать о нём полезно */
.slice-menu a.zero { color: var(--muted); }
.slice-menu a.zero .stage-mark { opacity: .4; }
.slice-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.slice-menu a.slice-clear { color: var(--ink-2); }

@media (max-width: 700px) {
  .slice { gap: 6px; }
  .slice-menu { min-width: 0; width: max-content; max-width: min(320px, calc(100vw - 48px)); }
  .slice-menu a, .slice-menu button { white-space: normal; }
}

/* отбор ленты по типу события стоит над самой лентой */
.feed-filter { margin: 2px 0 12px; }
.stage-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--stage, var(--muted)); }

/* дорожка стадий лида в списке: то же, что полоса стадий в карточке, но без клика */
.stage-track { display: inline-flex; gap: 2px; vertical-align: middle; }
.stage-track i { width: 16px; height: 6px; border-radius: 3px; background: var(--field-line); }
.stage-track i.done { background: #8FB3E4; }
.stage-track i.current { background: var(--stage, var(--accent)); }
.stage-track i.success { background: var(--ok); }
.stage-track i.fail { background: var(--err); }

/* заголовок записи в списке подсвечен цветом её стадии или статуса:
   лид — стадия воронки, сделка — стадия направления, задача — статус */
.row-title { color: var(--stage, var(--accent)); font-weight: 500; }
.row-title:hover { color: var(--stage, var(--accent)); }

/* строка фильтров списков: поиск + переключатель «только мои» + кнопка */
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filterbar .field-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.filterbar .field-search .ico {
  position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.filterbar .field-search input { width: 100%; padding-left: 36px; }
.filterbar .pick, .filterbar select { flex: 0 0 auto; }
.filterbar .switch {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; color: var(--ink-2);
  white-space: nowrap; user-select: none;
}
.filterbar .switch input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.filterbar .switch:has(input:checked) {
  border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 500;
}
.filterbar .btn { flex: 0 0 auto; }
@media (max-width: 720px) {
  .filterbar .field-search { flex: 1 1 100%; }
  .filterbar .switch { flex: 1 1 auto; justify-content: center; }
}

/* карточка лида: слева данные, справа лента с формами */
.card-side .side-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.card-side .side-row:last-child { border-bottom: 0; }
.card-side .prop .v.amount { font-size: 20px; font-weight: 600; }
.card-feed .compose-tabs { margin-bottom: 14px; }
.card-feed .panel-title { margin-top: 22px; }

/* форма действия во вкладке */
.compose {
  background: var(--box); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px; margin-bottom: 4px;
}
.compose > textarea { width: 100%; background: #fff; }
.compose-note { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.compose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.cf { display: block; margin-bottom: 12px; }
.compose-grid .cf { margin-bottom: 0; }
.cf-k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.cf input, .cf select, .cf textarea { width: 100%; background: #fff; }
.cf-wide { display: block; }
.cf-radios { display: flex; flex-direction: column; gap: 7px; padding-top: 5px; }
.compose-grid + .cf, .cf + .cf, .cf + .attach, .compose-grid + .attach { margin-top: 12px; }
.compose-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.compose-stack form { margin: 0; }
.compose-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12px; }
.compose-or::before, .compose-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 720px) { .compose-grid { grid-template-columns: 1fr; } }

/* формы CRM: компактные секции, как в карточке сотрудника */
.crm-form { padding-bottom: 6px; max-width: 1080px; }
.crm-form .form-section { margin-bottom: 14px; }
.crm-form .field { margin-bottom: 12px; }
.crm-form .form-row:last-child .field:last-child { margin-bottom: 0; }
.crm-form textarea { min-height: 84px; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-wide { grid-template-columns: 1fr; }
@media (max-width: 900px) { .form-row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .form-row-3 { grid-template-columns: 1fr; } }


/* строки списков в левой колонке карточки */
.card-side .side-row-do { display: flex; align-items: flex-start; gap: 10px; }
.card-side .side-row-do form { flex: none; }

/* лента: день-разделитель и подпись автора */
.tl-day {
  font-size: 12px; color: var(--muted); text-transform: lowercase;
  margin: 8px 0 2px; padding-left: 44px;
}
.tl-day:first-child { margin-top: 0; }
.tl-author { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.tl-item.meet .body { background: var(--ok-bg); border-color: #CCE7D8; }
.tl-item.email .body { background: var(--box); }

/* ---- лента карточки: событие = отметка слева и карточка события ---- */
/* лента — цепочка событий: отметки нанизаны на вертикальную линию */
.timeline { display: flex; flex-direction: column; gap: 10px; position: relative; }
/* цепочка событий — одна непрерывная линия через всю ленту */
.timeline::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px;
  background: var(--line);
}
/* разделитель дня — серая полоса от самой цепочки, подпись посередине */
.tl-day {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 10px;
  padding-left: 18px; position: relative; z-index: 1;
}
.tl-day::before, .tl-day::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.tl-day span {
  background: var(--bg); color: var(--muted); font-size: 12px;
  padding: 0 4px; white-space: nowrap;
}
/* Цвет записи — один на значок и плашку: комментарий зелёный, дело и задача
   жёлтые, письмо фиолетовое, встреча синяя, служебные записи серые. */
.tl-item {
  display: flex; gap: 12px; align-items: flex-start; position: relative; z-index: 1;
  --tl: var(--accent); --tl-bg: var(--accent-bg); --tl-line: #C6DBF7;
}
.tl-item.tl-comment { --tl: var(--ok); --tl-bg: var(--ok-bg); --tl-line: #CCE7D8; }
.tl-item.tl-task, .tl-item.tl-activity, .tl-item.tl-call {
  --tl: var(--warn); --tl-bg: var(--warn-bg); --tl-line: #F0DEBC; }
.tl-item.tl-email { --tl: var(--mail); --tl-bg: var(--mail-bg); --tl-line: #D6CFF4; }
.tl-item.tl-quiet { --tl: var(--muted); --tl-bg: var(--box); --tl-line: var(--line); }
/* значок — в обводке своего цвета; линия цепочки подходит вплотную к кружку
   и продолжается под ним, поэтому связь читается непрерывной */
.tl-mark {
  width: 36px; height: 36px; border-radius: 50%; flex: none; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tl); border: 2px solid var(--tl); box-sizing: border-box;
}
.tl-mark .ico { width: 17px; height: 17px; }
/* перемычка от цепочки к плашке — событие видно «висящим» на линии */
.tl-item::after {
  content: ""; position: absolute; left: 36px; top: 23px; width: 12px; height: 2px;
  background: var(--tl-line);
}
.tl-card {
  flex: 1; min-width: 0; background: var(--tl-bg); border: 1px solid var(--tl-line);
  border-radius: 14px; padding: 14px 17px; position: relative;
  box-shadow: 0 2px 10px rgba(27, 36, 48, .05);
  transition: box-shadow .15s, border-color .15s;
}
.tl-item:hover .tl-card { box-shadow: 0 8px 22px rgba(27, 36, 48, .10); }
.tl-head { display: flex; align-items: center; gap: 9px; }
.tl-kind { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.tl-subject { font-size: 15px; font-weight: 500; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-head .when { color: var(--muted); font-size: 12px; }
.tl-head .spacer { flex: 1; }
.tl-badge {
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--ok-bg); color: var(--ok); font-weight: 500;
}
.tl-badge.status--work { background: var(--accent-bg); color: var(--accent); }
.tl-badge.status--wait { background: var(--warn-bg); color: var(--warn); }
.tl-badge.status--idle { background: var(--box); color: var(--muted); }

/* служебные записи — приглушены, как в Битриксе */
.tl-item.tl-quiet .tl-mark { border-width: 2px; border-color: var(--field-line); }
.tl-item.tl-quiet .tl-card { box-shadow: none; }
.tl-item.tl-quiet .tl-kind { color: var(--muted); font-weight: 500; }
.tl-item.tl-quiet .ava { opacity: .55; }

.tl-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 11px; }
.tl-tile {
  width: 64px; height: 64px; border-radius: 12px; flex: none;
  background: #fff; color: var(--tl); border: 1px solid var(--tl-line);
  display: flex; align-items: center; justify-content: center;
}
.tl-tile .ico { width: 26px; height: 26px; }
.tl-text {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.tl-text-plain { margin-top: 10px; background: none; border: 0; padding: 0; }
/* текст комментария — в рамке, отдельно от шапки записи; карандаш правки в углу */
.tl-card > .tl-head + .tl-text {
  background: #fff; border: 1px solid var(--tl-line); border-radius: 10px;
  padding: 11px 34px 11px 14px; position: relative;
}
.tl-pencil {
  position: absolute; right: 8px; bottom: 7px; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: 0; color: var(--muted); opacity: 0; transition: opacity .15s;
}
.tl-pencil .ico { width: 15px; height: 15px; }
.tl-item:hover .tl-pencil, .tl-pencil:focus { opacity: 1; }
.tl-pencil:hover { color: var(--accent); }
.tl-quiet .tl-card > .tl-head + .tl-text { background: none; border: 0; padding: 0; }
.tl-title { margin-top: 8px; font-size: 14px; }
/* текст записи сразу под шапкой (закреплённые записи, комментарии) — не вплотную */
.tl-card > .tl-head + .tl-text { margin-top: 10px; }
.tl-props { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tl-props > div { display: flex; gap: 12px; font-size: 13px; align-items: baseline; }
.tl-props .k { color: var(--muted); width: 118px; flex: none; }
.tl-props .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tl-props a.v { color: var(--accent); }
.tl-chips { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tl-chip { background: #fff; border: 1px solid var(--tl-line); color: var(--ink-2);
  border-radius: var(--r-small); padding: 4px 10px; font-size: 13px; }
.tl-arrow { color: var(--muted); }
/* значение-метка в свойствах записи: срок, дата — мягкой пилюлей */
.tl-pill {
  background: #fff; border: 1px solid var(--tl-line); color: var(--ink);
  border-radius: var(--r-pill); padding: 2px 11px; font-size: 13px; display: inline-block;
}
.tl-pill.is-empty { background: var(--box); color: var(--muted); }
.tl-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tl-foot form { margin: 0; }
.tl-foot .btn { border-radius: var(--r-pill); padding: 7px 20px; }

/* встречи в боковой колонке */
.meet-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 10px; }
.meet-when { font-size: 14px; font-weight: 500; }
.meet-send { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.meet-send input { flex: 1 1 150px; min-width: 0; }
.meet-link { word-break: break-all; margin-top: 8px; }
.ok-note { color: var(--ok); margin-top: 8px; }
@media (max-width: 720px) {
  .tl-row { gap: 10px; }
  .tl-tile { width: 46px; height: 46px; }
  .tl-props > div { flex-direction: column; gap: 2px; }
  .tl-props .k { width: auto; }
}

/* меню действий у записи ленты */
.tl-menu { position: relative; }
.tl-menu summary {
  list-style: none; cursor: pointer; width: 26px; height: 26px; border-radius: var(--r-small);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.tl-menu summary::-webkit-details-marker { display: none; }
.tl-menu summary:hover { background: var(--box); color: var(--ink); }
.tl-menu summary svg { width: 18px; height: 18px; fill: currentColor; }
.tl-menu-body {
  position: absolute; right: 0; top: 30px; z-index: 30; min-width: 196px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 34px rgba(27, 36, 48, .16);
}
.tl-menu-body a, .tl-menu-body button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; font-size: 14px;
  color: var(--ink); background: none; border: 0; border-radius: var(--r-small);
  cursor: pointer; font-family: var(--font);
}
.tl-menu-body a:hover, .tl-menu-body button:hover { background: var(--box); text-decoration: none; }
.tl-menu-body button.danger { color: var(--err); }
.tl-menu-body form { margin: 0; }
.tl-badge-pin { background: var(--warn-bg); color: var(--warn); }
.timeline-pinned { margin-bottom: 8px; }
/* «Закреплено» — обычно одна запись, и она же первая и последняя. Правило,
   которое закрывает хвост цепочки под последним значком, в таком блоке съедало
   всю линию: над кружком оставался огрызок в несколько пикселей, а под ним
   пусто. Здесь хвост не закрываем — линия проходит блок насквозь, и запись
   висит на ней так же, как записи в самой ленте. */
.timeline-pinned > .tl-item:last-child::before { display: none; }
.tl-is-pinned .tl-card { border-color: var(--tl-line); }
.compose input[readonly] { background: var(--box); color: var(--ink-2); cursor: default; }

/* подсказка «заведите напоминание»: мягкая плашка со значком, не пустое место */
.do-hint {
  display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 10px;
  background: var(--warn-bg); border-radius: 12px; padding: 12px 14px; color: var(--ink);
}
.do-hint:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(27, 36, 48, .08); }
.do-hint .ico {
  width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%;
  background: #fff; color: var(--warn);
}
.do-hint b { display: block; font-weight: 500; font-size: 14px; }
.do-hint .small { display: block; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
/* просроченное дело в списке напоминаний */
.side-row-do.is-overdue { background: var(--err-bg, #FCEDEC); border-radius: 10px; padding: 9px 12px; }

/* длинное текстовое значение в карточке — на подложке, а не голым текстом */
.prop-box {
  background: var(--box); border: 1px solid var(--line); border-radius: var(--r-small);
  padding: 9px 12px; margin-top: 6px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
}

/* данные лида правятся прямо в карточке: карандаш у заголовка открывает форму */
.lead-edit { margin: 10px 0 4px; }
.lead-edit .cf { margin-bottom: 10px; }
.lead-edit textarea { width: 100%; min-height: 76px; }
/* кнопка сохранения всегда на виду: форма длинная, низ формы прилипает к экрану */
.lead-edit .descr-foot {
  position: sticky; bottom: 0; z-index: 2; margin-top: 0;
  background: var(--bg); border-top: 1px solid var(--line); padding: 10px 0;
}
/* в узкой колонке карточки пояснение к заголовку идёт строкой ниже */
.card-side .panel-title .prop-note, .card-side .prop-title .prop-note {
  display: block; margin-top: 3px; letter-spacing: 0; font-weight: 400;
}

/* прикрепление файла: меню «с компьютера / с Диска» и список выбранного */
.attach { margin-top: 12px; }
.attach-menu { position: relative; display: inline-block; }
.attach-menu summary { list-style: none; cursor: pointer; }
/* «Прикрепить файл» — ссылка-действие, а не кнопка с обводкой */
.attach-trigger { display: inline-flex; align-items: center; gap: 7px; }
.attach-trigger .ico { width: 15px; height: 15px; }
.attach-menu[open] .attach-trigger { text-decoration-color: currentColor; }
.attach-menu summary::-webkit-details-marker { display: none; }
.attach-menu-body {
  position: absolute; left: 0; top: 26px; z-index: 30; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 34px rgba(27, 36, 48, .16);
}
.attach-menu-body button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; font-size: 14px;
  background: none; border: 0; border-radius: var(--r-small); cursor: pointer;
  font-family: var(--font); color: var(--ink);
}
.attach-menu-body button:hover { background: var(--box); }
.attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.attach-file {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-small); padding: 7px 10px;
}
.attach-file .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.attach-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-file button { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; }

/* окно выбора файла на Яндекс.Диске */
.dp-back { position: fixed; inset: 0; background: rgba(27, 36, 48, .45); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.dp {
  width: 520px; max-width: 100%; max-height: 78vh; background: #fff;
  border-radius: var(--r-plate); display: flex; flex-direction: column; overflow: hidden;
}
.dp-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dp-head b { flex: 1; font-size: 15px; font-weight: 500; }
.dp-crumbs { padding: 10px 18px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dp-crumbs a { color: var(--accent); }
.dp-list { overflow-y: auto; padding: 6px; }
.dp-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; background: none; border: 0; border-radius: var(--r-small);
  cursor: pointer; font-family: var(--font); font-size: 14px; color: var(--ink);
}
.dp-row:hover { background: var(--box); }
.dp-row .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.dp-row.dir .ico { color: var(--accent); }
.dp-row .size { color: var(--muted); font-size: 12px; }
.dp-empty, .dp-error { padding: 22px 18px; color: var(--muted); font-size: 14px; text-align: center; }
.dp-error { color: var(--err); }
.task-file { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.task-file .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.task-file .fname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(340px, 100%);
}

/* иконка проекта, приехавшая из Битрикс24: картинка вместо инициалов */
.ava.ava-pic { background: var(--box); border: 1px solid var(--line); }

/* подзадачи в карточке задачи: строка — название, статус, ответственный */
.subtasks { display: flex; flex-direction: column; gap: 2px; }
.subtask {
  display: flex; align-items: center; gap: 10px; padding: 5px 0; min-width: 0;
  border-bottom: 1px solid var(--line);
}
.subtask:last-child { border-bottom: 0; }
.subtask-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.subtask .status { flex: none; font-size: 12px; }

/* подсказка по работе с лидом и завершение обработки */
.lead-hint {
  /* подсказка живёт в сетке сводки целой строкой, иначе распирает колонки */
  grid-column: 1 / -1; min-width: 0; background: var(--box); border-radius: var(--r-card);
  padding: 11px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.lead-hint b { font-size: 13px; }
.lead-done {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px;
  background: var(--box); border: 1px solid var(--line); border-radius: var(--r-card);
}
.lead-done .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.lead-done > div { flex: 1; min-width: 0; }

/* диалог над карточкой */
.dp-ask { width: 460px; }
.dp-ask-body { padding: 18px; }
.dp-ask-body p { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.dp-ask-body textarea { width: 100%; margin-top: 12px; }
.dp-ask-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.reason-list { display: flex; flex-direction: column; gap: 2px; }
.reason-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-small);
  font-size: 14px; cursor: pointer;
}
.reason-row:hover { background: var(--box); }
.reason-row input { width: 16px; height: 16px; margin: 0; flex: none; }

/* галочки в форме — строкой, а не вразнобой */
.field-checks { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); cursor: pointer; }
.check-row input { width: 16px; height: 16px; margin: 0; flex: none; }
.crm-form select[multiple] { min-height: 108px; padding: 8px; }
.tl-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-file {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-small); padding: 6px 10px;
}
.tl-file:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.tl-props .k { color: var(--ink-2); opacity: .75; }
.tl-file .ico { width: 15px; height: 15px; color: var(--muted); }

/* нередактируемое значение в форме действия */
.cf-static {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-small);
  padding: 9px 12px; font-size: 14px; line-height: 1.35; min-height: 44px;
}
.cf-static .small { margin-top: 2px; }
.cf-warn { color: var(--err); }
.cf-static b { font-weight: 500; }

/* выключенная кнопка — видно, что нажать нельзя */
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

/* списки с множественным выбором в формах */
.field-multi select[multiple] {
  min-height: 120px; padding: 6px; background: #fff; border-radius: var(--r-small);
}
.field-multi select[multiple] option { padding: 5px 8px; border-radius: 5px; }
.field-multi select[multiple] option:checked { background: var(--accent-bg); color: var(--ink); }

/* поле даты и всплывающий календарь в стиле Кометы */
.dpf { position: relative; display: block; }
.dpf > input[type=hidden] { display: none; }
/* дата — не поле ввода, а значение-ссылка с иконкой и пунктиром */
.dpf-field {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 0; border-bottom: 1px dashed rgba(36, 104, 201, .5);
  border-radius: 0; padding: 2px 0; font: 400 14px/1.5 var(--font); color: var(--accent);
  text-align: left; max-width: 100%;
}
.dpf-field:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
.dpf-field .dpf-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpf-field.empty { color: var(--muted); border-bottom-color: var(--field-line); }
.dpf-field .ico { width: 16px; height: 16px; color: currentColor; flex: none; }

.dpp {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(27, 36, 48, .18); width: max-content; max-width: 92vw;
}
.dpp-value { text-align: center; font-size: 14px; font-weight: 500; margin-bottom: 10px; }

/* выбор даты и времени: колонки со стрелками, одинаково на ПК и телефоне */
.dpp-spin { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.spin-card {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--box); border-radius: var(--r-card); padding: 6px 14px;
}
.spin { display: flex; flex-direction: column; align-items: center; user-select: none; }
.spin-arrow {
  width: 34px; height: 24px; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-small);
}
.spin-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.spin-arrow:hover { color: var(--accent); background: #fff; }
.spin-value {
  min-width: 56px; text-align: center; font-size: 22px; font-weight: 500; color: var(--ink);
  padding: 4px 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.spin-dot { color: var(--muted); font-size: 18px; padding: 0 2px; align-self: center; }

.dpp-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ============================================ карточка задачи: инфо + чат */
/* слева вся информация по задаче, справа переписка: из сообщения можно
   поставить задачу, написать письмо или отправить его в ленту сделки */
/* карточка задачи ровно пополам: слева описание и чек-лист, справа переписка */
.task-grid {
  /* сведения слева на пятую часть уже — переписка справа ровно настолько шире */
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 16px; align-items: stretch; margin-top: 16px;
}
.task-descr { font-size: 14px; line-height: 1.55; }
.task-descr.plain-text { white-space: pre-wrap; }   /* описания без разметки, как раньше */
/* длинная ссылка или слово без пробелов переносится, а не растягивает карточку;
   правило общее для описания, результата, чек-листа и сообщений переписки */
.task-descr, .check-text, .tchat-msg .tchat-text, .tl-item .body, .task-file .fname,
.descr-teaser, .descr-full { overflow-wrap: anywhere; }
.task-descr a, .tchat-msg .tchat-text a, .tl-item .body a { word-break: break-word; }

/* чек-лист */
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.check-box {
  width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 0; cursor: pointer;
  border: 1px solid var(--field-line); border-radius: 5px; background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.check-box:hover { border-color: var(--accent); }
.check-box.on { background: var(--accent); border-color: var(--accent); }
.check-box .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.check-text { font-size: 14px; line-height: 1.4; }
.check-text.done { color: var(--muted); text-decoration: line-through; }
.task-grid .check-row { padding: 7px 8px; border-radius: var(--r-small); margin: 0 -8px; }
.task-grid .check-row:hover { background: var(--box); }
.check-add { display: flex; gap: 8px; margin-top: 12px; }
/* правка и удаление пункта: тихие значки справа. Показываем их всегда, а не по
   наведению — иначе не видно, что пункт вообще можно изменить или убрать */
.check-row .check-mark { flex: none; margin: 0; }
.check-row .check-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.check-tools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.check-tools form { margin: 0; }
.check-tools .btn-icon { color: var(--muted); }
.check-tools .btn-icon:hover { color: var(--accent); }
/* чек-лист в форме правки: отдельная панель под формой, отступ как у полей */
.check-panel .check-row { margin: 0 -8px; }
.check-add input { flex: 1; min-width: 0; }
.check-add .btn { flex: none; }

/* переписка по задаче */
.tchat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tchat-feed {
  display: flex; flex-direction: column; gap: 14px; padding: 4px 0 16px;
  flex: 1; min-height: 220px; overflow-y: auto;
}
.tchat-feed::-webkit-scrollbar { width: 6px; }
.tchat-feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tchat-msg { display: flex; gap: 11px; align-items: flex-start; }

/* новое сообщение всплывает снизу — двигаем только прозрачность и сдвиг,
   чтобы браузер не пересчитывал раскладку всей ленты */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.tchat-msg.is-fresh, .tchat-sys.is-fresh, .tchat-typing.is-fresh {
  animation: slideUp .3s ease-out forwards;
}

/* «печатает…» — три точки в конце ленты */
.tchat-typing {
  display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 52px;
  font-size: 12.5px; color: var(--muted);
}
.typing-indicator { display: inline-flex; align-items: center; gap: 4px; }
.typing-indicator span {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background-color: var(--accent); animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
.tchat-msg .ava { margin-top: 2px; }
.tchat-body {
  flex: 1; min-width: 0; background: var(--box); border-radius: var(--r-card);
  padding: 11px 14px;
}
.tchat-msg.own .tchat-body { background: var(--accent-bg); }
.tchat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.tchat-head b { font-size: 13px; font-weight: 500; }
.tchat-head .when { font-size: 12px; color: var(--muted); }
.tchat-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.tchat-sys {
  font-size: 12px; color: var(--muted); text-align: center; padding: 2px 8px;
}
.tchat-empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 14px; }

/* действия по сообщению — ссылками, а не кнопками */
.tchat-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 9px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.tchat-actions form { display: inline-flex; }
.tchat-letter { position: relative; }
.tchat-letter summary { list-style: none; cursor: pointer; }
.tchat-letter summary::-webkit-details-marker { display: none; }
.tchat-letter-form {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
}
.tchat-letter-form textarea { resize: vertical; }

/* поле нового сообщения */
.tchat-compose {
  /* черта между лентой и полем ввода не нужна: ленту и так видно по подложке */
  padding-top: 12px; display: flex; flex-direction: column; gap: 10px;
}
.tchat-compose textarea { resize: vertical; }

@media (max-width: 1100px) {
  .task-grid { grid-template-columns: 1fr; }
  .tchat-feed { max-height: none; }
}

/* время в календаре: свои списки часов и минут */
.dpp-time { align-items: center; }
.dpp-time-k { font-size: 13px; color: var(--muted); flex: 1; }
.dpp-time-pick { display: inline-flex; align-items: center; gap: 6px; }
.dpp-time-pick i { color: var(--muted); font-style: normal; }
.dpp-sel {
  appearance: none; -webkit-appearance: none; width: 62px; padding: 7px 22px 7px 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E7A88' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1px solid var(--field-line); border-radius: var(--r-small);
  font: 400 14px/1.2 var(--font); color: var(--ink); cursor: pointer;
}
.dpp-sel:focus { border-color: var(--accent); outline: none; }

/* переключатель из двух-трёх вариантов вместо россыпи радиокнопок */
.seg { display: inline-flex; align-items: stretch; background: #fff; border: 1px solid var(--field-line);
  border-radius: var(--r-pill); padding: 3px; gap: 3px;
  height: var(--h-ctl); box-sizing: border-box; }
.seg label { flex: 1; display: flex; align-items: stretch; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 0 16px; border-radius: var(--r-pill); font-size: 13px;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; text-align: center;
}
.seg span:hover { background: var(--box); }
.seg input:checked + span { background: var(--accent); color: #fff; font-weight: 500; }
@media (max-width: 720px) { .seg { width: 100%; } .seg span { padding: 0 10px; } }

/* выбор людей: плашки и ссылка «Добавить» всегда на одной строке */
.pickm {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; min-height: 40px;
}
.pickm-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pickm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pickm-empty { font-size: 13px; color: var(--muted); padding: 4px 0; }
/* плашка человека — один вид у постановщика, ответственного, соисполнителей и наблюдателей */
.pickm-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 2px 0 3px;
  background: #fff; color: var(--ink); border-radius: var(--r-pill);
  font-size: 13px; max-width: 100%; border: 1px solid var(--line); min-height: 32px;
  transition: background .15s, border-color .15s;
}
.pickm-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* кнопки внутри плашки человека: имя — тёмное, крестик — серый */
.pickm-chip button { border: 0; background: none; cursor: pointer; font: inherit; }
/* добавление значения — скромная ссылка с пунктиром, один вид на портале */
.add-link, .pickm-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer;
  border: 0; background: none; font: 400 13px/1.4 var(--font); color: var(--accent);
  border-bottom: 1px dashed rgba(36, 104, 201, .5); border-radius: 0;
}
.add-link:hover, .pickm-add:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
.add-link .ico, .add-link svg, .pickm-add .ico, .pickm-add svg {
  width: 15px; height: 15px; flex: none;            /* без этого <use> растягивается на весь блок */
}
.pickm-add span, .add-link span { font-size: 14px; line-height: 1; }
.pickm-menu { top: calc(100% + 6px); width: 100%; min-width: 220px; max-width: 340px; }
.pickm-done { width: 100%; margin-top: 6px; }

/* селектор в строке фильтров — то же поле, только уже */
.filterbar .pick.as-field { flex: 0 1 auto; width: auto; min-width: 178px; }
.filterbar .pick.as-field .pick-toggle { min-height: var(--h-ctl); }
@media (max-width: 720px) { .filterbar .pick.as-field { flex: 1 1 100%; width: 100%; } }
/* Строка отбора задач — общая полоса `.filterbar-strip` (как на лидах):
   на телефоне листается вбок, поиск открывается отдельным окном. Своего
   модификатора у задач больше нет. */

/* мелкие общие классы вместо инлайновых стилей */
.grow { flex: 1; min-width: 0; }
.text-err { color: var(--err); }
.v-overdue { color: var(--err); font-weight: 600; }
.unread-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 7px; vertical-align: middle;
}

/* быстрые кнопки срока над полем даты */
.quick-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.quick-dates button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer;
  border-radius: var(--r-pill); padding: 0 12px; font: 400 12px/1.3 var(--font);
  height: var(--h-ctl-sm); box-sizing: border-box;
}
.quick-dates button:hover { border-color: var(--accent); color: var(--accent); }
.quick-dates button.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.seg-wide { display: flex; width: 100%; }
.seg-wide label { flex: 1; }
/* «во всю ширину» — приём для узкой колонки (карточка лида, лента сделки) и для
   телефона. В форме на компьютере переключатель по содержимому: растянутый, он
   разносит три коротких слова по краям и читается как незаполненная полоса. */
@media (min-width: 721px) {
  /* ширина задана явно: у полосы «по содержимому» свободного места нет, и доли
     не работают — кнопки выходят разной ширины. 360 px на три варианта: каждая
     кнопка одинаковая, и переключатель не растягивается на всю форму */
  .crm-form .seg-wide { display: inline-flex; width: 360px; max-width: 100%; }
  .crm-form .seg-wide label { flex: 1 1 0; }
}
.field-checks-row { flex-direction: row; flex-wrap: wrap; gap: 18px; }

/* ---- формы на телефоне: крупные поля, лист календаря, липкие кнопки ---- */
@media (max-width: 720px) {
  .crm-form .field { margin-bottom: 14px; }
  .crm-form input:not([type=checkbox]):not([type=radio]),
  .crm-form select, .crm-form textarea,
  .cf input:not([type=checkbox]):not([type=radio]), .cf select, .cf textarea,
  .pick.as-field .pick-toggle {
    min-height: var(--h-ctl); font-size: 16px;    /* 16px — iOS не увеличивает страницу */
  }
  .dpf-field { font-size: 16px; padding: 6px 0; }
  .check-row { align-items: center; }
  .check-row input[type=checkbox] { margin: 0; flex: none; }
  .crm-form textarea { min-height: 96px; }
  .quick-dates { gap: 7px; }
  .quick-dates button { padding: 0 14px; font-size: 13px; flex: 1 1 auto; }
  /* широкий переключатель на телефоне переносится по строкам — высота по содержимому */
  .seg-wide { flex-wrap: wrap; height: auto; }
  .seg-wide label { flex: 1 1 30%; }
  /* от четырёх кнопок делим пополам: при 30% четвёртая уходила на свою строку
     во всю ширину, и переключатель выглядел сломанным (тип дела в напоминании) */
  .seg-wide:has(label:nth-child(4)) label { flex: 1 1 calc(50% - 3px); }
  /* в две строки это уже не пилюля, а набор кнопок — и скругление по коробке */
  .seg-wide:has(label:nth-child(4)) { border-radius: var(--r-plate); }
  .seg.seg-wide span { padding: 10px 8px; }
  .seg span { padding: 0 8px; font-size: 13px; }
  .field-checks-row { flex-direction: column; gap: 12px; }
  .check-row { min-height: 30px; }
  .check-row input { width: 20px; height: 20px; }
  .pickm-add { padding: 6px 0; font-size: 14px; }
  .pickm-chip { font-size: 14px; padding: 7px 10px 7px 13px; }
  .form-actions {
    position: sticky; bottom: 0; padding: 12px 0 14px; gap: 8px;
    background: linear-gradient(180deg, rgba(243, 246, 250, 0), var(--box) 35%);
  }
  .form-actions .btn { flex: 1; justify-content: center; }

  /* календарь и меню выбора — листом снизу, а не крошечным окошком */
  .dpp {
    position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; width: auto;
    max-width: none; padding: 14px; border-radius: var(--r-plate);
    box-shadow: 0 -10px 40px rgba(27, 36, 48, .22);
  }
  .dpp-spin { gap: 12px; }
  .spin-value { font-size: 26px; min-width: 64px; }
  .spin-arrow { width: 44px; height: 34px; }
  .pickm-menu {
    position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; width: auto;
    max-width: none; border-radius: var(--r-plate);
  }
  .pickm-menu .pick-list { max-height: 46vh; }
  .pick-item { padding: 11px 12px; font-size: 15px; }
}

/* высокая важность задачи — заметная метка в списках и в карточке */
/* высокая важность: круглый значок с огоньком, соразмерный строке */
.prio-high {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--err-bg); color: var(--err); margin-right: 8px;
}
.prio-high .ico { width: 13px; height: 13px; }
.prio-high-lg { width: 28px; height: 28px; }
.prio-high-lg .ico { width: 16px; height: 16px; }
.k-card-high { border-left: 3px solid var(--err); }
.k-card .prio-high { margin: 0 0 6px; }
.row-high td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.row-high td.main { padding-left: 14px; }

/* список задач: правка статуса, ответственного и срока прямо в строке */
.grid-tasks td { vertical-align: middle; }
.task-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.task-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 5px;
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.task-meta span { display: inline-flex; align-items: center; gap: 4px; }
.task-meta .ico { width: 13px; height: 13px; }
.cell-form { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }

/* в ячейке таблицы те же виджеты, только компактнее */
.grid-tasks .pick.as-field .pick-toggle { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.grid-tasks .pickm-chips { margin-bottom: 5px; }
.grid-tasks .pickm-chip { font-size: 12px; padding: 4px 7px 4px 10px; }
.grid-tasks .pickm-add { padding: 5px 11px; font-size: 12px; }
.grid-tasks .dpf-field { font-size: 13px; }
.grid-tasks .cell-form { flex-wrap: wrap; }
.cell-select, .cell-input {
  appearance: none; -webkit-appearance: none; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--r-small); background: transparent;
  padding: 6px 24px 6px 8px; font: 400 13px/1.2 var(--font); color: var(--ink); cursor: pointer;
}
.cell-select {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E7A88' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center;
}
.cell-select:hover, .cell-input:hover { border-color: var(--field-line); background-color: #fff; }
.cell-select:focus, .cell-input:focus { border-color: var(--accent); background-color: #fff; outline: none; }
.cell-input { padding-right: 8px; cursor: text; }
.cell-date .btn-icon { opacity: 0; transition: opacity .15s; }
.cell-date:hover .btn-icon, .cell-date:focus-within .btn-icon { opacity: 1; }
.cell-status--work { color: var(--accent); }
.cell-status--ok { color: var(--ok); }
.cell-status--wait { color: var(--warn); }
.cell-status--fail { color: var(--err); }
@media (max-width: 900px) {
  .cell-select, .cell-input { border-color: var(--line); background-color: #fff; }
  .cell-date .btn-icon { opacity: 1; }
}
.pickm-chip form { display: inline-flex; margin: 0; }

/* значение-плашка в списке: клик открывает диалог, отдельных кнопок нет */
.chip-edit { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--box); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 6px 12px; font: 400 13px/1.2 var(--font); color: var(--ink); max-width: 100%;
}
.chip:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.chip i { font-style: normal; color: var(--muted); font-size: 15px; line-height: 1; }
.chip:hover i { color: var(--accent); }
.chip-plain { background: none; padding: 6px 10px; flex-direction: column; align-items: flex-start; gap: 5px; }
.chip-plain:hover { background: var(--box); border-color: transparent; }
.chip-status { font-size: 13px; font-weight: 500; }
.chip-overdue { color: var(--err); }
.chip-dialog { padding: 16px 18px 0; max-height: 62vh; overflow-y: auto; }
/* календарь внутри диалога — обычным блоком, а не всплывающим окошком */
.dp-ask-date { width: 330px; }
.dp-ask-date .dpp {
  position: static; width: auto; box-shadow: none; border: 0; padding: 10px 0 0;
}
.dp-ask-date .dpp-foot { display: none; }
.chip-dialog .chip-list { max-height: 320px; overflow-y: auto; }
.chip-dialog .dpf { display: block; margin-bottom: 12px; }
.chip-quick { margin-top: 4px; }
.chip-dialog-foot { padding: 16px 18px; }

/* плашка человека: имя открывает выбор, крестик убирает */
.pickm-chip-live { padding: 0; overflow: hidden; }
.pickm-chip-name {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit;
  padding: 4px 4px 4px 2px; max-width: 240px; overflow: hidden; line-height: 1.2;
}
.pickm-chip-name:hover { color: var(--accent); }
.pickm-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickm-chip-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--accent);
  color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .02em; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.pickm-chip-ava img { width: 100%; height: 100%; object-fit: cover; }
.pickm-chip-off {
  border: 0; background: none; cursor: pointer; color: var(--muted); opacity: .8;
  font-size: 15px; line-height: 1; padding: 6px 9px 6px 3px; border-radius: 0 var(--r-pill) var(--r-pill) 0;
}
.pickm-chip-off:hover { opacity: 1; color: var(--err); background: rgba(180, 54, 45, .08); }
.pickm-chip-live:hover { background: var(--accent-bg); border-color: #CADDF7; }
.pickm-chip-name { color: var(--ink); }

/* крайний срок: быстрые кнопки и календарь в одну строку */
.deadline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deadline-row .quick-dates { margin: 0; flex: 0 1 auto; }
.deadline-field { flex: 1 1 220px; min-width: 190px; }
.compose-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .compose-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .deadline-row { flex-direction: column; align-items: stretch; }
  .deadline-field { width: 100%; }
}

/* «добавлялки» блоков формы задачи */
.add-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.add-blocks button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer;
  border-radius: var(--r-pill); padding: 8px 14px; font: 400 13px/1.2 var(--font);
}
.add-blocks button:hover { border-color: var(--accent); color: var(--accent); }
.add-blocks button.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.add-blocks + [data-block-body] { margin-top: 14px; }

/* теги задачи */
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.task-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; color: var(--tag, var(--accent));
  background: color-mix(in srgb, var(--tag, var(--accent)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--tag, var(--accent)) 32%, #fff);
}

/* описание задачи правится на месте */
.descr-form { position: relative; margin: 6px 0 4px; }
.descr-form textarea { width: 100%; min-height: 120px; background: #fff; }
.descr-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.descr-bubble { position: absolute; right: 10px; top: -14px; box-shadow: 0 6px 16px rgba(27, 36, 48, .18); }

/* карточка задачи: свойства блоками, а не длинным списком */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.people-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
/* плашки внутри ячейки — по содержимому: пилюля не тянется на всю колонку */
.people-cell .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.people-cell b { font-size: 14px; font-weight: 500; }
.people-row { display: flex; flex-wrap: wrap; gap: 8px; }
.person {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink);
  background: #fff; border-radius: var(--r-pill); padding: 3px 12px 3px 3px;
  max-width: 100%; min-height: 32px; border: 1px solid var(--line);
}
.person:hover { background: var(--accent-bg); border-color: #CADDF7; color: var(--ink); text-decoration: none; }
.person .ava.sm { width: 26px; height: 26px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px;
  max-width: 100%;
}
.link-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.link-chip .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.link-chip:hover .ico { color: var(--accent); }
.props .prop-title { margin-top: 20px; }
@media (max-width: 720px) { .people-grid { grid-template-columns: 1fr; } }
.descr-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.descr-title .btn-icon { color: var(--muted); }
/* карандаш на светлом: заливка не накрывает сам значок */
.descr-title .btn-icon:hover {
  color: var(--accent); background: var(--accent-bg); border-color: var(--accent);
}
.task-descr:empty::before { content: "Описания нет"; color: var(--muted); }

/* всплывающее подтверждение после правки на месте */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 14px; z-index: 200; box-shadow: 0 10px 30px rgba(27, 36, 48, .28);
  transition: opacity .35s, transform .35s;
}
.toast-error { background: var(--err); }
.toast.gone { opacity: 0; transform: translateX(-50%) translateY(8px); }
@media (max-width: 720px) { .toast { left: 12px; right: 12px; transform: none; bottom: 84px; text-align: center; } }

/* «Кто в задаче» компактно: четыре ячейки в ряд, мелкие плашки */
.people-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.people-grid-compact .person { padding: 3px 10px 3px 3px; font-size: 13px; }
.people-grid-compact .person .ava.sm { width: 22px; height: 22px; font-size: 9px; }
.people-grid-compact .pickm-chip { min-height: 28px; font-size: 12px; padding: 0 1px 0 2px; }
.people-grid-compact .pickm-chip-ava { width: 20px; height: 20px; font-size: 9px; }
.people-grid-compact .pickm-chip-name { padding: 3px 3px 3px 2px; max-width: 130px; }
.people-grid-compact .pickm-chip-off { padding: 4px 7px 4px 2px; font-size: 14px; }
.people-grid-compact .pickm-add { font-size: 12px; padding: 2px 0; }
.people-grid-compact .pickm-chips { margin-bottom: 6px; }
@media (max-width: 1100px) { .people-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .people-grid-compact { grid-template-columns: 1fr; } }

/* поле со списком значений (доступы и подобные) */
.multi-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.multi-line { display: flex; align-items: center; gap: 8px; }
.multi-line input { flex: 1; min-width: 0; }
.multi-line .btn-icon { color: var(--muted); flex: none; }
.multi-line .btn-icon:hover { color: var(--err); }

/* «Кто в задаче»: значения одной строкой, ячейки одинаковой высоты */
.people-grid-compact { align-items: start; }
.people-grid-compact .pickm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.people-grid-compact .pickm-chips { margin: 0; gap: 6px; }
.people-grid-compact .pickm-add { align-self: center; }
.people-grid-compact .person { min-height: 30px; }
.people-cell form { margin: 0; }

.people-grid-compact .pickm { min-height: 32px; gap: 6px; }

/* таблица подключений: ровные колонки, метки в строке с названием */
.grid-conn td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.grid-conn td.main { font-weight: 400; }
/* название подключения сверху, метка состояния — строкой под ним */
.conn-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1.4; }
.conn-name > span:first-child { font-weight: 500; word-break: break-word; }
.grid-conn .badge { flex: none; }
.grid-conn td.right { text-align: right; white-space: nowrap; }
.token-cut {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; background: var(--box);
  border-radius: var(--r-small); padding: 3px 8px;
}
.nowrap { white-space: nowrap; }
.deadline-sep { color: var(--muted); font-size: 13px; padding: 0 2px; }
.deadline-row .deadline-field { flex: 0 1 auto; min-width: 0; }

/* создание нового значения прямо в меню выбора (теги) */
.pickm-new {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.pickm-new input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; }
.pickm-new .add-link { flex: none; }

/* регулярная задача: повтор и «начиная с» одной строкой */
.repeat-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.repeat-sep { color: var(--muted); font-size: 13px; }

/* результат, состояние и передача задачи */
.result-text { background: var(--ok-bg); border-radius: var(--r-card); padding: 11px 14px; }
.task-state { margin-top: 18px; }
.task-state .k, .delegate-row .k {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 6px;
}
/* состояние задачи: кнопки-сегмент, активная — акцентом */
.seg-state {
  display: flex; width: 100%; margin: 0; background: #fff; gap: 3px; padding: 3px;
  border: 1px solid var(--field-line); border-radius: var(--r-pill);
  height: var(--h-ctl); box-sizing: border-box;
}
.seg-state button, .seg-state span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; border: 0; background: none;
  border-radius: var(--r-pill); font: 400 13px/1.4 var(--font); color: var(--ink-2);
  cursor: pointer; white-space: nowrap; text-align: center;
}
.seg-state button:hover:not(:disabled) { background: var(--box); }
.seg-state button:disabled { cursor: default; opacity: .5; }
.seg-state .is-on { background: var(--accent); color: #fff; font-weight: 500; }
.seg-state.is-flat { cursor: default; }

/* задача закрыта или отложена — страница только для чтения */
.task-locked {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  background: var(--box); border-radius: var(--r-card); padding: 12px 16px;
  color: var(--ink-2); font-size: 13px;
}
.task-locked .ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.task-locked.is-closed .ico { color: var(--ok, #1E7F4F); }
.task-locked b { color: var(--ink); font-size: 14px; }
.task-locked form { margin-left: auto; }

/* задача сдана — постановщик принимает работу или возвращает её */
.task-control {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  background: #FDF6E9; border-radius: var(--r-card); padding: 12px 14px; font-size: 13px;
}
.task-control .small { color: var(--ink-2); }
.task-control form { margin-left: auto; }
.task-control form + form { margin-left: 0; }
.tchat-closed {
  margin-top: 12px; padding: 12px 14px; background: var(--box);
  border-radius: var(--r-card); color: var(--ink-2); font-size: 13px;
}
.delegate-row { margin-top: 16px; }
.tchat-result { margin: 10px 0; font-size: 13px; color: var(--ink-2); }

/* выполненный чек-лист сворачивается */
/* разделы карточки задачи: на телефоне свёрнуты, значение раздела видно в заголовке.
   На большом экране колонка помещается целиком — там разделы всегда раскрыты,
   заголовок не кликается и стрелки нет. */
.prop-fold .fold-head {
  width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 20px 0 10px; padding: 16px 0 0;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.props .prop-fold:first-child .fold-head { margin-top: 0; padding-top: 0; border-top: 0; }
.fold-val {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 13px; color: var(--ink-2); max-width: 55%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.prop-fold .fold-head::after {
  content: ""; width: 8px; height: 8px; flex: none; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: translateY(2px) rotate(-135deg);
  transition: transform .15s;
}
.prop-fold.is-folded .fold-head::after { transform: translateY(-2px) rotate(45deg); }
.prop-fold .fold-head:hover { color: var(--ink); }
.prop-fold .fold-head:hover::after { border-color: var(--accent); }
.prop-fold.is-folded .fold-body { display: none; }
@media (min-width: 1101px) {
  /* вес селектора тот же, что у свёрнутого состояния, — иначе оно бы выиграло */
  .prop-fold.is-folded .fold-body { display: block; }
  .prop-fold .fold-head { cursor: default; }
  .prop-fold .fold-head::after, .prop-fold .fold-val { display: none; }
}
@media (max-width: 1100px) {
  /* на телефоне заголовок раздела — строка касания: 44 px, всё по центру строки */
  .prop-fold .fold-head { min-height: 44px; align-items: center; margin-bottom: 0; }
  .prop-fold:not(.is-folded) .fold-head { margin-bottom: 10px; }
}

/* Переключатель «О задаче · Переписка»: на телефоне колонки карточки не помещаются
   рядом, поэтому показываем одну из них, а переписка — в одно касание.
   На большом экране переключателя нет: обе колонки и так на виду. */
.task-switch { display: none; }
@media (max-width: 1100px) {
  .task-switch { display: inline-flex; width: 100%; margin: 16px 0 0; }
  .task-switch span { gap: 7px; }
  .task-switch span b { font-weight: 400; font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums; }
  .task-switch span.is-on { background: var(--accent); color: #fff; font-weight: 500; }
  .task-switch span.is-on b { color: #fff; }
  .task-grid.show-chat > .props { display: none; }
  .task-grid:not(.show-chat) > .tchat { display: none; }
}

/* «Подробности задачи»: на телефоне всё, что нужно реже описания и чек-листа,
   лежит в шторке снизу. На большом экране кнопки нет, а содержимое шторки —
   обычное продолжение левой колонки. */
.task-more-open { display: none; }
@media (max-width: 1100px) {
  .task-more-open {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    height: 44px; margin-top: 18px; border: 1px solid var(--field-line);
    border-radius: var(--r-pill); background: var(--bg); color: var(--accent);
    font: 500 14px var(--font); cursor: pointer;
  }
  .task-more-open .ico { width: 18px; height: 18px; }
  .task-more-open:hover { border-color: var(--accent); background: var(--accent-bg); }
  .task-more {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86vh;
    overflow-y: auto; background: var(--bg); border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px rgba(27, 36, 48, .18);
    transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
  }
  .task-more::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
    background: var(--field-line); margin: 0 auto 12px;
  }
  .task-more .prop-fold:first-of-type .fold-head { margin-top: 0; padding-top: 0; border-top: 0; }
  .task-more-back {
    position: fixed; inset: 0; z-index: 65; background: rgba(27, 36, 48, .28);
    opacity: 0; transition: opacity .2s;
  }
  body.more-open .task-more { transform: translateY(0); visibility: visible; }
  body.more-open .task-more-back { opacity: 1; }
  body.more-open { overflow: hidden; }
}
.check-all {
  background: var(--ok-bg); color: var(--ok); border-radius: var(--r-pill);
  padding: 2px 9px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0;
}

/* прикрепление файла к задаче */
.file-add { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.file-add .pick-name { font-size: 13px; color: var(--ink-2); }
.file-add-go { display: none; }                 /* с JS файл уходит сразу после выбора */
.no-js .file-add-go { display: inline-flex; }
.task-file-off { margin: 0; flex: none; }
.task-file-off .btn-icon { color: var(--muted); }
.task-file-off .btn-icon:hover { color: var(--err); }

/* состояние задачи в списке: отложенная заметна меньше, закрытая — тише всех */
.grid-tasks tr.row-deferred { opacity: .6; }
.grid-tasks tr.row-closed { opacity: .75; }
.grid-tasks tr.row-deferred:hover, .grid-tasks tr.row-closed:hover { opacity: 1; }
.state-tag {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: 11px; line-height: 17px; white-space: nowrap; background: var(--box); color: var(--ink-2);
}
.state-tag.state-off { background: #EEF1F5; color: #6B7789; }
.state-tag.state-done { background: #E6F3EC; color: #1E7F4F; }
.state-tag.state-wait { background: #FBF0DC; color: #8A5D12; }

/* делегирование: ссылка под ответственным и комментарий в диалоге */
.delegate-pick { margin-top: 6px; }
.delegate-pick .add-link { font-size: 12px; }
.prop-note { font: 400 12px/1.4 var(--font); color: var(--muted); text-transform: none;
  letter-spacing: 0; margin-left: 10px; }
.chip-note {
  width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--field-line);
  border-radius: var(--r-field); font: 400 13px/1.45 var(--font); color: var(--ink);
  background: #fff; resize: vertical;
}
.chip-note:focus { outline: none; border-color: var(--accent); }

/* «Кто в записи» в две колонки: слева кто отвечает, справа команда.
   Разметка та же, что и в остальных карточках, — меняется только раскладка. */
.people-grid-compact.people-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.people-2col .people-cell:nth-child(1) { grid-area: 1 / 1; }
.people-2col .people-cell:nth-child(2) { grid-area: 2 / 1; }
.people-2col .people-cell:nth-child(3) { grid-area: 1 / 2; }
.people-2col .people-cell:nth-child(4) { grid-area: 2 / 2; }
@media (max-width: 720px) {
  .people-grid-compact.people-2col { grid-template-columns: 1fr; }
  .people-2col .people-cell { grid-area: auto !important; }
}

/* несколько человек в поле — одна плашка со счётчиком и списком при наведении */
.pickm-chip-many .pickm-chip-name { padding-right: 14px; }
/* сводную плашку не обрезаем: «Наблюдатели · 3» должно читаться целиком */
.pickm-chip-many .pickm-chip-name, .people-grid-compact .pickm-chip-many .pickm-chip-name {
  max-width: none;
}
.pickm-stack { display: inline-flex; }
.pickm-stack .pickm-chip-ava + .pickm-chip-ava { margin-left: -9px; box-shadow: 0 0 0 2px #fff; }
.pickm-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: none;
  min-width: 220px; max-width: 300px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(20,38,64,.14);
}
.pickm-chip-many { position: relative; }
.pickm-chip-many:hover .pickm-pop, .pickm-chip-many:focus-within .pickm-pop { display: block; }
.pickm-pop b { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); font-weight: 500; }
.pickm-pop-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--ink);
}
.pickm-pop-row .pickm-chip-ava { flex: none; }
.pickm-pop-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* текстовый редактор: панель и поле с разметкой */
.rich { border: 1px solid var(--field-line); border-radius: var(--r-field); background: #fff; }
.rich-native { display: none; }
.rich-bar {
  display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--field-line);
  flex-wrap: wrap;
}
.rich-bar button {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 0; background: none; border-radius: 8px; color: var(--ink-2); cursor: pointer;
}
.rich-bar button:hover { background: var(--box); color: var(--ink); }
.rich-bar button:disabled { opacity: .5; cursor: default; }
.rich-bar .ico { width: 16px; height: 16px; }
.rich-body {
  min-height: 130px; padding: 12px 14px; font: 400 14px/1.55 var(--font); color: var(--ink);
  outline: none; overflow-wrap: anywhere;
}
.rich-body:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rich-body ul, .rich-body ol, .rich-text ul, .rich-text ol { margin: 6px 0 6px 20px; padding: 0; }
.rich-body li, .rich-text li { margin: 3px 0; }
.rich-body img, .rich-text img { max-width: 100%; border-radius: var(--r-field); margin: 6px 0; }
.rich-body p, .rich-text p { margin: 0 0 8px; }
.rich-text u { text-decoration: underline; }

/* длинное описание — свёрнуто до вступления */
.task-descr.is-folded .descr-teaser { color: var(--ink); white-space: normal; }
.descr-more { margin-top: 8px; }
.descr-full { margin-top: 2px; }

/* блок «Проект» в карточке задачи */
.task-project { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.task-project .help { flex: 1 1 100%; margin: 0; }

/* задачи по проектам: группы можно переставлять, порядок сохраняется у сотрудника */
.subtabs-sub { margin: 0 0 12px; }
.task-groups { display: flex; flex-direction: column; gap: 14px; }
.task-group { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.task-group.is-dragged { opacity: .5; }
.task-group-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink);
}
.task-group-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* ручка перетаскивания: заметная площадка, за которую двигают группу */
.task-group-grip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px; background: var(--box);
  color: var(--muted); cursor: grab;
}
.task-group-grip:hover { background: var(--accent-bg); color: var(--accent); }
.task-group-grip:active { cursor: grabbing; }
.task-group-grip .ico { width: 18px; height: 18px; }
/* сворачивание проекта: шеврон смотрит вниз у раскрытой группы, вбок у свёрнутой */
.task-group-fold { margin-left: auto; }
.task-group-fold .ico { transition: transform .15s ease; }
.task-group.is-collapsed .task-group-fold .ico { transform: rotate(-90deg); }
.task-group.is-collapsed .task-group-head { border-bottom: none; }
.task-group.is-collapsed .grid-tasks { display: none; }
.task-group .grid-tasks { margin: 0; }
@media (max-width: 900px) {
  /* на телефоне строки уже карточки со своими рамками — рамка группы делала
     карточку в карточке, а первая карточка упиралась в строку проекта.
     Оставляем от группы только заголовок-строку, карточки идут под ним. */
  .task-groups { gap: 22px; }
  .task-group { border: 0; background: none; border-radius: 0; }
  .task-group-head { padding: 0 2px 10px; border-bottom: 0; }
  .task-group.is-collapsed .task-group-head { padding-bottom: 0; }
}
/* сделка задачи — строкой под названием: сразу видно, из какой она сделки.
   Длинное название обрезается многоточием, целиком видно в подсказке. */
.task-deal {
  display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0;
  max-width: 340px;          /* до 1200 px таблица считает ширины по содержимому,
                                и без потолка длинная сделка растягивала строку */
  font-size: 12px; color: var(--muted);
}
@media (max-width: 900px) { .task-deal { max-width: 100%; } }
.task-deal .ico { width: 13px; height: 13px; flex: none; }
.task-deal .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* связи задачи: значок с числом вместо списка ссылок, сам список — в диалоге */
.link-count {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; height: 26px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
  color: var(--ink-2); font: 500 12px/1 var(--font); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.link-count .ico { width: 14px; height: 14px; color: var(--muted); }
.link-count:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.link-count:hover .ico { color: var(--accent); }
.links-dialog { display: flex; flex-direction: column; }
.links-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px; min-width: 0;
  border-top: 1px solid var(--line); color: var(--ink); font-size: 14px;
}
.links-row:first-child { border-top: 0; }
.links-row:hover { text-decoration: none; color: var(--accent); }
.links-row .k {
  flex: none; width: 66px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.links-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* подзадачи в списке: стрелка со счётчиком в строке родителя, строки детей с отступом */
.row-fold {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 0 7px 0 4px;
  height: 22px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--box); color: var(--ink-2); font: 500 12px/1 var(--font); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.row-fold .ico { width: 13px; height: 13px; transition: transform .15s; }
.row-fold:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.row-fold.is-open .ico { transform: rotate(180deg); }
/* подзадача — та же строка: название сдвинуто, слева уголок ветки.
   Сдвигаем именно название: колонка с номером узкая, отступ в ней ломает вёрстку. */
.grid-tasks tr.is-subtask .main { position: relative; padding-left: 26px; }
.grid-tasks tr.is-subtask .main::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 9px; height: 9px;
  border-left: 1.5px solid var(--field-line); border-bottom: 1.5px solid var(--field-line);
  border-bottom-left-radius: 3px;
}
.subs-cell { display: none; }
@media (max-width: 900px) {
  /* На телефоне подзадачи не карточки: в карточке родителя стоит строка
     «Подзадачи · 5 · все завершены», а сам список открывается шторкой снизу —
     список задач остаётся ровным, сколько бы подзадач ни было. */
  table.grid.card-grid tr.is-subtask { display: none; }
  .grid-tasks .row-fold { display: none; }          /* стрелка — способ для большого экрана */
  table.grid.card-grid td.subs-cell { display: block; flex: 1 1 100%; padding: 0; }
  .subs-open {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
    margin-top: 11px; padding: 0; border: 0; border-top: 1px solid var(--line);
    background: none; font: 400 13px var(--font); color: var(--accent); cursor: pointer;
  }
  .subs-open .cnt { margin-left: auto; color: var(--muted); }
  .subs-open .ico { width: 16px; height: 16px; color: var(--muted); transform: rotate(-90deg); }
  /* шторка со списком подзадач — тот же элемент, что «Подробности задачи» в карточке */
  .subs-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86vh;
    overflow-y: auto; background: var(--bg); border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px rgba(27, 36, 48, .18);
  }
  .subs-sheet::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
    background: var(--field-line); margin: 0 auto 12px;
  }
  .subs-sheet h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; letter-spacing: 0; }
  .subs-row {
    display: flex; align-items: center; gap: 10px; min-height: 46px;
    border-top: 1px solid var(--line); font-size: 14px; color: var(--ink);
  }
  .subs-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .subs-row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .subs-row .who { font-size: 12px; color: var(--muted); flex: none; }
  .subs-back { position: fixed; inset: 0; z-index: 65; background: rgba(27, 36, 48, .28); }

  /* Подзадача как короткая карточка осталась для большого телефона в альбомной
     и планшета, где строки ещё карточки, но шторка не нужна. */
  table.grid.card-grid tr.is-subtask {
    margin-left: 16px; border-left: 2px solid var(--field-line);
    padding: 10px 13px; row-gap: 6px;
    grid-column: 1 / -1;      /* на планшете — во всю строку, чтобы стоять под родителем */
  }
  table.grid.card-grid tr.is-subtask::before { display: none; }   /* без черты подвала */
  table.grid.card-grid tr.is-subtask td.main {
    flex: 1 1 100%; font-size: 14px; font-weight: 400; padding-left: 0;
  }
  table.grid.card-grid tr.is-subtask td.main::before { display: none; }
  table.grid.card-grid tr.is-subtask .task-meta { display: none; }
  table.grid.card-grid tr.is-subtask td[data-label="Срок"]:not(.main):not(.num):not(.pickcol),
  table.grid.card-grid tr.is-subtask td[data-label="Проект"]:not(.main):not(.num):not(.pickcol),
  table.grid.card-grid tr.is-subtask td[data-label="Связи"]:not(.main):not(.num):not(.pickcol) {
    display: none;
  }
  table.grid.card-grid tr.is-subtask td:not(.main):not(.num):not(.c-hide):not(.pickcol) {
    padding-top: 0; font-size: 12px;
  }
  table.grid.card-grid tr.is-subtask .stage-track { display: none; }
  table.grid.card-grid tr.is-subtask .chip { min-height: 26px; font-size: 12px; }
}
.grid-tasks .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip-project { flex-direction: row; align-items: center; gap: 7px; text-align: left; }

/* новые комментарии в строке задачи */
.meta-new {
  display: inline-flex; align-items: center; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 11px; line-height: 17px; font-weight: 500;
}

/* плашки в таблице задач: значение в одну строку, крестик рядом с ним */
.grid-tasks .chip { white-space: nowrap; }
.grid-tasks .chip-plain { white-space: normal; }
/* У плашки без фона (статус, проект) свои 8 px отступа, из-за них полоса статуса
   стояла правее подписи колонки. Вытягиваем плашку на её отступ влево — значение
   начинается ровно под заголовком, а подсветка при наведении остаётся прежней.
   Только в таблице: на телефоне строки — карточки, там подписей колонок нет. */
@media (min-width: 901px) {
  .grid-tasks td > form > .chip-plain, .grid-tasks td > .chip-plain { margin-left: -8px; }
}
.grid-tasks td[data-label="Срок"], .grid-tasks td[data-label="Ответственный"] { white-space: nowrap; }

/* колонки списка задач: ширины заданы, поэтому строки не разъезжаются */
/* Колонки списка задач заданы долями, а не пикселями: строка равномерно
   занимает всю ширину таблицы на любом экране, и справа не остаётся пустоты.
   Порядок: ID · Задача · Статус · Ответственный · Крайний срок · Создана ·
   Проект · Связи. В группировке по проектам колонка «Проект» спрятана, и её
   доля расходится между остальными сама. */
.grid-tasks { table-layout: fixed; width: 100%; }
.grid-tasks th:nth-child(1), .grid-tasks td:nth-child(1) { width: 6%; }     /* ID */
.grid-tasks th:nth-child(2), .grid-tasks td:nth-child(2) { width: 30%; }    /* задача */
.grid-tasks th:nth-child(3), .grid-tasks td:nth-child(3) { width: 12%; }    /* статус */
.grid-tasks th:nth-child(4), .grid-tasks td:nth-child(4) { width: 14%; }    /* крайний срок */
.grid-tasks th:nth-child(5), .grid-tasks td:nth-child(5) { width: 9%; }     /* создана */
.grid-tasks th:nth-child(6), .grid-tasks td:nth-child(6) { width: 6%; }     /* связи — значок */
.grid-tasks th:nth-child(7), .grid-tasks td:nth-child(7) { width: 12%; }    /* ответственный */
.grid-tasks th:nth-child(8), .grid-tasks td:nth-child(8) { width: 11%; }    /* проект */
.grid-tasks .chip-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.grid-tasks .chip-plain { align-items: flex-start; padding: 6px 8px; }
.grid-tasks .chip-project { white-space: normal; }
.grid-tasks td .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .grid-tasks { table-layout: auto; } }

/* знак проекта: папка в цвете проекта — один вид в списке и в заголовке группы */
.project-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--tone, #2468C9) 14%, #fff);
  color: var(--tone, #2468C9);
}
.project-mark .ico { width: 15px; height: 15px; }
.project-mark.sm { width: 22px; height: 22px; }
.project-mark.sm .ico { width: 13px; height: 13px; }
.project-mark-off { background: var(--box); color: var(--muted); }

/* название задачи в одну строку: длинное обрезается многоточием, целиком — в подсказке */
.grid-tasks .task-title-row { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.grid-tasks .task-title-row .row-title {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-tasks .task-title-row .state-tag, .grid-tasks .task-title-row .prio-high,
.grid-tasks .task-title-row .row-fold { flex: none; }
/* название в строке списка не сжимается в ничто: теги ему не конкуренты —
   их в строке два, остальные показаны числом (см. _task_row.html) */
.grid-tasks .task-title-row .row-title { flex: 1 1 auto; min-width: 120px; }
/* тег в строке со счётчиками — такая же тихая надпись, как «от Зверев А.» и
   счётчики: решётка вместо плашки, длинный тег обрезается многоточием */
.task-meta .meta-tag {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-tag-more { --tag: var(--muted); }

/* кнопка создания записи: прямоугольная с плюсом — её нельзя спутать
   с пилюлями-фильтрами «Делаю · Поручил · Наблюдаю» */
.btn-create {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 17px;
  height: var(--h-ctl); box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent-bg); color: var(--ink);
  font: 500 14px/1.2 var(--font); cursor: pointer; text-decoration: none;
}
.btn-create:hover { background: #E3ECFA; border-color: #CADDF7; color: var(--ink);
  text-decoration: none; }
.btn-create svg.ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
@media (max-width: 720px) { .btn-create { padding: 0 13px; font-size: 13px; } }

/* возврат к списку — ссылка, а не кнопка: это переход, а не действие,
   и кнопочная обводка спорила по весу с правкой и созданием */
.link-back {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 14px; color: var(--muted); text-decoration: none;
}
.link-back:hover { color: var(--accent); text-decoration: none; }
.link-back svg.ico { width: 15px; height: 15px; flex: none; }

/* правка файлов сделки: строка файла с крестиком и форма загрузки под ними */
.docs-edit { display: flex; flex-direction: column; gap: 8px; }
.docs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-small);
  background: var(--bg);
}
.docs-row.is-locked { background: var(--box); }
.docs-row .doc-type { flex: none; }
.docs-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.docs-row-name { font-size: 13px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.docs-edit .file-add { margin-top: 4px; gap: 10px; }
.docs-edit .file-add .cf { margin: 0; }
.grp-form-foot { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; }

/* правка записи — один карандаш в шапке карточки: подпись ничего не добавляла,
   а кнопка с текстом спорила по весу с названием записи */
.btn-edit {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--h-ctl-sm); height: var(--h-ctl-sm); padding: 0; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent); cursor: pointer; text-decoration: none;
}
.btn-edit:hover { background: #E3ECFA; border-color: #CADDF7; color: var(--accent); text-decoration: none; }
.btn-edit svg.ico { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* вложения в сообщении: картинка — превью, файл — строкой */
.tchat-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tchat-shot img { max-width: 190px; max-height: 150px; border-radius: var(--r-field); display: block; }
.tchat-doc {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12px; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tchat-doc .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* эмоции к сообщению и отметка «принято» */
.tchat-react { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tchat-emojis { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.tchat-emoji {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; line-height: 19px;
}
.tchat-picker { position: relative; }
.tchat-picker > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill); color: var(--muted); cursor: pointer;
}
.tchat-picker > summary::-webkit-details-marker { display: none; }
.tchat-picker > summary:hover { background: #fff; color: var(--accent); }
.tchat-picker .ico { width: 16px; height: 16px; }
.tchat-emoji-form {
  /* открывается влево от кнопки: смайл стоит у правого края сообщения, и вправо
     палитре расти некуда. Скрипт ещё раз ставит окно по месту, это запасной вид. */
  position: absolute; right: 0; left: auto; top: calc(100% + 6px); z-index: 120;
  display: flex; gap: 2px; max-width: calc(100vw - 20px);
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: 0 10px 26px rgba(20, 38, 64, .14); margin: 0;
}
.tchat-emoji-pick {
  border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 4px 5px; border-radius: var(--r-pill);
}
.tchat-emoji-pick:hover { background: var(--box); transform: scale(1.15); }
.tchat-ack {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
  font: 400 12px/19px var(--font); color: var(--ink-2);
}
.tchat-ack .ico { width: 13px; height: 13px; }
.tchat-ack:hover { border-color: var(--ok, #1E7F4F); color: var(--ok, #1E7F4F); }
.tchat-ack.is-on { background: #E6F3EC; border-color: #C7E6D6; color: #1E7F4F; cursor: default; }

/* переписка стоит на месте во весь экран, левая колонка прокручивается сама */
.task-grid { align-items: start; }
.task-grid > .panel { margin: 0; }
.tchat {
  position: sticky; top: 70px;              /* под шапкой портала */
  height: calc(100vh - 92px); min-height: 420px;
}
.tchat-compose { margin-top: auto; }
@media (max-width: 900px) {
  .tchat { position: static; height: auto; }
  .tchat-feed { max-height: 60vh; }
}

/* карточка сообщения: меню действий в углу, вложения превью, лента читаемая */
.tchat-msg { gap: 12px; }
.tchat-body { padding: 12px 14px 11px; border-radius: 14px; }
.tchat-head { position: relative; align-items: center; gap: 9px; margin-bottom: 6px; padding-right: 26px; }
.tchat-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tchat-more { position: absolute; right: -4px; top: -2px; }
.tchat-more > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill); color: var(--muted); cursor: pointer;
}
.tchat-more > summary::-webkit-details-marker { display: none; }
.tchat-more > summary:hover { background: #fff; color: var(--accent); }
.tchat-more .ico { width: 16px; height: 16px; }
.tchat-menu {
  position: absolute; right: 0; left: auto; top: calc(100% + 6px); z-index: 120; min-width: 220px;
  max-width: calc(100vw - 20px);
  display: flex; flex-direction: column; padding: 6px; gap: 2px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 30px rgba(20, 38, 64, .16);
}
.tchat-menu a, .tchat-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0;
  background: none; border-radius: var(--r-small); font: 400 13px/1.3 var(--font);
  color: var(--ink); text-align: left; cursor: pointer; text-decoration: none;
}
.tchat-menu a:hover, .tchat-menu button:hover { background: var(--box); text-decoration: none; }
.tchat-menu .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.tchat-menu form { margin: 0; }

/* вложения: ровные превью и плашки файлов */
.tchat-files { gap: 10px; margin-top: 10px; }
.tchat-shot {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r-field);
  background: #fff; cursor: zoom-in; overflow: hidden; line-height: 0;
}
.tchat-shot img { width: 132px; height: 96px; object-fit: cover; display: block; }
.tchat-shot:hover { border-color: var(--accent); }
.tchat-shot-marks {
  position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--r-pill); background: rgba(22, 32, 46, .78); color: #fff;
  font: 400 11px/16px var(--font);
}
.tchat-shot-marks .ico { width: 11px; height: 11px; }
.tchat-doc { max-width: 220px; }
.tchat-doc-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; background: var(--box); flex: none;
}
.tchat-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-letter-form { margin-top: 10px; }
.btn-send .ico { width: 15px; height: 15px; }

/* Картинка из переписки на весь экран. Оформление — портальное: светлые
   полосы с обычными кнопками сверху и снизу, тёмным остаётся только поле
   самой картинки. Инструменты правки стоят нижней полосой, поэтому
   «Сохранить» виден целиком на любом экране. */
/* картинка из переписки под курсором: растёт из сорока пикселей */
.shot-peek {
  position: fixed; z-index: 190; border-radius: var(--r-card); overflow: hidden;
  background: #fff; box-shadow: 0 14px 34px rgba(20, 38, 64, .22);
  border: 1px solid var(--line); pointer-events: none;
  transition: width .28s ease, height .28s ease;
}
.shot-peek img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  image-rendering: pixelated;             /* пока растёт — видно пиксели */
}
.shot-peek.is-sharp img { image-rendering: auto; }

body.shot-open { overflow: hidden; }
.shot-view {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: #0E1622; color: var(--ink);
}
.shot-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex: none;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding-top: calc(10px + env(safe-area-inset-top));
}
.shot-name {
  font-size: 14px; color: var(--ink); margin-right: auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h-ctl-sm); padding: 0 14px; cursor: pointer; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink-2); font: 400 13px/1 var(--font); text-decoration: none;
}
.shot-tool:hover { background: var(--box); color: var(--ink); text-decoration: none; }
.shot-tool.is-on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-active); }
/* главное действие — как кнопка сохранения в карточках портала */
.shot-tool-go { background: var(--accent); border-color: var(--accent); color: #fff; }
.shot-tool-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.shot-tool .ico { width: 15px; height: 15px; }
.shot-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px;
  min-height: 0; overflow: hidden;
}
.shot-wrap { position: relative; max-width: 100%; max-height: 100%; line-height: 0; }
.shot-wrap img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--r-card); display: block;
}
.shot-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot-wrap canvas.is-drawing { cursor: crosshair; }
.shot-wrap canvas.is-noting { cursor: copy; }
.shot-notes { position: absolute; inset: 0; pointer-events: none; }
.shot-pin {
  position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
  justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--err);
  color: #fff; font: 500 12px/1 var(--font); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}
.shot-pin.sm { position: static; transform: none; width: 20px; height: 20px; font-size: 11px; flex: none; }
.shot-list {
  max-height: 30vh; overflow-y: auto; padding: 12px 18px; display: flex; flex: none;
  flex-direction: column; gap: 8px; background: var(--bg); border-top: 1px solid var(--line);
}
.shot-note { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
.shot-note i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
/* нижняя полоса правки: кнопки переносятся по строкам и всегда видны целиком */
.shot-tools {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}

/* На телефоне картинку смотрят и правят одной рукой: сверху остаются имя и
   две кнопки-иконки, инструменты — во всю ширину нижней полосы. */
@media (max-width: 720px) {
  .shot-bar { gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .shot-name { font-size: 13px; }
  /* «Скачать» и «Закрыть» — кружками-иконками, подписи не нужны */
  .shot-bar > .shot-tool {
    width: 40px; height: 40px; padding: 0; font-size: 0; justify-content: center; flex: none;
  }
  .shot-bar > .shot-tool .ico { width: 19px; height: 19px; }
  .shot-tools { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .shot-tools .shot-tool { height: var(--h-ctl); padding: 0 14px; flex: 1 1 auto; min-width: 0; }
  .shot-stage { padding: 8px; }
  .shot-wrap img { border-radius: var(--r-small); }
  /* метка на картинке — под палец, а не под мышь */
  .shot-pin { width: 30px; height: 30px; font-size: 13px; }
  .shot-pin.sm { width: 24px; height: 24px; font-size: 12px; }
  .shot-list { max-height: 26dvh; padding: 10px 14px; gap: 10px; }
  .shot-note { font-size: 13px; line-height: 1.4; align-items: flex-start; }
  .shot-note i { margin-left: 8px; flex: none; }
}

/* левое меню: сервисный блок сворачивается, «Выйти» стоит отдельно внизу */
.sidebar { display: flex; flex-direction: column; }
.menu-fold > summary {
  list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.menu-fold > summary::-webkit-details-marker { display: none; }
.menu-fold > summary .ico { width: 14px; height: 14px; transition: transform .15s; }
.menu-fold[open] > summary .ico { transform: rotate(180deg); }
.menu-fold > summary:hover { color: var(--ink-2); }
.sidebar-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.item-exit { color: var(--ink-2); }

/* переписка: сообщения не липнут к полосе прокрутки, чужие и свои различаются */
.tchat-feed { padding-right: 10px; scrollbar-gutter: stable; }
.tchat-msg { max-width: 100%; }
.tchat-msg .tchat-body { max-width: 820px; }
.tchat-msg.own .tchat-body { background: var(--accent-bg); }
.tchat-sys { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 6px; }

/* палитра эмоций — аккуратная сетка по ширине чата, а не полоса во всю длину */
.tchat-emoji-form {
  display: grid; grid-template-columns: repeat(5, 34px); gap: 2px; width: max-content;
  padding: 8px; border-radius: var(--r-card);
  /* ширину задаёт сетка: относительный max-width брался от узкой кнопки-смайла
     и резал подложку, поэтому его здесь нет */
}
.tchat-emoji-pick { width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 19px; }

/* состояние своего сообщения: одна галочка — доставлено, две — просмотрено */
.tchat-state { display: inline-flex; align-items: center; color: var(--muted); flex: none; }
.tchat-state .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.tchat-state .ico + .ico { margin-left: -8px; }
.tchat-state.is-seen { color: var(--accent); }
/* сообщение ещё уходит на портал — часики вместо галочек */
.tchat-msg.is-sending { opacity: .65; }
.tchat-msg.is-sending .tchat-state .ico { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .tchat-emoji-form { grid-template-columns: repeat(5, 34px); }
  .tchat-msg .tchat-body { max-width: 100%; }
}

/* вложение в сообщении: одинаковая плашка с типом файла, без самой картинки */
.tchat-files {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(22, 32, 46, .08);
}
.tchat-file {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: #fff;
  color: var(--ink); text-align: left; cursor: pointer; text-decoration: none;
}
.tchat-file:hover { border-color: var(--accent); text-decoration: none; }
.tchat-file-type {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 10px; background: var(--box);
  font: 500 11px/1 var(--font); letter-spacing: .02em; color: var(--ink-2);
}
.tchat-file-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tchat-file-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-file-note { font-size: 11px; color: var(--muted); }
/* на плашке картинки — открыть, порисовать и скачать */
.tchat-file-go { width: 15px; height: 15px; color: var(--muted); flex: none; }
.tchat-file-acts { display: inline-flex; gap: 2px; flex: none; }
.tchat-file-act {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; color: var(--muted);
}
.tchat-file-act:hover { background: var(--box); color: var(--accent); }
.tchat-file-act .ico { width: 15px; height: 15px; }
.tchat-file.kind-image .tchat-file-type { background: #E6F1FB; color: #185FA5; }
.tchat-file.kind-pdf .tchat-file-type { background: #FCEBEB; color: #A32D2D; }
.tchat-file.kind-doc .tchat-file-type { background: #EEF1F5; color: #46586F; }
.tchat-file.kind-table .tchat-file-type { background: #E6F3EC; color: #1E7F4F; }
.tchat-file.kind-slides .tchat-file-type { background: #FBF0DC; color: #8A5D12; }
.tchat-file.kind-zip .tchat-file-type { background: #F1EFE8; color: #5F5E5A; }
.tchat-file.kind-media .tchat-file-type { background: #EEEDFE; color: #534AB7; }

/* нижний блок переписки зеркально: подсказка слева, действия справа */
.tchat-compose { display: flex; flex-direction: column; gap: 8px; }
.tchat-send {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
}
/* отправка: слева отметка «это результат», справа синяя кнопка */
.tchat-send { gap: 14px; }
.send-fix {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0;
  border: 0; background: none; color: var(--ink-2); font-size: 13px; cursor: pointer;
  user-select: none; line-height: 1.2;
}
.send-fix input { position: absolute; opacity: 0; pointer-events: none; }
.send-fix-box {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid var(--field-line); border-radius: 5px; background: #fff; color: transparent;
}
.send-fix-box .ico { width: 12px; height: 12px; }
.send-fix input:checked + .send-fix-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.send-fix input:checked ~ .send-fix-text { color: var(--accent); border-bottom-color: currentColor; }
/* подпись — фирменная пунктирная, как ссылки-действия портала, а не кнопка */
.send-fix-text {
  border-bottom: 1px dashed rgba(36, 104, 201, .45); padding-bottom: 1px; color: var(--accent);
}
.send-fix:hover .send-fix-box { border-color: var(--accent); }
.send-go {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font: 500 14px/1.2 var(--font);
}
.send-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.send-go .ico { color: rgba(255, 255, 255, .85); }
.send-go .ico { width: 15px; height: 15px; }
.tchat-hint b { color: var(--ink-2); font-weight: 500; }
.tchat-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: right; }
@media (max-width: 720px) {
  /* скрепка и кнопка отправки — по правому краю, одной вертикалью */
  .tchat-send { justify-content: flex-end; }
  /* длинная подсказка на телефоне занимала пол-экрана и наезжала на кнопки */
  .tchat-hint { display: none; }
  .send-fix-text { font-size: 12px; }
  /* поле ввода: две строки вместо трёх, чтобы переписка не уезжала вверх */
  .tchat-input textarea { min-height: 76px; font-size: 16px; }
  .tchat-compose { gap: 6px; }
}

/* палитра у нижних сообщений раскрывается вверх */
.tchat-picker.up .tchat-emoji-form { top: auto; bottom: calc(100% + 6px); }

/* ответ на сообщение: цитата в ленте и в поле ввода */
.tchat-quote {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; padding: 6px 10px;
  border-left: 2px solid var(--accent); background: rgba(36, 104, 201, .06);
  border-radius: 0 8px 8px 0; font-size: 12px; color: var(--ink-2);
}
.tchat-quote b { font-size: 12px; font-weight: 500; color: var(--accent); }
.tchat-answer {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 8px;
  border-left: 2px solid var(--accent); background: var(--box); border-radius: 0 8px 8px 0;
  font-size: 12px; color: var(--ink-2);
}
.tchat-answer-who { font-weight: 500; color: var(--accent); flex: none; }
.tchat-answer-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tchat-answer .btn-icon { margin-left: auto; flex: none; }
.tchat-cite {
  position: fixed; z-index: 120; padding: 6px 12px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 400 12px/1.2 var(--font); cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 38, 64, .22);
}

/* окно письма в выдвижной панели */
.letter-box { max-width: 720px; }
.letter-from { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.letter-form { display: flex; flex-direction: column; gap: 12px; }
.letter-form .field { display: flex; flex-direction: column; gap: 4px; }
.letter-form input, .letter-form textarea { width: 100%; }
.letter-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* сколько символов осталось в названии */
.field-left { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.field-left.is-full { color: var(--err); }

/* лента событий: компактнее и понятнее — кто, что и когда */
.timeline { gap: 8px; }
.tl-card { padding: 11px 14px; }
.tl-head { gap: 8px; flex-wrap: wrap; }
.tl-head .ava.sm { width: 22px; height: 22px; font-size: 9px; }
.tl-who { font-size: 13px; font-weight: 500; color: var(--ink); }
.tl-kind {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); background: rgba(255, 255, 255, .7); padding: 2px 8px;
  border-radius: var(--r-pill);
}
.tl-item.tl-quiet .tl-kind { background: transparent; padding: 0; }
.tl-subject { font-size: 14px; }
.tl-mark .ico { width: 15px; height: 15px; }
.tl-text { font-size: 13px; line-height: 1.5; max-width: 70ch; }
.tl-tile { width: 46px; height: 46px; border-radius: 10px; }
.tl-tile .ico { width: 20px; height: 20px; }
.tl-day span { font-size: 12px; }

/* встреча: дата, доступ и кнопка стоят одной строкой, без скачков по высоте */
.meet-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 10px 14px;
  align-items: end;
}
.meet-row .cf { margin: 0; }
.meet-row .cf-k { min-height: 16px; }
.meet-row .seg { margin: 0; }
.meet-row .seg span { padding: 0 14px; }
.meet-go { padding: 0 18px; white-space: nowrap; }
.meet-note { margin-top: 10px; }
.compose-stack .compose-or { margin: 14px 0; }
@media (max-width: 900px) {
  .meet-row { grid-template-columns: 1fr; align-items: stretch; }
  .meet-row .cf-go .cf-k { display: none; }
  .meet-go { width: 100%; }
}

/* заголовок события — первым, автор и время справа */
.tl-head .tl-kind { order: -1; }
.tl-who { font-size: 12px; color: var(--ink-2); font-weight: 400; }
.tl-head .when { margin-left: 6px; }

/* комментарий: текст отдельно, вложения отдельно */
.tl-files {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(22, 32, 46, .08);
}
.tl-files-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tl-file {
  display: inline-flex; align-items: center; gap: 7px; max-width: 240px; padding: 5px 11px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 12px; color: var(--ink); text-decoration: none;
}
.tl-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-file:hover { border-color: var(--accent); text-decoration: none; }
.tl-file .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* письмо в ленте: тема, участники, вступление и разворот */
.tl-mail { margin-top: 8px; }
.tl-mail-subject { font-size: 14px; font-weight: 500; color: var(--ink); }
.tl-mail-people {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px;
  font-size: 12px; color: var(--ink-2);
}
.tl-mail-people b { font-weight: 500; color: var(--muted); }
.tl-mail-lead {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-2);
  max-width: 70ch; white-space: pre-wrap;
}
.tl-mail .tl-foot { margin-top: 10px; }

/* кнопка встречи ровно по высоте сегмента */
.meet-go { display: inline-flex; align-items: center; justify-content: center; }

/* метки кампании в блоке «Источник» */
.prop-source .utm { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.utm-row {
  display: grid; grid-template-columns: 104px 96px minmax(0, 1fr); align-items: baseline;
  gap: 8px; font-size: 12px;
}
.utm-k { color: var(--muted); }
.utm-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; color: var(--ink-2); background: var(--box); border-radius: var(--r-pill);
  padding: 1px 8px; justify-self: start;
}
.utm-v { color: var(--ink); overflow-wrap: anywhere; }
.utm-empty { font-size: 12px; color: var(--muted); }
.utm-extra { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.utm-extra .utm-row { grid-template-columns: 130px minmax(0, 1fr); }
@media (max-width: 720px) {
  .utm-row, .utm-extra .utm-row { grid-template-columns: 1fr; gap: 2px; }
}

/* лента: заголовок события обычным жирным текстом, шапка отбита чертой */
.tl-kind {
  background: none; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink);
}
.tl-item.tl-quiet .tl-kind { color: var(--ink-2); font-weight: 400; }
.tl-head {
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(22, 32, 46, .08);
}
.tl-item.tl-quiet .tl-head { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.tl-subject { font-weight: 400; color: var(--ink-2); }

/* меню записи не должно уходить под соседнюю карточку */
.tl-item { z-index: 1; }
.tl-item:has(.tl-menu[open]) { z-index: 30; }
.tl-card { overflow: visible; }
.tl-menu-body { z-index: 40; }

/* правка комментария на месте */
.tl-edit { margin-top: 4px; }
.tl-edit textarea { width: 100%; }
.tl-edit-foot { display: flex; gap: 10px; margin-top: 8px; }
.tl-edited { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* мелкая доводка ленты */
.tl-item:hover .tl-card { box-shadow: 0 8px 22px rgba(27, 36, 48, .10); }

/* сумма в формах — значение-ссылка с иконкой и пунктиром, как остальные поля */
.moneyf { position: relative; }
.moneyf-face {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 2px; border: 0;
  background: none; cursor: pointer; font: 500 15px/1.3 var(--font); color: var(--ink);
  border-bottom: 1px dashed rgba(36, 104, 201, .45);
}
.moneyf-face .ico { width: 15px; height: 15px; color: var(--accent); flex: none; }
.moneyf-face:hover { color: var(--accent); border-bottom-color: currentColor; }
.moneyf-face.is-empty { color: var(--muted); font-weight: 400; }
.moneyf-input { display: none; }
.moneyf.is-edit .moneyf-face { display: none; }
.moneyf.is-edit .moneyf-input { display: block; width: 100%; }

/* вложения в сообщении — мельче относительно блока */
.tchat-files { gap: 5px; margin-top: 8px; padding-top: 8px; }
.tchat-file { max-width: 280px; gap: 8px; padding: 5px 8px; border-radius: 10px; }
.tchat-file-type { width: 32px; height: 32px; border-radius: 8px; font-size: 10px; }
.tchat-file-name { font-size: 12px; }
.tchat-file-note { font-size: 10px; }
.tchat-file-acts { gap: 0; }
.tchat-file-act { width: 22px; height: 22px; border-radius: 6px; }
.tchat-file-act .ico { width: 13px; height: 13px; }

/* цитата в ответе: свёрнута до трёх строк, раскрывается кнопкой */
.tchat-quote { position: relative; padding: 7px 10px 7px 11px; }
.tchat-quote-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap;
}
.tchat-quote.is-open .tchat-quote-text { -webkit-line-clamp: unset; overflow: visible; }
.tchat-quote-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 0;
  border: 0; background: none; color: var(--accent); font: 400 12px/1.2 var(--font);
  cursor: pointer;
}
.tchat-quote-more .ico { width: 12px; height: 12px; transition: transform .15s; }
.tchat-quote.is-open .tchat-quote-more .ico { transform: rotate(180deg); }

/* время сообщения — внизу справа */
.tchat-when { margin-top: 6px; text-align: right; font-size: 11px; color: var(--muted); }
.tchat-head { padding-right: 26px; }

/* системная запись: кто сделал — подсвечен */
/* системная запись — строкой слева, как в мессенджере: кто, что сделал и когда */
.tchat-sys {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; align-self: stretch;
  padding: 5px 10px; background: var(--box); border-radius: 10px; text-align: left;
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.tchat-sys > span:nth-child(2) { flex: 1; min-width: 0; }
.tchat-sys-who {
  background: #FBF0DC; color: #8A5D12; border-radius: 6px; padding: 1px 6px; font-weight: 500;
}
.tchat-sys-when { color: var(--muted); }

/* меню сообщения: пункты с иконками, опасное действие красным */
.tchat-menu { min-width: 232px; max-height: 60vh; overflow-y: auto; }
.tchat-menu .danger { color: var(--err); }
.tchat-menu .danger .ico { color: var(--err); }
.tchat-menu form { margin: 0; }

/* правка и пересылка сообщения */
.tchat-edit { margin-top: 6px; }
.tchat-edit textarea { width: 100%; }
.tchat-edit-foot { display: flex; gap: 8px; margin-top: 8px; }
.tchat-forward {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px;
  padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.tchat-forward-k { font-size: 12px; color: var(--muted); }
.tchat-forward select { max-width: 260px; }

/* закреплённое и пересланное сообщение */
.tchat-msg.is-pinned .tchat-body { box-shadow: inset 3px 0 0 var(--warn); }
.tchat-pinned { display: inline-flex; color: var(--warn); }
.tchat-pinned .ico { width: 13px; height: 13px; }
.tchat-fwd {
  font-size: 11px; color: var(--muted); background: var(--box);
  border-radius: var(--r-pill); padding: 1px 8px;
}

/* смайл — кружком в правом нижнем углу сообщения, внутри карточки */
.tchat-react { position: relative; justify-content: flex-start; padding-right: 34px;
  min-height: 26px; }
.tchat-picker { position: absolute; right: 0; bottom: 0; }
.tchat-picker > summary {
  width: 28px; height: 28px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(20, 38, 64, .08);
}
.tchat-picker > summary:hover { background: var(--accent-bg); border-color: #CADDF7; }
.tchat-emoji-form { left: auto; right: 0; }

/* вложения — по два в строку */
.tchat-files {
  /* два вложения в строке, но не уже 210px — иначе подпись не читается */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px;
  align-items: start;
}
.tchat-file { max-width: none; width: 100%; }
@media (max-width: 900px) { .tchat-files { grid-template-columns: 1fr; } }

/* меню и палитра последних сообщений раскрываются вверх */
.tchat-more.up .tchat-menu { top: auto; bottom: calc(100% + 6px); }
.tchat-picker.up .tchat-emoji-form { top: auto; bottom: calc(100% + 6px); }

/* скрепка и смайл — в самом поле ввода, одной группой в правом нижнем углу */
.tchat-input { position: relative; max-width: 100%; }
.tchat-input textarea { padding-right: 72px; width: 100%; max-width: 100%; }
.tchat-tools {
  position: absolute; right: 10px; bottom: 9px; display: flex; align-items: center; gap: 2px;
}
.tchat-tools .picker { position: relative; right: auto; bottom: auto; }
.tchat-compose .tchat-tools .tchat-attach {
  margin: 0; align-self: center; flex-direction: row; gap: 6px; cursor: pointer;
}
.tchat-tools .tchat-attach .add-link {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--r-pill); color: var(--muted); border: 0; text-decoration: none;
}
.tchat-tools .tchat-attach:hover .add-link { background: var(--box); color: var(--accent); }
.tchat-tools .tchat-attach .add-link .ico { width: 17px; height: 17px; }
.tchat-tools .pick-name { max-width: 160px; font-size: 12px; }
/* микрофон рядом со скрепкой и смайлом */
.tchat-mic {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 0; background: none; border-radius: var(--r-pill); color: var(--muted); cursor: pointer;
  padding: 0;
}
.tchat-mic:hover { background: var(--box); color: var(--accent); }
.tchat-mic .ico { width: 17px; height: 17px; }
/* полоса записи над полем ввода */
.tchat-rec {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--box);
}
.tchat-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--err); flex: none;
  animation: rec-beat 1s ease-in-out infinite;
}
@keyframes rec-beat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tchat-rec-when { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); }
.tchat-rec-note { font-size: 13px; color: var(--muted); flex: 1; }
/* голосовое в ленте: музыкальная волна в синем цвете портала */
.voice {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  /* запись не растягивается во всю ширину сообщения — плашка как в мессенджерах */
  width: 100%; max-width: 420px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.voice audio { display: none; }
.voice-go {
  width: 34px; height: 34px; flex: none; border: 0; cursor: pointer; padding: 0;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.voice-go:hover { background: var(--accent-hover); }
.voice-go .ico { width: 16px; height: 16px; }
.voice-wave {
  flex: 1; min-width: 0; height: 30px; display: flex; align-items: center;
  gap: 2px; cursor: pointer; overflow: hidden;
}
.voice-bar {
  flex: 1; min-width: 1px; border-radius: 2px; background: var(--accent-bg);
  transition: background .12s, height .2s;
}
.voice-bar.on { background: var(--accent); }
.voice.is-play .voice-bar.on { background: var(--accent-hover); }
.voice-time {
  font-size: 12px; color: var(--accent-active); flex: none; min-width: 34px;
  text-align: right; font-variant-numeric: tabular-nums;
}
/* «Аа» — расшифровка голосового */
.voice-text {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  font: 600 13px/1 var(--font); color: var(--accent); border-radius: var(--r-small);
}
.voice-text:hover { color: var(--accent-active); }
.voice-text.is-busy { opacity: .5; cursor: progress; }
.voice-said {
  /* расшифровка встаёт под записью во всю ширину, а не сбоку от неё */
  grid-column: 1 / -1; margin-top: 6px; padding: 8px 12px;
  background: var(--accent-bg); color: var(--ink);
  border-radius: var(--r-card); font-size: 13.5px; line-height: 1.45; max-width: 100%;
}
.voice-said.is-fail { background: var(--box); color: var(--muted); }
.voice-get { color: var(--field-line); display: inline-flex; flex: none; }
.voice-get .ico { width: 16px; height: 16px; }
.voice-get:hover { color: var(--accent); }
@media (max-width: 720px) {
  .voice { gap: 9px; padding: 8px 10px; }
  .voice-wave { height: 26px; min-width: 70px; }
}
.compose-smile { position: absolute; right: 10px; bottom: 10px; }
.compose-smile > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill); color: var(--muted); cursor: pointer;
}
.compose-smile > summary::-webkit-details-marker { display: none; }
.compose-smile > summary:hover { background: var(--box); color: var(--accent); }
.compose-smile .ico { width: 17px; height: 17px; }
.compose-emoji {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
  display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 30px rgba(20, 38, 64, .16);
}
@media (max-width: 720px) { .compose-emoji { grid-template-columns: repeat(5, 34px); } }

/* фон переписки: лёгкий фирменный узор, на нём сообщения читаются как карточки */
.tchat-feed {
  background-color: #F7F9FC;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(36, 104, 201, .10) 1px, transparent 0),
    radial-gradient(circle at 13px 13px, rgba(36, 104, 201, .06) 1px, transparent 0);
  background-size: 26px 26px, 26px 26px;
  border-radius: var(--r-card);
  padding: 12px 12px 14px;
}

/* свои сообщения — справа и без аватара, собеседники — слева с аватаром */
.tchat-msg.own { flex-direction: row-reverse; }
.tchat-msg.own > .ava, .tchat-msg.own > a.ava { display: none; }
.tchat-msg.own .tchat-body { background: #E4EEFD; border: 1px solid #CFE0F8; }
.tchat-msg .tchat-body { background: #fff; border: 1px solid var(--line); max-width: 82%; }
.tchat-msg.own .tchat-body { margin-left: auto; }
.tchat-sys { background: rgba(255, 255, 255, .86); border: 1px solid var(--line); }

/* состояние только для чтения — видно, что переключать нельзя */
.seg-state.is-locked { opacity: .55; background: var(--box); border-color: transparent; }
.seg-state.is-locked span { cursor: default; }
.seg-state.is-locked .is-on { background: var(--muted); color: #fff; }


/* ================= лента: геометрия цепочки ==================
   Всё считается от размера значка, поэтому линия, значок и перемычка
   всегда сходятся: линия идёт по центру значка, перемычка — от его края
   до плашки, разделитель дня начинается от той же линии. */
.timeline { --mark: 30px; --mark-gap: 12px; }
.timeline::before {
  left: calc(var(--mark) / 2 - 1px); top: 0; bottom: 0; width: 2px;
  background: var(--line); opacity: 1;
}
.tl-mark {
  width: var(--mark); height: var(--mark); margin-top: 6px; box-shadow: none;
}
.tl-item::after {
  left: var(--mark); top: calc(6px + var(--mark) / 2 - 1px);
  width: var(--mark-gap); height: 2px; background: var(--tl-line);
}
.tl-day { padding-left: calc(var(--mark) / 2 - 1px); }
.tl-day span { background: var(--bg); border: 0; color: var(--muted); padding: 0 8px; }
/* последняя запись — цепочке дальше некуда идти: хвост линии закрываем фоном
   строго ниже значка, чтобы не резать его обводку */
.timeline > .tl-item:last-child::before {
  content: ""; position: absolute; left: calc(var(--mark) / 2 - 3px);
  top: calc(6px + var(--mark)); bottom: -10px; width: 6px; background: var(--bg);
}

/* новое событие в ленте проявляется мягко, а не возникает рывком */
@keyframes tl-appear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tl-item.is-new { animation: tl-appear .3s ease-out both; }
@media (prefers-reduced-motion: reduce) { .tl-item.is-new { animation: none; } }

/* ---- товары сделки: строка = единица работ со своей мерой ---- */
.prod-table { margin-bottom: 4px; }
.prod-head, .prod-row {
  display: grid; align-items: center;
  grid-template-columns: minmax(160px, 1fr) 104px 92px 136px 116px 68px; gap: 10px;
}
.prod-head {
  padding: 0 4px 8px; border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.prod-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-head .num, .prod-row .prod-num { text-align: right; }
.prod-row { padding: 8px 4px; border-bottom: 1px solid var(--line); margin: 0; }
.prod-row:hover { background: var(--box); }
.prod-cell { display: block; min-width: 0; margin: 0; }
.prod-cell input, .prod-cell select { width: 100%; }
.prod-row .prod-num input { text-align: right; }
/* сумма-значение в узкой ячейке выравнивается по правому краю, как число */
.prod-row .prod-num .moneyf { display: flex; justify-content: flex-end; }
/* подписи полей нужны только на телефоне, где строка превращается в карточку */
.prod-k { display: none; }
.prod-sum { font-size: 15px; font-weight: 600; white-space: nowrap; }
.prod-act { display: flex; gap: 6px; justify-content: flex-end; }
.prod-empty {
  padding: 18px 4px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line);
}
.prod-total {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 4px 16px; margin-bottom: 16px;
}
.prod-total > span:first-child {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.prod-total b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.prod-add { max-width: 720px; }
@media (max-width: 1100px) {
  .prod-head { display: none; }
  .prod-row {
    grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; margin-bottom: 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  }
  .prod-row .prod-name { grid-column: 1 / -1; }
  .prod-row .prod-num, .prod-row .prod-num input { text-align: left; }
  .prod-k { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
  .prod-act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---- левая колонка карточки: поля разложены по группам-карточкам ----
   Группа = один смысл: клиент, работы, документы, файлы, люди. Пустые поля
   строк не занимают — внизу группы одна строка «Не заполнено: …», а карандаш
   у заголовка правит только поля своей группы. */
.card-side .grp, .props .grp {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  margin-bottom: 12px;
}
.card-side .grp:last-child, .props .grp:last-child { margin-bottom: 0; }
.grp-head {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.grp-head > .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.grp-head b { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
.grp-head .btn-icon-sm { margin-left: auto; }
.grp-body { padding: 3px 14px 10px; }
.grp-body .prop { padding: 9px 0; }
.grp-body .prop:last-child { border-bottom: 0; }
/* незаполненное — одной строкой внизу группы, а не прочерками в каждом поле */
.grp-miss {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.grp-miss .link-action { margin-left: 2px; }
/* пока группа правится, подсказка о незаполненном не нужна — поля уже на виду */
.grp:has([data-descr]:not([hidden])) .grp-miss { display: none; }
/* действия по контакту: позвонить и написать прямо из карточки */
.grp-body .act { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.grp-body .act a {
  display: inline-flex; align-items: center; gap: 7px; height: var(--h-ctl-sm); padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg);
  font-size: 12px; color: var(--ink-2);
}
.grp-body .act a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.grp-body .act .ico { width: 14px; height: 14px; }
/* подзаголовок внутри группы — разделитель без своей рамки-коробки */
.grp-split {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.grp-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
/* форма правки группы живёт в той же карточке, что и её поля */
.grp-form { padding: 4px 14px 12px; margin: 0; }
.grp-form .descr-foot { padding: 10px 0 0; }
@media (max-width: 720px) {
  .grp-body, .grp-head, .grp-miss, .grp-form { padding-left: 13px; padding-right: 13px; }
}

/* ---- разделы карточки задачи — те же группы-карточки ----
   Разметка разделов не меняется: сворачивание, значения в заголовке и личные
   настройки раскрытия остаются, меняется только оформление — раздел стал
   карточкой с шапкой, как группы в карточке сделки и лида. */
.props .prop-fold {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  margin-bottom: 12px;
}
.props .prop-fold:last-child { margin-bottom: 0; }
.props .prop-fold .fold-head,
.props .prop-fold:first-child .fold-head {
  margin: 0; padding: 10px 14px; border-top: 0; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink);
}
.props .prop-fold .fold-head > .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.props .prop-fold.is-folded .fold-head { border-bottom: 0; }
.props .prop-fold .fold-body { padding: 3px 14px 10px; }
/* примечание к разделу стоит отдельной строкой, а не рядом с заголовком:
   его отступ слева (он для строчного случая) здесь сдвигал текст вправо */
.prop-fold .fold-body > .prop-note { margin-left: 0; margin-bottom: 10px; }
.props .prop-fold .fold-body > .prop:last-child { border-bottom: 0; }
.props .prop-fold .fold-head:hover { color: var(--accent); }
/* карточка задачи целиком лежит на светлом фоне панели — иначе карточки в карточке
   не читаются: белое на белом */
.panel-pad.props { background: var(--box); }
.props .card-crumb { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 11px 16px; margin-bottom: 12px; }
.props .task-tags { margin: 0 0 12px; }
@media (max-width: 720px) {
  .props .prop-fold .fold-head, .props .prop-fold .fold-body { padding-left: 13px; padding-right: 13px; }
}

/* ---- досье сделки: шапка клиента и плитки главного ----
   Первый экран отвечает на вопросы «кому звонить», «сколько денег», «когда срок»
   и «кто ведёт»; остальные поля лежат под кнопкой «Ещё поля сделки». */
.deal-hero, .card-hero {
  background: var(--box); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px;
}
.deal-hero .co, .card-hero .co { font-size: 16px; font-weight: 500; }
.deal-hero .who, .card-hero .who { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.deal-hero .act, .card-hero .act { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.deal-hero .act a, .card-hero .act a {
  display: inline-flex; align-items: center; gap: 7px; height: var(--h-ctl-sm); padding: 0 13px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg);
  font-size: 12px; color: var(--ink-2);
}
.deal-hero .act a:hover, .card-hero .act a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.deal-hero .act .ico, .card-hero .act .ico { width: 14px; height: 14px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.facts .fact {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
}
.facts .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.facts b { font-size: 15px; font-weight: 500; }
.facts b.amount { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.facts .person { max-width: 100%; }
/* кнопка, за которой лежат редкие поля */
.more-fields {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--h-ctl); margin-bottom: 12px; padding: 0 14px;
  border: 1px dashed var(--field-line); border-radius: 10px; background: var(--bg);
  font: 400 13px var(--font); color: var(--ink-2); cursor: pointer; text-align: left;
}
.more-fields:hover { border-color: var(--accent); color: var(--accent); }
.more-fields .ico { width: 15px; height: 15px; flex: none; transform: rotate(90deg); }
/* вкладка «Таймлайн»: лента во всю ширину, но не шире читаемой колонки */
.feed-wide .card-feed { max-width: 940px; }
@media (max-width: 720px) {
  /* плитки остаются в два столбца — иначе первый экран уезжает вниз на четыре ряда */
  .facts b.amount { font-size: 17px; }
  .deal-hero .act a, .card-hero .act a { height: var(--h-ctl); }
}

/* ---- файлы сделки: назначение документа крупно, имя файла подписью ----
   Имена у закрывающих однотипные («Компания Комета - Акт выполненных…»), поэтому
   обрезанное имя ничего не говорит. Первой строкой — вид и дата документа. */
.docs { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.doc-file {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.doc-file:hover { border-color: var(--accent); text-decoration: none; }
.doc-type {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 9px; background: var(--box);
  font: 500 10px/1 var(--font); letter-spacing: .03em; color: var(--ink-2);
}
/* цвет плитки — по виду документа: договор синий, акт и УПД зелёные, счёт жёлтый */
.doc-file.kind-contract .doc-type { background: var(--accent-bg); color: var(--accent-active); }
.doc-file.kind-act .doc-type, .doc-file.kind-upd .doc-type { background: var(--ok-bg); color: var(--ok); }
.doc-file.kind-invoice .doc-type { background: var(--warn-bg); color: var(--warn); }
.doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.doc-name { font-size: 13px; font-weight: 500; }
.doc-note {
  font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-go { width: 15px; height: 15px; color: var(--muted); flex: none; }
.doc-file:hover .doc-go { color: var(--accent); }

/* ---- повторяемость сделки: цикл периодов ----
   Включённый цикл помечаем зелёной шапкой — по карточке видно, что сделка
   продолжится следующим периодом, а не закончится. */
.grp-repeat.is-on .grp-head { background: var(--ok-bg); border-bottom-color: #CCE7D8; }
.grp-repeat.is-on .grp-head > .ico { color: var(--ok); }
.grp-repeat.is-on .grp-head .badge { background: #fff; color: var(--ok); }
.repeat-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.repeat-note b { color: var(--ink); font-weight: 500; }
.repeat-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
/* параметры цикла — только показ: правятся в «Изменить сделку» */
.repeat-when {
  display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
}
.repeat-when .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.repeat-when b { font-size: 14px; font-weight: 500; }


/* ================================================================== */
/*  Список контактных лиц: строка работает, а не только называет       */
/* ================================================================== */
/* Контакт узнаётся по кружку и должности, связь — ссылками, действия строки
   появляются при наведении, а на телефоне становятся подписанными кнопками. */
.grid-contacts .pickcol { width: 44px; }
.c-cell { display: flex; gap: 10px; align-items: flex-start; }
.c-cell .list-sub { margin-top: 1px; }
.contact-line { display: block; }
.contact-line + .contact-line { margin-top: 3px; }
.contact-line.tel { white-space: nowrap; }
.who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.row-acts { display: flex; gap: 4px; justify-content: flex-end; visibility: hidden; }
table.grid tr:hover .row-acts { visibility: visible; }
.row-acts .btn-icon { width: var(--h-ctl-sm); height: var(--h-ctl-sm); }
.row-acts .btn-icon svg { width: 16px; height: 16px; }
.grid-foot { padding-top: 14px; color: var(--muted); font-size: 13px; }

/* полоса массовых действий: её нет, пока не отмечена ни одна строка */
.bulkbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--accent-bg); border-radius: var(--r-pill);
  padding: 5px 8px 5px 16px; margin-bottom: 12px;
}
.bulkbar .cnt { font-size: 13px; color: var(--accent-active); }
.bulkbar .cnt b { font-weight: 600; }
.bulkbar .btn { background: #fff; border-color: transparent; }
.bulkbar .btn:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
.bulkbar select { width: auto; min-width: 158px; height: var(--h-ctl-sm); }

@media (max-width: 900px) {
  /* на телефоне карточка показывает то, по чему контакт узнают и с чего звонят;
     почта, тип и дата правки прячутся, массовые действия остаются работой ПК */
  .grid-contacts .pickcol { display: none !important; }
  .grid-contacts .bulkbar { display: none; }
  table.grid td.c-upd, .c-mail, .c-kind { display: none; }
  .grid-contacts tr { padding: 12px 14px; }
  .c-cell .ava.sm { width: 38px; height: 38px; font-size: 13px; }
  .row-acts {
    visibility: visible; justify-content: flex-start; margin-top: 10px; gap: 6px;
    border-top: 1px solid var(--line); padding-top: 10px;
  }
  .row-acts .btn-icon {
    width: auto; height: var(--h-ctl); border-radius: var(--r-pill); padding: 0 10px;
    gap: 6px; font: 500 13px/1 var(--font); flex: 1 1 0; min-width: 0;
  }
  .row-acts .btn-icon svg { width: 18px; height: 18px; }
  .row-acts .btn-icon .mobile-only { white-space: nowrap; }
}

/* иконка внутри пункта верхнего меню: сейчас пунктов со значком в шапке нет
   (вкладки — только текст), но без размера svg растянулся бы на всю полосу,
   поэтому правило остаётся здесь, рядом с самим меню. */
.topbar nav a .ico { width: 16px; height: 16px; flex: none; }

/* ---- строка отбора на телефоне: поиск с кнопкой, выборы отдельной строкой ----
   Поле поиска и «Найти» стоят рядом первой строкой, все выборы — второй и
   переносятся по мере надобности. Перенос делает пустой элемент-разделитель,
   поэтому порядок не зависит от того, сколько выборов у страницы. */
@media (max-width: 900px) {
  .filterbar { flex-wrap: wrap; gap: 8px; }
  .filterbar .field-search { order: 1; flex: 1 1 auto; min-width: 0; }
  .filterbar .btn-primary { order: 2; flex: 0 0 auto; }
  .filterbar::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .filterbar .pick.as-field, .filterbar select, .filterbar .switch, .filterbar .pickm {
    order: 4; flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%;
  }
  .filterbar .btn-light { order: 5; flex: 0 0 auto; }
}

/* ---- сводка карточки сделки: одна строка вместо таблицы ----
   Сумма крупно, дальше через точки направление, клиент и служебное серым.
   Переносится по словам, поэтому длинное название клиента ничего не ломает. */
.card-crumb {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 0 13px; font-size: 13px; color: var(--ink-2);
}
.card-crumb .key, .card-crumb .amount {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.card-crumb .key.muted { font-weight: 500; color: var(--muted); }
.card-crumb .v-overdue { color: var(--err); }
.card-crumb b { font-weight: 500; color: var(--ink); }
.card-crumb .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.card-crumb .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--field-line); flex: none; }
/* подсказка под сводкой больше не ячейка сетки — у неё свои отступы */
.card-crumb + .lead-hint { margin-bottom: 18px; }
@media (max-width: 720px) {
  .card-crumb { gap: 8px 12px; padding: 10px 0 12px; }
}

/* ---- списки портала: строка таблицы становится смысловой карточкой ----
   На широком экране — обычная таблица. Ниже 900 px веса расставлены заново:
   главное (`.main`) заголовком, крупное значение (`.num`) справа, остальные
   ячейки — подвалом в одну строку. Подписи полей («Стадия: …») по умолчанию
   выключены: чип, рубль и аватар говорят сами за себя. Ячейку, без которой
   карточка понятнее, помечаем `.c-hide`; ячейку, непонятную без подписи, —
   `.c-label`. Применяется к спискам сделок, лидов, компаний, контактов и задач. */
table.grid.card-grid .resp { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
table.grid.card-grid .resp .ava.sm { width: 24px; height: 24px; font-size: 9px; }
table.grid.card-grid .resp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-no { display: none; }
@media (max-width: 900px) {
  table.grid.card-grid, table.grid.card-grid tbody { display: block; width: 100%; }
  /* ширину ячеек задаёт flex-раскладка карточки, а не общее правило таблиц */
  table.grid.card-grid tr, table.grid.card-grid td { display: block; width: auto; }
  table.grid.card-grid thead { display: none; }
  /* на планшете карточки идут в два столбца, на телефоне — в один.
     auto-fit, а не repeat(2): когда карточка одна (а в группе проекта их часто
     одна), пустой столбец схлопывается и карточка занимает всю ширину, а не
     половину с дырой справа */
  table.grid.card-grid tbody {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
  }
  table.grid.card-grid tr {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; margin: 0;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 13px 15px; align-content: flex-start;
  }
  table.grid.card-grid tr:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
  /* разрыв строки: подвал карточки всегда идёт под названием и крупным значением,
     даже когда название короткое и место в первой строке остаётся */
  /* он же рисует линию между заголовком и подвалом: одной чертой на всю ширину,
     а не тенями ячеек — иначе при переносе подвала линия дробится на куски */
  table.grid.card-grid tr::before {
    content: ""; order: 3; flex: 0 0 100%; height: 0;
    margin-top: 11px; border-top: 1px solid var(--line);
  }
  table.grid.card-grid td { border: 0; padding: 0; }
  table.grid.card-grid td[data-label]::before { content: none; }
  /* подпись возвращаем только там, где без неё значение не читается */
  table.grid.card-grid td.c-label[data-label]::before {
    content: attr(data-label) ":\00a0"; color: var(--muted); font-size: 12px;
  }
  table.grid.card-grid td.c-hide { display: none; }
  .deal-no { display: inline; }
  table.grid.card-grid td.main {
    order: 1; flex: 1 1 55%; min-width: 0; font-size: 15px; font-weight: 500; margin: 0;
    overflow-wrap: anywhere;
  }
  table.grid.card-grid td.main .deal-sub { font-weight: 400; margin-top: 2px; }
  table.grid.card-grid td.num {
    order: 2; flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 17px;
    font-weight: 600; white-space: nowrap; padding-left: 10px;
  }
  /* подвал карточки: ячейки в ряд, общая линия сверху собирается из их теней */
  table.grid.card-grid td:not(.main):not(.num):not(.c-hide):not(.pickcol) {
    order: 4; flex: 0 1 auto; min-width: 0; max-width: 100%;
    padding-top: 10px; padding-right: 10px;
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Модификаторы подвала. Отрицания повторяют базовое правило выше: без них
     оно перевешивает по специфичности и модификатор молча не работает.
     c-grow — забирает свободное место (клиент, связь);
     c-end — прижата вправо (ответственный);
     c-row — занимает свою строку (кнопки действий). */
  table.grid.card-grid td.c-grow:not(.main):not(.num):not(.c-hide):not(.pickcol) { flex: 1 1 auto; }
  table.grid.card-grid td.c-end:not(.main):not(.num):not(.c-hide):not(.pickcol) {
    margin-left: auto; padding-right: 0; justify-content: flex-end;
  }
  table.grid.card-grid td.c-row:not(.main):not(.num):not(.c-hide):not(.pickcol) {
    flex: 1 1 100%; margin-left: 0; justify-content: flex-start;
  }
  /* чекбокс массового выбора остаётся слева от названия */
  table.grid.card-grid td.pickcol { order: 0; flex: 0 0 auto; padding-right: 10px; }
  table.grid.card-grid tr.is-empty { display: block; grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* minmax(0, 1fr), а не 1fr: у 1fr минимум считается по содержимому, и карточка
     с длинным названием или нерушимой плашкой вылезает за правый край экрана */
  table.grid.card-grid tbody { grid-template-columns: minmax(0, 1fr); }
  /* в узкой карточке подвал переносится, и прижатая вправо ячейка повисает
     одна в строке — на телефоне ставим всё подряд слева */
  table.grid.card-grid td.c-end:not(.main):not(.num):not(.c-hide):not(.pickcol) {
    margin-left: 0; justify-content: flex-start;
  }
  /* на телефоне имя ответственного не помещается рядом с клиентом — остаётся аватар */
  table.grid.card-grid .resp-name { display: none; }
}

/* Предложение поставить портал на экран телефона — над нижним меню, только на телефоне */
.install-bar { display: none; }
@media (max-width: 900px) {
  .install-bar {
    display: block; position: fixed; left: 8px; right: 8px; z-index: 70;
    bottom: calc(72px + env(safe-area-inset-bottom));
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: 0 10px 30px rgba(27, 36, 48, .18); padding: 14px 16px;
  }
  .install-bar[hidden] { display: none; }
  .install-close {
    position: absolute; top: 6px; right: 8px; border: 0; background: none;
    font-size: 22px; line-height: 1; color: var(--muted); padding: 4px 6px; cursor: pointer;
  }
  .install-text { display: flex; flex-direction: column; gap: 4px; padding-right: 18px; }
  .install-text b { font-size: 15px; }
  .install-text span { font-size: 13px; color: var(--ink-2); }
  .install-text .install-warn { color: var(--warn); }
  .install-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); }
  .install-steps li { margin-bottom: 4px; }
  .install-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
}

/* ---- фильтр списка сделок: состояние сегментом, «только мои» тумблером ----
   Обе строки — одна форма: сегмент и тумблер отправляют её сами, кнопка «Найти»
   остаётся для поиска и работы без JS. */
.filterbar-two { display: block; }
.filterbar-two .filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filterbar-two .filter-row-sub { margin-top: 12px; }
.seg-state-filter { flex: none; }
/* тумблер в строке фильтров: подпись рядом, а не блоком под ним */
.switch-inline { align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.switch-inline .switch-box { margin-top: 0; width: 36px; height: 20px; }
.switch-inline .switch-box::after { width: 14px; height: 14px; top: 3px; left: 3px; }
.switch-inline input:checked + .switch-box::after { transform: translateX(16px); }
.filter-count { font-size: 12px; color: var(--muted); }
.filter-reset { margin-left: auto; font-size: 13px; }
@media (max-width: 720px) {
  .filterbar-two .filter-row { gap: 10px; }
  .filterbar-two .seg-state-filter { flex: 1 1 100%; order: 3; }
  .filterbar-two .field-search { flex: 1 1 auto; }
  .filter-count { flex: 1 1 100%; order: 4; }
  /* соседи по ряду получают order 4, поэтому без своего order ссылка «Сбросить»
     уезжала в начало строки и стояла перед поиском — ставим её последней */
  .filter-reset { margin-left: 0; order: 5; }
}

/* ================================================================== */
/*  Карточка проекта в списке /projects/ — «что в проекте горит».      */
/*  Знак проекта и название, под ними светофор «просрочено · в работе»,*/
/*  затем сама горящая задача со сроком и ответственным, внизу люди и  */
/*  время последнего движения. Всё — существующие элементы портала:    */
/*  .project-mark, .status, .ava; здесь только раскладка карточки.     */
/* ================================================================== */
.pj-card { display: flex; flex-direction: column; gap: 12px; }
.pj-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pj-name {
  font-weight: 600; font-size: 15px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-stat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* горящая задача: красная черта слева, у спокойного проекта — серая */
.pj-hot { display: block; border-left: 2px solid var(--err); padding: 2px 0 2px 10px; }
.pj-hot .tt {
  display: block; font-size: 13px; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-hot .dt { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.pj-quiet { border-left-color: var(--line); }
.pj-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.pj-people { display: flex; align-items: center; }
.pj-people .ava { margin-right: -6px; box-shadow: 0 0 0 2px var(--bg); }
.pj-more { font-size: 12px; color: var(--muted); margin-left: 12px; }

/* ================================================================== */
/*  Карточка проекта: сортировка столбца таблицы и одиночная колонка.  */
/*  Сортировка — ссылка в шапке столбца: выбранный столбец акцентом,   */
/*  стрелка показывает направление. Своих размеров у элемента нет —    */
/*  он живёт внутри шапки table.grid.                                  */
/* ================================================================== */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.th-sort:hover { color: var(--accent); text-decoration: none; }
.th-sort.is-on { color: var(--accent); }
.th-sort .ico { width: 13px; height: 13px; }
.th-sort .ico-up { transform: rotate(180deg); }
/* вкладка «Чат проекта» на телефоне: досье скрыто, переписка во всю ширину */
.entity-one { grid-template-columns: minmax(0, 1fr); }

/* ==================================================================
   Сотрудники: дерево отделов слева, люди справа
   (элементы описаны в docs/ui-map.md — «узел дерева отделов»,
   «строка человека в списке»)
   ================================================================== */
.emp-search { margin-bottom: 16px; }
.emp-two { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }

/* узел дерева отделов */
.dep-tree .dep-node {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; text-decoration: none;
  margin-left: calc(var(--lvl, 0) * 15px);
}
.dep-tree .dep-node:hover { background: var(--box); color: var(--ink); text-decoration: none; }
.dep-tree .dep-node .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.dep-tree .dep-node .nm { flex: 1; min-width: 0; }
.dep-tree .dep-node .cnt {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none;
}
.dep-tree .dep-node.on { background: var(--accent-bg); color: var(--accent-active); font-weight: 500; }
.dep-tree .dep-node.on .ico, .dep-tree .dep-node.on .cnt { color: var(--accent); }
.dep-tree .dep-node.found .cnt { color: var(--accent); font-weight: 600; }
.dep-tree-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* шапка списка людей */
.emp-people-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.emp-people-top h2 { font-size: 20px; font-weight: 400; letter-spacing: -.01em; margin: 0; }
.emp-people-top .sub { color: var(--muted); font-size: 13px; margin-top: 5px; }
.emp-people-top .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.emp-group {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 20px 0 2px; display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap;
}
.emp-group span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }

/* строка человека */
.emp-head {
  display: flex; align-items: center; gap: 14px; padding: 12px 0 8px;
  border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.emp-head-name { flex: 1; min-width: 0; padding-left: 62px; }
.emp-head-cts { width: 210px; flex: none; }
.emp-head-tasks { width: 70px; flex: none; text-align: right; }
.emp-head-live { width: 140px; flex: none; text-align: right; }
.emp-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.emp-row:last-child { border-bottom: 0; }
.emp-row-main {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
  color: var(--ink); text-decoration: none;
}
.emp-row-main:hover { text-decoration: none; }
.emp-row-main:hover .nm { color: var(--accent); }
.emp-row .ava.md { width: 48px; height: 48px; font-size: 16px; font-weight: 500; }
.emp-row-name { min-width: 0; }
.emp-row-name .nm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 500; font-size: 14.5px; transition: color .12s;
}
.emp-row-name .ps { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.emp-row-cts { width: 210px; flex: none; }
.emp-row-cts a {
  display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px;
}
.emp-row-cts a + a { margin-top: 3px; }
.emp-row-cts a:hover { color: var(--accent); }
.emp-row-cts .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.emp-row-tasks {
  width: 70px; flex: none; text-align: right; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.emp-row-live { width: 140px; flex: none; text-align: right; }

/* отметка присутствия — общая для списка и карточки */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: block; flex: none; }
.live.off i { background: var(--field-line); }

@media (max-width: 1100px) {
  .emp-two { grid-template-columns: 250px 1fr; }
  .emp-row-cts { width: 180px; }
}
@media (max-width: 900px) {
  /* на телефоне дерево уезжает над списком и листается вбок */
  .emp-two { grid-template-columns: 1fr; }
  .dep-tree { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dep-tree::-webkit-scrollbar { display: none; }
  .dep-tree .panel-title, .dep-tree-foot { display: none; }
  .dep-tree .dep-node {
    flex: none; margin-left: 0; border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 0 14px; height: var(--h-ctl); white-space: nowrap;
  }
  .dep-tree .dep-node.on { border-color: var(--accent); }
  .emp-head { display: none; }
  .emp-row { flex-wrap: wrap; gap: 8px 14px; padding: 12px 0; }
  .emp-row-main { flex: 1 1 100%; }
  .emp-row-cts { width: auto; flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .emp-row-cts a + a { margin-top: 0; }
  .emp-row-cts a {
    border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 14px;
    height: var(--h-ctl); font-size: 13px;
  }
  .emp-row-tasks, .emp-row-live { width: auto; text-align: left; font-size: 12.5px; }
  .emp-row-tasks::before, .emp-row-live::before {
    content: attr(data-label) ": "; color: var(--muted); font-size: 12px;
  }
}

/* ==================================================================
   Карточка сотрудника: слева человек, справа работа
   ================================================================== */
.emp-card { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.emp-work { display: flex; flex-direction: column; gap: 16px; }
.emp-work > .panel { margin-top: 0; }

.emp-side .emp-name { margin-top: 14px; font-size: 20px; font-weight: 400; }
.emp-side .emp-position { font-size: 14px; }
.emp-line { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.6; }
.emp-line .live { color: var(--ok); }
.emp-side-acts { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.emp-side-acts .btn, .emp-side-acts form { width: 100%; }
.emp-cts { display: flex; flex-direction: column; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.emp-cts a, .emp-cts span {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink);
  padding: 8px 0; min-height: 38px;
}
.emp-cts a:hover { color: var(--accent); text-decoration: none; }
.emp-cts .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.emp-cts a:hover .ico { color: var(--accent); }
.emp-cts em {
  font-style: normal; margin-left: auto; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; flex: none;
}
.emp-side .prop:last-of-type { border-bottom: 0; }
.emp-side-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.emp-side-foot .btn { flex: 1 1 auto; }
/* выход из портала — светлая кнопка, красная только при наведении */
.btn-exit { color: var(--ink-2); }
.btn-exit:hover { border-color: #E9C5C1; background: var(--err-bg); color: var(--err); }
.btn-exit:hover svg.ico { color: var(--err); }
/* четыре плитки в ряд помещаются рядом с колонкой человека */
.emp-tiles { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.emp-tiles .tile { display: block; text-decoration: none; color: var(--ink); }
.emp-tiles .tile:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-hover); }

/* загрузка недели: часы по задачам, столбик на день */
.load { display: flex; align-items: flex-end; gap: 10px; height: 118px; margin: 10px 0 4px; }
.load-bar {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 7px; height: 100%;
}
.load-bar i { width: 100%; border-radius: 6px 6px 0 0; display: block; background: var(--accent-bg); }
.load-bar.now i { background: var(--accent); }
.load-bar.over i { background: var(--err); }
.load-bar em { font-style: normal; font-size: 11px; color: var(--muted); }
.load-legend {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.load-legend span { display: inline-flex; align-items: center; gap: 7px; }
.load-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; background: var(--accent-bg); }
.load-legend i.now { background: var(--accent); }
.load-legend i.over { background: var(--err); }
.load-legend .load-total { margin-left: auto; color: var(--ink-2); }

/* лента «что делал на портале» */
.feed-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.feed-kinds .chip { text-decoration: none; }
.feed-kinds .chip:hover { text-decoration: none; }
.feed-kinds .chip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-active); }
.feed-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.feed-list::-webkit-scrollbar { width: 6px; }
.feed-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.feed-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-ico {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex: none; background: var(--box); color: var(--muted);
}
.feed-ico .ico { width: 15px; height: 15px; }
.feed-ico.feed-comment, .feed-ico.feed-task { background: var(--accent-bg); color: var(--accent); }
.feed-ico.feed-stage, .feed-ico.feed-convert { background: var(--ok-bg); color: var(--ok); }
.feed-ico.feed-email { background: var(--mail-bg); color: var(--mail); }
.feed-ico.feed-call, .feed-ico.feed-meet { background: var(--warn-bg); color: var(--warn); }
.feed-main { min-width: 0; }
.feed-title { font-size: 13.5px; line-height: 1.4; }
.feed-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* полоса-аккордеон: редкие настройки карточки */
.strip-fold { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-plate); }
.strip-fold + .strip-fold { margin-top: 10px; }
.emp-card + .strip-fold { margin-top: 16px; }
.strip-fold > .fold-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer;
  list-style: none; min-height: var(--h-ctl);
}
.strip-fold > .fold-head::-webkit-details-marker { display: none; }
.strip-fold > .fold-head:hover { color: var(--ink); }
.strip-fold .fold-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); flex: none;
}
.strip-fold > .fold-head:hover .fold-name { color: var(--ink-2); }
.strip-fold .fold-chev {
  width: 16px; height: 16px; color: var(--muted); flex: none; margin-left: 0;
  transform: rotate(-90deg); transition: transform .15s;
}
.strip-fold[open] > .fold-head .fold-chev { transform: none; color: var(--accent); }
.strip-fold .fold-body { padding: 0 22px 20px; }

@media (max-width: 1100px) {
  .emp-card { grid-template-columns: 300px 1fr; }
}
@media (max-width: 900px) {
  .emp-card { grid-template-columns: 1fr; }
  .strip-fold > .fold-head { padding: 14px 15px; min-height: 44px; }
  .strip-fold .fold-body { padding: 0 15px 16px; }
  .strip-fold .fold-val { max-width: 100%; }
  .emp-side-acts .btn { height: var(--h-ctl); }
  .load { height: 100px; gap: 7px; }
  .load-legend { gap: 10px 16px; }
  .load-legend .load-total { margin-left: 0; flex-basis: 100%; }
}

/* Чат проекта — тот же блок, что у задачи, только фон ленты другой: по цвету
   сразу видно, что это переписка по проекту, а не по задаче. */
.tchat-project .tchat-feed {
  background-color: #EEF6F0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(30, 127, 79, .18) 1px, transparent 0),
    radial-gradient(circle at 13px 13px, rgba(30, 127, 79, .10) 1px, transparent 0);
}


/* ------------------------------------------------- перенос лида в сделку
   Полоса шагов мастера: где мы сейчас и сколько осталось. Высота кружка —
   из общего токена элементов управления, своих чисел здесь нет. */
.wizard {
  display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0 0 14px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.wizard li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.wizard li + li::before {
  content: ""; width: 22px; height: 2px; background: var(--line); margin-right: 8px;
}
.wizard-num {
  width: var(--h-ctl-sm); height: var(--h-ctl-sm); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 13px; font-weight: 600;
}
.wizard-name { font-size: 13px; }
.wizard li.on { color: var(--ink); }
.wizard li.on .wizard-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.wizard li.done .wizard-num { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.wizard-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==================================================================
   Воронка списка лидов — ступени вместо строки среза.
   Слева ступени в работе, справа за чертой закрытые («перенесён в
   сделку», «некачественный»). Выбранная ступень залита бледным цветом
   самой ступени, снизу полоса её цветом — воронка читается с листа.
   Она же задаёт состояние списка: отдельного сегмента
   «В работе · Все · Закрытые», как у сделок, у лидов нет.
   ================================================================== */
.funnel-wrap { display: flex; align-items: stretch; gap: 18px; margin-bottom: 16px; }
/* ступеней столько, сколько заведено в админке: колонки раздаёт grid-auto-columns,
   поэтому ряд не надо переверстывать при новой стадии */
.funnel-work {
  flex: 1 1 auto; min-width: 0; display: grid; gap: 8px;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.funnel-closed {
  flex: 0 0 auto; display: grid; gap: 8px; padding-left: 18px;
  border-left: 1px solid var(--line);
  grid-auto-flow: column; grid-auto-columns: minmax(134px, 162px);
}
.funnel-wrap .f {
  display: block; padding: 11px 12px 0; border-radius: var(--r-small);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); overflow: hidden;
  transition: background .15s, border-color .15s;
}
.funnel-wrap a.f:hover { text-decoration: none; border-color: var(--field-line); background: var(--box); }
.funnel-closed .f { background: var(--box); }
.funnel-closed .f .n { color: var(--ink-2); }
.funnel-wrap .n {
  display: block; font-size: 21px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.funnel-wrap .t {
  display: block; font-size: 12px; color: var(--muted); margin: 2px 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.funnel-wrap .bar { display: block; height: 3px; background: var(--field-line); margin: 0 -12px; }
.funnel-closed .f .bar { background: color-mix(in srgb, var(--stage, var(--muted)) 45%, #fff); }
.funnel-wrap .f.on {
  background: color-mix(in srgb, var(--stage, var(--accent)) 10%, #fff);
  border-color: color-mix(in srgb, var(--stage, var(--accent)) 40%, #fff);
}
.funnel-wrap a.f.on:hover { background: color-mix(in srgb, var(--stage, var(--accent)) 16%, #fff); }
.funnel-wrap .f.on .n { color: color-mix(in srgb, var(--stage, var(--accent)) 82%, #1B2430); }
.funnel-wrap .f.on .t { color: color-mix(in srgb, var(--stage, var(--accent)) 70%, #1B2430); }
.funnel-wrap .f.on .bar { background: var(--stage, var(--accent)); }

/* телефон и планшет: воронка листается пальцем, ступень фиксированной ширины —
   тот же приём, что у полосы стадий в карточке (.stage-line) */
@media (max-width: 900px) {
  .funnel-wrap {
    display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad-x, 15px)) 12px;
    padding: 0 var(--pad-x, 15px) 4px;
  }
  .funnel-wrap::-webkit-scrollbar { display: none; }
  .funnel-work, .funnel-closed {
    display: flex; gap: 8px; flex: 0 0 auto; padding-left: 0; border-left: 0;
  }
  .funnel-closed { margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--line); }
  .funnel-wrap .f { flex: 0 0 104px; }
}

/* ==================================================================
   «Потянуть вниз — обновить» (телефон и приложение с экрана «Домой»).
   У приложения, поставленного на экран, системного обновления страницы
   нет — адресной строки не видно. Значок едет за пальцем от верхнего
   края содержимого; после порога — крутится, пока страница
   перечитывается. Показывается только во время жеста.
   ================================================================== */
.pull-ind {
  position: fixed; top: 105px; left: 50%; z-index: 58;
  width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  box-shadow: 0 4px 14px rgba(27, 36, 48, .16);
  transform: translateY(-58px); opacity: 0; pointer-events: none; will-change: transform;
}
.pull-ind .ico { width: 19px; height: 19px; }
/* протянули достаточно: значок окрасился — отпускай */
.pull-ind.is-ready { color: var(--accent); border-color: var(--accent); }
.pull-ind.is-busy { color: var(--accent); border-color: var(--accent); }
.pull-ind.is-busy .ico { animation: pull-spin .8s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }

/* Второй ряд отбора на телефоне: выборы не сжимаем, а переносим.
   Общее мобильное правило даёт им `flex: 0 1 auto; min-width: 0`, и там, где
   в ряду стоят сразу два выбора и тумблер (список лидов), «Все источники»
   съёживалось до нечитаемой полоски и в него было не попасть пальцем.
   Ширину держим по содержимому, лишнее уходит на следующую строку. */
@media (max-width: 900px) {
  .filterbar-two .filter-row-sub .pick.as-field,
  .filterbar-two .filter-row-sub select,
  .filterbar-two .filter-row-sub .switch { flex: 0 0 auto; max-width: 100%; }
  .filterbar-two .filter-row-sub .pick.as-field .pick-toggle { min-height: var(--h-ctl); }
}

/* Меню выбора на телефоне: страница за ним стоит.
   Список внутри меню доезжал до конца и дальше тянул за собой документ —
   фон уезжал, нижняя полоса навигации ползла вверх. Прокрутку замыкаем на
   самом списке (`overscroll-behavior: contain`), а пока меню открыто
   (`body.pick-open` ставит pick.js) документ не скроллим вовсе. */
@media (max-width: 900px) {
  /* прокручивает страницу html, поэтому запираем оба: класс ставится на body */
  body.pick-open { overflow: hidden; overscroll-behavior: none; }
  html:has(> body.pick-open) { overflow: hidden; overscroll-behavior: none; }
  .pick-menu, .pick-list, .pickm-menu, .slice-menu {
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
}

/* ==================================================================
   Строка отбора списка лидов.
   На компьютере всё в одну строку: сортировки (источник, ответственный),
   резиновый поиск, тумблер, «Найти», а счётчик со «Сбросить» — рядом
   справа. На телефоне те же поля становятся полосой с прокруткой вбок
   (как вкладки и воронка ступеней): ряд не разъезжается на три строки
   и не съедает пол-экрана. Счётчик в полосу не берём — он уехал бы за
   край, поэтому стоит под ней. Порядок задают `order`: общие мобильные
   правила строки фильтров расставляют элементы по-своему.
   ================================================================== */
.filterbar-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filterbar-strip .filter-note {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
}
.filterbar .filter-row-one { --row-gap: 16px; gap: var(--row-gap); flex: 1 1 auto; min-width: 0; }
/* шаг между элементами один, поэтому и ширина у каждого — по содержимому:
   общий для фильтров `min-width: 178px` растягивал пунктир выбора далеко за
   слово, и промежутки читались разными, хотя gap везде одинаковый */
.filterbar .filter-row-one .pick.as-field { min-width: 0; }
/* поиск резиновый: забирает всё свободное место строки */
.filterbar .filter-row-one .field-search { flex: 1 1 200px; min-width: 0; }
.filterbar .filter-row-one .filter-reset { margin-left: 0; }

@media (max-width: 900px) {
  .filterbar-strip { display: block; }
  /* полоса листается вбок и упирается в края панели, а не в её отступы */
  .filterbar .filter-row-one {
    --row-gap: 12px; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad-x, 15px)); padding: 0 var(--pad-x, 15px) 4px;
  }
  .filterbar .filter-row-one::-webkit-scrollbar { display: none; }
  .filterbar .filter-row-one > * { flex: 0 0 auto; }
  .filterbar .filter-row-one .pick.as-field,
  .filterbar .filter-row-one select {
    order: 1; flex: 0 0 auto; width: auto; max-width: none; min-width: 0;
  }
  .filterbar .filter-row-one .pick.as-field .pick-toggle { min-height: var(--h-ctl); }
  /* в полосе поле не тянется — тянуться некуда, поэтому ширина фиксированная */
  .filterbar .filter-row-one .field-search { order: 2; flex: 0 0 220px; }
  .filterbar .filter-row-one .switch { order: 3; }
  .filterbar .filter-row-one .btn-primary { order: 4; }
  .filterbar-strip .filter-note { margin-top: 10px; }
}


/* Проверка внешнего подключения: ответ чужого API дословно, чтобы его можно
   было показать поддержке сервиса — своими словами портала не обойдёшься. */
.probe { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
.probe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.probe .prop:last-child { border-bottom: 0; }
.probe code { word-break: break-all; }

/* ==================================================================
   Поиск отдельным окном (телефон).
   В строке отбора поле узкое и стоит в полосе, которая листается вбок:
   при наборе оно разъезжалось и уходило за край. Нажатие открывает окно
   посреди экрана, нажатие мимо возвращает набранное в поле отбора.
   Разметку окна рисует `searchsheet.js`.
   ================================================================== */
.ssheet-back {
  position: fixed; inset: 0; z-index: 130; padding: 20px;
  background: rgba(27, 36, 48, .45);
  display: flex; align-items: center; justify-content: center;
}
.ssheet {
  width: min(92vw, 420px); background: var(--bg); border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 44px rgba(27, 36, 48, .28);
}
.ssheet .field-search { position: relative; display: flex; align-items: center; }
.ssheet .field-search .ico {
  position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted);
  pointer-events: none;
}
.ssheet .field-search input { width: 100%; height: 46px; padding-left: 40px; font-size: 16px; }
.ssheet-hint { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
/* поле в строке отбора на телефоне — кнопка, открывающая окно, а не поле ввода */
.filterbar .field-search input[readonly] { cursor: pointer; background: var(--bg); }
@media (min-width: 901px) { .ssheet-back { display: none; } }

/* Ряд действий над лентой, продублированный наверху карточки.
   Нужен только на телефоне: там карточка в одну колонку, лента и её ряд уходят
   под все блоки с данными, и до «Комментария» надо было прокрутить карточку
   целиком. На компьютере лента и так справа наверху — ряд там лишний. */
.compose-tabs-top { display: none; }
@media (max-width: 900px) {
  .compose-tabs-top { display: flex; margin: 0 0 14px; }
}

/* Низ форм в карточке на телефоне: главное действие во всю ширину и под палец.
   Кнопка стояла узкой пилюлей у левого края и высотой 34 px — целиться неудобно,
   а правее оставалась пустота. Правило одно на все формы добавления в карточках
   лида, сделки, компании и контакта: комментарий, письмо, задача, напоминание,
   встреча. Подсказка и ссылка «полная форма» уходят под кнопку. */
@media (max-width: 720px) {
  .compose-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .compose-foot .btn {
    width: 100%; height: var(--h-ctl); font-size: 15px; padding: 0 18px;
  }
  .compose-foot .small, .compose-foot .muted { text-align: center; }
  /* правка блока на месте: «Сохранить» и «Отмена» делят ширину пополам */
  .descr-foot { flex-wrap: wrap; gap: 8px; }
  .descr-foot .btn { flex: 1 1 calc(50% - 4px); height: var(--h-ctl); font-size: 15px; }
  .descr-foot .small { flex: 1 1 100%; text-align: center; }
}

/* Плавающее управление панелью — только на открытой записи, не на форме.
   У формы свои две кнопки, «Сохранить» и «Отмена», они же её и закрывают;
   столбик справа спорил бы с ними за тот же угол. Форму отличаем по её
   собственному подвалу `.form-actions` — в карточках лида, сделки, компании,
   контакта и задачи его нет. */
@media (max-width: 900px) {
  .sl-panel:has(.sl-body .form-actions) .sl-tools { display: none; }
  /* панель во весь экран — значит и кнопки формы во всю ширину, поровну */
  .sl-panel .form-actions .btn { flex: 1; justify-content: center; }
}

/* Список лидов: стадия, компания и контакт — одной ширины.
   Раньше колонки подстраивались под содержимое (78 · 104 · 209 px) и ряд читался
   рвано. Ширину не берём по самой широкой из трёх: на 209 px каждая от колонки
   «Лид» осталось бы около 50 px и название переносилось бы по слогам. 150 px —
   это столько же, сколько занимает имя с телефоном, и «Лиду» остаётся ~200 px.
   На телефоне строка становится карточкой, и ширины тут уже не работают. */
.grid-leads .c-even { width: 150px; }