/* ============================================================
   Цветовые темы через CSS-переменные.
   :root = тёмная тема (значения по умолчанию, из проекта hb1).
   Чтобы добавить светлую тему — переопредели эти же переменные
   в блоке :root[data-theme="light"] { ... } (следующий шаг).
   Структура классов — как во втором проекте (mail_admin).
   ============================================================ */
:root {
    /* Поверхности */
    --bg:              #2b3138;   /* фон страницы */
    --surface:         #333843;   /* панели, шапка, попапы, плеер, zag-строки */
    --surface-2:       #464f5a;   /* поля ввода, вторичные кнопки */
    --surface-2-hover: #555e69;
    --row-even:        #383f48;
    --row-odd:         #2f353d;
    --border:          #2b3138;   /* границы ячеек таблиц (в тёмной теме = фон) */
    --border-2:        #464f5a;   /* границы попапов/полей */

    /* Текст */
    --text:        #4db6bc;   /* основной текст (в тёмной теме совпадает с акцентом) */
    --text-muted:  #b4b5b6;   /* ссылки, вторичный текст */
    --text-dim:    #6a7078;   /* третичный/подсказки */
    --text-bright: #eeeeee;   /* текст в полях ввода */
    --text-strong: #ffffff;   /* самый яркий текст на поверхности (играющая строка) */
    --file-id:     #7fa3cc;   /* метка файла «#185» — спокойный синий */

    /* Акценты */
    --accent:       #4db6bc;
    --accent-hover: #5cc7cd;
    --on-accent:    #ffffff;   /* текст на кнопках акцентного цвета */
    --share:        #4a7bc7;
    --share-hover:  #5a8bd7;
    --danger:       #b64d4d;
    --danger-hover: #c75c5c;

    /* Семантические подсветки (loudness / битрейт / overflow) */
    --hl-cool:       #6ba6d9;   /* тихо / низкий битрейт (синий) */
    --hl-cool-deep:  #3d5a8c;   /* очень низкий битрейт (тёмно-синий) */
    --hl-warm:       #e6a04d;   /* громко / высокий битрейт (оранжевый) */
    --hl-good:       #5cb85c;   /* битрейт в норме (зелёный) */
    --ok:            #5cb85c;   /* «свежо / в порядке» — пара к --danger */
    --hl-over:       #c74d5c;   /* переполнение / очень высокий битрейт (красный) */
    --hl-over-first: #c48a3a;   /* первый переполнивший (тусклый оранжевый) */
}

/* ── Светлая тема ──────────────────────────────────────────
   Значения применяются либо по явному выбору (data-theme="light"),
   либо по системной теме, если юзер не выбрал явно (data-theme отсутствует).
   Один и тот же набор переменных продублирован в двух селекторах. */
:root[data-theme="light"] {
    --bg:              #f4f5f7;
    --surface:         #ffffff;
    --surface-2:       #e7e9ee;
    --surface-2-hover: #dadde4;
    --row-even:        #eef0f3;
    --row-odd:         #f7f8fa;
    --border:          #e2e4e9;
    --border-2:        #d5d8df;

    --text:        #2b3138;
    --text-muted:  #5a6270;
    --text-dim:    #8a909a;
    --text-bright: #1f2430;
    --text-strong: #000000;
    --file-id:     #3c679c;

    --accent:       #2e9ba1;
    --accent-hover: #38aeb4;
    --on-accent:    #ffffff;
    --share:        #3f6fb8;
    --share-hover:  #4f80cb;
    --danger:       #c0392b;
    --danger-hover: #d0483a;

    --hl-cool:       #3b7fc4;
    --hl-cool-deep:  #2f4a78;
    --hl-warm:       #b9791b;
    --hl-good:       #3d9140;
    --ok:            #3d9140;
    --hl-over:       #c0392b;
    --hl-over-first: #b06f1e;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg:              #f4f5f7;
        --surface:         #ffffff;
        --surface-2:       #e7e9ee;
        --surface-2-hover: #dadde4;
        --row-even:        #eef0f3;
        --row-odd:         #f7f8fa;
        --border:          #e2e4e9;
        --border-2:        #d5d8df;

        --text:        #2b3138;
        --text-muted:  #5a6270;
        --text-dim:    #8a909a;
        --text-bright: #1f2430;
        --text-strong: #000000;
        --file-id:     #3c679c;

        --accent:       #2e9ba1;
        --accent-hover: #38aeb4;
        --on-accent:    #ffffff;
        --share:        #3f6fb8;
        --share-hover:  #4f80cb;
        --danger:       #c0392b;
        --danger-hover: #d0483a;

        --hl-cool:       #3b7fc4;
        --hl-cool-deep:  #2f4a78;
        --hl-warm:       #b9791b;
        --hl-good:       #3d9140;
        --ok:            #3d9140;
        --hl-over:       #c0392b;
        --hl-over-first: #b06f1e;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: sans-serif;
    margin: 0;
}
h1, h2, h3, h4, p {
    background: transparent;
    color: var(--accent);
}
h2, h3 { padding: 6px 12px; }

A          { color: var(--text-muted); text-decoration: none; }
A:visited  { color: var(--text-muted); }
A:active   { color: var(--text-muted); }
A:hover    { color: var(--accent); }

/* ============ Формы ============ */
form input[type=text],
form input[type=url],
form input[type=password],
form input[type=number] {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}
form input[type=submit] {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 4px 12px;
    cursor: pointer;
}
form input[type=submit]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

select, form select {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 3px 6px;
}
form textarea, textarea {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}

/* ============ Таблицы ============ */
TR.even   { background: var(--row-even); color: var(--accent); }
TR.noeven { background: var(--row-odd);  color: var(--accent); }
TR.zag    { background: var(--surface);  color: var(--text-muted); font-size: large; font-weight: bold; }
TR.rr, TR.zh, TR.gg { background: var(--bg); }


/* ============ Кнопки, формы логина, общие классы (из образца) ============ */
/* ============ Bootstrap-подобные классы для login.php ============ */
body.text-center { text-align: center; }
.form-signin {
    display: inline-block;
    width: 100%;
    max-width: 340px;
    padding: 30px 20px;
    margin-top: 80px;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: left;
}
.form-signin h1 {
    text-align: center;
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 20px;
}
.form-control {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--surface-2) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--surface-2) !important;
    border-radius: 5px;
    font-size: 14px;
}
.btn { display: inline-block; padding: 6px 14px; border-radius: 5px; cursor: pointer; text-decoration: none; }
.btn-primary   { background: var(--accent); color: var(--on-accent) !important; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger    { background: var(--danger); color: var(--on-accent) !important; border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text-muted) !important; border: 1px solid var(--surface-2); }
.btn-secondary:hover { background: var(--surface-2-hover); border-color: var(--surface-2-hover); color: var(--on-accent) !important; }
/* Пара кнопок «подтвердить / закрыть». Именно flex, а не inline-block: <button> и <a>
   с одинаковым классом выравниваются по базовой линии по-разному, и ссылка встаёт выше
   кнопки на пару пикселей. */
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Кнопка внутри <form> в том же ряду вставала выше соседей: форма — flex-элемент, а кнопка в ней — строчная, с распоркой
   строки под базовую линию (корзина в сводке файла — владелец, 22.09.2026). Форма сама становится flex — распорки нет. */
.btn-row form { display: flex; align-items: center; }
/* Тумблер стороны кассеты — две кнопки без промежутка (segmented control) */
.side-switch { display: inline-flex; }
.side-switch .btn { border-radius: 0; padding: 4px 12px; }
.side-switch .btn:first-child { border-radius: 5px 0 0 5px; }
.side-switch .btn:last-child  { border-radius: 0 5px 5px 0; }
.btn:disabled, button.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; }
.btn.busy { opacity: 0.7; pointer-events: none; cursor: wait; }

/* Спиннер для «идёт долгая операция» — вращающееся кольцо в цвете кнопки */
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; vertical-align: middle;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Кнопка с одной иконкой (без текста) — убираем правый отступ у SVG */
.btn-icon      { padding: 4px 8px; }
.btn-icon svg  { margin-right: 0 !important; display: block; }

/* action-bar — все элементы на одной линии по центру */
.action-bar        { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-bar form   { margin: 0; }

/* ============ Таблица-список ============ */
.picked-list       { border-collapse: collapse; }
.picked-list td    { padding: 4px 10px; border-bottom: 1px solid var(--border); height: 22px; box-sizing: border-box; }
.picked-list tr.zag td { font-weight: bold; }
/* Столбец состояния: ширина по содержимому (одна точка), правый отступ узкий —
   иначе между точкой и названием зияет дыра в две ширины отступа. */
.picked-list td.dot-col { width: 1%; padding-right: 2px; text-align: center; }


/* ============ Всплывающее уведомление и мелочи ============ */
.flash-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    padding: 5px 12px;
    background: var(--surface);
    color: var(--accent);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 1000;
    transition: opacity 0.5s;
}
.flash-toast.fade-out { opacity: 0; pointer-events: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-muted { color: var(--text-dim); text-align: center; font-size: 12px; }
.mt-5 { margin-top: 24px; }
.mb-3 { margin-bottom: 12px; }

/* ============================================================
   Своё для а-Януса: шапка, раскладка. Сайт настольный — заточек под телефон нет
   (мобильное приложение будет отдельным, решение владельца 21.09.2026);
   широкие таблицы скроллятся внутри себя, страница по горизонтали не едет.
   ============================================================ */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    padding: 8px 12px;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 17px;
    white-space: nowrap;
}
.topbar .brand svg { width: 28px; height: 28px; color: var(--accent); flex: 0 0 auto; }
.topbar nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.topbar nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 6px;
    color: var(--text-muted);
}
.topbar nav a svg { width: 20px; height: 20px; }
.topbar nav a:hover  { color: var(--accent); }
.topbar nav a.active { color: var(--accent); background: var(--bg); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    max-width: 40vw;
}
.topbar .who svg    { width: 18px; height: 18px; flex: 0 0 auto; }
.topbar .who span   { overflow: hidden; text-overflow: ellipsis; }
.topbar .who:hover  { color: var(--accent); }
.topbar .who.active { color: var(--accent); background: var(--bg); }
.topbar .who { border: 0; background: none; cursor: pointer; font-family: inherit; }
.topbar .who svg:last-child { width: 14px; height: 14px; margin: 0; opacity: .7; }

/* Список аккаунтов сессии под именем (21.09.2026, по образцу Яндекса) */
.who-menu { position: relative; }
.who-menu .who-drop {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
    min-width: 240px; padding: 6px 0;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.who-menu.open .who-drop { display: block; }
.who-menu.open .who { color: var(--accent); background: var(--bg); }
.who-drop a, .who-drop .who-acc {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px;
    border: 0; background: none; text-align: left; font: inherit; font-size: 13px;
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.who-drop a svg, .who-drop .who-acc svg { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.who-drop a:hover, .who-drop .who-acc:hover:not(:disabled) { color: var(--accent); background: var(--bg); }
.who-drop .who-acc { flex-wrap: wrap; row-gap: 0; }
.who-drop .who-acc b     { font-weight: 500; color: var(--text-bright); }
.who-drop .who-acc small { flex-basis: 100%; padding-left: 0; font-size: 11px; color: var(--text-dim); }
.who-drop .who-acc.cur   { cursor: default; }
.who-drop .who-acc.cur b { color: var(--accent); }
.who-drop .who-acc svg   { margin-left: auto; color: var(--accent); }
.who-drop .who-sep { height: 1px; margin: 6px 0; background: var(--border-2); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px 24px;
}

/* Карточки будущих разделов (телеметрия, шлюз, отчёты) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
/* Обзор («главная»): плитки на треть шире обычных — 320 px вместо 240. На ней плитки не
   однострочные, в них по несколько строк подробностей (здоровье сервера, шлюз), и на узкой
   колонке они рвались посреди значения. Модификатор отдельным классом, а не правкой .cards:
   в разделах сетка та же и должна остаться прежней. */
.cards.wide-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card {
    background: var(--surface);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--text-muted);
}
/* Плитка в полтора раза шире соседних. Grid умеет только ЦЕЛЫЕ колонки, поэтому сетку
   режем на половинные: обычная плитка занимает две, широкая — три. Иначе «шире на 50 %»
   средствами grid не выразить вовсе.
   */
@media (min-width: 900px) {
    .cards.half-grid            { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .cards.half-grid > .card    { grid-column: span 2; }
    .cards.half-grid > .card.wide { grid-column: span 3; }
}
.card h3 { margin: 0 0 6px; padding: 0; font-size: 16px; }
/* Иконки в заголовках плиток — svg в currentColor, красятся темой (в отличие от эмодзи,
   у которых свой фон внутри глифа и на тёмной теме он светится). */
.card h3 svg { width: 17px; height: 17px; vertical-align: middle; margin-right: 6px; }
.card .muted { color: var(--text-dim); font-size: 13px; }
.card.todo { opacity: 0.75; border: 1px dashed var(--border-2); background: transparent; }
/* Плитка-кат: заголовок сам раскрывает содержимое. Маркер оставлен штатный —
   он единственное, что отличает раскрываемую плитку от обычной. h3 делаем строчным,
   иначе блочный заголовок уезжает со строки маркера и стрелка висит сама по себе.
   Закрытому кату нижний отступ заголовка не нужен: под ним ничего нет. */
.card.cut > summary { cursor: pointer; }
.card.cut > summary h3 { display: inline-block; margin-bottom: 0; vertical-align: baseline; }
.card.cut[open] > summary h3 { margin-bottom: 6px; }
/* Плитка-ссылка (список разделов админки). Цвет текста у .card и у A совпадает, поэтому
   кликабельность показываем только на наведении — иначе плитка ничем не отличается от обычной. */
a.card:hover        { background: var(--row-even); }
a.card:hover h3     { color: var(--accent); }
/* Плитка целиком кликабельная, но внутри есть свои ссылки (mailto/tel) и кнопки, а вложенная
   ссылка в ссылке недопустима. Поэтому ссылка-растяжка: пустой A поверх всей плитки, а то,
   что должно нажиматься само, поднимаем над ним слоем (.card-top). */
.card.card-hit          { position: relative; }
.card.card-hit:hover    { background: var(--row-even); }
.card.card-hit:hover h3 a { color: var(--accent); }
.card .card-hit-a       { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.card .card-top         { position: relative; z-index: 2; }   /* почта, телефон, кнопка «восстановить» */

/* ── Сканер QR с наклейки (страница регистрации датчика) ────────────────
   Оверлей намеренно ЧЁРНЫЙ в любой теме: под ним живое видео с камеры,
   и светлая подложка вокруг кадра только мешает целиться.
   z-index выше шапки (1000), иначе она проступает поверх камеры. */
.scan-ui {
    display: none;              /* показывается скриптом (flex) */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;               /* запасной вариант для iOS без dvh */
    height: 100dvh;             /* iOS 16+: высота С УЧЁТОМ панелей Safari, иначе низ уезжает за экран */
    z-index: 1100;              /* выше шапки (1000) — она не должна проступать поверх камеры */
    background: #000;           /* непрозрачный: под оверлеем не должно быть видно ничего лишнего */
    flex-direction: column;     /* 🔴 без него дети встают В СТРОКУ и подписи уезжают за правый край */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px 10px;
    box-sizing: border-box;
    overflow: hidden;
}
/* Стойка обжимает видео вплотную: object-fit не задаём, поэтому размер элемента
   совпадает с картинкой — и рамка прицела ложится ровно туда, где её ждёт скрипт. */
.scan-stage { position: relative; line-height: 0; max-width: 100%; }
/* 🔴 Ограничения обязательны: поток приходит 1280x720, и без них видео растягивается
   в натуральную величину. */
.scan-ui video {
    display: block;
    width: auto; height: auto;
    max-width: 92vw;
    max-height: 46vh;
    max-height: 46dvh;
    border-radius: 8px;
    background: #000;
}
/* Рамка прицела. Сторона = 60% меньшей стороны кадра — ровно тот вырез, который уходит
   в распознаватель. Размер в процентах нужен на первые кадры, дальше скрипт ставит точный
   в пикселях. Огромная тень затемняет всё вокруг рамки: видно, что именно разбирается. */
.scan-box {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    aspect-ratio: 1 / 1;
    max-width: 60%;
    border: 2px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 0 9999px #00000059;
    pointer-events: none;
}
.scan-msg  { color: #fff;    font-size: 15px; text-align: center; margin: 0; }
.scan-hint { color: #b4b5b6; font-size: 13px; text-align: center; max-width: 420px; margin: 0; }
/* Закрытие — в углу поверх кадра. */
.scan-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
}

/* ── Карта датчика ────────────────────────────────────────────────────── */
/* Оверлей по образцу сканера, но фон НЕ чёрный: карта светлая сама по себе,
   и чёрные поля вокруг неё смотрелись бы дырой в странице. */
.map-ui {
    display: none;              /* показывается скриптом (flex) */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;               /* запасной вариант для iOS без dvh */
    height: 100dvh;             /* иначе низ уезжает под панели Safari */
    z-index: 1100;              /* выше шапки (1000) */
    background: var(--bg);
    flex-direction: column;     /* без него дети встают в строку */
    gap: 10px;
    padding: 10px 12px 10px;
    box-sizing: border-box;
}
.map-ui .map-head {
    display: flex; align-items: center; gap: 10px;
    padding-right: 44px;        /* место под кнопку закрытия, иначе имя лезет под неё */
    color: var(--text-muted); font-size: 14px;
}
/* 🔴 Карте нужна ЯВНАЯ высота: контейнер нулевой высоты Яндекс отрисует пустым,
   и это выглядит как «ключ не подошёл». flex:1 отдаёт ей весь остаток оверлея. */
.map-stage {
    flex: 1 1 auto;
    width: 100%; min-height: 200px;
    border-radius: 8px; overflow: hidden;
    background: var(--surface-2);
}
.map-close { position: absolute; top: 10px; right: 12px; z-index: 1; }
/* Легенда общей карты: кружок цвета метки + подпись типа. Переносится по строкам. */
.map-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: 13px; color: var(--text-muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* Кружок цвета в таблице типов датчиков (админка). Тот же вид, что у легенды карты —
   человек должен узнавать один и тот же цвет в обоих местах. */
.kind-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 1px var(--border);
}
.map-legend i {
    width: 10px; height: 10px; border-radius: 50%;
    /* Обводка нужна на светлой теме: жёлтая метка на белом почти не видна. */
    box-shadow: 0 0 0 1px var(--border);
}

/* ── Раздел «Датчики»: список слева, карточка справа ──────────────────── */
.split { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 12px; align-items: start; }
.split-list  { min-width: 0; }
.split-detail { min-width: 0; }
/* Высота графика задаётся контейнером: canvas у Chart.js сам по себе тянется
   бесконечно при maintainAspectRatio: false. */
.chartwrap { position: relative; height: 300px; margin-top: 8px; }

/* Любая широкая таблица оборачивается в <div class="tablewrap"> */
.tablewrap { overflow-x: auto; }

/* ── Файлы проекта: список слева, карточка файла справа ───────────────── */
.split.files { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.split.files .split-detail .card { position: sticky; top: 8px; }
.split.files .split-detail dl { margin: 0; }
.split.files .split-detail dt { color: var(--text-dim); font-size: 12px; margin-top: 8px; }
.split.files .split-detail dd { margin: 0; color: var(--text-muted); word-break: break-word; }
/* Фильтр по типу: кнопки переносятся */
.type-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.type-filter .btn { padding: 4px 10px; font-size: 13px; }

/* ── Библиотека «как в эксплорере» (22.09.2026): дерево папок | список | сводка ───── */
/* Библиотека — во всю ширину, как чат и почта (владелец, 22.09.2026: «чего жмёмся в середине экрана») */
.container:has(.explorer) { max-width: 1980px; }
.explorer { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(320px, 420px); gap: 14px; align-items: start; }
.explorer .split-detail .card { position: sticky; top: 8px; }
.explorer .split-detail dl { margin: 0; }
.explorer .split-detail dt { color: var(--text-dim); font-size: 12px; margin-top: 8px; }
.explorer .split-detail dd { margin: 0; color: var(--text-muted); word-break: break-word; }
.x-tree { background: var(--surface); border-radius: 8px; padding: 8px 6px; font-size: 13px; }
.x-tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.x-tree details > summary::-webkit-details-marker { display: none; }
.x-tree details > summary::before { content: '▸'; color: var(--text-dim); width: 12px; flex: none; font-size: 11px; }
.x-tree details[open] > summary::before { content: '▾'; }
.x-tree .x-leaf { display: flex; align-items: center; }
.x-tree .x-leaf::before { content: ''; width: 12px; flex: none; }
.x-tree .x-kids { padding-left: 12px; }
.x-tree .x-kids .x-kids { padding-left: 10px; }
.x-node { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; color: var(--text-muted); text-decoration: none; min-width: 0; flex: 1; }
.x-node svg { width: 14px; height: 14px; flex: none; margin: 0 !important; }
.x-node span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-node i { font-style: normal; color: var(--text-dim); font-size: 11px; margin-left: auto; padding-left: 6px; }
.x-node:hover { background: var(--surface-2); }
.x-node.cur { background: var(--surface-2); color: var(--accent); }
.x-node.root { font-weight: bold; margin-bottom: 2px; }
.x-node.trash { margin-top: 8px; border-top: 1px solid var(--border-2); border-radius: 0 0 5px 5px; padding-top: 6px; }
.x-main { position: relative; min-width: 0; }
.x-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 30px; }
.x-crumbs { flex: 1; min-width: 0; font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-crumbs a { color: var(--accent); text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.x-crumbs b { color: var(--text-strong); font-weight: normal; }
.x-crumbs .sep { color: var(--text-dim); margin: 0 4px; }
.x-tools { display: flex; gap: 4px; flex: none; }
.x-types { margin-bottom: 8px; }
.x-inline { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.x-inline[hidden], .x-upload[hidden] { display: none !important; }   /* display:flex перебивал атрибут hidden — форма «название папки» торчала всегда */
.x-listwrap { position: relative; background: var(--surface); border-radius: 8px; min-height: 120px; overflow-x: auto; }
.x-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.x-table th { text-align: left; font-weight: normal; color: var(--text-dim); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border-2); user-select: none; white-space: nowrap; }
.x-table th[data-sort] { cursor: pointer; }
.x-table th[data-sort]:hover { color: var(--text-muted); }
.x-table th.asc::after  { content: ' ▲'; font-size: 9px; }
.x-table th.desc::after { content: ' ▼'; font-size: 9px; }
.x-table td { padding: 5px 8px; border: 0; color: var(--text-muted); vertical-align: middle; }
.x-table tbody tr { cursor: default; }
.x-table tbody tr:hover { background: var(--surface-2); }
.x-table tbody tr.sel { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.x-table tbody tr.sel .x-name { color: var(--text-strong); }
.x-table tbody tr.dragging { opacity: 0.5; }
.x-table tr.x-dir td { color: var(--text-strong); }
.x-table tr.x-dir svg { width: 16px; height: 16px; color: var(--accent); margin: 0 !important; display: block; }
.x-table th.num, .x-table td.num { text-align: right; }
.x-table td.dim { color: var(--text-dim); }
.x-table td.nowrap { white-space: nowrap; }
.x-table .x-c-badge { width: 44px; padding-right: 0; }
.x-table .x-c-eye { width: 1%; padding: 0 2px; text-align: center; }
.x-table .x-c-chk { width: 1%; padding: 0 2px 0 8px; white-space: nowrap; }
.x-table .x-c-chk input { margin: 0; vertical-align: middle; cursor: pointer; }
.x-table .x-c-del { width: 1%; padding: 0 6px 0 2px; text-align: center; }
.x-del { background: transparent; border: 0; padding: 0 4px; cursor: pointer; color: var(--text-dim); vertical-align: middle; }
.x-del:hover:not(:disabled) { color: var(--danger); }
.x-del:disabled { opacity: .35; cursor: default; }
.x-del svg { margin-right: 0 !important; width: 15px; height: 15px; }
.x-table tbody tr .x-del-one { visibility: hidden; }
.x-table tbody tr:hover .x-del-one, .x-table tbody tr.sel .x-del-one { visibility: visible; }
.x-table .x-name { color: var(--text-muted); }
.x-badge { display: inline-block; min-width: 30px; text-align: center; font-size: 9px; font-weight: bold; letter-spacing: .3px; padding: 2px 4px; border-radius: 3px; color: #fff; background: #7a8290; line-height: 1.2; }
.x-badge.x-pdf { background: #c0392b; } .x-badge.x-doc { background: #2b579a; } .x-badge.x-xls { background: #1e7145; } .x-badge.x-ppt { background: #d04a02; }
.x-badge.x-txt { background: #5b6b7a; } .x-badge.x-img { background: #7b3fa0; } .x-badge.x-aud { background: #c77d00; } .x-badge.x-vid { background: #8a2e6b; } .x-badge.x-zip { background: #6b5b3e; }
.x-empty { color: var(--text-dim); padding: 24px 12px; margin: 0; text-align: center; }
.x-dropzone { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent); font-size: 14px; pointer-events: none; z-index: 2; }
.x-dropzone svg { width: 18px; height: 18px; margin: 0 !important; }
.x-main.drop-files .x-dropzone, .x-main.busy .x-dropzone { display: flex; }
.x-upload { margin-top: 12px; }
[data-drop].drop-over { background: var(--surface-2); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 5px; }
[data-drop].drop-over * { pointer-events: none; }

/* ── Чат с Claude (desk/claude.php) ──────────────────────────────────────── */
.chat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.chat-side .chat-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 370px); overflow-y: auto; }
.chat-go { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.chat-go .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; padding: 5px 6px; white-space: nowrap; }
.chat-item { display: block; padding: 6px 10px; border-radius: 6px; background: var(--surface); color: var(--text-muted); }
.chat-item:hover { background: var(--surface-2); color: var(--text-muted); }
.chat-item.active { background: var(--surface-2); border-left: 3px solid var(--accent); }
.chat-item-client { font-size: 13px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-client { color: var(--accent); font-size: 15px; }
.chat-item-sub { font-size: 11px; color: var(--text-dim); }
/* Высота чата — по экрану: шапка сайта + заголовок + отступы ≈ 175px, ещё ~20px (одна строка)
   оставляем снизу, чтобы окно не уползало за край. Лента внутри тянется flex'ом. */
.chat-main { background: var(--surface); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; height: calc(100vh - 172px); box-sizing: border-box; }
.chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); margin-bottom: 8px; }
/* Все элементы шапки — flex-строки по центру, иначе иконки (vertical-align:middle) и select сбивают текст по вертикали */
.chat-top > span, .chat-top > a, .chat-top form > span { display: inline-flex; align-items: center; line-height: 1; }
.chat-top svg { flex: 0 0 auto; } .chat-top select { vertical-align: middle; }
.chat-top form { margin: 0; }   /* страницы без <!DOCTYPE> — браузер даёт form нижний отступ 1em, и «База» уезжала вверх */
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 92%; }
.msg-user { align-self: flex-end; }
.msg-user .msg-body { background: var(--accent); color: var(--on-accent); border-radius: 10px 10px 2px 10px; padding: 8px 12px; white-space: pre-wrap; }
.msg-ai { align-self: flex-start; }
.msg-ai .msg-body { background: var(--bg); color: var(--text-muted); border-radius: 10px 10px 10px 2px; padding: 8px 12px; }
.msg-ai .msg-body p:first-child { margin-top: 0; } .msg-ai .msg-body p:last-child { margin-bottom: 0; }
.msg-ai .msg-body p, .msg-ai .msg-body li { color: var(--text-muted); }
.msg-ai .msg-body h1, .msg-ai .msg-body h2, .msg-ai .msg-body h3 { padding: 0; margin: 8px 0 4px; font-size: 15px; }
.msg-ai .msg-body pre { background: var(--surface-2); padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.msg-ai .msg-body code { background: var(--surface-2); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.msg-ai .msg-body pre code { background: none; padding: 0; }
/* «Источники» под катом у ответов с веб-поиском (21.09.2026): details/summary из markdown */
.msg-ai .msg-body details { margin-top: 6px; font-size: 12px; } .msg-ai .msg-body details summary { cursor: pointer; color: var(--text-dim); } .msg-ai .msg-body details ol { margin: 4px 0 0; padding-left: 20px; } .msg-ai .msg-body details li { color: var(--text-dim); }
.msg-ai .msg-body .tw { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.msg-ai .msg-body table { border-collapse: collapse; font-size: 13px; line-height: 1.3; }
.msg-ai .msg-body th { font-weight: 600; background: var(--surface-2); } .msg-ai .msg-body td, .msg-ai .msg-body th { border: 1px solid var(--border-2); padding: 3px 8px; white-space: nowrap; }
.msg-tool { align-self: flex-start; font-size: 12px; color: var(--text-dim); }
.msg-tool summary { cursor: pointer; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.msg-tool .tool-name { color: var(--accent); }
.msg-tool pre { margin: 4px 0 0 14px; font-size: 11px; white-space: pre-wrap; max-height: 200px; overflow: auto; color: var(--text-dim); }
.msg-result { align-self: flex-start; font-size: 11px; color: var(--text-dim); padding-left: 4px; }
.msg-result.err { color: var(--danger); }
.chat-input { margin-top: 8px; border-top: 1px solid var(--border-2); padding-top: 8px; }
.chat-input textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 14px; margin-bottom: 6px; font-family: inherit; }
/* Микрофон (22.09.2026, js/mic.js): .btn-mic — держишь: красная с секундомером, отпустил: «распознаю…» (основной чат, почтовый чат,
   черновик). Кнопка отправки во время автоотправки — по ней ползёт полоса .send-prog со стрелкой (2 с, ширину ведёт js), клик — остановить. */
.btn-mic { position: relative; }
.btn-mic .mic-sec { display: none; font-size: 12px; margin-left: 4px; line-height: 1; }
.btn-mic.rec { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-mic.rec svg { margin-right: 4px !important; display: inline-block; animation: mic-pulse 1s ease-in-out infinite; }
.btn-mic.rec .mic-sec { display: inline; }
.btn-mic.wait { opacity: .6; cursor: progress; }
.btn-mic:disabled { opacity: .45; cursor: not-allowed; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.btn.countdown { position: relative; overflow: hidden; cursor: pointer; }
.btn .send-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.3); pointer-events: none; border-right: 2px solid #fff; }
.btn .send-prog::after { content: '➜'; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; color: #fff; }
.mail-chat-form .btn-mic.rec { line-height: 1; }
#chat-mic-note, #mchat-mic-note { color: var(--danger); font-size: 12px; }

/* ── Шапка карточки проекта: во всю ширину, свойства в несколько колонок ─── */
.client-head { margin-bottom: 4px; }
.client-head h3 { font-size: 18px; }
/* Обязательные три — строкой на всю ширину плитки, поровну */
.props-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
/* Остальные свойства — «название | значение», значение растягивается на всю ширину */
.props-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-2); align-items: baseline; }
.props-list .prop-k { max-width: 220px; }
.prop-k { color: var(--text-dim); font-size: 12px; }
.prop-v { color: var(--text-muted); font-size: 15px; word-break: break-word; min-width: 0; }
/* вложения в чате */
.chat-attach { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); color: var(--text-muted); border-radius: 12px; padding: 2px 10px; font-size: 12px; }
.chip svg { width: 12px; height: 12px; margin-right: 2px !important; }
.chip-x { cursor: pointer; color: var(--text-dim); font-size: 14px; margin-left: 2px; }
.chip-x:hover { color: var(--danger); }
.msg-user .msg-files { margin-top: 6px; }
.msg-user .chip { background: rgba(255,255,255,0.2); color: var(--on-accent); }
.chat-main.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* карточки файлов в чате (результаты хода) */
.msg-filecards { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; max-width: 92%; }
.file-card { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px; padding: 8px 10px; min-width: 260px; }
.file-ext { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: bold; border-radius: 5px; padding: 8px 6px; min-width: 34px; text-align: center; }
.file-info { min-width: 0; flex: 1; }
.file-name { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.file-sub { color: var(--text-dim); font-size: 11px; }
.file-btns { display: flex; gap: 4px; white-space: nowrap; }

/* ── Редактор плана (desk/plan_edit.php) ─────────────────────────────────── */
.pe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.pe-canvas-wrap { background: var(--surface); border-radius: 8px; padding: 8px; }
.pe-toolbar { margin-bottom: 6px; }
.pe-toolbar .btn { padding: 4px 10px; font-size: 13px; }
.pe-canvas { width: 100%; height: calc(100vh - 260px); min-height: 420px; background: var(--bg); border-radius: 6px; overflow: hidden; cursor: default; }
.pe-canvas svg { width: 100%; height: 100%; display: block; touch-action: none; }
.pe-obj { cursor: move; }
.pe-handle { cursor: nwse-resize; }
.pe-warn { display: none; margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--danger); color: var(--danger); font-size: 12px; background: var(--bg); border-radius: 4px; }
.pe-side .card label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.pe-side .card label input, .pe-side .card label select { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; }
.pe-kind { color: var(--accent); font-weight: bold; margin-bottom: 8px; }

/* ── Редактор документа (desk/doc_edit.php) ──────────────────────────────── */
.de-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.de-toolbar { margin-bottom: 8px; } .de-toolbar .btn { padding: 4px 10px; font-size: 13px; }
.de-blocks { display: flex; flex-direction: column; gap: 6px; }
.de-block { background: var(--surface); border-radius: 6px; padding: 6px 10px 8px; border-left: 3px solid var(--border-2); }
.de-block.de-h2 { border-left-color: var(--accent); } .de-block.de-h3 { border-left-color: var(--share); }
.de-block.de-comment { opacity: 0.7; border-left-style: dashed; }
.de-head { display: flex; align-items: center; margin-bottom: 4px; }
.de-type { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.de-ctl { margin-left: auto; display: flex; gap: 2px; }
.de-ctl button, .de-kv button, .de-table button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 5px; font-size: 13px; }
.de-ctl button:hover, .de-kv button:hover, .de-table button:hover { color: var(--danger); }
.de-block input.de-h { width: 100%; box-sizing: border-box; font-weight: bold; font-size: 14px; }
.de-block textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; font-size: 13px; line-height: 1.35; font-family: inherit; }
.de-front .de-frow { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 12px; color: var(--text-dim); }
.de-front .de-frow input { width: 100%; box-sizing: border-box; }
.de-kv { width: 100%; border-collapse: collapse; } .de-kv td { padding: 2px 3px; vertical-align: top; }
.de-kv td:first-child { width: 32%; } .de-kv td:first-child input { width: 100%; box-sizing: border-box; font-weight: bold; }
.de-table { border-collapse: collapse; min-width: 100%; } .de-table th, .de-table td { padding: 2px 3px; vertical-align: top; border: 1px solid var(--border-2); }
.de-table th { background: var(--surface-2); position: relative; } .de-table th textarea { font-weight: bold; }
.de-table th button { position: absolute; right: 0; top: 0; }
.de-add { background: none; border: 1px dashed var(--border-2); color: var(--text-dim); border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; margin-top: 4px; }
.de-add:hover { color: var(--accent); border-color: var(--accent); }

/* Редакторы плана и документа — во всю ширину экрана (общий .container ограничен 1100px) */
.container:has(.pe-layout), .container:has(.de-layout) { max-width: none; padding-left: 20px; padding-right: 20px; }
/* Чат — шире обычных страниц (1100px): таблицы и графики; 2200 было много, 1980 (17.09.2026) */
.container:has(.chat-layout) { max-width: 1980px; }
.pe-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.pe-canvas { height: calc(100vh - 230px); }
.de-layout { grid-template-columns: minmax(0, 1fr) 300px; }
/* поле цвета в редакторе плана: короткий текст + квадрат-палитра + сброс */
.pe-color { display: flex; gap: 4px; align-items: center; }
.pe-color input[type=text] { width: 80px !important; font-family: monospace; }
.pe-color input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border-2); border-radius: 4px; background: none; cursor: pointer; }
.pe-color button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 4px; }
.pe-color button:hover { color: var(--danger); }

/* ── Пометка «кто ответил» под сообщением ассистента (provider ≠ claude): Яндекс · модель · режим ── */
.msg-provider { font-size: 11px; color: var(--text-dim); opacity: .8; margin: 2px 0 0 10px; }

/* Оценка ответа (19.09.2026): палец вверх/вниз под ответом Алисы. Появляются при наведении на ответ,
   выставленная оценка видна всегда (.set). Оценка относится ко всему ходу — см. desk/chat_rate.php. */
.msg-rate { display: flex; gap: 2px; margin: 2px 0 0 8px; opacity: 0; transition: opacity .12s; }
.msg-ai:hover .msg-rate, .msg-rate:focus-within, .msg-rate.set { opacity: 1; }
.msg-rate button { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 3px 6px; line-height: 0; border-radius: 6px; }
.msg-rate button:hover { background: var(--surface-2); color: var(--text-muted); }
.msg-rate button.on[data-val="1"] { color: var(--ok); }
.msg-rate button.on[data-val="-1"] { color: var(--danger); }
.btn-resend { font-size: 11px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* Кат в ответах чата (js/chat.js, cut()): длинные таблицы и списки свёрнуты до .cut-h, кнопка разворачивает */
.msg-ai .msg-body .cut { position: relative; max-height: 230px; overflow: hidden; }
.msg-ai .msg-body .cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.msg-ai .msg-body .cut.open { max-height: none; } .msg-ai .msg-body .cut.open::after { display: none; }
.msg-ai .msg-body .cut-btn { display: inline-block; margin: 4px 0 6px; font-size: 12px; color: var(--accent); background: none; border: 1px solid var(--border-2); border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.msg-result a.xlsx { color: var(--accent); text-decoration: none; margin-left: 6px; }
.msg-ai .msg-body img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border-2); display: block; margin: 4px 0; }
/* Удаление хода: крестик у сообщения человека, виден при наведении */
.msg-user { position: relative; }
/* Крестик «удалить ход» слева от пузыря. Зона наведения продлена влево псевдоэлементом, чтобы по пути к крестику
   курсор не выходил из сообщения (17.09.2026: «пока веду к крестику — он исчезает»); показ через opacity, а не display,
   чтобы сам крестик оставался под курсором. */
.msg-user::before { content: ''; position: absolute; left: -34px; top: 0; bottom: 0; width: 34px; }
.msg-user .turn-del { position: absolute; left: -26px; top: 6px; opacity: 0; transition: opacity .12s; }
.msg-user:hover .turn-del, .msg-user .turn-del:hover, .msg-user .turn-del:focus-within { opacity: 1; }
.msg-user .turn-del button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.msg-user .turn-del button:hover { color: var(--danger); }
/* Плитки «какие графики умею» (inc/ai_chart.php, ai_chart_types_answer) */
.msg-ai .msg-body .chart-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0; }
.msg-ai .msg-body .chart-tiles figure { margin: 0; border: 1px solid var(--border-2); border-radius: 8px; padding: 6px; background: var(--surface-2); }
.msg-ai .msg-body .chart-tiles figure img { width: 100%; height: auto; border: none; margin: 0 0 4px; background: white; }
.msg-ai .msg-body .chart-tiles figcaption { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.msg-ai .msg-body .chart-tiles figcaption i { color: var(--text-dim); }

/* ── Документ (черновик) справа от чата, 18.09.2026 ── */
.chat-layout.with-draft { grid-template-columns: 240px minmax(0, 1fr) minmax(360px, 44%); }
.draft-panel { background: var(--surface); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; height: calc(100vh - 172px); box-sizing: border-box; min-width: 0; }
.draft-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.draft-title { flex: 1 1 200px; min-width: 160px; font-size: 15px; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--text); padding: 4px 6px; border-radius: 6px; }
.draft-title:focus { border-color: var(--border); background: var(--bg); outline: none; }
.draft-body { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.draft-view { padding: 14px 18px; font-size: 14px; line-height: 1.5; }
.draft-view h1 { font-size: 20px; margin: 0 0 10px; } .draft-view h2 { font-size: 16px; margin: 16px 0 6px; } .draft-view h3 { font-size: 14px; margin: 12px 0 4px; }
.draft-view table { border-collapse: collapse; margin: 8px 0; font-size: 13px; } .draft-view th, .draft-view td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; } .draft-view th { background: rgba(128,128,128,.12); }
.draft-view ul, .draft-view ol { padding-left: 22px; } .draft-view p { margin: 6px 0; }
.draft-edit { width: 100%; height: 100%; min-height: 300px; box-sizing: border-box; border: 0; padding: 14px 18px; font: 13px/1.45 ui-monospace, Consolas, monospace; background: var(--bg); color: var(--text); resize: none; }
.draft-foot { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; }
.draft-vbar { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; padding: 6px 8px; border: 1px dashed var(--border); border-radius: 8px; }
.draft-vbar #dv-label b { font-weight: 600; }
.draft-body.dv-browsing { border-style: dashed; opacity: .92; }
.draft-view .md-flash { animation: draftflash 1.2s ease-out; } @keyframes draftflash { from { background: rgba(60,160,90,.18); } to { background: transparent; } }
@media (max-width: 1100px) { .chat-layout.with-draft { grid-template-columns: 240px minmax(0, 1fr); } .draft-panel { grid-column: 1 / -1; height: 60vh; } }

/* ── Помощь (help.php), 18.09.2026 ── */
.help h3 { margin-top: 28px; border-bottom: 1px solid var(--border-2); }
.help h4 { margin: 18px 12px 6px; font-size: 15px; color: var(--text-bright); }
.help p, .help ul { margin: 6px 12px; color: var(--text-muted); line-height: 1.45; }
.help ul { padding-left: 20px; }
.help li { margin: 3px 0; }
.help li svg, .help p svg, .help h2 svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.help .toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 12px 10px; font-size: 14px; }
.help .toc a { color: var(--accent); }
.help .ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 6px 12px; align-items: start; }
.help .ex-q { background: var(--accent); color: var(--on-accent); border-radius: 10px 10px 2px 10px; padding: 6px 10px; font-size: 13px; justify-self: end; max-width: 100%; white-space: pre-line; }
.help .ex-a { background: var(--bg); color: var(--text-muted); border-radius: 10px 10px 10px 2px; padding: 6px 10px; font-size: 13px; }
.help .ex-a:empty { display: none; }
.help .ex-a small { color: var(--text-dim); }
.help .muted { color: var(--text-dim); font-size: 13px; }
.help .badge { font-size: 11px; font-weight: normal; background: var(--surface-2); color: var(--text-dim); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.help code { background: var(--surface-2); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* ── Почта (desk/mail.php): папки / список / письмо ─────────────────────────────── */
.container:has(.mail) { max-width: 1980px; }
.mail { --mail-list-w: 380px; position: relative; display: grid; grid-template-columns: 200px var(--mail-list-w) minmax(0, 1fr); gap: 10px; height: calc(100vh - 84px); min-height: 420px; }
.mail.with-chat { grid-template-columns: 200px var(--mail-list-w) minmax(0, 1fr) 380px; }   /* панель Януса — четвёртая колонка */
/* полоса между списком и письмом (23.09.2026): ширина списка 380..760 px, запоминается в mail_accounts.ui_list_w; в ячейку сетки не встаёт (absolute) */
.mail-split { position: absolute; top: 0; bottom: 0; left: calc(200px + 10px + var(--mail-list-w)); width: 10px; cursor: col-resize; z-index: 5; }
.mail-split::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 1px; background: transparent; transition: background .15s; }
.mail-split:hover::after, .mail.resizing .mail-split::after { background: var(--accent, #4a90e2); }
.mail.resizing { cursor: col-resize; user-select: none; }
.mail.resizing iframe { pointer-events: none; }   /* иначе iframe письма «съедает» движение мыши */
.mail > * { min-height: 0; }
.mail [hidden], .mail-modal[hidden] { display: none !important; }   /* свои display:flex сильнее атрибута hidden */
.mail .busy { opacity: 0.6; pointer-events: none; }
.mail-side { display: flex; flex-direction: column; gap: 8px; }
.mail-compose-btn { text-align: center; }
.mail-compose-btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
.mail-folders { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mail-folder { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; color: var(--text-muted); font-size: 14px; }
.mail-folder:hover { background: var(--surface); color: var(--text-muted); }
.mail-folder.active { background: var(--surface); border-left: 3px solid var(--accent); padding-left: 7px !important; color: var(--accent); }
.mail-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-folder.role-trash, .mail-folder.role-junk { color: var(--text-dim); }
.mail-unseen { font-size: 12px; background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 0 7px; font-weight: normal; }
.mail-n { font-size: 12px; color: var(--text-dim); }
.mail-status { font-size: 12px; color: var(--text-dim); padding: 4px 10px; display: flex; gap: 8px; justify-content: space-between; }

.mail-list-col { display: flex; flex-direction: column; background: var(--surface); border-radius: 8px; overflow: hidden; }
.mail-tools { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border-2); }
.mail-check-all { display: inline-flex; padding: 0 4px; }
.mail-search { flex: 1; min-width: 0; padding: 6px 8px; background: var(--surface-2); color: var(--text-bright); border: 1px solid var(--surface-2); border-radius: 5px; font-size: 13px; }
.mail-tools select { font-size: 12px; max-width: 120px; }
.mail-bulk { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border-2); font-size: 12px; color: var(--text-dim); }
.mail-bulk .btn { padding: 4px 7px; line-height: 0; }
.mail-bulk .btn svg { width: 16px; height: 16px; }
.mail-bulk #mail-bulk-n { margin-right: 6px; }
.mail-bulk #mail-bulk-all { margin-right: 8px; color: var(--accent); }
.mail-bulk .mail-bulk-btns { display: flex; gap: 4px; margin-left: auto; }
.mail-list { flex: 1; overflow-y: auto; }
.mail-none { padding: 24px; text-align: center; }
.mail-row { display: flex; align-items: flex-start; gap: 4px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border-2); cursor: pointer; color: var(--text-muted); }
.mail-row:hover { background: var(--surface-2); }
.mail-row.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.mail-row-grip { align-self: stretch; display: flex; align-items: center; padding: 0 1px 0 2px; color: transparent; cursor: grab; }   /* ручка перетаскивания — видна при наведении на строку */
.mail-row-grip svg { width: 15px; height: 15px; margin: 0; }
.mail-row:hover .mail-row-grip { color: var(--text-dim); }
.mail-row-grip:hover { color: var(--accent) !important; }
.mail-row-grip:active { cursor: grabbing; }
.mail-row-check { padding: 2px 2px 0 4px; }
.mail-row-star { padding: 0 3px; color: var(--text-dim); font-size: 15px; line-height: 1.2; }
.mail-row.flagged .mail-row-star { color: var(--hl-warm); }
.mail-row-star:hover { color: var(--hl-warm); }
.mail-row-main { flex: 1; min-width: 0; }
.mail-row-top { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.mail-row-who { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row-att { font-size: 11px; }
.mail-row-date { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.mail-row-subj { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mail-row-folder { font-size: 11px; color: var(--text-dim); background: var(--surface-2); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.mail-row-snip { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row.unseen .mail-row-who, .mail-row.unseen .mail-row-subj { color: var(--text-bright); font-weight: bold; }
.mail-row.unseen .mail-row-check { position: relative; }
.mail-pager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 6px; border-top: 1px solid var(--border-2); font-size: 12px; }
.mail-pager .btn { padding: 2px 10px; }

.mail-view { display: flex; flex-direction: column; background: var(--surface); border-radius: 8px; overflow: hidden; }
.mail-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-dim); gap: 6px; }
.mail-empty svg { width: 22px; height: 22px; }
.mail-msg { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.mail-msg-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--border-2); }
.mail-msg-subject { font-size: 18px; color: var(--accent); margin-bottom: 8px; word-break: break-word; }
.mail-msg-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; align-items: center; }
.mail-msg-actions .btn { padding: 5px 8px; line-height: 0; }
.mail-msg-actions .btn svg { width: 18px; height: 18px; }
.mail-msg-actions .mail-actions-gap { width: 10px; }
.mail-msg-actions .mail-star.on svg { fill: var(--hl-warm); stroke: var(--hl-warm); }
/* Подсказки кнопок письма и панели выделения: свои, а не браузерный title — появляются быстрее и заметнее (владелец, 21.09.2026) */
.mail .btn[data-tip] { position: relative; }
.mail .btn[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
    width: max-content; max-width: 240px; white-space: normal; text-align: left;
    padding: 5px 9px; border-radius: 5px; font-size: 12px; line-height: 1.3; font-weight: normal;
    background: var(--text-bright); color: var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.mail .btn[data-tip]:hover::after { opacity: 1; transition-delay: 1s; }   /* всплывает через 1 с (при обычном нажатии не успевает), гаснет сразу (владелец, 21.09.2026) */
.mail .btn[data-tip]:active::after { opacity: 0; transition: none; }   /* нажали — подсказка не нужна, гасим сразу */
.mail .btn[data-tip]:last-child::after { left: auto; right: 0; }   /* последняя кнопка — подсказка влево, чтобы не уехать за край */
.mail-bulk .btn[data-tip]::after { left: auto; right: 0; max-width: 200px; }   /* панель выделения прижата вправо в колонке 380px с overflow hidden: от правого края первой кнопки до левого края колонки ~225px — шире подсказку режет (владелец, 21.09.2026) */
.mail-msg-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: 13px; }
.mail-msg-meta dt { color: var(--text-dim); }
.mail-msg-meta dd { margin: 0; color: var(--text-muted); word-break: break-word; }
.mail-blocked { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.mail-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mail-atts:empty { display: none; }
.mail-att { font-size: 12px; background: var(--surface-2); border-radius: 6px; padding: 3px 8px; color: var(--text-muted); }
.mail-body { flex: 0 0 auto; width: 100%; border: 0; background: #fff; border-radius: 6px; min-height: 200px; display: block; }   /* письмо всегда на белом, и в тёмной теме */
.mail-row-fraud { color: var(--danger); font-size: 12px; margin-left: 4px; }
.mail-row-excl { visibility: hidden; color: var(--text-dim); font-size: 12px; margin-left: 6px; cursor: pointer; }   /* «убрать из списка» — только у списка Януса, по наведению */
.mail-row:hover .mail-row-excl { visibility: visible; }
.mail-row-excl:hover { color: var(--danger); }
.mail-folder-empty { display: none; margin-right: 2px; color: var(--text-dim); line-height: 0; cursor: pointer; }
.mail-folder-empty svg { width: 13px; height: 13px; margin: 0; }
.mail-folder:hover .mail-folder-empty, .mail-folder.active .mail-folder-empty { display: inline-block; }
.mail-folder-empty:hover { color: var(--danger); }
.mail-folder-name:has(+ .mail-folder-refresh) { flex: 0 1 auto; }   /* стрелка — сразу после слова «Входящие», счётчик остаётся справа */
.mail-folder-refresh { margin-right: auto; color: var(--text-dim); line-height: 0; cursor: pointer; }
.mail-folder-refresh svg { width: 13px; height: 13px; margin: 0; }
.mail-folder-refresh:hover { color: var(--accent); }
.mail-folder-refresh.spin svg { animation: mail-spin 1s linear infinite; }
.mail-folder-fold { color: var(--text-dim); line-height: 0; cursor: pointer; margin-right: 4px; }
.mail-folder-fold svg { width: 14px; height: 14px; margin: 0; transition: transform .15s; }
.mail-folder-fold.folded svg { transform: rotate(-90deg); }
.mail-folder-fold:hover { color: var(--accent); }
/* кнопки папки при наведении: создать / переименовать / удалить (21.09.2026) */
.mail-folder-ops { display: none; gap: 3px; line-height: 0; margin-left: 4px; }
.mail-folder:hover .mail-folder-ops { display: inline-flex; }
.mail-folder-op { color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: 4px; }
.mail-folder-op svg { width: 13px; height: 13px; margin: 0; }
.mail-folder-op:hover { color: var(--accent); background: var(--bg); }
.mail-folder-op[data-op="delete"]:hover { color: var(--danger); }
.mail-folder.editing { cursor: default; }
.mail-folder-input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 14px; padding: 1px 5px; border: 1px solid var(--accent); border-radius: 4px; background: var(--bg); color: var(--text); outline: none; }
.mail-folder-name:has(> .mail-folder-input) { overflow: visible; }
@keyframes mail-spin { to { transform: rotate(360deg); } }
/* Перетаскивание письма в папку (21.09.2026): тянутая строка бледнеет, папка под курсором подсвечивается, ярлычок «N писем» при нескольких */
.mail-row.dragging { opacity: 0.35; }
.mail-folder.drop-over { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.mail-folder.drop-over * { pointer-events: none; }   /* dragleave не дёргается на детях */
.mail-drag-ghost { position: fixed; top: -100px; left: -100px; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 13px; white-space: nowrap; }
.mail-row-spam { font-size: 10px; color: var(--danger); border: 1px solid var(--danger); border-radius: 6px; padding: 0 4px; line-height: 14px; margin-left: 4px; }
.mail-spam { font-size: 13px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 6px 10px; margin: 4px 0 8px; }
.mail-spam a, .mail-fraud a { color: var(--accent); margin-left: 6px; }
.mail-fraud { font-size: 13px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid var(--danger); border-radius: 6px; padding: 6px 10px; margin: 4px 0 8px; }
.mail-trash-note { font-size: 12px; color: var(--danger); margin: 4px 0 8px; }
.mail-trash-note svg { width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; }

.mail-form { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; height: 100%; box-sizing: border-box; overflow-y: auto; }
.mail-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mail-form-head b { color: var(--accent); font-size: 16px; }
.mail-form-head .btn { margin-left: auto; padding: 3px 9px; font-size: 12px; }
.mail-form label { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.mail-form label .form-control { margin: 0; }
.mail-bcc-link { font-size: 12px; margin-left: 68px; }
.mail-ac { position: absolute; z-index: 30; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); padding: 4px; box-sizing: border-box; }
.mail-ac-item { padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-ac-item b { color: var(--text); font-weight: 500; }
.mail-ac-item span { color: var(--text-dim); }
.mail-ac-item.sel, .mail-ac-item:hover { background: var(--surface-2); }
.mail-ac-item.sel b, .mail-ac-item:hover b { color: var(--accent); }
.mail-form-body { flex: 1; min-height: 220px; resize: vertical; font: 14px/1.45 sans-serif; margin: 0 !important; }
.mail-form-foot { display: flex; align-items: center; gap: 10px; }
.mail-form-foot .spacer { flex: 1; }
.mail-form-foot label.btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.mail-form.drop-over { box-shadow: inset 0 0 0 2px var(--accent); }
.mail-form-files { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
.mail-form-file { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: var(--surface); }
.mail-form-file i { font-style: normal; color: var(--text-dim); }
.mail-form-file a { color: var(--text-dim); text-decoration: none; font-size: 14px; line-height: 1; }
.mail-form-file a:hover { color: var(--danger); }
.mail-form-files.over .mail-form-file { color: var(--danger); }
.mail-form-files { font-size: 12px; color: var(--text-dim); }

.mail-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; }
.mail-modal-box { background: var(--surface); border-radius: 8px; padding: 14px 16px; width: min(360px, 92vw); max-height: 80vh; display: flex; flex-direction: column; gap: 10px; }
.mail-modal-title { color: var(--accent); font-size: 15px; }
.mail-modal-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mail-move-item { text-align: left; background: transparent; border: 0; color: var(--text-muted); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.mail-move-item:hover { background: var(--surface-2); color: var(--accent); }
.mail-move-item.role-trash, .mail-move-item.role-junk { color: var(--text-dim); }

@media (max-width: 1400px) { .mail.with-chat { grid-template-columns: 170px 320px minmax(0, 1fr) 340px; } }
@media (max-width: 1100px) { .mail { grid-template-columns: 170px 320px minmax(0, 1fr); } .mail.with-chat { grid-template-columns: 170px 320px minmax(0, 1fr); } .mail.with-chat .mail-chat { grid-column: 3; grid-row: 1; z-index: 3; box-shadow: -4px 0 16px rgba(0,0,0,.15); } }
/* Панель Януса в почте (20.09.2026) */
.mail-chat { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; min-height: 0; overflow: hidden; }
.mail-chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.mail-chat-head b { display: inline-flex; align-items: center; color: var(--accent); }
.mail-chat-head .btn { padding: 3px 6px; line-height: 0; }
.mail-chat-head .btn:first-of-type { margin-left: auto; }
.mail-chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.mail-chat-log .msg { max-width: 96%; font-size: 13px; }
.mail-chat-log .msg-ai .msg-body { padding: 6px 10px; }
.mail-chat-log .msg-user .msg-body { padding: 6px 10px; }
.mail-chat-log .msg-result.err { color: var(--danger); }
.mail-chat-log .msg-provider { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.mail-chat-status { font-size: 11px; padding: 0 10px; min-height: 16px; }
.mail-chat-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border-2); align-items: flex-end; }
.mail-chat-form textarea { flex: 1; resize: none; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg); color: var(--text); min-height: 76px; max-height: 220px; }
.mail-chat-form .btn { padding: 8px 9px; line-height: 0; }
.mail-chat-form .btn svg { width: 16px; height: 16px; margin: 0; }
.mail-filter { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; color: var(--accent); background: var(--surface-2); border-bottom: 1px solid var(--border-2); }
.mail-filter svg { width: 14px; height: 14px; margin: 0; }
.mail-filter span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-filter a { color: var(--text-dim); text-decoration: none; }
.mail-filter a[data-undo] { color: var(--accent); }
.mail-tools #mail-chat-btn { padding: 5px 7px; line-height: 0; }
.mail-tools #mail-chat-btn svg { width: 16px; height: 16px; margin: 0; }

/* «Глазик» в списке файлов проекта: кнопка и всплывающее окно с текстом/выжимкой (21.09.2026) */
.file-eye { background: transparent; border: 0; padding: 0 4px; cursor: pointer; color: var(--text-dim); vertical-align: middle; }
.file-eye:hover { color: var(--accent); }
.file-eye svg { margin-right: 0 !important; }
.file-view { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; }
.file-view[hidden] { display: none !important; }
/* плитка «Шаблоны» (settings/index.php, 23.09.2026): есть — обычным цветом и нажимается (превью), нет — серым */
.tpl-row { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; margin: 0 -8px 2px; font: inherit; color: var(--text-dim); }
.tpl-row .tpl-lab { font-size: 13px; }
.tpl-row .tpl-lab svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 6px; opacity: .6; }
.tpl-row .tpl-val { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-row .muted { font-size: 12px; }
.tpl-row:not(.have), .tpl-row:not(.have) .muted { color: var(--text-dim); opacity: .7; }
.tpl-row.have { cursor: pointer; color: var(--text-muted); }
.tpl-row.have .tpl-val { color: var(--accent); }
.tpl-row.have:hover { background: var(--surface-2); }
.tpl-img { display: flex; align-items: center; justify-content: center; min-width: 300px; min-height: 200px; }
.tpl-img img { display: block; max-width: 100%; max-height: 72vh; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.tpl-img img[hidden], .tpl-img span[hidden] { display: none; }
.file-view-box { background: var(--surface); border-radius: 8px; padding: 14px 16px; width: min(900px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; }
.file-view-head { display: flex; align-items: center; gap: 10px; }
.file-view-title { color: var(--accent); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-view-note { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.file-view-body { overflow-y: auto; color: var(--text-muted); font-size: 14px; line-height: 1.45; padding-right: 4px; }
.file-view-body.is-pre { white-space: pre-wrap; font-family: monospace; font-size: 13px; }
.file-view-body table { border-collapse: collapse; } .file-view-body td, .file-view-body th { border: 1px solid var(--border); padding: 3px 8px; }
.file-view-body h1, .file-view-body h2, .file-view-body h3 { color: var(--text-strong); }

/* Календарь (desk/calendar.php, 21.09.2026): сетка месяца по образцу календаря дежурств /scripts/oper-mob (table.cal там),
   справа карточка события. Цвет календаря — переменная --cal-color на плашке и точке. */
.container:has(.cal) { max-width: none; padding-left: 20px; padding-right: 20px; }   /* экран широкий, комп — не телефон (владелец, 21.09.2026): сетка на всю ширину, как почта */
.cal { display: grid; grid-template-columns: minmax(0, 1fr) 920px; gap: 10px; height: calc(100vh - 84px); min-height: 420px; }
.cal > * { min-height: 0; }
.cal [hidden] { display: none !important; }
.cal .busy { opacity: 0.6; pointer-events: none; }
.cal-main { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.cal-tools .cal-title { font-size: 16px; color: var(--accent); min-width: 150px; text-align: center; }
.cal-tools .cal-next svg { transform: rotate(180deg); }
.cal-tools .btn { padding: 4px 8px; line-height: 0; } .cal-tools #cal-today { line-height: 1.3; font-size: 12px; }
.cal-tools .btn svg { width: 16px; height: 16px; margin: 0; }
.cal-legend { flex: 1; display: flex; gap: 12px; justify-content: flex-end; font-size: 12px; color: var(--text-dim); margin-right: 6px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cal-color, var(--accent)); margin-right: 5px; vertical-align: -1px; }
.cal-days { flex: 1; overflow-y: auto; padding: 8px; }
.cal-grid { border-collapse: collapse; table-layout: fixed; width: 100%; }
.cal-grid td { border: 1px solid var(--border-2); vertical-align: top; padding: 0; width: 14.28%; }
.cal-cell { aspect-ratio: 1 / 1; box-sizing: border-box; padding: 3px; overflow: hidden; }   /* клетка всегда квадратная — по ширине колонки (владелец, 21.09.2026); лишние события за край не вылезают */
.cal-grid td.empty .cal-cell { display: none; }
.cal-grid tr.zag td { height: auto; text-align: center; font-weight: bold; padding: 4px 3px; color: var(--text-muted); }
.cal-grid td.wend { background: var(--row-odd, var(--surface-2)); }
.cal-grid td.empty { background: transparent; border-style: none; }   /* хвосты соседних месяцев: none, а не hidden — рамку соседа не гасит (см. oper-mob) */
.cal-grid td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-grid td.past .daynum { color: var(--text-dim); }
.cal-grid .daynum { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 15px; color: var(--text-muted); line-height: 1; margin-bottom: 4px; }
.cal-grid .daynum span { grid-column: 1; justify-self: start; }   /* число слева, как было; «+» — по середине строки (владелец, 21.09.2026) */
.cal-add { grid-column: 2; justify-self: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 18px; cursor: pointer; opacity: 0; }
.cal-grid td:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--accent); color: var(--on-accent); }
.cal-grid td.today .daynum { color: var(--accent); font-weight: bold; }
.cal-ev { font-size: 11px; line-height: 15px; padding: 1px 5px; margin: 0 0 2px; border-radius: 4px; cursor: pointer; color: var(--text); background: var(--surface-2);
          border-left: 3px solid var(--cal-color, var(--accent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev b { color: var(--text-muted); font-weight: 600; }
.cal-ev i { font-style: normal; color: var(--text-dim); }
.cal-ev.allday { background: var(--cal-color, var(--accent)); color: #222; border-left-color: transparent; }
.cal-ev.over { opacity: 0.55; }
.cal-ev:hover { background: var(--surface-2-hover); color: var(--on-accent); }
.cal-ev.active { outline: 2px solid var(--accent); outline-offset: -1px; opacity: 1; }
.cal-status { font-size: 11px; padding: 4px 10px; border-top: 1px solid var(--border-2); min-height: 16px; }
.cal-status.err { color: var(--danger); }
.cal-side { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; overflow-y: auto; }
.cal-empty { padding: 24px 16px; font-size: 15px; }
.cal-view { padding: 14px 16px; font-size: 16px; }
.cal-view .mail-form-head b { font-size: 19px; word-break: break-word; flex: 1; }
.cal-view .mail-msg-meta { font-size: 15px; gap: 4px 12px; }
.cal-view-btns { display: flex; gap: 4px; margin-left: auto; } .cal-view-btns .btn { padding: 4px 7px; line-height: 0; } .cal-view-btns .btn svg { width: 18px; height: 18px; margin: 0; }
.cal-form label { grid-template-columns: 80px 1fr; font-size: 14px; }
.cal-form .form-control { font-size: 15px; }
.cal-when { display: flex; align-items: center; gap: 6px; } .cal-when .form-control { width: auto; flex: 1; } .cal-when .cal-time { flex: 0 0 110px; } .cal-when .cal-date { flex: 0 0 170px; } .cal-when .cal-repeat { flex: 0 0 180px; } .cal-until { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cal-att-box { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; cursor: text; }   /* растёт по высоте с числом плашек */
.cal-att-box input { flex: 1; min-width: 160px; border: 0; background: transparent; color: var(--text-bright); font: inherit; outline: none; padding: 2px 0; }
.cal-att-box .cal-chip button { border: 0; background: transparent; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 0 0 0 5px; cursor: pointer; }
.cal-att-box .cal-chip button:hover { color: var(--danger); }
.cal-allday { font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); }
.cal-form-body { flex: 1; min-height: 140px; resize: vertical; font: 15px/1.45 sans-serif; margin: 0 !important; }
.cal-form .mail-form-head .btn { padding: 4px 7px; line-height: 0; } .cal-form .mail-form-head .btn svg { width: 18px; height: 18px; margin: 0; }
@media (max-width: 1700px) { .cal { grid-template-columns: minmax(0, 1fr) 640px; } }
.cal-att { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 13px; line-height: 17px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; cursor: default; }
.cal-chip.st-accepted { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-chip.st-declined { text-decoration: line-through; opacity: 0.6; }
.cal-desc { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-2); white-space: pre-wrap; word-break: break-word; color: var(--text-muted); font-size: 15px; line-height: 1.45; }
.cal-desc a { color: var(--accent); word-break: break-all; }

/* Расшифровка записи (22.09.2026): тайминги-ссылки для плеера панели; .now — реплика, которая сейчас звучит */
a.ts { color: var(--text-dim); text-decoration: none; font-family: ui-monospace, Consolas, monospace; font-size: 12px; border-bottom: 1px dotted var(--text-dim); }
a.ts:hover { color: var(--accent); border-color: var(--accent); }
a.ts.now { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); border-radius: 3px; }
.draft-audio { margin: 0 0 8px; }
.draft-audio audio { height: 32px; }
.msg-progress { color: var(--text-dim); font-size: 12px; font-style: italic; padding: 2px 10px; }

/* ── Заметки проекта (desk/notes.php, 22.09.2026): плитки как в iOS ─────────────── */
.notes-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.note { background: var(--surface); border-radius: 10px; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid transparent; }
.note.flag { border-top-color: #d33; }
.note-title { font-weight: bold; color: var(--text-strong); font-size: 15px; min-height: 20px; cursor: text; word-break: break-word; }
.note-title:empty::before, .note-body:empty::before { content: attr(data-ph); color: var(--text-dim); font-weight: normal; }
.note-body { color: var(--text-muted); font-size: 13px; white-space: pre-wrap; word-break: break-word; min-height: 36px; max-height: 260px; overflow: auto; cursor: text; line-height: 1.4; }
.note-title.editing, .note-body.editing { cursor: default; max-height: none; }
.note-edit { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--accent); border-radius: 5px; padding: 4px 6px; resize: vertical; }
.note-foot { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-2); }
.note-date { color: var(--text-dim); font-size: 11px; flex: 1; }
.note-marks { display: flex; gap: 2px; }
.nm { background: transparent; border: 0; cursor: pointer; padding: 2px 5px; border-radius: 4px; font-size: 15px; line-height: 1; color: var(--border-2); }
.nm:hover { background: var(--surface-2); color: var(--text-muted); }
.nm i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-2); vertical-align: middle; }
.note.flag .nm-flag { color: #e0342e; }
.note.star .nm-star { color: #f2b400; }
.note.led_red .nm-red i { background: #e0342e; box-shadow: 0 0 6px #e0342e; }
.note.led_green .nm-green i { background: #27b34b; box-shadow: 0 0 6px #27b34b; }
.nm-del { margin-left: 4px; font-size: 17px; }
.nm-del:hover { color: var(--danger); }

/* Метка файла «#185» в плитках файлов (23.09.2026): номер файла стал рабочей ссылкой в чате — синим, но не ярко */
.file-id { color: var(--file-id); font-weight: 500; }