/* MiBOSS PWA — оформление повторяет десктопную версию (miboss_ui.html):
   те же цвета, та же типографика, строки подкрашены цветом пина, статусы и
   приоритеты теми же значками.

   Разница только в раскладке. На широком экране — таблица один в один как на
   компьютере, вместе с матрицей Эйзенхауэра. На телефоне те же строки
   складываются в столбик, а панель навигации уезжает вниз, под большой палец. */

/* ═══════════════════════════════════════════════════════════════════════════
   ДИЗАЙН-ТОКЕНЫ MiBOSS — единый визуальный стандарт (B2B SaaS/ERP).
   Значения в :root — светлая тема, в html[data-theme="dark"] — тёмная.
   Ниже — «мосты»: короткие исторические имена (--tx, --line…) ссылаются на
   токены, поэтому весь существующий CSS работает без переписывания, а менять
   палитру теперь достаточно в одном месте.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* поверхности */
  --color-page-bg:#F5F6F8; --color-surface:#FFFFFF; --color-surface-subtle:#FAFAFB;
  /* акцент */
  --color-primary:#7C3AED; --color-primary-dark:#6D28D9;
  --color-primary-light:#A855F7; --color-primary-soft:#F3E8FF;
  /* текст */
  --color-text-primary:#202124; --color-text-secondary:#626875;
  --color-text-muted:#8D94A1; --color-text-inverse:#FFFFFF;
  /* линии */
  --color-border:#DDE1E7; --color-divider:#E8EBEF; --color-input-border:#D9DEE6;
  /* тени и градиент */
  --shadow-card:0 1px 3px rgba(24,31,42,.06);
  --shadow-primary:0 7px 16px rgba(124,58,237,.28);
  --gradient-primary:linear-gradient(135deg,#B026E8 0%,#6F3AF2 100%);
  --gradient-primary-hover:linear-gradient(135deg,#9d1fd0 0%,#5e2fe0 100%);
  /* скругления и высоты контролов */
  --radius-card:14px; --radius-control:10px; --radius-chip:9px;
  --control-h:40px; --control-h-sm:38px;

  /* ── мосты к историческим именам ── */
  --bg:var(--color-page-bg); --panel:var(--color-surface); --hov:var(--color-surface-subtle);
  --inp:var(--color-surface); --chip:var(--color-surface);
  --tx:var(--color-text-primary); --tx2:var(--color-text-secondary); --mut:var(--color-text-muted);
  --line:var(--color-border); --line2:var(--color-divider); --chipb:var(--color-input-border);
  --shadow:var(--shadow-card); --glow:var(--shadow-primary);
  --grad:var(--gradient-primary); --gradh:var(--gradient-primary-hover);
  /* Ярко-зелёный градиент для чата: иконка, свои пузыри, кнопка отправки. */
  --grad-green:linear-gradient(135deg,#34d058 0%,#1fae49 50%,#159a3e 100%);
  --grad-green-h:linear-gradient(135deg,#2bc44e 0%,#189a40 50%,#128736 100%);
  /* Лёгкий ненавязчивый фон полотна чата: бледная подложка + едва заметные точки. */
  --chat-bg:#f4f5fa;
  --chat-dots:radial-gradient(rgba(124,58,237,.05) 1px, transparent 1.5px);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* подсветка строк по пину — как в десктопной версии */
  --pin-lilac:#f1e9fd; --pin-green:#e7f7e9; --pin-beige:#faf3e2; --pin-blue:#e4f0fc;
  --pin-lilac-h:#e9dffc; --pin-green-h:#dcf2df; --pin-beige-h:#f6ecd2; --pin-blue-h:#d8e9fa;
  --done-bg:rgba(34,197,94,.10);
}
html[data-theme="dark"] {
  --color-page-bg:#131419; --color-surface:#1b1d24; --color-surface-subtle:#212430;
  --color-primary:#a855f7; --color-primary-dark:#8b5cf6;
  --color-primary-light:#c084fc; --color-primary-soft:#2a2438;
  --color-text-primary:#e8e9ee; --color-text-secondary:#a7adba;
  --color-text-muted:#8f95a3; --color-text-inverse:#ffffff;
  --color-border:#2b2e38; --color-divider:#23252d; --color-input-border:#343846;
  --shadow-card:none; --shadow-primary:0 3px 18px rgba(192,38,211,.55);
  --gradient-primary:linear-gradient(135deg,#d926e8 0%,#8b5cf6 100%);
  --gradient-primary-hover:linear-gradient(135deg,#c026d3 0%,#7c3aed 100%);
  --chat-bg:#14131c; --chat-dots:radial-gradient(rgba(168,85,247,.09) 1px, transparent 1.5px);

  --pin-lilac:#2a2438; --pin-green:#1e2f24; --pin-beige:#2e2a20; --pin-blue:#1e2a3a;
  --pin-lilac-h:#332a45; --pin-green-h:#25392c; --pin-beige-h:#383222; --pin-blue-h:#243247;
  --done-bg:rgba(34,197,94,.13);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  margin:0; background:var(--bg); color:var(--tx); font-size:13px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:background .18s, color .18s;
  overscroll-behavior-y:none; -webkit-font-smoothing:antialiased;
}

button { font:inherit; cursor:pointer; border-radius:var(--radius-control); border:1px solid var(--chipb);
         background:var(--chip); color:var(--tx); padding:7px 12px; transition:.13s; }
button:hover { border-color:var(--mut); }
button:disabled { opacity:.5; cursor:not-allowed; }
.primary { background:var(--grad); border:none; color:#fff; font-weight:600; box-shadow:var(--glow);
           text-shadow:0 1px 2px rgba(0,0,0,.22); letter-spacing:.01em; }
.primary:hover { background:var(--gradh); transform:translateY(-1px); }
.primary:active { transform:translateY(0); }
.icon { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.icon svg { width:18px; height:18px; display:block; }

/* Ведущая градиентная иконка в строках-«item» (инструкция, ключи и т.п.) —
   единый стиль с иконками шапки: заливка общим градиентом url(#miIcon). */
.mi-lead { flex:none; display:inline-flex; align-items:center; justify-content:center;
           width:38px; height:38px; border-radius:11px; background:var(--chip); }
.mi-lead .mi-gico { width:22px; height:22px; display:block; }
.mi-lead-sm { width:32px; height:32px; border-radius:9px; }
.mi-lead-sm .mi-gico { width:18px; height:18px; }
.mi-gico { fill:url(#miIcon); }

/* Кнопка действия в фирменном сиреневом градиенте — та же форма и размер, что у
   переключателя «Личный/Команда»: высота 29px, скругление 8px, отступы 0 15px. */
.chip-grad { display:inline-flex; align-items:center; justify-content:center; flex:none;
             height:29px; padding:0 15px; border:0; border-radius:8px;
             font-weight:600; font-size:13.5px; line-height:1;
             color:#fff; background:var(--grad); box-shadow:var(--glow); cursor:pointer;
             text-shadow:0 1px 2px rgba(0,0,0,.22); transition:transform .12s ease,box-shadow .12s ease; }
.chip-grad:hover { background:var(--gradh); transform:translateY(-1px); box-shadow:0 6px 16px rgba(124,58,237,.42); }
.chip-grad:active { transform:translateY(0) scale(.97); }
/* Цветной градиент на залитых иконках шапки (розовый → сиреневый → синий → зелёный). */
.top-row .icon svg, #fBtn .ic-lead { fill: url(#miIcon); stroke: none;
  /* лёгкая тень для «объёма», как у 3D-иконок из референса */
  filter: drop-shadow(0 1px 1.2px rgba(76, 29, 149, .22)); }
/* Иконка чата — зелёная с градиентом (перебивает общий #miIcon). */
#dmBtn svg { fill: url(#miGreen);
  filter: drop-shadow(0 1px 1.2px rgba(31, 174, 73, .28)); }
.lang-btn { width:auto; min-width:40px; padding:0 8px; font-weight:500; font-size:12.5px; letter-spacing:.02em; }
.grow { flex:1; }
a { color:var(--color-primary); text-decoration:none; }

/* number обязателен в списке: без него поле берёт браузерную ширину со
   стрелками и вылезает из своей колонки. */
input[type=text], input[type=date], input[type=search], input[type=password],
input[type=number], select, textarea {
  font:inherit; padding:8px 11px; border:1px solid var(--color-input-border); border-radius:var(--radius-control);
  background:var(--inp); color:var(--tx); width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:2px solid var(--color-primary-light); outline-offset:-1px; border-color:transparent;
}
input[type=checkbox] { width:18px; height:18px; accent-color:var(--color-primary); cursor:pointer; margin:0; }
textarea { min-height:120px; resize:vertical; line-height:1.5; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); }

/* ── шапка ─────────────────────────────────────────────────────────────── */

.top {
  position:sticky; top:0; z-index:20;
  padding:calc(var(--safe-t) + 12px) 16px 10px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.wrap { max-width:1480px; margin:0 auto; }
.top-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.logo { font-size:18px; margin:0 4px 0 0; letter-spacing:-.02em; font-weight:700; white-space:nowrap; }
.logo span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Единый тулбар: все прямые кнопки шапки одной высоты и стиля.
   flex:none — чтобы в тесной шапке кнопки не сжимались ниже своего размера. */
.top-row > button { flex:none; height:36px; border-radius:10px; box-sizing:border-box;
                    display:inline-flex; align-items:center; justify-content:center; }
.top-row .tabs, .top-row .status { flex:none; }
#fBtn { gap:7px; padding:0 14px; }
#fBtn .ic-lead { width:17px; height:17px; flex:none; }
#newBtn { padding:0 16px; }

.tabs { display:inline-flex; align-items:center; gap:3px; height:36px; box-sizing:border-box;
        background:var(--line2); padding:3px; border-radius:10px; border:1px solid var(--line); }
.tabs button { border:none; background:none; padding:0 13px; height:100%; border-radius:8px;
               color:var(--mut); display:inline-flex; align-items:center; }
.tabs button.on { background:var(--grad); color:#fff; font-weight:600; box-shadow:var(--glow); }

/* Переключатель режимов: Личный ↔ Команда — сегмент с акцентом на активном. */
.mode-switch { flex:none; display:inline-flex; align-items:center; gap:3px; height:36px;
               box-sizing:border-box; background:var(--line2); padding:3px; border-radius:10px;
               border:1px solid var(--line); }
.mode-switch button { flex:none; border:none; background:none; height:100%; padding:0 15px;
               border-radius:8px; color:var(--mut); font-weight:600; font-size:13.5px;
               cursor:pointer; display:inline-flex; align-items:center; white-space:nowrap; }
.mode-switch button.on { background:var(--grad); color:#fff; box-shadow:var(--glow); }
.mode-switch button svg { width:16px; height:16px; margin-right:6px; flex:none; }

/* Индикатор связи и очереди — главное, что отличает офлайн-версию. */
.status { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mut); white-space:nowrap; }
.dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex:none; }
.status[data-state="offline"] .dot { background:var(--mut); }
.status[data-state="pending"] .dot { background:#f59e0b; animation:pulse 1.2s ease-in-out infinite; }
.status[data-state="syncing"] .dot { background:#a855f7; animation:pulse .8s ease-in-out infinite; }
.status[data-state="error"]   .dot { background:#ef4444; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion:reduce) { .dot { animation:none !important; } }

/* Поиск вынесен из панели фильтров: им пользуются постоянно, прятать его за ☰ незачем. */
#searchRow { margin-top:10px; }

/* ── панель фильтров ───────────────────────────────────────────────────── */

.filters { padding:10px 12px; margin-top:10px; display:none; }
.filters.on { display:block; }
.frow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:5px 0; }
.frow > b { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
            width:74px; flex:none; font-weight:700; }
.chip { border:1px solid var(--chipb); background:var(--chip); color:var(--tx); border-radius:6px;
        padding:3px 9px; font-size:12px; cursor:pointer; user-select:none; }
.chip.on { background:var(--grad); color:#fff; border-color:transparent; font-weight:600; }
.lchip { border-radius:4px; padding:2px 7px; font-size:11px; font-weight:600; letter-spacing:.01em;
         display:inline-block; line-height:1.5; }
.lchip.sel { cursor:pointer; user-select:none; }
.lchip.off { opacity:.35; }

/* ── раскладка ─────────────────────────────────────────────────────────── */

main { padding:12px 16px calc(var(--safe-b) + 92px); }
.cols { display:flex; gap:14px; align-items:flex-start; max-width:1480px; margin:0 auto; }
.main { flex:1; min-width:0; }

/* ── список задач ──────────────────────────────────────────────────────── */

/* Скругление панели держим на контейнере строк, а не на самой .list —
   иначе overflow:hidden ломал бы липкую строку-заголовок (position:sticky). */
.list { border-radius:var(--radius-card); }
.list > #rows, .list > #brd-list { overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); }

.head, .row {
  display:grid;
  grid-template-columns: 34px 54px minmax(0,1fr) 168px 108px 100px 96px 110px;
  align-items:start;
}
.head {
  border-bottom:1px solid var(--line);
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); font-weight:700;
}
.head > div { padding:8px 10px; }
.head .sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.head .sortable:hover { color:var(--tx); }
.head .arr { color:#a855f7; font-size:10px; }

.row { border-bottom:1px solid var(--line2); }
.row:last-child { border-bottom:none; }
.row > div { padding:8px 10px; }
.row:hover { background:var(--hov); }

/* Цвет пина заливает строку целиком — это главный визуальный якорь списка. */
.row.pin-lilac { background:var(--pin-lilac); } .row.pin-lilac:hover { background:var(--pin-lilac-h); }
.row.pin-green { background:var(--pin-green); } .row.pin-green:hover { background:var(--pin-green-h); }
.row.pin-beige { background:var(--pin-beige); } .row.pin-beige:hover { background:var(--pin-beige-h); }
.row.pin-blue  { background:var(--pin-blue);  } .row.pin-blue:hover  { background:var(--pin-blue-h);  }

.row.st-done { background:var(--done-bg); }
.row.st-done .ttl { text-decoration:line-through; color:var(--mut); }
.row.st-cancelled { opacity:.55; }
.row.st-cancelled .ttl { text-decoration:line-through; }
.row.st-in-progress > div:first-child { box-shadow:inset 3px 0 0 #a855f7; }
.row.sel { background:rgba(124,58,237,.09); }

.tid { color:var(--mut); font-variant-numeric:tabular-nums; font-size:12px; }
.pinmark { margin-right:3px; }
.ttl { font-weight:600; cursor:pointer; line-height:1.35; overflow-wrap:anywhere; }
.ttl:hover { color:#a855f7; }
.next { color:var(--mut); font-size:11.5px; margin-top:2px; font-weight:400; }
.labs { display:flex; gap:4px; flex-wrap:wrap; }
.nowrap { white-space:nowrap; font-variant-numeric:tabular-nums; }
.overdue { color:#ef4444; font-weight:700; }
.today { color:#f59e0b; font-weight:700; }

/* Точка статуса/приоритета: смысловой цвет вместо эмодзи. */
.pdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;
        flex:none; vertical-align:0; }
.pdot.pr-fire { background:#ea580c; } .pdot.pr-high { background:#dc2626; }
/* «Горит» — яркая иконка-пламя вместо точки; лёгкое свечение для акцента. */
.pr-fire { margin-right:5px; font-size:14px; line-height:1; vertical-align:-1px;
           filter:drop-shadow(0 0 3px rgba(234,88,12,.55)); }
.pdot.pr-med  { background:#f59e0b; } .pdot.pr-low  { background:#16a34a; }
.pdot.st-new { background:#2563eb; } .pdot.st-in-progress { background:#7c3aed; }
.pdot.st-waiting { background:#f59e0b; } .pdot.st-blocked { background:#dc2626; }
.pdot.st-done { background:#16a34a; } .pdot.st-cancelled { background:#8b909a; }
.acts { display:flex; gap:4px; justify-content:flex-end; }
.acts button { padding:3px 7px; font-size:12px; }
.ok:hover { border-color:#22c55e; color:#22c55e; }
.no:hover { border-color:#ef4444; color:#ef4444; }

.empty { padding:36px; text-align:center; color:var(--mut); }
.empty b { display:block; font-size:15px; color:var(--tx); margin-bottom:6px; }

/* ── панель массовых действий ──────────────────────────────────────────── */

.bar {
  position:sticky; bottom:calc(var(--safe-b) + 8px); z-index:5; margin-top:10px; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 -4px 18px rgba(0,0,0,.10);
  display:none; align-items:center; gap:8px; flex-wrap:wrap;
}
.bar.on { display:flex; }
.bar b { font-size:12.5px; }
.bar .sep { width:1px; height:22px; background:var(--line); margin:0 2px; }
.bar select, .bar input[type=date] { width:auto; padding:5px 8px; font-size:12.5px; }
.pinbtn { width:24px; height:24px; border-radius:6px; border:1px solid var(--chipb); padding:0; }
.pinbtn:hover { transform:translateY(-1px); border-color:var(--mut); }

/* ── матрица Эйзенхауэра ───────────────────────────────────────────────── */

/* Отступ липкой панели равен реальной высоте шапки: если поставить больше,
   sticky опустит её ниже верхнего края таблицы, если меньше — она уедет под
   шапку при прокрутке. Высоту подставляет JS, она меняется вместе с фильтром. */
.mx { width:268px; flex:none; position:sticky; top:calc(var(--top-h, 55px) + 12px); }
.mx .panel { padding:12px; }
.mx h3 { margin:0 0 2px; font-size:12.5px; letter-spacing:.01em; }
.mx .sub { color:var(--mut); font-size:10.5px; margin-bottom:10px; }
.mxgrid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.q { border-radius:9px; padding:9px 9px 10px; border:1px solid transparent; cursor:pointer;
     transition:.13s; position:relative; text-align:left; }
.q:hover { transform:translateY(-1px); filter:brightness(.97); }
.q .num { position:absolute; right:7px; top:4px; font-size:17px; font-weight:800; opacity:.28; }
.q b { display:block; font-size:11px; margin:2px 0 3px; line-height:1.25; }
.q .act { font-size:11px; font-weight:700; }
.q .txt { font-size:10px; line-height:1.35; opacity:.78; margin-top:3px; }
.q1 { background:#f1e9fd; color:#4c1d95; border-color:#dcc9f7; }
.q2 { background:#e7f7e9; color:#14532d; border-color:#c3ecc8; }
.q3 { background:#faf3e2; color:#713f12; border-color:#f0e2c0; }
.q4 { background:#e4f0fc; color:#1e3a5f; border-color:#c2ddf7; }
html[data-theme="dark"] .q1 { background:#2a2438; color:#d6c2fb; border-color:#3d3357; }
html[data-theme="dark"] .q2 { background:#1e2f24; color:#b6e8c2; border-color:#2c4636; }
html[data-theme="dark"] .q3 { background:#2e2a20; color:#e8d9ac; border-color:#443d2c; }
html[data-theme="dark"] .q4 { background:#1e2a3a; color:#bcd8f5; border-color:#2d3f57; }
.mx .foot2, .box .foot2 { font-size:10px; color:var(--mut); margin-top:9px; line-height:1.4; }
.foot2 button { padding:2px 7px; font-size:10px; }
.box .sub { color:var(--mut); font-size:11px; margin-bottom:10px; }

/* ── календарь на день ─────────────────────────────────────────────────── */

/* Панель построена как таблица задач: строка-шапка с линией, под ней ряды
   с тонкими разделителями. Поэтому у самой панели отступов нет — их задают
   ряды, ровно как в списке слева. */
#daySide { padding:0; overflow:hidden; }

.day-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  /* высота как у шапки таблицы слева, чтобы разделительные линии совпали */
  min-height:36px; padding:6px 10px; border-bottom:1px solid var(--line);
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut); font-weight:700;
}
.day-head span { text-transform:none; letter-spacing:0; white-space:nowrap; font-weight:600; }

.ev { display:flex; gap:9px; align-items:flex-start; padding:8px 10px;
      border-bottom:1px solid var(--line2); }
.ev:last-child { border-bottom:none; }
/* Событие на весь день подсвечено так же, как приколотая задача в таблице. */
.ev.all { background:var(--pin-lilac); }
.ev-t { font-size:11px; font-weight:700; color:var(--mut); white-space:nowrap;
        font-variant-numeric:tabular-nums; min-width:70px; padding-top:1px; }
.ev-b { min-width:0; flex:1; }
.ev .x { padding:2px 7px; font-size:11px; align-self:center; }
.ev-b b { display:block; font-size:12.5px; font-weight:600; line-height:1.32; overflow-wrap:anywhere; }
.ev-b small { display:block; color:var(--mut); font-size:11px; margin-top:1px; overflow-wrap:anywhere; }

.day-note { padding:10px; }
.day-foot { padding:7px 10px; border-top:1px solid var(--line); font-size:10px; color:var(--mut); }
.day-foot button { padding:2px 7px; font-size:10px; }

/* В модальном окне на телефоне у .box уже есть свои отступы. */
.box .day-head { padding-left:0; padding-right:0; }
.box .ev { padding-left:0; padding-right:0; }
.box .ev.all { padding-left:8px; padding-right:8px; border-radius:6px; }
.box .day-note, .box .day-foot { padding-left:0; padding-right:0; }

/* Кнопка «план на день» нужна там, где боковая панель не помещается. */
#dayBtn, #viewsBtn { display:none; }
@media (max-width:1150px) { #dayBtn, #viewsBtn { display:inline-block; } }

/* ── модальное окно ────────────────────────────────────────────────────── */

.modal {
  position:fixed; inset:0; background:rgba(10,11,15,.55); z-index:40;
  display:none; align-items:flex-start; justify-content:center; padding:30px 14px; overflow:auto;
  backdrop-filter:blur(2px);
}
.modal.on { display:flex; }
.box {
  background:var(--panel); border:1px solid var(--line); border-radius:12px; width:100%;
  max-width:620px; padding:18px 20px; box-shadow:0 18px 44px rgba(0,0,0,.32);
}
.box h2 { margin:0 0 13px; font-size:15px; }
.fld { margin-bottom:10px; }
.fld > label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
               color:var(--mut); margin-bottom:4px; font-weight:700; }
.two { display:flex; gap:9px; }
.two > div { flex:1; min-width:0; }

/* Перенос личной задачи в группу — отдельным блоком под деталями. */
.move-team { border-top:1px solid var(--line); padding-top:13px; margin-top:6px; }
.move-team .two { align-items:center; }
.move-team #fMoveBoard { flex:1; min-width:0; }
.move-team #fMoveBtn { flex:none; padding:8px 16px; }
.newlab { display:flex; gap:5px; margin-top:6px; }
.foot { display:flex; gap:7px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.hint { color:var(--mut); font-size:11px; margin-top:4px; line-height:1.45; }
.note { font-size:12.5px; padding:9px 11px; border-radius:8px; background:var(--line2); color:var(--mut); }
.note.bad { background:#fde8e8; color:#9b1c1c; }
.note.good { background:#e6f4ea; color:#137333; }
html[data-theme="dark"] .note.bad { background:#3b1418; color:#fca5a5; }
html[data-theme="dark"] .note.good { background:#14301f; color:#86efac; }

/* ── профиль ───────────────────────────────────────────────────────────── */

.block { padding:15px; margin-bottom:12px; }
.block h3 { margin:0 0 12px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:700; }
.who { display:flex; align-items:center; gap:14px; }
.ava { width:56px; height:56px; border-radius:50%; background:var(--grad);
       display:grid; place-items:center; font-size:28px; flex:none; box-shadow:var(--glow); }
.who .nm { font-size:17px; font-weight:700; }
.who .lg { color:var(--mut); font-size:12px; }
.item { display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--line2); }
.item:first-of-type { border-top:none; }
.item .t { flex:1; min-width:0; }
.item .t b { display:block; font-weight:600; }
.item .t small { color:var(--mut); font-size:11.5px; }
.item .x { color:#ef4444; font-size:12px; }
.profile { max-width:620px; margin:0 auto; }

/* ── тарифы ────────────────────────────────────────────────────────────── */

.plans { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); align-items:start; }
/* На широком экране расширяем окно тарифов, чтобы все карточки (включая
   Corporate) помещались в один ряд. На телефоне остаётся нижний лист во всю ширину. */
@media (min-width:821px) { .box:has(.plans) { max-width:940px; } }
.plancard { border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--panel); }
.plancard.on { border-color:#a855f7; box-shadow:0 0 0 1px #a855f7 inset; }
.planhead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.planhead b { font-size:14px; }
.planhead span { font-size:11.5px; color:var(--mut); white-space:nowrap; }
.plansub { font-size:11px; color:var(--mut); margin:4px 0 9px; line-height:1.35; }
.planlist { font-size:11.5px; line-height:1.7; }
.planlist b { font-weight:600; }
.plannow { margin-top:9px; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
           font-weight:700; color:#a855f7; }

/* ── админская страница тарифов ────────────────────────────────────────── */

.admin { max-width:1100px; }
/* На узком экране таблицы прокручиваются вбок, а не ломают вёрстку. */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.arow, .prow { display:grid; align-items:center; border-bottom:1px solid var(--line2); }
.arow { grid-template-columns:minmax(220px,1fr) repeat(4, 104px); min-width:640px; }
/* Колонка страны ограничена сверху: раньше она забирала всё свободное место.
   Последняя колонка — auto: фиксированная ширина всё равно распиралась
   кнопкой удаления, и таблица вылезала за край. */
.prow { grid-template-columns:minmax(110px,1fr) 70px repeat(4, 88px) 44px;
        gap:4px; min-width:600px; }
.arow > div { padding:7px 10px; }
.prow > div { padding:6px 4px; }
.arow > div:not(:first-child), .prow > div:not(:first-child):not(:last-child) { text-align:center; }

.ahead, .phead {
  border-bottom:1px solid var(--line);
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut); font-weight:700;
}
.ahead small, .aname small { display:block; text-transform:none; letter-spacing:0;
                             font-weight:400; font-size:10px; opacity:.75; }
.arow:last-child, .prow:last-child { border-bottom:none; }
.arow:hover { background:var(--hov); }
.arow.base { background:var(--line2); }
.aname { font-size:12.5px; line-height:1.3; }
.always { color:#22c55e; font-weight:700; }
.lock { font-size:10px; opacity:.6; }

.prow input[type=text], .prow input[type=number] { padding:5px 7px; font-size:12.5px; text-align:center; }
.prow input[type=text][data-field="country"] { text-align:left; }
.prow input:disabled { opacity:.45; }
.prow .x { padding:3px 8px; font-size:12px; color:#ef4444; }

/* ── дашборд ───────────────────────────────────────────────────────────── */

.stats { display:grid; gap:10px; margin-bottom:12px;
         grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:12px 14px; box-shadow:var(--shadow); }
.stat-v { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stat-t { font-size:11px; text-transform:uppercase; letter-spacing:.06em;
          color:var(--mut); font-weight:700; margin-top:4px; }
.stat-h { font-size:11px; color:var(--mut); margin-top:3px; line-height:1.35; }
.stat.bad  .stat-v { color:#ef4444; }
.stat.warn .stat-v { color:#f59e0b; }
.stat.good .stat-v { color:#22c55e; }

.dash-cols { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.bars { display:grid; gap:6px; }
.bar-row { display:grid; grid-template-columns:minmax(70px,120px) 1fr 34px;
           gap:8px; align-items:center; font-size:12px; }
.bar-l { color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-t { background:var(--line2); border-radius:4px; height:8px; overflow:hidden; }
.bar-t i { display:block; height:100%; border-radius:4px; }
.bar-row b { text-align:right; font-variant-numeric:tabular-nums; }

/* Столбики рисуем сами: подключать библиотеку ради четырнадцати чисел незачем. */
.chart { display:flex; align-items:flex-end; gap:5px; height:150px; margin-top:10px; }
.chart-col { flex:1; display:flex; flex-direction:column; align-items:center;
             justify-content:flex-end; height:100%; min-width:0; }
.chart-col i { display:block; width:100%; background:var(--grad); border-radius:4px 4px 0 0;
               min-height:2px; }
.chart-n { font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; }
.chart-d { font-size:9px; color:var(--mut); margin-top:4px; white-space:nowrap; }

/* ── всплывающее уведомление ───────────────────────────────────────────── */

.toast {
  position:fixed; bottom:calc(var(--safe-b) + 74px); left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; padding:8px 16px; border-radius:8px; opacity:0;
  transition:.22s; font-size:12.5px; font-weight:600; box-shadow:var(--glow);
  pointer-events:none; z-index:60; max-width:88vw; text-align:center;
}
.toast.on { opacity:1; }

/* ── нижняя навигация и «плюс» (только телефон) ────────────────────────── */

.nav {
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  justify-content:center; padding:6px 8px calc(var(--safe-b) + 6px);
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
.nav button { flex:1; max-width:190px; padding:7px 0 5px; border:none; background:none;
              border-radius:10px; color:var(--mut); font-size:11px; display:grid; gap:2px; justify-items:center; }
/* Активная вкладка нижней навигации — яркий насыщенный фиолетовый + мягкое
   свечение иконки и жирнее подпись, чтобы заметно выделялась. */
.nav button.on { color:#9a30ef; font-weight:600; }
.nav button.on .ic svg { filter:drop-shadow(0 1px 5px rgba(154,48,239,.45)); }
.nav .ic { font-size:19px; line-height:1; display:inline-flex; }
.nav .ic svg { width:22px; height:22px; display:block; }

.fab { display:none; position:fixed; right:16px; bottom:calc(var(--safe-b) + 70px); z-index:31;
       width:54px; height:54px; border-radius:50%; background:var(--grad); border:none;
       color:#fff; font-size:27px; line-height:1; box-shadow:0 6px 22px rgba(124,58,237,.45);
       place-items:center; }
.fab:active { transform:scale(.94); }

.spin { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent;
        border-radius:50%; display:inline-block; vertical-align:-2px; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── вход ──────────────────────────────────────────────────────────────── */

.login-wrap { min-height:100dvh; display:grid; place-items:center; padding:24px 20px;
              padding-top:calc(var(--safe-t) + 24px); padding-bottom:calc(var(--safe-b) + 24px); }
.login { width:100%; max-width:370px; background:var(--panel); border:1px solid var(--line);
         border-radius:14px; padding:26px 22px; box-shadow:0 4px 30px rgba(0,0,0,.07); }
.login .mark { width:60px; height:60px; border-radius:16px; margin:0 auto 15px; display:block; }
.login h1 { text-align:center; margin:0 0 4px; font-size:21px; letter-spacing:-.02em; }
.login h1 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login .sub { text-align:center; color:var(--mut); font-size:12.5px; margin:0 0 20px; }
.login .fld > label { text-transform:none; letter-spacing:0; font-size:11.5px; }
.login input { padding:9px 11px; }
.btn { width:100%; padding:11px; border-radius:9px; font-size:14px; font-weight:600; }
.btn + .btn { margin-top:8px; }
.sep { display:flex; align-items:center; gap:11px; color:var(--mut); font-size:11.5px; margin:15px 0; }
.sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--line); }

/* ── телефон ───────────────────────────────────────────────────────────── */

@media (max-width:1150px) { .mx { display:none; } }

@media (max-width:820px) {
  main { padding:10px 10px calc(var(--safe-b) + 92px); }
  .nav { display:flex; }
  .fab { display:grid; }
  .top { padding:calc(var(--safe-t) + 10px) 12px 9px; }
  .hide-phone { display:none !important; }
  /* Полосу-распорку превращаем в перенос строки: все кнопки-иконки шапки уходят
     на отдельную строку и ровно упаковываются слева, не налезая на правый край
     (иначе календарь «свисал» за экран, а остальные иконки прыгали ниже). */
  .top-row .grow { flex-basis:100%; height:0; }
  .top-row { gap:7px; }

  /* Та же строка, только сложенная в столбик: слева чекбокс, справа всё
     остальное. Колонки таблицы превращаются в одну строку мелких значков. */
  .head { display:none; }
  .row {
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"cb body";
    padding:2px 0;
  }
  .row > div { padding:7px 4px; }
  .row .c-cb  { grid-area:cb; padding-left:10px; }
  .row .c-id, .row .c-lab, .row .c-st, .row .c-pr, .row .c-due, .row .c-act { display:none; }
  .row .c-ttl { grid-area:body; padding-right:12px; }
  .row.st-in-progress > div:first-child { box-shadow:inset 3px 0 0 #a855f7; }

  /* Строка со значками под заголовком — заменяет колонки таблицы. */
  .meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center;
          margin-top:5px; font-size:11.5px; color:var(--mut); }
  .meta .num { font-variant-numeric:tabular-nums; }

  .bar { position:fixed; left:8px; right:8px; bottom:calc(var(--safe-b) + 60px); margin:0; }
  .modal { padding:0; align-items:flex-end; }
  .box { max-width:none; border-radius:16px 16px 0 0; border-bottom:none;
         padding:16px 16px calc(var(--safe-b) + 18px); max-height:94dvh; overflow-y:auto; }
  .foot { position:sticky; bottom:0; background:var(--panel); padding-top:10px; margin-top:12px; }
  .foot button { flex:1; padding:11px; }
  /* 16px — иначе iOS зумит страницу при фокусе в поле */
  input[type=text], input[type=date], input[type=search], input[type=password],
  input[type=number], select, textarea { font-size:16px; padding:9px 11px; }
}

/* На широком экране низ не нужен — всё живёт в шапке. */
@media (min-width:821px) {
  .meta { display:none; }
  .only-phone { display:none !important; }
  /* Стабильная ширина переключаемых кнопок: смена языка (RU↔EN) не должна
     двигать раскладку — вкладки и «Новая задача» держат одну ширину. */
  #tabs { min-width:172px; }
  #tabs button { flex:1 1 0; min-width:0; }
  #newBtn { min-width:138px; }
}

/* ── состав тарифа в профиле ─────────────────────────────────────────────── */

.feats { display:grid; gap:14px; margin:12px 0 2px;
         grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.feats-col > b { display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
                 color:var(--mut); font-weight:700; margin-bottom:7px; }
.feats-col span { display:block; font-size:12.5px; line-height:1.55; padding-left:19px;
                  position:relative; margin-bottom:2px; }
.feats-col span::before { position:absolute; left:0; top:0; font-weight:700; }
.feats-col span.yes::before { content:"✓"; color:#16a34a; }
.feats-col span.no::before { content:"—"; color:var(--mut); }
.feats-col span.no { color:var(--mut); }
.feats-col span i { font-style:normal; font-size:11px; color:var(--mut); }

/* ── панель смены ────────────────────────────────────────────────────────── */

.sh-panel { padding:14px !important; }
.sh-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sh-head h3 { margin:0; }
.sh-state { margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
            font-weight:700; padding:3px 8px; border-radius:20px; background:var(--chip);
            color:var(--mut); white-space:nowrap; }
.sh-state.s-working { background:rgba(22,163,74,.14); color:#15803d; }
.sh-state.s-paused  { background:rgba(245,158,11,.18); color:#a16207; }
.sh-state.s-done    { background:rgba(124,58,237,.14); color:#7c3aed; }

/* Часы двух городов. Цифры моноширинные — иначе строка дёргается посекундно. */
.sh-clocks { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.sh-clock { background:var(--chip); border:1px solid var(--line2); border-radius:9px;
            padding:8px 9px; text-align:center; }
.sh-city { font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
           color:var(--mut); font-weight:700; }
.sh-time { font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
           font-variant-numeric:tabular-nums; margin-top:1px; }
.sh-date { font-size:10px; color:var(--mut); text-transform:lowercase; }

.sh-timer { font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1;
            font-variant-numeric:tabular-nums; text-align:center; margin:4px 0 10px;
            background:var(--grad); -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; }
.s-none .sh-timer, .sh-panel .sh-timer.idle { -webkit-text-fill-color:var(--mut); }

.sh-bar { height:6px; background:var(--line2); border-radius:4px; overflow:hidden; }
.sh-bar i { display:block; height:100%; background:var(--grad); border-radius:4px;
            transition:width .4s ease; }
.sh-meta { display:flex; justify-content:space-between; font-size:10.5px; color:var(--mut);
           margin-top:4px; font-variant-numeric:tabular-nums; }

.sh-btns { display:grid; gap:7px; margin:12px 0 10px;
           grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
.sh-btns button { padding:10px 12px; font-size:13px; font-weight:700; }
.sh-btns .sh-stop { color:#ef4444; border-color:var(--chipb); }

.sh-facts { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11px; color:var(--mut); }
.sh-facts b { color:var(--tx); font-variant-numeric:tabular-nums; }

/* Кнопка состояния в шапке — единственный вход к смене с телефона. */
.sh-btn { font-variant-numeric:tabular-nums; }
.sh-btn.s-working { border-color:#16a34a; color:#15803d; }
.sh-btn.s-paused  { border-color:#f59e0b; color:#a16207; }
.sh-btn.s-done    { color:var(--mut); }

/* Подсветка панели, когда её вызвали кнопкой из шапки. */
.sh-panel.flash { outline:2px solid #a855f7; outline-offset:2px; }

/* В режиме «Команда» учёта времени нет — прячем счётчик смены и его панели. */
body.team-view #shiftBtn,
body.team-view #shiftSide,
body.team-view #shiftBar { display:none !important; }

@media (max-width:520px) {
  .sh-timer { font-size:30px; }
  .sh-btns { grid-template-columns:1fr; }
}

/* ── полоса смены (узкий экран) ──────────────────────────────────────────── */

/* Правой колонки на узком экране нет, поэтому смена выходит в основной поток:
   кнопка «Начать работу» должна быть под пальцем, а не за окном.
   Имя не .sh-bar: так уже называется полоса нормы внутри панели. */
.sh-strip { display:none; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px; }

.sh-strip-info { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
                 background:transparent; border:0; padding:0; cursor:pointer; text-align:left;
                 flex:none; }
.sh-strip-time { font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.1;
                 font-variant-numeric:tabular-nums; color:var(--tx); }
.sh-strip-state { font-size:10px; letter-spacing:.06em; text-transform:uppercase;
                  font-weight:700; color:var(--mut); }
.sh-strip-state.s-working { color:#15803d; }
.sh-strip-state.s-paused  { color:#a16207; }
.sh-strip-state.s-done    { color:#7c3aed; }

.sh-strip-btns { display:flex; gap:7px; flex:1; justify-content:flex-end; }
.sh-strip-btns button { padding:10px 14px; font-size:13.5px; font-weight:700; }
.sh-strip-btns .sh-stop { color:#ef4444; }
/* Пока смена не начата, «Начать работу» — единственное осмысленное действие,
   поэтому занимает всю строку: промахнуться мимо неё пальцем негде. */
.sh-strip-btns .sh-go { flex:1; }

@media (max-width:1150px) {
  .sh-strip { display:flex; }
  /* В шапке кнопка становится лишней: полоса и заметнее, и ближе к пальцу. */
  #shiftBtn { display:none; }
}

@media (max-width:420px) {
  .sh-strip { flex-wrap:wrap; }
  .sh-strip-btns { flex:1 0 100%; justify-content:stretch; }
  .sh-strip-btns button { flex:1; }
}

/* ── плашка «вход администратора в чужой кабинет» ───────────────────────── */
.imp-bar { position:fixed; left:0; right:0; bottom:0; z-index:80;
           display:flex; align-items:center; justify-content:center; gap:12px;
           padding:6px 16px; padding-bottom:calc(6px + var(--safe-b));
           background:var(--gradh); color:#fff; font-size:12.5px; font-weight:600;
           box-shadow:0 -4px 18px rgba(0,0,0,.22); }
.imp-bar[hidden] { display:none; }
.imp-bar .imp-txt { line-height:1.3; }
.imp-bar .imp-txt b { font-weight:800; }
.imp-bar .imp-back { flex:none; background:#fff; color:#5b21b6; border:0;
                     border-radius:8px; padding:5px 14px; font-size:12px;
                     font-weight:800; cursor:pointer; }
.imp-bar .imp-back:hover { background:#f1eafe; }
/* Чтобы плашка не перекрывала последний ряд списка/кнопки внизу. */
body.imp-on { padding-bottom:44px; }

/* ── блок «Команда» над списком задач: цветная карточка с кнопками групп ── */
.team-strip { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
              margin:0 0 14px; padding:11px 14px; border-radius:14px;
              border:1px solid rgba(124,58,237,.18);
              background:linear-gradient(120deg, rgba(192,38,211,.09) 0%, rgba(124,58,237,.11) 55%, rgba(79,86,240,.09) 100%); }
html[data-theme="dark"] .team-strip { border-color:rgba(168,85,247,.28);
              background:linear-gradient(120deg, rgba(192,38,211,.16) 0%, rgba(124,58,237,.18) 55%, rgba(79,86,240,.16) 100%); }
.team-strip .ts-label { font-size:11px; text-transform:uppercase; letter-spacing:.07em;
              color:#7c3aed; font-weight:800; margin-right:4px; }
html[data-theme="dark"] .team-strip .ts-label { color:#c9b6f7; }
/* Кнопки групп — одинаковой высоты, ровным симметричным рядом, белым по цвету. */
.ts-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
          height:36px; min-width:100px; border:1px solid transparent;
          background:var(--panel); color:var(--tx); border-radius:10px; padding:0 16px;
          font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.14s;
          box-shadow:0 1px 2px rgba(60,20,120,.10); }
.ts-btn:hover { box-shadow:0 6px 16px rgba(124,58,237,.22); transform:translateY(-1px); }
.ts-btn .ts-nm { overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.ts-cnt { flex:none; font-size:11px; font-weight:700; background:rgba(124,58,237,.14); color:#7c3aed;
          border-radius:20px; padding:1px 7px; min-width:20px; text-align:center; }
html[data-theme="dark"] .ts-cnt { color:#c9b6f7; background:rgba(124,58,237,.26); }

/* ── доски команды (Team) ──────────────────────────────────────────────── */
/* Ширина как у личного списка — Team View выглядит идентично. */
#boardsView { max-width:1480px; margin:0 auto; padding:0 4px 90px; }

/* Лиловый блок «Команда» в Team View: кнопки групп слева, управление справа. */
.brd-strip { justify-content:space-between; }
.brd-strip .brd-tabs { flex:1 1 auto; }
.brd-tasks { margin-top:0; }

/* Панель управления группами (вкладки + добавление) — карточкой, как в калькуляторе. */
.brd-panel { padding:14px 16px; margin-bottom:14px; }
.brd-panel .brd-depts { margin-bottom:0; }
.brd-panel .brd-new { margin:14px 0 0; }

/* Круглый номер задачи — белая цифра на градиенте (как в калькуляторе). */
.brd-ordc { color:#fff; background:var(--grad); border-radius:50%; min-width:24px; height:24px;
            display:inline-flex; align-items:center; justify-content:center; font-size:11px;
            font-weight:700; font-variant-numeric:tabular-nums; box-shadow:var(--glow); padding:0 4px; }

/* Шапка раздела: заголовок слева, действия менеджера — ровным блоком справа. */
.brd-titlebar { display:flex; align-items:center; justify-content:space-between;
                gap:12px 16px; flex-wrap:wrap; margin:6px 0 16px; }
.brd-titletext { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0; }
.brd-h1 { font-size:16px; font-weight:600; letter-spacing:0; margin:0; color:var(--tx); }
.brd-sub { color:var(--mut); font-size:13px; font-weight:400; }
.brd-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brd-add { flex:none; display:inline-flex; align-items:center; height:34px; border:1px solid var(--line);
           background:var(--panel); color:var(--tx); border-radius:10px; padding:0 13px;
           font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.12s; }
.brd-add:hover { border-color:var(--chipb); box-shadow:var(--shadow); }
.brd-add.accent { color:#7c3aed; border-color:var(--chipb); }
html[data-theme="dark"] .brd-add.accent { color:#a855f7; }
.brd-add.is-off { opacity:.45; }
.gr-usage { flex:none; display:inline-flex; align-items:center; height:34px; font-size:12px; font-weight:700;
            color:#7c3aed; background:rgba(124,58,237,.10); border-radius:10px; padding:0 12px; }
html[data-theme="dark"] .gr-usage { color:#a855f7; }
.gr-usage.full { color:#c0392b; background:rgba(220,57,45,.12); }

/* Лента вкладок групп по отделам. */
.brd-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.brd-tabs::-webkit-scrollbar { display:none; }
.brd-tab { position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; border:1px solid var(--line);
           background:var(--panel); color:var(--tx); border-radius:10px; padding:0 14px;
           font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.12s; }
.brd-tab:hover { border-color:var(--chipb); }
.brd-tab.on { background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow); }
.brd-cnt { font-size:11px; font-weight:700; background:rgba(0,0,0,.14); border-radius:20px; padding:1px 7px; }
.brd-tab.on .brd-cnt { background:rgba(255,255,255,.25); }
/* Значок новых сообщений чата на кнопке группы: красным — все непрочитанные. */
.brd-chat { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 5px;
            background:#ef4444; color:#fff; font-size:10.5px; font-weight:800; border-radius:20px;
            display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg); }
.brd-chat[hidden] { display:none; }
.brd-tasks { margin-top:6px; }
/* Липкие «шапки» при прокрутке списка (только широкий экран — на телефоне
   строка-заголовок таблицы скрыта, а вёрстка карточная):
   полоса групп и строка колонок остаются закреплёнными под основной шапкой. */
@media (min-width:821px){
  #teamStrip, .brd-strip { position:sticky; top:var(--top-h, 55px); z-index:6;
                           background-color:var(--bg); }
  .panel.list .head { position:sticky; top:calc(var(--top-h, 55px) + var(--strip-h, 0px));
                      z-index:5; background:var(--panel); }
}
.brd-tasks .c-cb { display:flex; align-items:center; justify-content:center; }
.brd-line { display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.brd-by { font-size:11.5px; color:var(--mut); }
.brd-by::first-letter { text-transform:uppercase; }
.brd-who { font-size:12px; font-weight:600; color:#7c3aed;
           background:rgba(124,58,237,.10); border-radius:20px; padding:2px 9px; }
html[data-theme="dark"] .brd-who { color:#a855f7; background:rgba(124,58,237,.20); }
.brd-take { font-size:12px; font-weight:700; border:1px solid var(--chipb); background:var(--panel);
            color:#7c3aed; border-radius:8px; padding:3px 10px; cursor:pointer; }
.brd-take:hover { box-shadow:var(--glow); }
html[data-theme="dark"] .brd-take { color:#a855f7; }
.brd-age { font-family:ui-monospace,monospace; font-size:11px; font-weight:600; border-radius:6px; padding:1px 7px; }
.brd-age.a-ok { background:rgba(22,163,74,.12); color:#16a34a; }
.brd-age.a-warn { background:rgba(217,119,6,.14); color:#d97706; }
.brd-age.a-bad { background:rgba(220,38,38,.14); color:#dc2626; }
.brd-mk { font-size:13px; line-height:1; }
.row.bt-must > div:first-child { box-shadow:inset 3px 0 0 #ef4444; }
.brd-mgrbox { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brd-chk { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; }
.brd-marks { display:inline-flex; gap:5px; }

.brd-new { display:flex; gap:8px; margin:0 0 14px; align-items:stretch; }
.brd-new input { flex:1; height:40px; }
.brd-new select { width:auto; height:40px; }
.brd-new .primary { height:40px; padding:0 18px; }

.brd-list { display:flex; flex-direction:column; gap:9px; }
.bt { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
      box-shadow:var(--shadow); }
.bt-must { border-color:#f0a; box-shadow:0 0 0 1px rgba(239,68,68,.35), var(--shadow); }
.bt-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bt-mark { font-size:15px; }
.bt-title { font-weight:600; font-size:15px; flex:1; min-width:120px; cursor:default; }
.bt-prio { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--chip); color:var(--mut); }
.bt-prio.p-fire { background:rgba(249,115,22,.15); color:#ea580c; }
.bt-prio.p-high { background:rgba(239,68,68,.14); color:#dc2626; }
.bt-age { font-family:ui-monospace,monospace; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.bt-age.a-ok { background:rgba(22,163,74,.12); color:#16a34a; }
.bt-age.a-warn { background:rgba(217,119,6,.14); color:#d97706; }
.bt-age.a-bad { background:rgba(220,38,38,.14); color:#dc2626; }
.bt-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.bt-by { font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums; }
.bt-take { border:1px solid var(--chipb); background:var(--chip); color:var(--tx); border-radius:8px;
           padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; }
.bt-take:hover { background:var(--hov); }
.bt-who { font-size:12.5px; font-weight:600; }
.bt-assign, .bt-status { width:auto; font-size:12.5px; padding:5px 8px; }
.bt-status.s-prog { color:#d97706; } .bt-status.s-done { color:#16a34a; }
.bt-status.s-block { color:#dc2626; }
.bt-mgr { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:9px; border-top:1px dashed var(--line2); }
.bt-flag, .bt-mk { border:1px solid var(--line); background:var(--panel); color:var(--mut);
                   border-radius:7px; padding:4px 9px; font-size:12px; cursor:pointer; }
.bt-flag.on { background:rgba(239,68,68,.14); color:#dc2626; border-color:transparent; font-weight:700; }
.bt-mk.on { background:var(--grad); color:#fff; border-color:transparent; }

/* Подсказка об авто-закрытии незакрытой смены. */
.sh-auto { margin-top:9px; font-size:12px; line-height:1.4; color:#a16207;
           background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3);
           border-radius:9px; padding:8px 11px; }
@media (prefers-color-scheme:dark){ .sh-auto { color:#fbbf24; } }

/* Умные правки смены: окно простоя/забыл начать, флаг ручного ввода. */
.sh-idle { max-width:420px; }
.sh-idle h3 { margin:0 0 8px; }
.sh-idle p { font-size:14px; color:var(--mut); margin:0 0 8px; }
.sh-idle-btns { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.sh-idle-btns button { padding:11px 14px; border-radius:10px; border:1px solid var(--line);
                       background:var(--panel); color:var(--tx); font-size:14px; font-weight:600; cursor:pointer; }
.sh-idle-btns button.primary { background:var(--grad); color:#fff; border-color:transparent; }
.sh-idle-btns button:hover { border-color:var(--chipb); }
.sh-idle-custom { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.sh-idle-custom label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
                        color:var(--mut); font-weight:700; }
.sh-idle-custom input { width:100%; margin-top:4px; }
.sh-idle-custom button.primary { background:var(--grad); color:#fff; border:0; border-radius:10px;
                                 padding:11px; font-weight:700; cursor:pointer; }
.sh-forgot { display:block; width:100%; margin-top:8px; background:none; border:0;
             color:var(--mut); font-size:12.5px; text-decoration:underline; cursor:pointer; }
.sh-forgot:hover { color:var(--tx); }
.sh-manual { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700;
             color:#a16207; background:rgba(245,158,11,.14); border-radius:6px; padding:1px 7px; }
@media (prefers-color-scheme:dark){ .sh-manual { color:#fbbf24; } }

/* ── чат группы (мессенджер) ────────────────────────────────────────────── */
.chatw { position:fixed; right:0; bottom:96px; z-index:75; }
.chatw[hidden] { display:none; }
/* закладка на краю справа — единственное, что видно, пока чат свёрнут */
.chatw-tab { position:relative; display:flex; align-items:center; gap:7px; cursor:pointer;
             border:0; background:var(--grad-green); color:#fff; font-size:13px; font-weight:600;
             padding:9px 13px 9px 15px; border-radius:12px 0 0 12px; box-shadow:-3px 3px 14px rgba(20,16,40,.22); }
.chatw-ic { font-size:16px; }
.chatw-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Счётчик новых сообщений на плашке чата: красным — все непрочитанные. */
.chatw-badge { position:absolute; top:-7px; left:-7px; min-width:19px; height:19px; padding:0 5px;
               background:#ef4444; color:#fff; font-size:11px; font-weight:800; border-radius:20px;
               display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg); }
.chatw-badge[hidden] { display:none; }
/* панель чата — выезжает справа */
.chatw-panel { position:fixed; right:0; bottom:0; top:66px; width:360px; max-width:92vw;
               background:var(--panel); border:1px solid var(--line); border-radius:16px 0 0 0;
               box-shadow:-10px 0 40px rgba(20,16,40,.24); display:flex; flex-direction:column;
               transform:translateX(105%); transition:transform .22s ease; overflow:hidden; }
.chatw.open .chatw-panel { transform:translateX(0); }
.chatw.open .chatw-tab { visibility:hidden; }
.chatw-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
              background:var(--panel-2, var(--chip)); }
.chatw-head b { flex:1; font-size:14px; }
.chatw-x { border:0; background:none; color:var(--mut); font-size:22px; line-height:1; cursor:pointer; }
.chatw-x:hover { color:var(--tx); }
.chatw-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:7px;
              background-color:var(--chat-bg); background-image:var(--chat-dots); background-size:20px 20px; }
.chatw-empty { color:var(--mut); font-size:13px; text-align:center; margin:auto; }
.chatw-new { align-self:center; font-size:11px; color:#ef4444; font-weight:700; margin:4px 0; }
/* Разделитель-дата на весь день (как в Telegram/WhatsApp). */
.chatw-day, .dm-day { align-self:center; text-align:center; margin:8px 0 4px; }
.chatw-day span, .dm-day span { display:inline-block; background:rgba(20,16,40,.07); color:var(--mut);
  font-size:11px; font-weight:600; padding:3px 12px; border-radius:20px; }
html[data-theme="dark"] .chatw-day span, html[data-theme="dark"] .dm-day span { background:rgba(255,255,255,.1); color:#cfd3dd; }
.chatw-msg { position:relative; display:flex; flex-direction:column; max-width:80%; }
.chatw-msg.me { align-self:flex-end; align-items:flex-end; }
.chatw-from { font-size:11px; font-weight:700; color:var(--violet, #7c3aed); margin:0 0 2px 8px; }
.chatw-bubble { position:relative; background:var(--panel); color:var(--tx); border-radius:12px 12px 12px 4px;
                padding:7px 11px; font-size:13.5px; line-height:1.35; word-break:break-word;
                box-shadow:0 1px 1.5px rgba(20,16,40,.14); }
.chatw-msg.me .chatw-bubble { background:var(--grad-green); color:#fff; border-radius:12px 12px 4px 12px;
                box-shadow:0 1px 2px rgba(5,150,105,.28); }
.chatw-time { display:block; text-align:right; margin-top:3px; font-size:9.5px; opacity:.7;
              white-space:nowrap; font-variant-numeric:tabular-nums; }
.chatw-form { position:relative; display:flex; align-items:center; gap:8px; padding:10px 12px;
              border-top:1px solid var(--line); background:var(--panel); }
/* Поле ввода — «пилюля» со скруглением и мягким фокусом, как в личном чате.
   У #chatInput нет type, поэтому базовые стили input[type=text] к нему не применяются. */
.chatw-form input { flex:1; min-width:0; font:inherit; color:var(--tx); background:var(--inp);
                    border:1px solid var(--color-input-border); border-radius:22px; padding:10px 16px;
                    transition:border-color .15s ease,box-shadow .15s ease; }
.chatw-form input::placeholder { color:var(--mut); }
.chatw-form input:focus { outline:none; border-color:var(--color-primary);
                          box-shadow:0 0 0 3px rgba(124,58,237,.16); }
.chatw-send { flex:none; width:42px; height:42px; display:inline-flex; align-items:center;
              justify-content:center; padding:0; border:0; border-radius:50%; background:var(--grad-green);
              color:#fff; font-size:15px; line-height:1; cursor:pointer;
              box-shadow:0 4px 12px rgba(31,174,73,.32); transition:transform .12s ease,box-shadow .12s ease; }
.chatw-send:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(31,174,73,.44); }
.chatw-send:active { transform:scale(.94); }
/* Кнопка «вниз» к последним сообщениям — появляется, когда список прокручен вверх. */
.chatw-down { position:absolute; right:14px; bottom:72px; width:38px; height:38px; border-radius:50%;
   border:0; background:var(--grad-green); color:#fff; display:none; align-items:center; justify-content:center;
   cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.22); z-index:3; }
.chatw-down.show { display:inline-flex; }
.chatw-down svg { width:20px; height:20px; }
.chatw-down-n { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
   background:#ef4444; color:#fff; font-size:10.5px; font-weight:800; border-radius:20px;
   display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--panel); }
.chatw-down-n[hidden] { display:none; }

/* @упоминания: выпадающий список участников группы над полем ввода */
.chatw-ment { position:absolute; left:10px; right:10px; bottom:calc(100% - 4px);
              background:var(--panel); border:1px solid var(--line); border-radius:12px;
              box-shadow:0 8px 24px rgba(0,0,0,.16); overflow:hidden; max-height:210px;
              overflow-y:auto; z-index:5; }
.chatw-ment-item { display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
                   padding:9px 12px; font-size:13.5px; color:var(--tx); }
.chatw-ment-item.on, .chatw-ment-item:hover { background:var(--chip); }
.chatw-mention { color:var(--violet, #7c3aed); font-weight:700; }
.chatw-msg.me .chatw-mention { color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* На телефоне чат открывается на весь экран: шапка со списком и кнопкой закрытия
   закреплена сверху, поле ввода — снизу. Высоту и верх подстраивает JS под
   visualViewport (клавиатура iOS), чтобы шапка не «уезжала» вверх. */
@media (max-width:560px){
  .chatw-panel { inset:0; width:100vw; max-width:none; height:100dvh; border-radius:0; border:0; }
  .chatw-head { position:sticky; top:0; z-index:1; padding-top:calc(var(--safe-t, 0px) + 12px); }
}

/* На мобильной вёрстке закладку чата поднимаем над плавающей кнопкой «+»,
   чтобы они не налезали друг на друга. FAB: низ safe-b+70, высота 54 →
   верх safe-b+124; закладку ставим выше с зазором. Правило стоит ПОСЛЕ базового
   .chatw{bottom:96px}, иначе оно проигрывало по порядку в каскаде. */
@media (max-width:820px){ .chatw { bottom: calc(var(--safe-b) + 134px); } }

/* Режим «вход в чужой кабинет»: снизу висит фиксированная плашка возврата и
   перекрывает низ панели чата — поле ввода прячется за ней. Поднимаем и закладку,
   и панель над плашкой (её высота ≈ 60px, как в body.imp-on). */
body.imp-on .chatw { bottom:140px; }
body.imp-on .chatw-panel { bottom:48px; }

/* ── отделы и группы в Team Task View ───────────────────────────────────── */
.brd-depts { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-start; margin-bottom:16px; }
.brd-dept { display:flex; flex-direction:column; gap:7px; }
.brd-dept-name { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); font-weight:700; }
.brd-picks { margin:12px 0 4px; }
.brd-picks > b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin-bottom:6px; }
.brd-picks-list { display:flex; flex-direction:column; gap:2px; max-height:260px; overflow:auto;
                  border:1px solid var(--line); border-radius:10px; padding:8px; }
.brd-pick { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:14px; cursor:pointer; }
.brd-pick:hover { background:var(--hov); }
.brd-pick input { width:18px; height:18px; accent-color:var(--color-primary); flex:none; }

/* Кнопка состава в полоске: иконка людей + число (участники текущей группы). */
.brd-roster { gap:6px; padding:0 12px; font-variant-numeric:tabular-nums; }
.brd-roster svg { width:17px; height:17px; color:var(--mut); }
.brd-roster span { font-weight:600; }
.brd-roster:hover svg { color:var(--tx); }

/* Компактный состав группы (кнопка «Состав · N» → список участников). */
.rost-list { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow:auto;
             margin:10px 0 4px; }
.rost-item { display:flex; align-items:center; gap:10px; padding:10px 12px;
             border:1px solid var(--line); border-radius:12px; }
.rost-main { flex:1; min-width:0; }
.rost-name { font-size:14px; font-weight:600; }
.rost-you { font-size:10px; font-weight:700; color:var(--mut); }
.rost-contact { font-size:12.5px; color:var(--mut); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.rost-contact a { color:var(--mut); text-decoration:none; }
.rost-contact a:hover { color:var(--tx); text-decoration:underline; }
.rost-dot { margin:0 6px; opacity:.5; }
.rost-role { flex:none; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
             background:var(--chip); color:var(--mut); }
.rost-role.r-admin { background:rgba(124,58,237,.14); color:#7c3aed; }
.rost-role.r-manager { background:rgba(22,163,74,.14); color:#15803d; }
.rost-role.r-hr { background:rgba(245,158,11,.18); color:#a16207; }
html[data-theme="dark"] .rost-role.r-admin { color:#a855f7; }

/* ── личный мессенджер (переписка 1-на-1) ─────────────────────────────── */
.dm{display:grid;grid-template-columns:322px 1fr;gap:14px;max-width:1100px;margin:0 auto;
    height:calc(100vh - 210px);height:calc(100dvh - 210px);min-height:460px}
/* В мессенджере полосу смены и всплывающий чат группы не показываем. */
body.dm-view #shiftBar{display:none!important}
body.dm-view .chatw{display:none!important}
.dm-side{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
         border-radius:var(--radius-card);overflow:hidden}
.dm-search{padding:12px;border-bottom:1px solid var(--line2)}
.dm-search input{width:100%}
.dm-people{flex:1;overflow-y:auto;padding:6px}
.dm-it{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;
       cursor:pointer;padding:10px 10px;border-radius:12px;color:var(--tx)}
.dm-it:hover{background:var(--hov)}
.dm-it.on{background:var(--chip)}
.dm-ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;
        display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
        text-transform:uppercase}
.dm-it-main{flex:1;min-width:0}
.dm-it-name{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-it-last,.dm-it-sub{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dm-you{color:var(--mut)}
.dm-it-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.dm-it-time{font-size:11px;color:var(--faint,var(--mut));font-variant-numeric:tabular-nums}
.dm-it-badge{background:var(--grad);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;
             border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.dm-empty,.dm-loading,.dm-off{color:var(--mut);font-size:13.5px;text-align:center;padding:22px 16px}

.dm-conv{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
         border-radius:var(--radius-card);overflow:hidden;min-height:0}
.dm-cempty{margin:auto;color:var(--mut);font-size:14px;text-align:center;padding:24px;max-width:38ch}
.dm-cbox{display:flex;flex-direction:column;height:100%;min-height:0}
.dm-head{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.dm-head .dm-ava{width:38px;height:38px}
.dm-head-main{flex:1;min-width:0}
.dm-head-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-head-sub{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-back{display:none;flex:none;border:0;background:none;color:var(--tx);font-size:26px;line-height:1;
         cursor:pointer;padding:0 4px}
.dm-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:7px;min-height:0;
         background-color:var(--chat-bg);background-image:var(--chat-dots);background-size:20px 20px}
.dm-msg{position:relative;display:flex;max-width:78%}
/* Кнопка удаления сообщения (× у края пузыря) — как в Telegram/WhatsApp. */
.chatw-del, .dm-del { position:absolute; top:2px; width:20px; height:20px; border:0; border-radius:50%;
  background:rgba(20,16,40,.14); color:#fff; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; padding:0; }
.chatw-msg:hover .chatw-del, .dm-msg:hover .dm-del { opacity:.85; }
.chatw-del:hover, .dm-del:hover { background:#ef4444; opacity:1; }
.chatw-msg.me .chatw-del, .dm-msg.me .dm-del { left:-24px; }
.chatw-msg:not(.me) .chatw-del, .dm-msg:not(.me) .dm-del { right:-24px; }
@media (hover:none) { .chatw-del, .dm-del { opacity:.45; } }
.dm-msg.me{align-self:flex-end;justify-content:flex-end}
.dm-bubble{position:relative;background:var(--panel);color:var(--tx);border-radius:14px 14px 14px 4px;
           padding:8px 12px;font-size:14px;line-height:1.4;word-break:break-word;
           box-shadow:0 1px 1.5px rgba(20,16,40,.14)}
.dm-msg.me .dm-bubble{background:var(--grad-green);color:#fff;border-radius:14px 14px 4px 14px;
           box-shadow:0 1px 2px rgba(5,150,105,.28)}
/* Время — отдельной строкой справа под текстом: у коротких сообщений дата больше
   не налезает на текст. */
.dm-time{display:block;text-align:right;margin-top:3px;font-size:9.5px;opacity:.7;
         white-space:nowrap;font-variant-numeric:tabular-nums}
.dm-form{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line2);background:var(--panel)}
/* Поле ввода — «пилюля» со скруглением, аккуратной рамкой и мягким фокусом.
   У #dm-input нет type, поэтому базовые стили input[type=text] к нему не применяются —
   задаём всё явно. */
.dm-form input{flex:1;min-width:0;font:inherit;color:var(--tx);background:var(--inp);
               border:1px solid var(--color-input-border);border-radius:22px;padding:11px 18px;
               transition:border-color .15s ease,box-shadow .15s ease}
.dm-form input::placeholder{color:var(--mut)}
.dm-form input:focus{outline:none;border-color:var(--color-primary);
                     box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.dm-send{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
         padding:0;border:0;border-radius:50%;background:var(--grad-green);color:#fff;font-size:16px;line-height:1;cursor:pointer;
         box-shadow:0 4px 12px rgba(31,174,73,.32);transition:transform .12s ease,box-shadow .12s ease}
.dm-send:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,174,73,.44)}
.dm-send:active{transform:scale(.94)}

/* ── вложения и поиск в чатах (личный DM и групповой chatw) ─────────────── */
/* Картинка-превью в пузыре. */
.att-img{display:block;max-width:230px;border-radius:12px;overflow:hidden;margin-bottom:3px}
.att-img img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
.dm-bubble.has-img,.chatw-bubble.has-img{padding:4px}
.dm-txt,.chatw-txt{display:block}
/* Карточка файла-документа. */
.att-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
          background:rgba(0,0,0,.06);color:inherit;text-decoration:none;max-width:250px;margin-bottom:3px}
.dm-msg.me .att-file,.chatw-msg.me .att-file{background:rgba(255,255,255,.22)}
.att-ic{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.att-ic svg{width:22px;height:22px}
.att-meta{min-width:0;display:flex;flex-direction:column}
.att-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-size{font-size:11px;opacity:.75}
/* Кнопка-скрепка в форме и иконка поиска в шапке. */
.dm-attach,.chatw-attach{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;
   justify-content:center;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:10px}
.dm-attach:hover,.chatw-attach:hover{color:var(--tx);background:var(--chip)}
.dm-attach svg,.chatw-attach svg{width:22px;height:22px}
.dm-icnbtn,.chatw-icnbtn{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;
   justify-content:center;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:9px;font-size:17px;line-height:1}
.dm-icnbtn:hover,.chatw-icnbtn:hover{color:var(--tx);background:var(--chip)}
.dm-icnbtn svg,.chatw-icnbtn svg{width:20px;height:20px}
/* Строка поиска по чату. */
.dm-searchbar,.chatw-searchbar{display:flex;align-items:center;gap:8px;padding:8px 12px;
   border-bottom:1px solid var(--line2);background:var(--panel)}
.dm-searchbar input,.chatw-searchbar input{flex:1;min-width:0;border:1px solid var(--color-input-border);
   border-radius:20px;padding:8px 14px;font:inherit;background:var(--inp);color:var(--tx)}
.dm-searchbar input:focus,.chatw-searchbar input:focus{outline:none;border-color:var(--color-primary)}

/* значок непрочитанных на иконке в шапке и в нижней навигации */
.dm-icon{position:relative}
.dm-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
          background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;
          justify-content:center;line-height:1}
.nav .ic{position:relative}
.nav-badge{position:absolute;top:-4px;right:-8px;min-width:8px;height:8px;border-radius:50%;background:#ef4444}

@media(max-width:760px){
  /* На телефоне чат занимает всё между шапкой и нижней навигацией. Высоту берём
     от dvh (сжимается под клавиатуру iOS), плюс запас на нижнюю навигацию. */
  .dm{grid-template-columns:1fr;gap:0;min-height:0;
      height:calc(100vh - var(--top-h,120px) - 66px - var(--safe-b));
      height:calc(100dvh - var(--top-h,120px) - 66px - var(--safe-b))}
  .dm-side,.dm-conv{border-radius:14px}
  .dm-conv{display:none}
  .dm .dm-side{display:flex}
  .dm.show-conv .dm-side{display:none}
  /* Открытый диалог — на весь экран, поверх шапки и нижней навигации: шапка с
     кнопкой «‹ Назад» закреплена сверху, поле ввода снизу. Высоту/верх подгоняет
     JS под visualViewport (клавиатура iOS), чтобы «Назад» всегда было видно. */
  .dm.show-conv .dm-conv{display:flex;position:fixed;inset:0;width:100vw;max-width:none;
                         height:100dvh;border-radius:0;border:0;z-index:60}
  .dm.show-conv .dm-conv .dm-head{position:sticky;top:0;z-index:1;background:var(--panel);
                         padding-top:calc(var(--safe-t,0px) + 12px)}
  .dm-back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
           border-radius:10px;font-size:26px}
  .dm-back:active{background:var(--chip)}
}
.dm-badge[hidden],.nav-badge[hidden]{display:none}

/* iOS увеличивает страницу при фокусе на поле со шрифтом < 16px и «уводит»
   правый край за экран (в чате пропадала кнопка отправки, обрезалось меню).
   На телефоне делаем все поля 16px — авто-зум отключается. */
@media (max-width:760px){
  input[type=text],input[type=search],input[type=password],input[type=number],
  input[type=date],input[type=tel],input[type=email],textarea,select,
  .dm input,#dm-input,#chatInput,#brd-title{font-size:16px}
}