/* ==========================================================================
   Директор ЭСИ — светлая тема, сентябрь 2026

   ПАЛИТРА ЗАДАНА ВЛАДЕЛЬЦЕМ. Добавлен ровно один цвет — --наведение
   (#F2F0EC): без подсветки строки таблица на триста строк не читается.
   Это не новый цвет, а фон, притемнённый на шаг.

   ⚠ АКЦЕНТ ТОЛЬКО НА ДЕЙСТВИЯХ. Кирпичный #C0392B встречается в четырёх
   местах и больше нигде: кнопка отправки, кнопка «Зарегистрировать»,
   полоса у активного раздела, ссылки. Ни фонов, ни рамок, ни заголовков.

   ⚠ ШРИФТЫ СИСТЕМНЫЕ, И ЭТО РЕШЕНИЕ, А НЕ ЭКОНОМИЯ. Подключение Google
   Fonts означало бы обращение к их серверам с адресом пользователя при
   каждом открытии страницы. Мы неделю разбирали каналы утечки — заводить
   новый ради начертания не стоит.

   ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО: пузырей вокруг сообщений, карточек со
   скруглением и тенью, ALL-CAPS подписей, стрелок в кнопках.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ⚠ HIDDEN ДОЛЖЕН ПОБЕЖДАТЬ. У разделов задан display:flex, а он сильнее
   встроенного display:none у атрибута [hidden] — и скрытые «Реестр» и
   «Записать письмо» показывались РЯДОМ с чатом, втроём в одну строку.
   Дефект приехал ещё из групп A и B: разметка правильная, скрипт
   правильный, а на экране три раздела сразу. Статическая проверка
   разметки такого не ловит — увидели только на снимке. */
[hidden] { display: none !important; }

:root {
    --фон:            #FAFAF8;
    --поле:           #FFFFFF;
    --текст:          #1A1A1A;
    --тихий:          #6B6B6B;
    --граница:        #E8E6E1;
    --наведение:      #F2F0EC;
    --акцент:         #C0392B;
    --акцент-навед:   #A93226;

    --колонка:        720px;
    --панель:         240px;
    --панель-узкая:   56px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    background: var(--фон);
    color: var(--текст);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.app { display: flex; height: 100vh; }

/* Колонка по центру — одна мера на чат, реестр и форму. */
.col {
    width: 100%;
    max-width: var(--колонка);
    margin: 0 auto;
}
.col-narrow { max-width: 560px; }

/* ⚠ ТАБЛИЦЕ НУЖНА ШИРИНА. 720px — мера РАЗГОВОРА: строка текста длиннее
   читается хуже. У реестра одиннадцать колонок, и в 720px он обрезался
   на «Исполнителе» — половина таблицы уезжала за край. Занимаем всё
   доступное, с потолком, чтобы на широком мониторе строки не растягивались
   через весь экран. */
.registry-area#registry-area .col { max-width: 1400px; }

/* ==========================================================================
   БОКОВАЯ ПАНЕЛЬ
   ========================================================================== */

.sidebar {
    width: var(--панель);
    min-width: var(--панель);
    background: var(--фон);
    border-right: 1px solid var(--граница);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    transition: width .15s ease, min-width .15s ease;
    overflow: hidden;
}

/* Свёрнутая панель: остаются значки. Ширина запоминается в localStorage —
   человек настраивает её один раз, а не каждый вход. */
.collapsed .sidebar { width: var(--панель-узкая); min-width: var(--панель-узкая); }
.collapsed .nav-text,
.collapsed .lib-buttons,
.collapsed .library-list,
.collapsed .library-quota,
.collapsed .brand-name { display: none; }
.collapsed .sidebar { padding-left: 8px; padding-right: 8px; }
.collapsed .nav-item { justify-content: center; }

.brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 6px;
}

.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

/* Разделы. Активный отмечен ПОЛОСОЙ слева, а не заливкой: заливка
   акцентом на трети панели читается как ошибка, а не как выбор. */
.nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 22px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    padding: 7px 8px;
    font: inherit;
    color: var(--тихий);
    text-align: left;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}

.nav-item { font-size: 14.5px; }
.nav-item:hover { background: var(--наведение); color: var(--текст); }
.nav-item:hover .nav-ico { color: var(--текст); }

.nav-item.active {
    border-left-color: var(--акцент);
    color: var(--текст);
    font-weight: 500;
}

/* Значки разделов — это ОСНОВНАЯ навигация, и в свёрнутой панели она
   единственная. Прежние 13px с прозрачностью .75 на сером читались как
   помарка: их было почти не видно. Крупнее и в цвет текста. */
.nav-ico {
    width: 20px;
    text-align: center;
    font-size: 17px;
    line-height: 1;
    color: #4A4A4A;
}
.nav-item.active .nav-ico { color: var(--акцент); }

.library-section { flex: 1; overflow-y: auto; min-height: 0; }

.library-section h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--тихий);
    padding: 0 8px;
    margin-bottom: 6px;
}

.lib-buttons { display: flex; gap: 2px; }

.icon-btn {
    background: transparent;
    border: none;
    color: var(--тихий);
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.icon-btn:hover { background: var(--наведение); color: var(--текст); }

.library-list { list-style: none; font-size: 13px; }

.library-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--тихий);
}
.library-list li:hover { background: var(--наведение); color: var(--текст); }

.lib-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.lib-act, .lib-dl, .lib-del, .lib-caret {
    background: transparent; border: none; color: var(--тихий);
    cursor: pointer; font-size: 12px; padding: 1px 3px;
}
.lib-act:hover, .lib-dl:hover, .lib-del:hover, .lib-caret:hover { color: var(--акцент); }
.lib-folder { font-weight: 500; color: var(--текст); }
/* ⚠ ЭТО ПРАВИЛО БЫЛО В СТАРОЙ ТЕМЕ И ПОТЕРЯЛОСЬ ПРИ ПЕРЕПИСЫВАНИИ.
   Сессии — папка на разговор с вложенными файлами — продолжали
   рисоваться (app.js не менялся), но без контейнера ехали отступы:
   механизм жив, а выглядит сломанным. Дочерние правила я перенёс, а
   контейнерное нет. */
.library-list .lib-session { display: block; padding: 0; background: transparent; }
.library-list .lib-session:hover { background: transparent; }

.lib-session-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.lib-session-header:hover { background: var(--наведение); }
.lib-session-label {
    font-size: 12.5px;
    color: var(--текст);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;   /* имя в одну строку: на две оно наезжало на кнопки */
}
.lib-session-files .lib-name { font-size: 12.5px; }
.lib-session-files { list-style: none; padding-left: 14px; }
/* ⚠ ПОДПИСИ, А НЕ КНОПКИ (18.09). Обе строки — «Пока пусто…» и «хранятся
   14 дней» — стояли тем же кеглем и цветом, что и строки файлов, и рука
   тянулась по ним щёлкнуть. Курсив и приглушённый тон говорят «это
   пояснение», не требуя ни рамки, ни отдельного значка. */
.library-empty,
.library-quota {
    padding: 5px 8px;
    font-size: 11.5px;
    font-style: italic;
    line-height: 1.4;
    color: var(--тихий);
    opacity: .62;
    cursor: default;
}

.sidebar-foot {
    border-top: 1px solid var(--граница);
    padding-top: 10px;
    margin-top: 10px;
    font-size: 13px;
}

/* Строка низа панели: значок + подпись. Подпись прячется при сворачивании,
   значок остаётся — иначе внизу оставалось пустое поле с одинокой точкой. */
.foot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 4px;
    color: var(--тихий);
    text-decoration: none;
    font-size: 13px;
}
a.foot-row:hover { background: var(--наведение); color: var(--текст); }

.foot-ico { width: 20px; text-align: center; flex: none; font-size: 13px; }
/* Название строки состояния: узкая колонка слева, чтобы значения
   выстроились в столбец и читались одним взглядом. */
.foot-name { width: 52px; flex: none; color: var(--текст); }

.user-info { justify-content: flex-start; }
.user-info #user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logout-btn {
    background: transparent; border: none; color: var(--тихий);
    font: inherit; cursor: pointer; text-decoration: underline;
}
.logout-btn:hover { color: var(--акцент); }

.status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Точка состояния. Внутри .foot-ico шириной 20px, чтобы вставать под
   значками разделов, а не сбоку от них. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: #C9C6C0;
       display: inline-block; }
.dot.offline { background: #C9C6C0; }
.dot.warn { background: #C9A227; }
.dot.bad { background: var(--акцент); }
.dot.online { background: #5B8C5A; }

/* ==========================================================================
   ЧАТ

   Сообщения БЕЗ пузырей и рамок. Различаются тремя вещами: отступом,
   тихой подписью над текстом и пустым местом между ходами.

   Подпись добавлена по просьбе владельца: ответы длинные, со списками, и
   при просмотре истории один отступ теряется. Делается через ::before,
   поэтому app.js не менялся вовсе.
   ========================================================================== */

.chat-area, .registry-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.messages { flex: 1; overflow-y: auto; padding: 40px 24px 24px; }

.message {
    max-width: var(--колонка);
    margin: 0 auto 34px;
    font-size: 16px;
    line-height: 1.65;
}

/* Тихая подпись над сообщением. Обычный регистр, не капс. */
.message::before {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: var(--тихий);
    margin-bottom: 7px;
}
.message.user::before { content: "Вы"; }
.message.assistant::before { content: "Директор"; }

/* Вопрос отодвинут вправо, ответ во всю ширину. */
.message.user { padding-left: 96px; }

/* ⚠ PRE-WRAP ТОЛЬКО У ВОПРОСА. Текст человека кладётся через
   textContent — переносы строк в нём настоящие, и без pre-wrap они
   пропадут. Ответ же собирается в HTML (renderContent делает <p>, <ul>,
   <br>), и pre-wrap там ДОБАВЛЯЕТ исходные переводы строк поверх
   разметки: между пунктами списка вырастает пустая строка. Видно только
   глазами на длинном ответе — ровно то, ради чего делался снимок. */
.message .content { word-wrap: break-word; }
.message.user .content { white-space: pre-wrap; }

/* ⚠ ОТСТУПЫ ВАЖНЕЕ УКРАШЕНИЙ. Абзацы дышали, а внутри списка — нет:
   пункты слипались в стену. Между пунктами теперь тот же воздух, что
   между абзацами. */
.message .content p { margin-bottom: 14px; }
.message .content > *:last-child { margin-bottom: 0; }

.message .content ul, .message .content ol { margin: 10px 0 16px 24px; }
.message .content li { margin-bottom: 8px; }
.message .content li:last-child { margin-bottom: 0; }

/* Вложенный список: свой отступ и более тихий маркер, чтобы уровень был
   виден без линеек. */
.message .content li > ul, .message .content li > ol { margin: 8px 0 0 18px; }
.message .content li > ul > li { list-style-type: circle; }

.message .content strong { font-weight: 600; }

/* Заголовки внутри ответа. Воздуха сверху БОЛЬШЕ, чем снизу: заголовок
   принадлежит тому, что под ним, и должен отрываться от предыдущего
   блока, а не висеть посередине. */
.message .content h1,
.message .content h2,
.message .content h3,
.message .content h4 {
    line-height: 1.3;
    margin: 26px 0 10px;
    font-weight: 600;
}
.message .content > h1:first-child,
.message .content > h2:first-child,
.message .content > h3:first-child { margin-top: 0; }
.message .content h1 { font-size: 20px; }
.message .content h2 { font-size: 18px; }
.message .content h3 { font-size: 16px; }
.message .content h4 { font-size: 15px; color: var(--тихий); }

/* Цитата — полоса слева, приглушённый текст. Прежде выглядела обычным
   абзацем, и оговорки в ответе терялись среди прочего. */
.message .content blockquote {
    margin: 14px 0;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--граница);
    color: var(--тихий);
}

.message .content pre {
    background: var(--наведение);
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 14px 0;
    font-size: 13px;
}
.message .content pre code { background: none; padding: 0; }

.message .content hr {
    border: none;
    border-top: 1px solid var(--граница);
    margin: 22px 0;
}

.message .content a { color: var(--акцент); text-decoration: underline; }
.message .content a:hover { color: var(--акцент-навед); }

.message .content code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: .92em;
    background: var(--наведение);
    padding: 1px 4px;
    border-radius: 3px;
}

.file-link { color: var(--акцент); text-decoration: underline; }

/* --- ТАБЛИЦЫ В ОТВЕТЕ -------------------------------------------------
   Сводки по письмам — самый частый вид ответа, и читать их приходится
   глазами построчно. Поэтому: прокрутка вместо сжатия, приглушённая
   шапка, чередование строк, подсветка при наведении. */

.md-table-wrap {
    overflow-x: auto;          /* широкая таблица ЕДЕТ, а не сжимается */
    margin: 14px 0;
    border: 1px solid var(--граница);
    border-radius: 8px;
    background: var(--поле);
}

/* ⚠ ШИРИНА ПО СОДЕРЖИМОМУ, А НЕ ПО ОКНУ. При width:100% таблица
   ВПИХИВАЛАСЬ в колонку: «ПАО «Россети Ленэнерго» «Кабельная сеть»»
   ложилось в четыре строки по два слова, и читать это было нельзя.
   Теперь колонки берут нужную ширину, а лишнее уезжает в прокрутку —
   ради неё и заведена обёртка. min-width держит таблицу во всю ширину,
   когда колонок мало. */
.md-table {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    font-size: 13.5px;
}
/* ⚠ НИЖНИЙ ПРЕДЕЛ ШИРИНЫ КОЛОНКИ — ОН И ВКЛЮЧАЕТ ПРОКРУТКУ.
   Одного width:auto мало: браузер предпочитает ПЕРЕНОС переполнению и
   сжимает колонку до двух слов, лишь бы таблица влезла. «ПАО «Россети
   Ленэнерго» «Кабельная сеть»» так ложилось в четыре строки.
   С min-width колонки не сжимаются ниже читаемого, сумма перерастает
   колонку — и таблица честно уезжает в прокрутку.
   Потолок оставлен: без него одно длинное «Содержание» растянуло бы
   таблицу на три экрана. Текст при этом ПЕРЕНОСИТСЯ, а не обрезается:
   в ответе прятать данные многоточием нельзя. */
.md-table td, .md-table th { min-width: 112px; max-width: 340px; }

.md-table th, .md-table td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--граница);
    vertical-align: top;
}
.md-table th {
    color: var(--тихий);
    font-weight: 500;
    white-space: nowrap;
    background: var(--фон);
    position: sticky;
    top: 0;
}
.md-table tbody tr:nth-child(even) { background: #FCFBF9; }
.md-table tbody tr:hover { background: var(--наведение); }
.md-table tbody tr:last-child td { border-bottom: none; }

/* ⚠ НОМЕР ПИСЬМА НЕ РВЁМ. На снимке 18.09 «1441/пр» переносился по слэшу
   и вставал двумя строками: «1441/» и «пр». Номер — ключ строки реестра,
   разорванный он не читается и не ищется глазами. */
.md-table td:first-child, .md-table th:first-child { white-space: nowrap; }
.md-table code { white-space: nowrap; }

/* Расхождение строки с шапкой: показываем ДАННЫЕ и помечаем. Прежде
   лишние ячейки молча выбрасывались. */
.md-extra { background: #FDF6F5; }
.md-table th.md-extra { color: var(--акцент); }
.md-missing { color: var(--тихий); }
.md-row-extra td:first-child, .md-row-short td:first-child {
    box-shadow: inset 2px 0 0 var(--акцент);
}
.md-table-note {
    font-size: 12.5px;
    color: var(--тихий);
    margin: -6px 0 14px;
}

/* Приветствие — ОДНО. Раньше показывалось дважды: в панели и в чате. */
.welcome { max-width: var(--колонка); margin: 12vh auto 0; }
.welcome h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.welcome-sub { color: var(--тихий); margin-bottom: 26px; }

/* Примеры вместо списка из двенадцати функций: человек пишет текстом, а
   не выбирает из перечня. Клик подставляет текст в поле, но НЕ отправляет
   — дописать и решить должен человек. */
/* Примеры — КНОПКИ, и это должно быть видно. Сплошные линии сверху и
   снизу делали из них строки таблицы: такое читается как данные, а не
   как предложение нажать. Теперь отдельные плитки с рамкой, на наведении
   рамка и текст уходят в акцент. */
.examples { display: flex; flex-wrap: wrap; gap: 8px; }

.example {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 8px;
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--текст);
    text-align: left;
    cursor: pointer;
}
.example:hover { border-color: var(--акцент); color: var(--акцент); }

.processing { max-width: var(--колонка); margin: 0 auto 34px; color: var(--тихий); font-size: 15px; }
.proc-text { display: inline; }
.dots::after {
    content: "";
    animation: точки 1.2s steps(4, end) infinite;
}
@keyframes точки { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ==========================================================================
   ПОЛЕ ВВОДА
   ========================================================================== */

.input-area { padding: 0 24px 24px; }

.input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 10px;
    padding: 7px 8px 7px 10px;
}
.input-wrapper:focus-within { border-color: #D6D3CC; }

#input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--текст);
    resize: none;
    max-height: 200px;
    padding: 5px 4px;
}
#input::placeholder { color: #A8A49C; }

.send-btn {
    flex: none;
    /* 36 вместо 30: кнопкой пользуются десятки раз в день, и в неё надо
       попадать не глядя. Ниже 32 палец промахивается. */
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--акцент);
    color: #fff;
    cursor: pointer;
}
.send-btn svg { width: 20px; height: 20px; display: block; }
.send-btn:hover { background: var(--акцент-навед); }
.send-btn:disabled { background: #D8D5CF; cursor: default; }

.file-status { font-size: 13px; color: var(--тихий); padding: 7px 2px 0; }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }

.attachment-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--наведение);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    color: var(--тихий);
}
.chip-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-remove { background: none; border: none; color: var(--тихий); cursor: pointer; font-size: 14px; }
.chip-remove:hover { color: var(--акцент); }

/* ==========================================================================
   РЕЕСТР И ФОРМА

   Плотнее чата: таблицу сверяют глазами с Google Sheets, поэтому мелкий
   шрифт, узкие строки и колонки на тех же местах.
   ========================================================================== */

.registry-area { padding: 28px 24px 18px; overflow: hidden; }
.registry-area .col { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.page-title { font-size: 19px; font-weight: 600; margin-bottom: 18px; }

.reg-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.reg-tabs { display: flex; gap: 2px; }

.reg-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 5px 12px;
    font: inherit;
    color: var(--тихий);
    cursor: pointer;
}
.reg-tab:hover { color: var(--текст); }
.reg-tab.active { color: var(--текст); font-weight: 500; border-bottom-color: var(--акцент); }

/* Возраст данных. Обычно приглушён; устарел — становится виден.
   Молча устаревшая таблица хуже честно устаревшей. */
.reg-freshness { font-size: 13px; color: var(--тихий); margin-left: auto; }
.reg-freshness.stale { color: var(--акцент); font-weight: 500; }

.reg-note { font-size: 13px; color: var(--тихий); margin-bottom: 12px; }

.reg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; }

.reg-input {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 6px;
    padding: 6px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--текст);
    min-width: 230px;
}
.reg-input:focus { outline: none; border-color: #D6D3CC; }
.reg-narrow { min-width: 125px; }
.reg-mid { min-width: 180px; }

.reg-field, .reg-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--тихий); }
.reg-field input[type="date"] {
    background: var(--поле); border: 1px solid var(--граница);
    border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 13px; color: var(--текст);
}

.btn-accent,
/* .reg-apply — то же самое под прежним именем: register.js собирает им
   кнопку в карточке вопроса. Держим синонимом, чтобы не трогать логику
   ради переименования класса. */
.reg-apply {
    background: var(--акцент);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 15px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.btn-accent:hover, .reg-apply:hover { background: var(--акцент-навед); }
.btn-accent:disabled, .reg-apply:disabled { background: #D8D5CF; cursor: default; }

.btn-quiet, .reg-btn, .reg-more {
    background: transparent;
    border: 1px solid var(--граница);
    border-radius: 6px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--тихий);
    cursor: pointer;
}
.btn-quiet:hover, .reg-btn:hover, .reg-more:hover { background: var(--наведение); color: var(--текст); }

.reg-table-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--граница);
    border-radius: 8px;
    background: var(--поле);
    min-height: 0;
}

.reg-table { border-collapse: collapse; width: 100%; font-size: 13px; }

.reg-table th {
    position: sticky; top: 0;
    background: var(--фон);
    color: var(--тихий);
    font-weight: 500;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--граница);
    white-space: nowrap;
    z-index: 1;
}

.reg-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--граница);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-table tbody tr:hover { background: var(--наведение); }

/* Строка с пометкой — рабочий список секретаря. Полоса слева, не заливка:
   залитая треть таблицы читается как ошибка, а пометка означает
   «записано, но проверьте». */
.reg-table tr.flagged td:first-child { box-shadow: inset 2px 0 0 var(--акцент); }
.flag { color: var(--акцент); }

.reg-actions { white-space: nowrap; }
.reg-actions .reg-btn { padding: 2px 7px; margin-right: 3px; }

.reg-more { display: block; width: 100%; border: none; border-top: 1px solid var(--граница); border-radius: 0; }

.reg-status { font-size: 13px; color: var(--тихий); padding: 8px 2px 0; }
.reg-status.ok { color: #5B8C5A; }
.reg-status.warn { color: #B07A2B; }
.reg-status.err { color: var(--акцент); }

/* «Надо ли отвечать» — значок вместо длинной фразы; пояснение в подсказке. */
.answer { font-weight: 500; }
.answer.yes { color: var(--акцент); }
.answer.no { color: var(--тихий); }

/* --- Форма регистрации --- */

.rg-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }

.rg-drop {
    border: 1px dashed var(--граница);
    border-radius: 8px;
    padding: 34px;
    text-align: center;
    color: var(--тихий);
    background: var(--поле);
    cursor: pointer;
}
.rg-drop:hover, .rg-drop.over { border-color: var(--акцент); color: var(--текст); }

.rg-files { list-style: none; margin: 10px 0; }
.rg-files li { padding: 6px 2px; font-size: 13px; border-bottom: 1px solid var(--граница); }

.reg-dim { color: var(--тихий); }
.reg-x { background: none; border: none; color: var(--тихий); cursor: pointer; float: right; }
.reg-x:hover { color: var(--акцент); }

.rg-summary { margin-top: 14px; overflow-y: auto; }
.reg-block { margin-bottom: 16px; }
.reg-block h4 { font-size: 13px; font-weight: 500; color: var(--тихий); margin-bottom: 6px; }
.reg-block ul { margin: 0; padding-left: 20px; font-size: 13px; }
.reg-block li { padding: 3px 0; }

/* Карточка вопроса монитора: в чате на это отвечают фразой, здесь —
   кнопкой. Ответ уходит тем же протоколом, но без посредника. */
.reg-q {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-left: 2px solid var(--акцент);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.reg-q p { margin-bottom: 8px; font-size: 14px; }
.reg-q-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   ПРОЧЕЕ (админка, уведомления)
   ========================================================================== */

.toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: var(--текст); color: var(--фон);
    padding: 9px 16px; border-radius: 6px; font-size: 13px; z-index: 100;
}
.toast.danger { background: var(--акцент); color: #fff; }

.env-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.row-btn { background: transparent; border: 1px solid var(--граница); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.row-btn:hover { background: var(--наведение); }
.c-notif, .c-pass { font-size: 13px; color: var(--тихий); }

.function-list { list-style: none; font-size: 13px; color: var(--тихий); }
.function-list .wip, .function-list .stub { padding: 3px 8px; }
.subtitle { font-size: 13px; color: var(--тихий); }
.view-switch { display: none; }   /* переключатель переехал в панель */
.chat-area .messages::-webkit-scrollbar,
.reg-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.chat-area .messages::-webkit-scrollbar-thumb,
.reg-table-wrap::-webkit-scrollbar-thumb { background: #DEDBD4; border-radius: 5px; }

/* --- Сессии разговоров в панели -------------------------------------- */

/* Подпись группы внутри сессии. Разделяет присланное человеком и
   сделанное чатом: их ищут по-разному — первое по имени файла, второе по
   тому, о чём просили. */
.lib-group {
    font-size: 11.5px;
    color: var(--тихий);
    padding: 6px 8px 2px;
    letter-spacing: .02em;
}

/* Текущий разговор — тот, куда лягут файлы, которые присылают прямо
   сейчас. Полоса слева, как у активного раздела: один и тот же знак
   «вы находитесь здесь». */
.lib-current > .lib-session-header {
    border-left: 2px solid var(--акцент);
    margin-left: -2px;
    border-radius: 0 4px 4px 0;
}

.lib-now {
    font-size: 11px;
    color: var(--акцент);
    flex: none;
    margin-left: 4px;
}

/* ====================================================================
   ФАЙЛЫ РАЗГОВОРА: прикрепить и удалить (возвращено 18.09)
   ====================================================================
   Имя файла — кнопка: клик прикрепляет его к текущему разговору. Это
   было в прежнем чате и потерялось при переделке; к одним и тем же
   документам возвращаются постоянно, и «скачай и загрузи заново» —
   лишний круг каждый день.

   Крестик показывается ПО НАВЕДЕНИЮ, а не всегда. Удаление необратимо,
   и кнопка, постоянно стоящая под курсором в узкой панели, однажды
   будет нажата не тем пальцем. */

.lib-attach {
    cursor: pointer;
}
.lib-attach:hover {
    color: var(--accent, #7a5c3e);
    text-decoration: underline;
}

.lib-del {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--muted, #8a8178);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;                     /* появляется по наведению на строку */
    transition: opacity .12s, color .12s;
}
.lib-session-files li:hover .lib-del,
.lib-session-header:hover .lib-del-session {
    opacity: 1;
}
.lib-del:hover {
    color: #b4462f;                 /* удаление — единственное красное */
}
.lib-del:focus-visible {
    opacity: 1;                     /* с клавиатуры кнопка должна быть видна */
    outline: 2px solid var(--accent, #7a5c3e);
}

/* Крестик разговора прижат вправо, чтобы не слипался с «сейчас». */
.lib-del-session {
    margin-left: auto;
}

/* --- Папки внутри разговора (18.09) ---------------------------------
   Полка внутри разговора, а не второе хранилище. Отступ вложенности
   намеренно небольшой: панель узкая, и глубокая лесенка съедает имя
   файла раньше, чем помогает его найти. */

.lib-folder-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
}
.lib-folder-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lib-folder > .lib-session-files {
    padding-left: 14px;
}

/* Действия папки — тем же приёмом, что и крестик: показываются по
   наведению. Три кнопки, постоянно висящие в узкой панели, превращают
   список файлов в панель инструментов. */
.lib-act {
    flex: 0 0 auto;
    padding: 0 3px;
    border: none;
    background: none;
    color: var(--muted, #8a8178);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.lib-folder-header:hover .lib-act,
.lib-session-header:hover .lib-act-session {
    opacity: 1;
}
.lib-act:hover {
    color: var(--accent, #7a5c3e);
}
.lib-act:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent, #7a5c3e);
}

/* Первая из кнопок справа отодвигает группу от подписи «сейчас». */
.lib-act-session {
    margin-left: auto;
}

/* ====================================================================
   ВХОД И АДМИНКА  (возвращено 18.09)
   ====================================================================
   ⚠ ЭТУ ТАБЛИЦУ ДЕЛЯТ ТРИ СТРАНИЦЫ: чат, вход и админка. Переписывая её
   под светлую тему, я оставил правила только для чата — и страница входа
   стала голым HTML: заголовок, поля и кнопка в одну строку. Формально
   «вход не трогали», фактически он перестал работать глазами.

   Правила перенесены из прежней тёмной темы ПО СООТВЕТСТВИЮ переменных:
   цвета из новой палитры, геометрия — та, что проверена людьми.

   ⚠ ПЕРЕНОС ТОЧЕЧНЫЙ. Берутся только селекторы, на которые ссылаются
   login.html и admin.html и которых в новой теме ЕЩЁ НЕТ. Грубый перенос
   диапазоном строк притащил правила чата (#send-btn, .nav-item, .toast)
   и устроил войну правил: одно и то же место оформлялось дважды, побеждал
   нижний по файлу.

   ⚠ БУДЕТ ПРАВКА CSS — ПРОВЕРЯТЬ НЕ ТОЛЬКО ЧАТ. Страниц три. */

.sidebar .subtitle {
    font-size: 0.85em;
    color: var(--тихий);
    margin-bottom: 12px;
}

/* ---- Login page ---- */

.login-body {
    background: var(--фон);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-wrap {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 12px;
    padding: 36px 32px;
}

.login-box h1 {
    margin: 0 0 4px;
    font-size: 1.5em;
}

.login-box .subtitle {
    color: var(--тихий);
    font-size: 0.95em;
    margin-bottom: 24px;
}

.login-box label {
    display: block;
    font-size: 0.85em;
    color: var(--тихий);
    margin-top: 14px;
    margin-bottom: 4px;
}

.login-box input {
    width: 100%;
    padding: 10px 12px;
    background: var(--фон);
    border: 1px solid var(--граница);
    border-radius: 8px;
    color: var(--текст);
    font-size: 0.95em;
}

.login-box input:focus {
    outline: none;
    border-color: var(--акцент);
}

.login-box .primary-btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: var(--акцент);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    cursor: pointer;
}

.login-box .primary-btn:hover { background: var(--акцент-навед); }

.login-box .primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
    margin-top: 14px;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border-radius: 6px;
    font-size: 0.85em;
}

.login-hint {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(74, 158, 255, 0.1);
    color: var(--текст);
    border-left: 3px solid var(--акцент);
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---- Admin: users form + system info ---- */

.user-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.user-add-form input[type="text"],
.user-add-form input[type="password"] {
    padding: 6px 10px;
    background: var(--фон);
    border: 1px solid var(--граница);
    border-radius: 6px;
    color: var(--текст);
}

.user-add-form label {
    color: var(--тихий);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.system-info {
    padding: 12px;
    background: var(--фон);
    border-radius: 8px;
    line-height: 1.7;
    font-size: 0.9em;
}

/* ===================== Admin panel ===================== */
.admin-body {
    overflow: auto;
}

/* Password gate */
.gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--фон);
}

.gate-box {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 12px;
    padding: 32px;
    width: 320px;
    text-align: center;
}

.gate-box h2 { color: var(--акцент); margin-bottom: 4px; }

.gate-box .subtitle { color: var(--тихий); font-size: 0.85em; margin-bottom: 16px; }

.gate-box input,
.gate-box button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.95em;
    margin-top: 8px;
}

.gate-box input {
    background: var(--фон);
    border: 1px solid var(--граница);
    color: var(--текст);
    outline: none;
}

.gate-box input:focus { border-color: var(--акцент); }

.gate-box button {
    background: var(--акцент);
    border: none;
    color: #fff;
    cursor: pointer;
}

.gate-box button:hover { background: var(--акцент-навед); }

.gate-error {
    color: #e74c3c;
    font-size: 0.85em;
    margin-top: 10px;
}

/* Panel layout */
.admin-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.admin-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-header h1 { color: var(--акцент); font-size: 1.4em; }

.back-link {
    color: var(--тихий);
    text-decoration: none;
    font-size: 0.9em;
}

.back-link:hover { color: var(--акцент); }

.restart-banner {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid var(--тихий);
    color: var(--текст);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88em;
    margin-bottom: 16px;
}

.restart-banner code {
    display: inline-block;
    background: var(--фон);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.admin-section {
    background: var(--поле);
    border: 1px solid var(--граница);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-section h2 { font-size: 1.1em; margin-bottom: 4px; }

.admin-section .hint { color: var(--тихий); font-size: 0.82em; margin-bottom: 14px; }

/* Env fields */
.env-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-bottom: 16px;
}

/* Buttons */
.primary-btn, .secondary-btn {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 0.9em;
}

.primary-btn { background: var(--акцент); color: #fff; }

.primary-btn:hover { background: var(--акцент-навед); }

.secondary-btn {
    background: transparent;
    border: 1px solid var(--граница);
    color: var(--тихий);
}

.secondary-btn:hover { border-color: var(--акцент); color: var(--акцент); }

/* Mailbox table */
.table-wrap { overflow-x: auto; margin-bottom: 14px; }

.mb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}

.mb-table th {
    text-align: left;
    color: var(--тихий);
    font-weight: 500;
    padding: 6px 6px;
    border-bottom: 1px solid var(--граница);
    white-space: nowrap;
}

.mb-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--граница);
}

.mb-table input[type="text"],
.mb-table input[type="password"],
.mb-table select {
    width: 100%;
    min-width: 70px;
    background: var(--фон);
    border: 1px solid var(--граница);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--текст);
    outline: none;
    font-size: 1em;
}

.mb-table .c-port { min-width: 56px; width: 56px; }

.mb-table input:focus, .mb-table select:focus { border-color: var(--акцент); }

.mb-actions { display: flex; gap: 10px; }

.toast.ok { background: #1e3a2f; border: 1px solid var(--акцент); color: #d5f5e3; }

.toast.error { background: #3a1e1e; border: 1px solid #e74c3c; color: #f5d5d5; }

/* --- Кнопки строки ввода (18.09) -------------------------------------
   «＋» и «⊞» стояли на общем .icon-btn — 14 px, размер значка боковой
   панели. В панели значок читают мельком, а этими кнопками работают
   каждый день, и цена промаха — потерянный файл.

   ⚠ ЦВЕТ ЗАДАН ОДИН РАЗ, НА КЛАССЕ. Прежняя правка развалила правило
   надвое и увела color в «#folder-btn» — селектор по id весомее любого
   классового, и наведение до папки просто не доходило: плюс краснел,
   папка нет. Разные правила для двух соседних кнопок — прямая дорога к
   такому расхождению.

   Значки — рисунки: цвет они наследуют от кнопки (currentColor), потому
   наведение работает само и одинаково для обеих. */

.input-wrapper .icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--тихий);
}
.input-wrapper .icon-btn svg {
    width: 21px;
    height: 21px;
    display: block;
}
.input-wrapper .icon-btn:hover {
    background: var(--наведение);
    color: var(--акцент);
}

/* --- Скачать сканы среза (18.09) -------------------------------------
   Стоит рядом с возрастом данных, а не среди фильтров: это не условие
   отбора, а действие над тем, что уже отобрано. Вид как у вкладок —
   действие обычное, выделять его незачем. */

.reg-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
#reg-archive {
    white-space: nowrap;
}

/* ==========================================================================
   ТЕЛЕФОН
   ==========================================================================
   Раньше правил для узких экранов не было ни одного. На экране 390 px
   боковая панель в 240 px съедала две трети, фильтры реестра (230 + 180 +
   125) не влезали никогда, а таблица на четырнадцать колонок была
   нечитаема при любых стилях.

   ⚠ ГРАНИЦА 768 px, А НЕ 480. Планшет в книжной ориентации — те же
   проблемы, что телефон: панель и таблица не помещаются. Делить их
   незачем.

   ⚠ ЧТО ЗДЕСЬ НЕ ДЕЛАЕТСЯ: ничего не прячется «за ненадобностью». На
   телефоне доступны те же разделы и те же действия — меняется только
   способ их показать. Урезанная версия означала бы, что человек в
   дороге не может того, что может за столом, и узнаёт об этом в
   неподходящий момент.
   ========================================================================== */

/* Шапки для телефона на большом экране нет вовсе. */
.моб-шапка,
.моб-затемнение { display: none; }

@media (max-width: 768px) {

    /* --- Каркас ---------------------------------------------------------
       Колонки больше нет: содержимое во всю ширину, иначе на 390 px от него
       остаётся полоса посередине. */
    .app { flex-direction: column; }

    .моб-шапка {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        height: 52px;
        padding: 0 8px;
        background: var(--поле);
        border-bottom: 1px solid var(--граница);
    }
    .моб-название {
        font-size: 15px;
        font-weight: 600;
        color: var(--текст);
    }
    /* 44 px — нижняя граница для пальца. 34, которых хватало мыши, тут
       дают промахи, а промах по «удалить» стоит дорого. */
    .моб-кнопка {
        width: 44px; height: 44px;
        border: none;
        background: none;
        color: var(--текст);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        border-radius: 8px;
    }
    .моб-кнопка:active { background: var(--наведение); }

    /* --- Панель выезжает поверх, а не делит место ------------------------
       На большом экране панель и содержимое стоят рядом. На телефоне рядом
       не помещается ничего, поэтому панель уезжает за левый край и
       возвращается поверх — так же, как в мобильных приложениях. */
    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 40;
        width: 82vw;
        max-width: 320px;
        min-width: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        border-right: 1px solid var(--граница);
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
        padding-top: 10px;
        overflow-y: auto;
    }
    body.панель-видна .sidebar { transform: translateX(0); }

    .моб-затемнение {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(0, 0, 0, .35);
    }
    .моб-затемнение[hidden] { display: none; }

    /* Сворачивание в полоску значков — приём настольный: там панель
       остаётся на виду. Здесь она либо поверх, либо её нет. */
    #sidebar-toggle { display: none; }
    .collapsed .sidebar { width: 82vw; min-width: 0; }
    .collapsed .nav-text,
    .collapsed .library-list,
    .collapsed .library-quota,
    .collapsed .brand-name { display: revert; }

    /* --- Чат -------------------------------------------------------------- */
    .chat-area, .registry-area, .register-area { min-width: 0; }
    .col, .col-narrow { max-width: none; }
    .messages { padding: 12px 12px 0; }
    .input-area { padding: 8px 10px 10px; }

    /* Поле ввода 16 px — не вкусовщина: при меньшем Safari на iPhone
       приближает страницу при касании и обратно уже не отдаляет. */
    #input { font-size: 16px; }

    .input-wrapper .icon-btn { width: 44px; height: 44px; }
    .send-btn { width: 44px; height: 44px; }

    /* Действия у файлов показывались по наведению — на телефоне наведения
       не существует, и кнопки были бы недоступны вовсе. */
    .lib-del, .lib-act { opacity: 1; }

    /* --- Реестр: фильтры в столбец ---------------------------------------- */
    .registry-area { padding: 12px 10px 10px; }
    .reg-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .reg-head-right { flex-wrap: wrap; }
    .reg-filters { flex-direction: column; align-items: stretch; }
    .reg-filters .reg-input,
    .reg-filters .reg-narrow,
    .reg-filters .reg-mid {
        min-width: 0;
        width: 100%;
        font-size: 16px;      /* та же причина, что у поля ввода */
        padding: 9px 10px;
    }
    .reg-field, .reg-check { justify-content: space-between; }
    #reg-apply { padding: 11px; }

    /* --- Реестр: таблица становится карточками ---------------------------
       ⚠ ЭТО НЕ «СЖАТЬ ТАБЛИЦУ». Четырнадцать колонок на 390 px нечитаемы
       при любом кегле: либо прокрутка вбок на каждую строку, либо текст в
       три буквы. Поэтому строка показывается карточкой — сверху номер и
       дата, ниже остальные поля с подписями.

       Подпись берётся из data-колонка, который проставляет registry.js:
       шапки у карточек нет, и без подписи «15.09.2026» не отличить от
       «14.09.2026». */
    .reg-table thead { display: none; }
    .reg-table, .reg-table tbody, .reg-table tr, .reg-table td {
        display: block;
        width: auto;
    }
    .reg-table tr {
        border: 1px solid var(--граница);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--поле);
    }
    .reg-table td {
        border: none;
        padding: 3px 0;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }
    /* Подпись поля — слева, приглушённо и фиксированной шириной, чтобы
       значения выстроились в колонку и читались сверху вниз. */
    .reg-table td::before {
        content: attr(data-колонка);
        flex: 0 0 38%;
        color: var(--тихий);
        font-size: 11.5px;
        text-transform: lowercase;
    }
    /* Пустые ячейки на телефоне только шумят: на большом экране пустота в
       колонке сама по себе значима, в карточке — просто лишняя строка. */
    .reg-table td:empty { display: none; }

    /* Первая колонка — номер письма — крупно и без подписи: это заголовок
       карточки, и подписывать его «№ исходящего» незачем. */
    .reg-table td:first-child {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 6px;
    }
    .reg-table td:first-child::before { content: none; }

    .reg-table td.reg-actions { justify-content: flex-end; padding-top: 8px; }
    .reg-table td.reg-actions::before { content: none; }
    .reg-btn { width: 44px; height: 44px; font-size: 18px; }

    /* --- Вход и админка ---------------------------------------------------
       Форма 400 px плюс отступы не помещалась в 390 px и вылезала за край.
       Проверено снимком: коробка уезжала вправо, кнопка «Войти» частично
       за экраном. */
    .login-wrap, .gate-box { padding: 12px; max-width: 100%; }
    .login-box { padding: 24px 18px; }
    .login-box input, .gate-box input { font-size: 16px; }
    .table-wrap { overflow-x: auto; }
}

/* Совсем узкие (iPhone SE и подобные): подпись поля над значением, а не
   слева — иначе на 320 px значению остаётся сорок процентов ширины. */
@media (max-width: 380px) {
    .reg-table td { flex-direction: column; gap: 0; }
    .reg-table td::before { flex: none; }
}