/* «📞 Звонок» в полосе мини-площадок (29.09.2026): текст — обычного цвета, зелёная —
   только трубка (значок SVG, эмодзи не перекрашивается): тёмно-зелёная в светлой
   теме, светло-зелёная в вечерней и тёмной. Во всех программах. */
.mini-slot.mini-slot-call { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mini-slot-call .mini-call-ico { color: #15803d; flex-shrink: 0; }
body:not(.light-mode) .mini-slot-call .mini-call-ico { color: #4ade80; }
.mini-slot.mini-slot-call:hover, .mini-slot.mini-slot-call.active { background: rgba(34,197,94,.12); }
/* Остальные кнопки звонка (📞 в шапке беседы, «Позвонить» у сотрудника): эмодзи трубки
   заливаем тем же зелёным — прозрачный текст + тень без размытия. */
button[onclick^="tcCallPeer"], button[onclick^="tcCallGroup"], .call-e { color: transparent !important; text-shadow: 0 0 0 #15803d; }
body:not(.light-mode) button[onclick^="tcCallPeer"], body:not(.light-mode) button[onclick^="tcCallGroup"], body:not(.light-mode) .call-e { text-shadow: 0 0 0 #4ade80; }

/* Чат на телефоне (29.09.2026): заголовок «💬 Чат» убран — и так понятно.
   Сверху — кнопки чата по центру; ниже, на всю ширину, — значки площадок.
   В чате-приложении (кнопка меню ☰ стоит рядом) кнопки — справа от неё. */
@media (max-width: 768px) {
  body:not(.chat-solo) #page-teamchat > .page-header .page-title { display: none; }
  body:not(.chat-solo) #page-teamchat > .page-header { flex-wrap: wrap !important; padding-left: 10px !important; padding-right: 10px !important; }
  body:not(.chat-solo) #page-teamchat > .page-header .page-actions { margin-left: 0 !important; width: 100%; box-sizing: border-box;
    flex-wrap: wrap; justify-content: center !important; gap: 6px; min-height: 40px; align-items: center; }
  body:not(.chat-solo) #tcSpaceJump { order: 2; flex: 0 0 100%; margin: 6px 0 0; box-sizing: border-box;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); justify-items: center; }
  /* Шапка чата-приложения уже отступает на 58px от кнопки меню (index.html Коммуникации):
     значки площадок вытягиваем влево под кнопку, до того же поля 12px, что справа. */
  body.pwa-app:not(.chat-solo) #tcSpaceJump { flex-basis: calc(100% + 46px); margin-left: -46px; }
}

/* Чат и AI-помощник открыты оба (29.09.2026): на экране уже 1900 px две
   колонки справа съедали рабочую область — таблицы превращались в столбики.
   Теперь помощник ложится поверх колонки чата (закрыли его — чат на месте). */
@media (max-width: 1899px) {
  body.ai-dock-on.chat-dock-on #aiDock, body.ai-dock-on.chat-embed-on #aiDock {
    position: fixed !important; right: 0; top: 0; height: 100vh; z-index: 12500;
    box-shadow: -12px 0 32px rgba(0,0,0,.22); }
}
.ai-dock-head .close-btn, .chat-dock-embed-head .close-btn { flex-shrink: 0; }

/* Таблицы с фиксированной шириной колонок (table-layout:fixed): при узкой
   области — например, с открытым чатом сбоку — текст переносится внутри
   ячейки, а не налезает на соседнюю колонку (29.09.2026). Правило — в начале
   файла, чтобы не сталкиваться с дописками в конце. */
.page table[style*="table-layout:fixed"] td { overflow-wrap: break-word; }
.page table[style*="table-layout:fixed"] td[style*="white-space:nowrap"] { white-space: normal !important; }

/* ═══════════════════════════════════════════════════════════════
   ГОЛИБАС — общий слой оформления

   ЕДИНСТВЕННЫЙ ИСТОЧНИК. Править только здесь:
       /root/golibas-ui/ui.css
   и разнести по всем программам:
       bash /root/golibas-ui/sync.sh

   Подключается ПОСЛЕДНИМ, после собственных стилей программы.
   Иначе его правила наведения проигрывают цветным вариантам карточек
   (.stat-card.green и подобным): вес селекторов одинаковый, и решает
   порядок. Программа при необходимости перекрывает общий слой более
   весомым селектором, а не порядком.

   За образец взят AI-Auth. Здесь лежит то, что одинаково везде:
   цвета и ОТКЛИК на действия — наведение, нажатие, фокус. Внешний
   вид кнопок (форма, заливка, градиент) остаётся за программой:
   у Финансов своя система имён классов, и сведение её к общей —
   отдельная работа.
   ═══════════════════════════════════════════════════════════════ */

/* ── Цвета ──────────────────────────────────────────────────────
   Значения по умолчанию. Если программа объявляет своё, её
   объявление идёт позже и побеждает. */
:root {
  --hover: #14b8a6;                    /* отклик на курсор */
  --hover-rgb: 20, 184, 166;
  --hover-bg: rgba(20, 184, 166, .12);
  --hover-bg2: rgba(20, 184, 166, .20);
  --red: #ef4444;                      /* ошибка, удаление */
  --red-rgb: 239, 68, 68;
  --green: #10b981;                    /* успех, «в порядке» */
  /* Софт-жёлтый — «новое, ещё не обкатано». Отдельный от --yellow
     (#f59e0b): тот янтарный и занят средней важностью инцидентов,
     перекрашивать его нельзя. Решение владельца 06.09.2026. */
  --soft-yellow: #facc15;
  --soft-yellow-rgb: 250, 204, 21;
  --soft-yellow-bg: rgba(250, 204, 21, .20);
  --soft-yellow-br: rgba(250, 204, 21, .38);
}

/* ── Плавность ──────────────────────────────────────────────────
   Без перехода подсветка возникает рывком и читается как подёргивание. */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-icon, .btn-link, .btn-login,
.stat-card, .hoverable, .app-tile, input, select, textarea {
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* ── Кнопки: отклик формой ──────────────────────────────────────
   Цвет подсветки задаёт сама программа (у всех он уже бирюзовый).
   Здесь только то, что одинаково при любой заливке: приподнятость
   под курсором и нажатие. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-icon:hover, .btn-link:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-icon:active, .btn-link:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ── Карточки со сводкой ────────────────────────────────────────
   «Продажи», «Закупки» и прочие плитки дашборда никак не отзывались
   и выглядели картинкой, а не частью интерфейса. Отклик тот же, что
   у часов на главной AI-Auth: спокойный фон и бирюзовая рамка. */
.stat-card:hover {
  border-color: var(--hover);
  background: var(--hover-bg);
}
/* Нажимаемая карточка ведёт себя как кнопка. */
.stat-card[onclick]:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.stat-card[onclick]:active { transform: translateY(1px); box-shadow: none; }

/* ── Прочие отзывчивые области ──────────────────────────────────
   Прозрачная рамка в покое — чтобы при наведении ничего не прыгало
   на пиксель, когда рамка появляется. */
.hoverable {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 10px;
}
.hoverable:hover { background: var(--hover-bg); border-color: var(--hover); }

/* ── Поля ввода и списки ────────────────────────────────────────
   Раньше они не отзывались нигде: понять, куда попал, можно было
   только по курсору. Цвет тот же, что у кнопок, — отклик читается
   одинаково по всей системе. */
input:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover,
textarea:not(:disabled):not([readonly]):hover {
  border-color: var(--hover);
}
input:not(:disabled):not([readonly]):focus,
select:not(:disabled):focus,
textarea:not(:disabled):not([readonly]):focus {
  outline: none;
  border-color: var(--hover);
  box-shadow: 0 0 0 3px rgba(var(--hover-rgb), .18);
}
/* Заблокированное поле честно показывает, что его не тронуть. */
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .8; }


/* ── ЕДИНЫЙ ВИД КНОПОК (образец — AI-Auth) ──────────────────────
   До этого слой задавал только отклик, а форму и заливку каждая
   программа рисовала сама: у Финансов кнопки были синие 13px/600,
   у остальных — сине-серый градиент. Здесь — один вид на всех.

   Роли:
     .btn-primary   — главное действие: серый градиент, белый текст
     .btn-secondary — обычное действие: спокойная плашка (как .btn без
                      уточнения)
     .btn-danger    — опасное действие: всегда красное, и под курсором
     .btn-success   — подтверждение: зелёное
   Специальные кнопки программ (.btn-logout, .btn.act-add, .row-actions
   .btn и т. п.) заданы более весомыми селекторами и остаются как были. */

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent; border-radius: 9px;
  font-family: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer;
}
/* Без уточнения кнопка — обычная. */
.btn, .btn-secondary {
  background: var(--card2, var(--blue-light, #202020));
  border-color: var(--border, #333333);
  color: var(--text, #E8E8E8);
}
/* Главное действие. Цвета прописаны литералами намеренно: это и есть
   один вид на все программы (в Auth и восьми программах --accent те же
   #777/#999, а у Финансов свой — литерал снимает расхождение). */
.btn-primary {
  background: linear-gradient(135deg, #777777, #999999);
  border-color: transparent;
  color: #fff;
}
.btn-danger {
  background: rgba(var(--red-rgb), .12);
  border-color: rgba(var(--red-rgb), .3);
  color: var(--red);
}
.btn-success {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .3);
  color: var(--green);
}
.btn-sm { padding: 6px 12px; font-size: .78rem; }
.btn-icon {
  padding: 8px; border-radius: 8px;
  background: var(--card2, var(--blue-light, #202020));
  border: 1px solid var(--border, #333333);
  color: var(--muted, #888888);
  cursor: pointer;
}

/* Наведение: бирюза, как во всей системе. У главной кнопки гасим
   градиент — под ним подсветки не видно. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-icon:hover {
  background-image: none;
  background-color: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
}
.btn:active, .btn-primary:active, .btn-secondary:active { background-color: var(--hover-bg2); }
/* Опасное и подтверждающее остаются в своём цвете и под курсором:
   удаление не должно выглядеть безобидной кнопкой. */
.btn-danger:hover {
  background: rgba(var(--red-rgb), .22);
  border-color: rgba(var(--red-rgb), .5);
  color: var(--red);
}
.btn-danger:active { background: rgba(var(--red-rgb), .3); }
.btn-success:hover {
  background: rgba(16, 185, 129, .22);
  border-color: var(--green);
  color: var(--green);
}


/* ── СПЕЦ-КНОПКИ И СТРАНИЦА ВХОДА ───────────────────────────────
   Кнопка входа — та же главная кнопка, только во всю ширину; ширину
   и поля ей оставляет страница, здесь — вид и отклик. */
.btn-login {
  background: linear-gradient(135deg, #777777, #999999);
  color: #fff;
  border: 1px solid transparent;
}
.btn-login:hover {
  background-image: none;
  background-color: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
  opacity: 1;               /* у страниц входа был свой ховер прозрачностью */
}
.btn-login:active { background-color: var(--hover-bg2); }

/* Кнопки в строках таблиц носили серую плашку с белым ховером —
   единственное место, выбивавшееся из системы. Теперь как у всех. */
.row-actions .btn {
  background: var(--card2, var(--blue-light, #202020));
  border-color: var(--border, #333333);
  color: var(--text, #E8E8E8);
}
.row-actions .btn:hover {
  background: var(--hover-bg);
  border-color: var(--hover);
  color: var(--hover);
}

/* «Выйти» — опасное действие, при наведении оно везде краснеет
   одинаково. Основной цвет кнопки задаёт программа: в шапке Auth она
   красная всегда, в боковых меню программ — приглушённая до наведения. */
.btn-logout:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(var(--red-rgb), .08);
}
.btn-logout:active { background: rgba(var(--red-rgb), .16); }


/* Заголовок панели-превью — кнопка: ведёт в свой раздел. Отрицательные
   поля возвращают текст на прежнее место, чтобы заголовки-кнопки и
   заголовки-надписи стояли по одной линии. */
.panel-title-btn {
  display: inline-block;
  padding: 3px 9px; margin: -3px -9px;
  border-radius: 8px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.panel-title-btn:hover { background: var(--hover-bg); color: var(--hover); }

/* ── Значок состояния подключения ───────────────────────────────
   Один вид на все программы: зелёный «Подключён», красный «Не подключён»
   (или «Ошибка», когда доступ есть, а сервис не отвечает).
   Использование: <span class="st-badge st-on">✅ Подключён</span> */
.st-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700;
  padding: 2px 10px; border-radius: 99px;
  white-space: nowrap; vertical-align: middle;
}
.st-on  { background: rgba(16,185,129,.15); border: 1px solid var(--green, #10b981); color: var(--green, #10b981); }
.st-off { background: rgba(239,68,68,.12);  border: 1px solid var(--red, #ef4444);   color: var(--red, #ef4444); }

/* ── Работа с клавиатуры ────────────────────────────────────────
   :focus-visible не появляется от щелчка мышью, поэтому обычную
   работу эта обводка не загромождает. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .btn-icon:focus-visible, .btn-link:focus-visible, .btn-login:focus-visible,
.stat-card[onclick]:focus-visible, .app-tile:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 2px;
}


/* ── Роль в сайдбаре — бейджем, как «Роль компании» в AI-Auth (29.08.2026).
   Цвета те же: Владелец янтарный, Администратор зелёный, Директор сиреневый. */
.user-role-badge { display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.68rem; font-weight:700; border:1px solid var(--border); margin-top:3px; }
.user-role-badge.role-owner    { background:rgba(245,158,11,.18); border-color:#f59e0b; color:#f59e0b; }
.user-role-badge.role-admin    { background:rgba(16,185,129,.18); border-color:#10b981; color:#10b981; }
.user-role-badge.role-director { background:rgba(176,124,199,.18); border-color:#b07cc7; color:#b07cc7; }

/* ── Название программы в сайдбаре — кнопкой в стиле кнопок AI-Auth. */
.app-home-btn { display:block; width:100%; padding:10px 12px; background:var(--card);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-weight:700; font-size:.95rem; cursor:pointer; text-align:center;
  font-family:inherit; transition:background-color .15s, border-color .15s; }
.app-home-btn:hover { background:rgba(20,184,166,.12); border-color:#14b8a6; }


/* ── Единая гамма кнопок-действий (29.08.2026). Одно правило на все
   программы: зелёный — получение/создание, красный — удаление и всё
   необратимое. Цвета утверждённые: #10b981 и #ef4444. !important нужен —
   этот файл грузится последним и обязан перебить точечные inline-стили. */
.btn-green { background:#10b981 !important; color:#fff !important; border:none !important; text-decoration:none !important; }
.btn-red   { background:#ef4444 !important; color:#fff !important; border:none !important; }
.btn-green:hover, .btn-red:hover { filter:brightness(1.12); }

/* Режим «на весь экран»: кнопка ⛶ в шапке страницы прячет меню */
body.page-max .sidebar{display:none!important}


/* ═══════════════════════════════════════════════════════════════
   Кнопки без теней
   Серость под кнопками шла от постоянной тени у .btn-primary в каждой
   программе плюс общей тени при наведении. Отклик остаётся — он и так
   есть цветом рамки и фона, тень для этого не нужна.
   ═══════════════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-icon, .btn-link, .btn-login,
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
.btn-icon:hover, .btn-link:hover, .btn-login:hover,
.stat-card, .stat-card:hover, .stat-card[onclick]:hover {
  box-shadow: none;
}
/* Нажатие остаётся заметным — сдвигом, а не тенью. */
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-icon:active, .btn-link:active,
.stat-card[onclick]:active { transform: translateY(1px); }


/* ═══════════════════════════════════════════════════════════════
   Плитки без объёма
   У плитки при наведении была крупная тень 0 8px 24px — вместе с
   наклоном за курсором она и читалась как «3D». Подъём оставляем:
   он показывает, что плитка живая, и серости не даёт.
   ═══════════════════════════════════════════════════════════════ */
.app-tile, .app-tile:hover, .panel, .card { box-shadow: none; }


/* ═══════════════════════════════════════════════════════════════
   Чат сбоку (04.09.2026). Скрипт /chat-dock.js переносит узел
   #page-teamchat в правую колонку <aside id="chatDock">; рабочая
   область сжимается, ничего не перекрывается. Внутри чата колонки
   ставятся друг над другом: список бесед сверху, переписка снизу —
   в 380 пикселей две колонки рядом не помещаются.
   ═══════════════════════════════════════════════════════════════ */
#chatDock { width:380px; min-width:320px; max-width:800px; flex-shrink:0; height:100vh;
            display:flex; border-left:1px solid var(--border); background:var(--card); }
.chat-dock-grip { width:6px; flex-shrink:0; cursor:col-resize; background:transparent; transition:background .15s; }
.chat-dock-grip:hover { background:var(--accent); }
.chat-dock-body { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.chat-docked { display:flex !important; flex-direction:column; height:100%; min-height:0; }
.chat-docked .page-header { padding:10px 12px; flex-wrap:wrap; gap:6px; }
.chat-docked .page-header .page-title { font-size:1rem; }
.chat-docked .page-header .page-actions .btn { padding:4px 8px; font-size:.72rem; }
.chat-docked .page-header .pgMaxBtn { display:none; }
.chat-docked .content-area { flex:1; min-height:0; padding:0 8px 8px; display:flex; flex-direction:column; }
.chat-docked .tc-layout { flex-direction:column; height:auto; flex:1; min-height:0; }
.chat-docked .tc-sidebar-wrap { width:auto; min-width:0; max-height:38%; border-right:0; border-bottom:1px solid var(--border); }
.chat-docked .tc-thread { flex:1; min-height:0; }
/* Беседа не выбрана — список бесед во всю колонку, а подсказка «Выберите
   беседу» ужимается до строки: картинка на полэкрана прятала темы. */
/* В разметке написано display:none без пробела, а скрипт после закрытия
   беседы ставит display: none с пробелом — ловим оба написания. */
.chat-docked .tc-layout:has(#tcMessages[style*="display:none"]) .tc-sidebar-wrap,
.chat-docked .tc-layout:has(#tcMessages[style*="display: none"]) .tc-sidebar-wrap { max-height:none; flex:1 1 auto; }
.chat-docked .tc-layout:has(#tcMessages[style*="display:none"]) .tc-thread,
.chat-docked .tc-layout:has(#tcMessages[style*="display: none"]) .tc-thread { flex:0 0 auto; margin-top:auto; }
.chat-docked .tc-thread-header .empty-state { padding:8px; display:flex; align-items:center; gap:8px; }
.chat-docked .tc-thread-header .empty-state .empty-icon { font-size:1rem; margin:0; }
.chat-docked .tc-thread-header .empty-state h3 { font-size:.85rem; margin:0; font-weight:600; }
.chat-docked .tc-thread-header .empty-state p { display:none; }
.chat-docked .tc-thread-header { padding:10px 12px; min-height:48px; }
.chat-docked .chat-messages { padding:10px 12px; }
/* Поле ввода в узкой колонке: строка текста во всю ширину, под ней
   значки и кнопка — иначе они переносились вразнобой. */
.chat-docked .chat-input-wrap { padding:8px; gap:6px; flex-wrap:wrap; }
.chat-docked .chat-input-wrap textarea { min-height:38px; flex:1 1 100%; order:0; }
.chat-docked .chat-input-wrap .btn-icon, .chat-docked .chat-input-wrap .emoji-wrap { order:1; height:36px; width:36px; }
.chat-docked .chat-input-wrap .btn-primary { order:2; margin-left:auto; padding:6px 12px; font-size:.8rem; }
@media (max-width:1099px) { #chatDock, #chatDockBtn { display:none !important; } }

/* Кнопка смайликов — в один ряд и один размер со скрепкой и GIF */
.chat-input-wrap .emoji-wrap{display:flex;align-items:center}
.chat-docked .chat-input-wrap .emoji-wrap .btn-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0}
/* Отдельное окно одной беседы (?chat=ID) */
body.chat-solo .sidebar{display:none!important}
body.chat-solo .subtabs{display:none!important}
body.chat-solo #page-teamchat .page-header{display:none!important}
body.chat-solo .tc-sidebar-wrap{display:none!important}

/* Отдельное окно беседы: во всю высоту, ввод как в чате сбоку */
body.chat-solo .main{padding:10px}
/* chat-solo-fit: окно беседы подгоняется под свою ширину (22.09.2026).
   Без min-width:0 элементы flex не сжимаются ниже своего содержимого —
   именно поэтому отдельное окно оказывалось обрезанным справа и с
   горизонтальной прокруткой. */
body.chat-solo{min-width:0;overflow-x:hidden}
body.chat-solo .app{min-width:0;max-width:100vw}
body.chat-solo .main,
body.chat-solo #page-teamchat,
body.chat-solo #page-teamchat .content-area,
body.chat-solo .tc-layout,
body.chat-solo .tc-thread,
body.chat-solo .tc-messages,
body.chat-solo #tcMessages,
body.chat-solo #tcThreadHeader,
body.chat-solo .chat-input-wrap{min-width:0;max-width:100%}
body.chat-solo #tcThreadHeader{flex-wrap:wrap;row-gap:6px}
body.chat-solo .chat-msg{max-width:92%}
body.chat-solo .chat-msg.user{align-self:flex-end}
body.chat-solo .tc-topics-row{flex-wrap:wrap;row-gap:6px}
/* Узкое окно: поля поменьше, иначе на текст остаётся полоска. */
@media (max-width:620px){
  body.chat-solo .main{padding:6px}
  body.chat-solo .chat-input-wrap{padding:6px}
  body.chat-solo .chat-msg{padding:9px 11px}
}
body.chat-solo #page-teamchat .content-area{padding:0}
body.chat-solo .tc-layout{height:calc(100vh - 20px)}
body.chat-solo .chat-input-wrap{flex-wrap:wrap;gap:6px;padding:8px}
body.chat-solo .chat-input-wrap textarea{flex:1 1 100%;order:0;min-height:64px}
body.chat-solo .chat-input-wrap .btn-icon,body.chat-solo .chat-input-wrap .emoji-wrap{order:1;height:36px;width:36px}
body.chat-solo .chat-input-wrap .emoji-wrap .btn-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0}
body.chat-solo .chat-input-wrap .btn-primary{order:2;margin-left:auto;padding:6px 14px}

/* emoji-wrap единые габариты: обёртка смайлика = кнопка 📎/🎞 */
.chat-input-wrap .emoji-wrap{align-self:flex-end;display:flex;height:44px;width:44px;flex-shrink:0}
.chat-docked .chat-input-wrap .emoji-wrap,body.chat-solo .chat-input-wrap .emoji-wrap{height:36px;width:36px;align-self:flex-end;order:1}
.chat-input-wrap .emoji-wrap .btn-icon{width:100%;height:100%;padding:0;margin:0;display:flex;align-items:center;justify-content:center}

/* Стрелка «к списку бесед» — только в чате сбоку */
.tc-back-btn{display:none}
.chat-docked .tc-back-btn{display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
/* «‹ к списку бесед» — самая заметная кнопка шапки (26.09.2026): крупная,
   залита цветом акцента, чтобы вернуться к беседам одним касанием. */
.chat-docked .tc-back-btn,#tcThreadHeader .btn-icon.tc-back-btn{width:48px!important;height:44px!important;min-width:48px;padding:0 0 3px!important;
  font-size:2rem!important;font-weight:800;line-height:1;border-radius:12px;
  background:var(--hover,#14b8a6)!important;color:#fff!important;border:0!important;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.chat-docked .tc-back-btn:hover,.chat-docked .tc-back-btn:active{filter:brightness(1.1)}
body.chat-solo .tc-back-btn{display:none!important}

/* Обои чата (кнопка 🖼 в заголовке беседы): градиент + узор как в Telegram */
.tc-wall-1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.55'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z' fill='%23ffffff' stroke='none' opacity='.7'/%3E%3Cpath d='M60 78h14M67 71v14'/%3E%3Ccircle cx='118' cy='96' r='5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M20 108l5 5m0-5l-5 5'/%3E%3Ccircle cx='84' cy='126' r='8'/%3E%3Cpath d='M124 48h10M129 43v10'/%3E%3Ccircle cx='44' cy='58' r='4' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#dbeafe 0%,#ede9fe 60%,#e0e7ff 100%)!important;background-size:140px 140px,cover!important}
.tc-wall-2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.55'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z' fill='%23ffffff' stroke='none' opacity='.7'/%3E%3Cpath d='M60 78h14M67 71v14'/%3E%3Ccircle cx='118' cy='96' r='5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M20 108l5 5m0-5l-5 5'/%3E%3Ccircle cx='84' cy='126' r='8'/%3E%3Cpath d='M124 48h10M129 43v10'/%3E%3Ccircle cx='44' cy='58' r='4' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#dcfce7 0%,#d1fae5 60%,#ccfbf1 100%)!important;background-size:140px 140px,cover!important}
.tc-wall-3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.55'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z' fill='%23ffffff' stroke='none' opacity='.7'/%3E%3Cpath d='M60 78h14M67 71v14'/%3E%3Ccircle cx='118' cy='96' r='5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M20 108l5 5m0-5l-5 5'/%3E%3Ccircle cx='84' cy='126' r='8'/%3E%3Cpath d='M124 48h10M129 43v10'/%3E%3Ccircle cx='44' cy='58' r='4' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#fef3c7 0%,#ffe4e6 60%,#fce7f3 100%)!important;background-size:140px 140px,cover!important}
.tc-wall-4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.55'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z' fill='%23ffffff' stroke='none' opacity='.7'/%3E%3Cpath d='M60 78h14M67 71v14'/%3E%3Ccircle cx='118' cy='96' r='5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M20 108l5 5m0-5l-5 5'/%3E%3Ccircle cx='84' cy='126' r='8'/%3E%3Cpath d='M124 48h10M129 43v10'/%3E%3Ccircle cx='44' cy='58' r='4' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#cffafe 0%,#e0f2fe 60%,#bae6fd 100%)!important;background-size:140px 140px,cover!important}
.tc-wall-5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.10'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M96 18l4 8 8 1-6 6 2 9-8-5-8 5 2-9-6-6 8-1z' fill='%23ffffff' stroke='none' opacity='.14'/%3E%3Cpath d='M60 78h14M67 71v14'/%3E%3Ccircle cx='118' cy='96' r='5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M20 108l5 5m0-5l-5 5'/%3E%3Ccircle cx='84' cy='126' r='8'/%3E%3Cpath d='M124 48h10M129 43v10'/%3E%3Ccircle cx='44' cy='58' r='4' fill='%23ffffff' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#1e293b 0%,#312e42 60%,#1e1b4b 100%)!important;background-size:140px 140px,cover!important}
.tc-wall-5 .msg-time,.tc-wall-5 .msg-author{color:#cbd5e1}

/* Кнопка ↗ «в отдельном окне»: в списке — при наведении */
.tc-item{position:relative}
.tc-pop-btn{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;align-items:center;justify-content:center;padding:0;font-size:.95rem;flex-shrink:0}
.tc-item:hover .tc-pop-btn{display:flex}
body.chat-solo .tc-pop-btn{display:none!important}
body.chat-solo #tcThreadHeader .btn-icon[title="Открыть в отдельном окне"]{display:none!important}

/* ☰ меню на узких окнах (когда сайдбар спрятан за край) */
.sb-burger{display:none;position:fixed;top:10px;left:10px;z-index:101;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg,inherit);font-size:1.1rem;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15)}
@media (max-width:768px){body:not(.chat-solo) .sb-burger{display:flex;align-items:center;justify-content:center}}

/* Мультичат: окно-пульт из колонок-бесед */
body.chat-multi > :not(#tcMultiGrid){display:none!important}
#tcMultiGrid{position:fixed;inset:0;display:grid;gap:1px;background:var(--border)}
#tcMultiGrid iframe{width:100%;height:100%;border:0;background:var(--bg,#fff)}

/* Вложение в сообщении — читабельный чип; можно перетащить в другую беседу */
.tc-attach-chip{display:inline-flex;gap:6px;align-items:center;background:#fff;color:#1e293b!important;border:1px solid #cbd5e1;border-radius:10px;padding:8px 12px;font-size:.86rem;font-weight:700;text-decoration:none!important;max-width:280px;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tc-attach-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tcAttachPreview{font-weight:600;color:var(--fg,#111)!important}
/* Значок программы в заголовке — не нужен в отдельном окне/колонке */
body.chat-solo .tc-space-badge{display:none}
/* Меню действий над сообщением — с подписями */
.tc-msg-actions button{font-size:.78rem;white-space:nowrap;display:flex;align-items:center;gap:4px}
/* Колонки мультичата: полоска с ✕ */
.tcm-col{position:relative;min-width:0;display:flex;flex-direction:column}
.tcm-bar{display:flex;justify-content:flex-end;background:var(--card);border-bottom:1px solid var(--border);padding:2px 6px}
.tcm-close{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:var(--card2,var(--card));cursor:pointer;font-size:.8rem;line-height:1;opacity:.7}
.tcm-close:hover{opacity:1}
.tcm-col iframe{flex:1;min-height:0}

/* Перетаскивание вложений + подсветка отмены загрузки */
.tc-attach-drag{-webkit-user-drag:element}
#tcAttachPreview.tc-uploading:hover{color:#ef4444!important;background:rgba(239,68,68,.09);border-radius:8px}

/* Длинные «слова» переносятся, чат не расползается вбок */
.chat-messages{overflow-x:hidden}
.chat-msg{word-break:break-word;overflow-wrap:anywhere;max-width:100%}
/* Библиотека GIF */
.tc-gif-pop{position:fixed;z-index:12000;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;max-width:340px}
.tc-gif-grid{display:grid;grid-template-columns:repeat(3,96px);gap:8px;max-height:300px;overflow-y:auto}
.tc-gif-grid img{width:96px;height:96px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent}
.tc-gif-grid img:hover{border-color:var(--accent,#9f1d3c)}
/* Модалка мультичата: площадки выделены полосой */
.tcm-space{background:var(--card2,rgba(159,29,60,.07));border-left:3px solid #9f1d3c;border-radius:8px;padding:6px 8px!important}

/* Точки статуса занятости */
.tc-st-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.tc-st-red{background:#ef4444}
.tc-st-yellow{background:#f59e0b}
.tc-st-green{background:#10b981}

/* Галочки доставлено/прочитано */
.tc-ticks{cursor:pointer;font-weight:700;letter-spacing:-2px}
.tc-ticks-read{color:#38bdf8}
/* Оповещения видны и в окне-пульте мультичата */
body.chat-multi > #toast-container{display:flex!important}
/* Отдельное окно/пульт: без вспышки дашборда при загрузке */
html.tc-solo-boot body>*:not(#tcSoloLoad){display:none!important}

/* Синий статус «на обеде» */
.tc-st-blue{background:#3b82f6}
/* Список бесед прокручивается (flexbox требует min-height:0) */
.tc-sidebar-wrap{min-height:0}
.tc-sidebar{overflow-y:auto;min-height:0}

/* Темы беседы */
#tcTopicsBar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--card)}
.tc-topic-chip{border:1px solid var(--border);background:var(--card2,var(--card));border-radius:14px;padding:3px 10px;font-size:.76rem;cursor:pointer;color:inherit}
.tc-topic-chip.active{background:#9f1d3c;border-color:#9f1d3c;color:#fff}
.tc-topic-del{border:none;background:none;cursor:pointer;font-size:.8rem;color:var(--muted);margin-left:-4px}
.tc-topic-badge{display:inline-block;font-size:.68rem;color:#9f1d3c;background:rgba(159,29,60,.09);border-radius:8px;padding:1px 7px;margin-bottom:3px}
#tcTopicSearchInp{padding:3px 9px;border:1px solid var(--border);border-radius:12px;font-size:.76rem;width:150px}
body.chat-solo #tcTopicsBar{padding:6px 8px}

/* Подсветка найденного в поиске */
mark.tc-hi{background:#fde047;color:#111;border-radius:3px;padding:0 2px}

/* Заставка отдельного окна беседы */
#tcSoloLoad{position:fixed;inset:0;z-index:14000;background:var(--bg,#f5f6fa);display:flex;flex-direction:column;align-items:center;justify-content:center}
.tc-solo-spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--border);border-top-color:#9f1d3c;animation:tcSpin .9s linear infinite}
@keyframes tcSpin{to{transform:rotate(360deg)}}

/* Мини-аватар в списке участников */
.tc-mini-ava{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* Стрелка выхода из полного экрана страницы */
/* Стрелка выхода из полного экрана — баклажан (решение владельца 09.09.2026) */
/* Возврат меню — кнопка с надписью, а не значок (23.09.2026): значок «‹»
   в углу не читался, люди не понимали, чем вернуть меню. */
#pgMaxExit{display:none;position:fixed;top:10px;right:10px;z-index:120;height:34px;padding:0 14px;gap:6px;border-radius:10px;border:1px solid #7a4f6a;background:#614051;color:#fff;font:inherit;font-size:.84rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#pgMaxExit:hover{background:#7a4f6a}
body.page-max #pgMaxExit{display:flex;align-items:center;justify-content:center}
/* стрелка ‹ висит поверх правого края — кнопкам ряда нужен отступ, чтобы не упираться в неё */
/* Отступ под плавающую кнопку нужен только там, где её видно: если есть
   ряд мини-площадок, кнопка стоит в нём и место резервировать незачем. */
body.page-max:not(.has-minibar) .subtabs, body.page-max:not(.has-minibar) .page-header,
body.att-max:not(.has-minibar) .subtabs, body.att-max:not(.has-minibar) .page-header { padding-right:170px !important; }
/* «Вернуть меню» в ряду мини-площадок: прижата вправо, видна только
   когда меню действительно спрятано. */
/* Место №2 ряда занято постоянно: кнопка на виду всегда, иначе
   спрятанное меню нечем вернуть (в УЦ так и получилось). Когда прятать
   нечего — кнопка приглушена, но остаётся на своём месте. */
.mini-slot-back { display:inline-flex !important; align-items:center; justify-content:center;
  text-align:center; background:#614051; color:#fff; border-color:#7a4f6a; font-weight:700; }
.mini-slot-back:hover { background:#7a4f6a; color:#fff; border-color:#7a4f6a; }

/* Экран блокировки (70 минут тишины) */
#lockOverlay{position:fixed;inset:0;z-index:15000;background:rgba(15,23,42,.92);display:flex;align-items:center;justify-content:center}
#lockOverlay .lock-card{background:var(--card,#fff);border-radius:16px;padding:26px;width:300px;display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lockOverlay input{padding:9px 11px;border:1px solid var(--border,#ccc);border-radius:9px}

/* Замок: всё по центру, кнопки — синие */
#lockOverlay .lock-card{align-items:center}
#lockOverlay .lock-card b{display:block;text-align:center;width:100%}
#lockOverlay input{width:100%;box-sizing:border-box;text-align:center}
#lockOverlay button{background:#3b82f6!important;color:#fff!important;border:none;border-radius:9px;padding:10px;width:100%;cursor:pointer;font-weight:600}

/* Библиотека приглушённых кнопок подтверждения (hover — цветная рамка) */
.btn-soft-red,.btn-soft-blue,.btn-soft-green{border:2px solid transparent!important;font-weight:600;transition:.15s;border-radius:9px;cursor:pointer;padding:8px 14px}
.btn-soft-red{background:rgba(239,68,68,.14)!important;color:#b91c1c!important}
.btn-soft-red:hover{border-color:#ef4444!important}
.btn-soft-blue{background:rgba(59,130,246,.14)!important;color:#1d4ed8!important}
.btn-soft-blue:hover{border-color:#3b82f6!important}
.btn-soft-green{background:rgba(16,185,129,.14)!important;color:#047857!important}
.btn-soft-green:hover{border-color:#10b981!important}
body:not(.light-mode) .btn-soft-red{color:#f87171!important}
/* Стандартный крестик закрытия окна (27.09.2026, решение владельца): у всех
   окон — как «✕» в «Учёте лицензий» (btn-soft-red). Задан на .close-btn
   здесь, в общем слое: все окна всех программ и будущие получают его сами,
   в разметке ничего менять не нужно — пишите <button class="close-btn">×</button>. */
.close-btn{display:inline-flex!important;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  min-width:34px;height:30px;padding:0 10px!important;margin-left:18px;border-radius:9px!important;
  background:rgba(239,68,68,.14)!important;color:#b91c1c!important;border:2px solid transparent!important;
  font-size:1.2rem!important;font-weight:700!important;line-height:1!important;cursor:pointer;transition:.15s}
.close-btn:hover{border-color:#ef4444!important;color:#b91c1c!important}
body:not(.light-mode) .close-btn,body:not(.light-mode) .close-btn:hover{color:#f87171!important}
body:not(.light-mode) .btn-soft-blue{color:#93c5fd!important}
body:not(.light-mode) .btn-soft-green{color:#6ee7b7!important}

/* Главные кнопки (btn-primary) — утверждённый приглушённый синий */
.btn-primary{background:rgba(59,130,246,.14)!important;background-image:none!important;color:#1d4ed8!important;border:2px solid transparent!important;box-shadow:none!important;font-weight:600}
.btn-primary:hover{border-color:#3b82f6!important;background:rgba(59,130,246,.14)!important;color:#1d4ed8!important;opacity:1!important}
body:not(.light-mode) .btn-primary{color:#93c5fd!important}

/* Тема «Вечерняя» — сумерки между светлой и тёмной */
body.evening-mode{--bg:#232833;--card:#2c3340;--card2:#353d4c;--border:#485164;--text:#d7dce6;--muted:#98a2b5}

/* Чат: панель действий читаема в тёмной/вечерней темах и не обрезается */
.tc-msg-actions{color:var(--text,#e8e8e8)!important;flex-wrap:wrap;justify-content:flex-end;max-width:min(90vw,340px)}
.tc-msg-actions button{color:inherit!important}

/* Вишнёвый — цвет заголовков табеля (Дело); для акцентных цифр и надписей.
   На тёмных темах — светлее, иначе не читается. */
.c-cherry{color:#9f1d3c!important}
body:not(.light-mode) .c-cherry{color:#e05575!important}

/* ── Площадки с телефона (≤768px): сайдбар уже прячется за ☰ (chat-dock),
   здесь — шапки страниц, отступы и прокрутка широких таблиц ── */
@media (max-width:768px){
  body:not(.chat-solo) .page-header{flex-wrap:wrap;gap:8px;padding-left:48px}
  body:not(.chat-solo) .page-header .btn{padding:6px 10px;font-size:.8rem}
  body:not(.chat-solo) .page-title{font-size:1.05rem}
  body:not(.chat-solo) .content-area{padding:12px 10px}
  body:not(.chat-solo) .panel{overflow-x:auto}
  body:not(.chat-solo) .table-wrap{overflow-x:auto}
  body:not(.chat-solo) .page-actions{flex-wrap:wrap;gap:6px}
}

/* ── Второй каскад: полоска мини-площадок сверху каждой программы.
   Пока заглушки с номерами; при заселении получат имена и адреса
   вида x.golibas.ru ── */
.mini-cascade{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 14px 7px;background:var(--card);border-bottom:1px solid var(--border)}
.mini-cascade .mini-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.mini-cascade .mini-slot{min-width:44px;height:30px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-weight:700;font-size:.85rem;cursor:pointer;transition:.15s}
.mini-cascade .mini-slot:hover{border-color:var(--hover);color:var(--hover);background:rgba(var(--hover-rgb,20,184,166),.12)}
/* Заселённое место: имя вместо номера и обычный цвет текста — оно ведёт
   в работающий раздел, а не сообщает о брони, и должно читаться как
   ссылка, а не как заглушка. */
.mini-cascade .mini-slot-taken{color:var(--text);font-weight:600;border-color:var(--hover)}
/* Ряд мини-площадок виден всегда, в том числе в полном экране: в нём
   живёт кнопка возврата меню (23.09.2026). Прячем только на время
   загрузки отдельного окна беседы. */
html.tc-solo-boot .mini-cascade{display:none}


/* ── Бейдж «новое» ──────────────────────────────────────────────
   Софт-жёлтый как признак «заведено, но ещё не обкатано». Живёт в общем
   слое, а не в отдельной программе: цвет объявлен стандартом компании.
   Основа .badge (отступы, скругление) берётся из style.css программы,
   здесь только цвета. Текст — var(--text): собственный цвет сливался бы
   с заливкой на светлой теме, как это было с остальными бейджами. */
.badge-soft-yellow {
  background: var(--soft-yellow-bg);
  border: 1px solid var(--soft-yellow-br);
  color: var(--text);
}

/* Кнопка перевода в Библиотеке УЦ: жёлтая пока идёт, зелёная когда готов */
.lib-tr-run{background:rgba(245,158,11,.18)!important;color:#a16207!important}
body:not(.light-mode) .lib-tr-run{color:#fcd34d!important}
.lib-tr-done{background:rgba(16,185,129,.20)!important;color:#111!important}
body:not(.light-mode) .lib-tr-done{color:#d1fae5!important}
.lib-tr-run:hover{border-color:#f59e0b!important}
.lib-tr-done:hover{border-color:#10b981!important}
.lib-spin{display:inline-block;animation:tcSpin 1.4s linear infinite}

/* Правило ПО: сообщения о нехватке средств AI и сбоях фоновых работ —
   мягко-красным, чтобы их нельзя было не заметить. */
.ai-warn{background:rgba(239,68,68,.10);color:#b91c1c;border-left:3px solid rgba(239,68,68,.55);padding:8px 12px;border-radius:8px;margin:8px 0}
body:not(.light-mode) .ai-warn{color:#fca5a5}


/* ── Значок Telegram ──────────────────────────────────────────────────
   Фирменный знак вместо конверта 📨: рядом с почтой два конверта читались
   как одно и то же. Рисунок объявлен ЗДЕСЬ, в общем слое, один раз —
   карточка сотрудника есть в семнадцати программах, и картинка,
   размноженная по файлам, при первой правке разошлась бы.
   Размер в em, а не в пикселях: значок должен расти вместе с текстом
   строки, в которой стоит. */
.tg-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='120' fill='%23229ED9'/%3E%3Cpath fill='%23fff' d='M54 116l112-43c5-2 10 1 8 9l-19 90c-1 6-5 7-10 4l-27-20-13 13c-2 2-3 3-6 3l2-30 55-50c2-2 0-3-3-1l-68 43-29-9c-6-2-6-6 1-9z'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ── Столбец «Статус»: цветной текст без плашки ───────────────────────
   Решение владельца 07.09.2026. Образец — раздел VPN в Инфраструктуре:
   там статус написан словом нужного цвета, и это читается спокойнее ряда
   одинаковых пилюль. Класс на ячейку ставит общий слой (chat-dock.js),
   находя столбец по заголовку таблицы.

   Цвет берём из тона самой плашки: он уже несёт смысл (зелёное — идёт
   хорошо, красное — плохо). Правило «текст бейджа — var(--text)» здесь
   отменяется намеренно: там оно спасало контраст ВНУТРИ заливки, а без
   заливки цвет и есть единственный признак. Специфичность выше, чем у
   .badge-*, поэтому !important не нужен. */
td.col-status .badge {
  /* Размер — как у соседних колонок: мелкий текст на общей базовой линии
     выглядит просевшим. */
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  white-space: nowrap;
  /* Обычный встроенный текст, а не блок. Блок (inline-block/inline-flex)
     садится на базовую линию нижней кромкой, и буквы внутри оказываются
     ниже соседних колонок — замерено 3–3,5 px. */
  display: inline;
  vertical-align: baseline;
}
td.col-status .badge-green       { color: var(--ok, #10b981); }
td.col-status .badge-red         { color: var(--danger, #ef4444); }
td.col-status .badge-yellow      { color: #f59e0b; }
td.col-status .badge-orange      { color: #f97316; }
td.col-status .badge-blue        { color: #3b82f6; }
td.col-status .badge-purple      { color: #a855f7; }
td.col-status .badge-gray        { color: var(--muted); }
td.col-status .badge-soft-yellow { color: #b45309; }

/* Другие семейства плашек в том же столбце.
   st-badge (общий слой) и ui-pill (Финансы) уже красят ТЕКСТ в цвет тона —
   им довольно снять заливку. */
td.col-status .st-badge,
td.col-status .ui-pill {
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
  display: inline;
  vertical-align: baseline;
}
/* pm-badge в Управлении устроен наоборот: смысл несёт ФОН, а текст белый
   (в светлой теме чёрный). Сняв заливку, мы потеряли бы признак совсем,
   поэтому цвет тона называем явно. Высота и внутренние отступы там тоже
   заданы жёстко — снимаем, иначе слово повиснет в пустой коробке. */
td.col-status .pm-badge {
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  height: auto;
  min-width: 0;
  border-radius: 0;
  font-weight: 600;
  display: inline;
  vertical-align: baseline;
}
td.col-status .pm-badge.pm-green { color: var(--green, #10b981); }
td.col-status .pm-badge.pm-sea   { color: #17a2b8; }
td.col-status .pm-badge.pm-amber { color: #f59e0b; }
td.col-status .pm-badge.pm-grey  { color: var(--muted); }


/* ═══════════════════════════════════════════════════════════════
   Панель фоновых загрузок (upload.js → golibasUploadBackground), 07.09.2026.
   Внизу справа, над всем; окно программы при этом уже закрыто.
   ═══════════════════════════════════════════════════════════════ */
.gup-tray { position:fixed; right:18px; bottom:18px; width:340px; max-width:calc(100vw - 36px); z-index:12000;
            background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;
            font-size:.82rem; color:var(--text); }
.gup-head { display:flex; align-items:center; justify-content:space-between; padding:8px 12px;
            font-weight:700; border-bottom:1px solid var(--border); background:var(--card2, var(--card)); }
.gup-hide { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 4px; }
.gup-tray.gup-min .gup-list { display:none; }
.gup-list { max-height:40vh; overflow-y:auto; }
.gup-row { display:grid; grid-template-columns:1fr auto; gap:4px 8px; padding:8px 12px; border-bottom:1px solid var(--border); align-items:center; }
.gup-row:last-child { border-bottom:0; }
.gup-name { grid-column:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.gup-cancel { grid-column:2; grid-row:1 / span 3; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.95rem; }
.gup-cancel:hover { color:var(--red); }
.gup-bar { grid-column:1; height:6px; border-radius:4px; background:var(--border); overflow:hidden; }
.gup-fill { height:100%; background:var(--hover, #14b8a6); transition:width .25s; }
.gup-done .gup-fill { background:var(--green, #10b981); }
.gup-error .gup-fill { background:var(--red, #ef4444); }
.gup-stall .gup-fill { background:var(--yellow, #f59e0b); }
.gup-status { grid-column:1; color:var(--muted); font-size:.76rem; }
.gup-error .gup-status { color:var(--red, #ef4444); }

.gup-resume .gup-fill { background:var(--muted); }
.gup-row.gup-resume { grid-template-columns:1fr auto; }
.gup-row .gup-resume { grid-column:1; justify-self:start; margin-top:4px; padding:4px 10px; font-size:.76rem; }
.gup-row.gup-resume .gup-cancel { grid-row:1 / span 4; }


/* ═══════════════════════════════════════════════════════════════
   AI-помощник в правой колонке (ai-dock.js), 08.09.2026. Та же колонка,
   что у чата сбоку: пока помощник открыт, чат спрятан.
   ═══════════════════════════════════════════════════════════════ */
#aiDock { width:400px; min-width:320px; flex-shrink:0; height:100vh; display:none; flex-direction:column;
          border-left:1px solid var(--border); background:var(--card); }
.ai-dock-head { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); }
.ai-dock-title { flex:1; font-weight:700; }
.ai-dock-sub { font-size:.72rem; color:var(--muted); font-weight:400; }
.ai-dock-head select { max-width:150px; font-size:.78rem; padding:4px 6px; }
.ai-dock-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.ai-msg { display:flex; }
.ai-msg.ai-user { justify-content:flex-end; }
.ai-bubble { max-width:88%; padding:9px 12px; border-radius:12px; line-height:1.45; font-size:.88rem; white-space:pre-wrap; word-break:break-word; }
.ai-user .ai-bubble { background:rgba(20,184,166,.18); }
.ai-assistant .ai-bubble { background:var(--card2, rgba(0,0,0,.06)); border:1px solid var(--border); }
.ai-bubble pre { background:rgba(0,0,0,.08); padding:8px; border-radius:8px; overflow-x:auto; margin:6px 0; font-size:.8rem; white-space:pre; }
.ai-meta { font-size:.68rem; color:var(--muted); margin-top:4px; }
.ai-dock-compose { display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); align-items:flex-end; }
.ai-dock-compose textarea { flex:1; resize:none; max-height:160px; min-height:40px; }
.mini-slot.mini-slot-ai { font-weight:700; color:#7c3aed; border-color:#c4b5fd; }
.mini-slot.mini-slot-ai:hover, .mini-slot.mini-slot-ai.active { background:rgba(124,58,237,.12); border-color:#7c3aed; color:#7c3aed; }
@media (max-width:1099px) { #aiDock { position:fixed; right:0; top:0; z-index:12000; width:100vw; } }

/* Главный помощник во всю ширину (Коммуникация → AI компании). */
.ai-main.ai-inline { display:flex; flex-direction:column; height:calc(100vh - 260px); min-height:420px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card); }
.ai-main .ai-bubble { max-width:72%; font-size:.92rem; }


/* ── Личное обращение через @ ─────────────────────────────────────────
   Окно поверх всего: обращение лично к человеку не должно теряться среди
   уведомлений. Само не закрывается — только по нажатию. */
.mention-overlay {
  position: fixed; inset: 0; z-index: 15000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.mention-box {
  width: min(440px, calc(100vw - 32px));
  background: var(--card); color: var(--text);
  border: 2px solid var(--yellow, #f59e0b); border-radius: 14px;
  padding: 18px 20px;
}
.mention-head { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.mention-where { font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.mention-text {
  font-size: .92rem; line-height: 1.5;
  padding: 10px 12px; border-radius: 10px;
  background: var(--card2); word-break: break-word;
}
.mention-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Площадка «Чат» светится, пока обращение не прочитано. Пульсация, а не
   постоянный цвет: неподвижную точку глаз перестаёт замечать через
   минуту, и смысл отметки теряется. */
.mini-cascade .mini-slot-alert {
  color: var(--yellow, #f59e0b);
  border-color: var(--yellow, #f59e0b);
  animation: miniAlertPulse 1.6s ease-in-out infinite;
}
@keyframes miniAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
/* Уважаем настройку «меньше движения»: там оставляем ровный цвет. */
@media (prefers-reduced-motion: reduce) {
  .mini-cascade .mini-slot-alert { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Автоблокировка (lock.js): предупреждение за 10 с и замок. Замок у
   программ уже был оформлен в своих style.css; здесь — то же для тех,
   у кого не было (Финансы), и окно предупреждения.
   ═══════════════════════════════════════════════════════════════ */
#lockOverlay { position:fixed; inset:0; z-index:15000; background:rgba(15,23,42,.92); display:flex; align-items:center; justify-content:center; }
#lockOverlay .lock-card { background:var(--card,#fff); color:var(--text,#111); border-radius:16px; padding:26px; width:300px; display:flex; flex-direction:column; gap:10px; text-align:center; align-items:center; }
#lockOverlay input { width:100%; box-sizing:border-box; text-align:center; padding:9px 11px; border:1px solid var(--border,#ccc); border-radius:9px; }
#lockWarn { position:fixed; inset:0; z-index:14900; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; }
#lockWarn .lock-warn-card { background:var(--card,#fff); color:var(--text,#111); border-radius:16px; padding:22px 26px; width:340px; display:flex; flex-direction:column; gap:10px; text-align:center; align-items:center; border:1px solid var(--border,#ddd); }
#lockWarn b span { color:var(--red,#ef4444); font-size:1.2em; }
.mini-slot.mini-slot-chat { font-weight:700; }
.mini-slot.mini-slot-chat.active { background:rgba(20,184,166,.14); border-color:var(--hover,#14b8a6); color:var(--hover,#14b8a6); }

/* Чат Коммуникации в правом столбце программ без своего чата (Финансы). */
#chatDock.chat-dock-embed { display:flex; flex-direction:column; width:400px; min-width:320px; flex-shrink:0; height:100vh;
  border-left:1px solid var(--border); background:var(--card); }
.chat-dock-embed-head { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--border); }
.chat-dock-embed-head b { flex:1; }
#chatDock.chat-dock-embed iframe { flex:1; border:0; width:100%; background:transparent; }
/* Финансы: каркас .wrap должен уметь принять правый столбец. */
.wrap:has(> #aiDock), .wrap:has(> #chatDock) { display:flex; }
.wrap > #aiDock, .wrap > #chatDock { position:sticky; top:0; }

/* Чат сбоку на весь экран (кнопка «⛶ Экран» в шапке колонки). */
#chatDock.chat-dock-full { position:fixed !important; inset:0; width:100vw !important; max-width:100vw; height:100vh; z-index:13000; }
#chatDock.chat-dock-full .chat-docked .tc-layout { flex-direction:row; }
#chatDock.chat-dock-full .chat-docked .tc-sidebar-wrap { max-height:none; width:300px; min-width:300px; border-right:1px solid var(--border); border-bottom:0; }

/* AI-помощник: панель помощника одинакова везде — элементы формы оформлены
   здесь, а не в style.css программы (в Финансах они были угловатыми). */
.ai-dock-title { white-space:nowrap; }
.ai-dock-head select { border:1px solid var(--border); border-radius:9px; padding:5px 8px; background:var(--card); color:var(--text); font:inherit; font-size:.78rem; }
.ai-dock-head .btn, .ai-dock-compose .btn { border-radius:9px; }
.ai-dock-head .btn-sm { padding:5px 9px; font-size:.8rem; line-height:1.2; }
.ai-dock-compose textarea { border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--card); color:var(--text); font:inherit; font-size:.88rem; }
.ai-dock-compose .btn-primary { padding:9px 14px; }
#aiDock .ai-bubble { border-radius:12px; }
.ai-main.ai-inline { border-radius:12px; }
/* Оба столбца открыты — у каждого своя ширина, страница сжимается. */
#aiDock, #chatDock { flex-shrink:0; }

/* Окно замка: глазок у пароля, «Забыли пароль?», переключатель RU/EN. */
#lockOverlay .lock-card { position:relative; width:320px; }
#lockOverlay .lock-lang { position:absolute; top:10px; right:10px; display:flex; gap:2px; }
#lockOverlay .lock-lang button { width:auto !important; border:1px solid var(--border,#ddd) !important; background:transparent !important; color:var(--muted,#777) !important; font:inherit; font-size:.7rem !important; font-weight:700; padding:2px 7px !important; border-radius:7px; cursor:pointer; }
#lockOverlay .lock-lang button.active { background:var(--hover,#14b8a6) !important; border-color:var(--hover,#14b8a6) !important; color:#fff !important; }
#lockOverlay .lock-field { position:relative; width:100%; }
#lockOverlay .lock-field input { padding-right:38px; }
/* Квадрат с центровкой по обеим осям: положение знака задаёт разметка,
   а не метрики шрифта. Знак 👁 на разных системах рисуется разными
   шрифтами (на Windows — цветным), и без этого он кажется съехавшим
   вниз, хотя сама кнопка стоит ровно по центру — замерено. */
#lockOverlay .lock-eye { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:flex !important; align-items:center; justify-content:center;
  width:28px !important; height:28px !important; padding:0 !important;
  border:0 !important; background:transparent !important; cursor:pointer;
  font-size:.95rem !important; line-height:1 !important;
  color:var(--muted,#777) !important; font-weight:400; }
#lockOverlay .lock-eye:hover { color:var(--hover,#14b8a6) !important; }
#lockOverlay .lock-rs-row .btn { background:var(--card,#fff) !important; color:var(--text,#111) !important; border:1px solid var(--border,#ddd) !important; padding:7px 8px !important; font-size:.8rem !important; }
#lockOverlay .lock-forgot { font-size:.8rem; color:var(--muted,#777); text-decoration:none; }
#lockOverlay .lock-forgot:hover { color:var(--hover,#14b8a6); text-decoration:underline; }
#lockOverlay #lockReset { width:100%; text-align:left; border:1px solid var(--border,#ddd); border-radius:12px; padding:12px; font-size:.85rem; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; }
#lockOverlay #lockReset input { text-align:left; }
#lockOverlay .lock-rs-hint { margin:0; font-size:.78rem; color:var(--muted,#777); }
#lockOverlay .lock-rs-row { display:flex; gap:8px; }
#lockOverlay .lock-rs-row .btn { flex:1; }
#lockOverlay #lockRsStep2 { display:flex; flex-direction:column; gap:8px; }
#lockOverlay #lockRsStep2[hidden], #lockOverlay #lockReset[hidden] { display:none; }

/* Окно замка с раскрытым восстановлением выше низкого экрана — прокрутка. */
#lockOverlay { overflow:auto; padding:16px 0; box-sizing:border-box; }
#lockOverlay .lock-card { margin:auto; }


/* ── Подсказка о раскладке в окне блокировки ──────────────────────────
   Пароль набирается латиницей, а раскладку страница переключить не может
   (это операционная система). Поэтому предупреждаем и предлагаем
   переставить буквы по месту клавиши. Цвет — предупреждающий, не
   ошибочный: человек ещё ничего не сделал неправильно. */
.lock-layout-hint {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: .78rem; line-height: 1.4;
  color: var(--yellow, #f59e0b); text-align: left;
}
/* Вес селектора с #lockOverlay: там правило `#lockOverlay button` красит
   ВСЕ кнопки карточки в главное действие и растягивает во всю ширину.
   Классового правила ему не перебить. */
#lockOverlay .lock-layout-hint .lock-fix,
.lock-layout-hint .lock-fix {
  display: inline-flex; align-items: center; width: auto;
  /* !important здесь вынужденно: у `#lockOverlay button` фон и цвет тоже
     помечены !important, и обычным весом их не перебить. Ставим ровно на
     эти два свойства и только для кнопки подсказки. */
  border: 1px solid var(--yellow, #f59e0b);
  background: transparent !important;
  color: var(--yellow, #f59e0b) !important;
  border-radius: 8px;
  padding: 2px 10px; margin: 0; font-size: .76rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#lockOverlay .lock-layout-hint .lock-fix:hover,
.lock-layout-hint .lock-fix:hover { background: rgba(245, 158, 11, .14) !important; }
.lock-layout-hint .lock-caps { font-weight: 600; }

/* Строка «сейчас русская раскладка» — отдельная от сообщения о том, что
   кириллица уже набрана в поле: они появляются и гаснут по разным
   причинам. */
.lock-layout-hint .lock-lay-now { width: 100%; }


/* ── Поля форм: колонок меньше, а не уже ──────────────────────────────
   Решение владельца 08.09.2026: слова в полях не должны подрезаться.

   Было: `.form-grid`/`.form-2col` — две равные колонки при любой ширине.
   Место делилось пополам независимо от длины текста, а <select> шириной
   не управляет и молча подрезает. Замер: при окне уже ~750 px обрезались
   «Руководитель автотранспортного отдела», «Директор по Контролю и
   Развитию» и подобные.

   Стало: колонка не уже 320 px. На широком экране те же две колонки, на
   узком — одна. Правило живёт в общем слое (подключается последним),
   поэтому действует во всех программах сразу. */
.form-grid,
.form-2col {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Поле занимает всю ячейку и оставляет место справа под стрелку списка,
   иначе текст упирается в неё. Многоточие — на крайний случай: лучше
   явный знак обрыва, чем слово, обрезанное посередине. */
.form-grid input, .form-grid select, .form-grid textarea,
.form-2col input, .form-2col select, .form-2col textarea {
  width: 100%;
  box-sizing: border-box;
}
.form-grid select,
.form-2col select {
  padding-right: 30px;
  text-overflow: ellipsis;
}

/* Место №6 мини-площадок — «Экран» (перенесено из шапок страниц 08.09.2026) */
.mini-cascade .mini-slot-max{color:var(--text);font-weight:600}
/* №7 MAX и №8 Telegram — окно мессенджера рядом с программой (23.09.2026) */
.mini-cascade .mini-slot-ext{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600}
.mini-cascade .mini-slot-ext img{width:16px;height:16px;border-radius:4px;flex:none}
body.att-max #pgMaxExit{display:flex;align-items:center;justify-content:center}

/* Бегущая строка проблем: кнопка «скопировать список» рядом с подписью. */
.alert-ticker-copy { border:1px solid rgba(255,255,255,.5); background:transparent; color:inherit; border-radius:6px; font:inherit; font-size:.85em; line-height:1; padding:1px 6px; margin-left:6px; cursor:pointer; vertical-align:middle; }
.alert-ticker-copy:hover { background:rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════
   ЕДИНЫЙ СТИЛЬ ТАБЛИЦ — строки-карточки (образец: УЦ → Общие → Программы)
   Решение владельца 18.09.2026: один стиль на все таблицы, новые — только
   так. Граница: таблица прямо в .table-wrap, а также emp-table /
   orgs-summary-table (Финансы) и data-table (явная метка, AI-Auth).
   Отказ — class="tbl-plain".
   Вес через :where() — раскраска строк программы (просрочено и т.п.)
   всегда весомее и не теряется.
   ═══════════════════════════════════════════════════════════════ */
:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) {
  border-collapse: separate;
  border-spacing: 0 10px;   /* как у образца в УЦ */
}
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr) > td {
  background: var(--head-tint, rgba(59, 130, 246, .14));
  border-top: 1px solid var(--border, rgba(128, 128, 128, .25));
  border-bottom: 1px solid var(--border, rgba(128, 128, 128, .25));
  transition: background .12s ease, border-color .12s ease;
}
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr) > td:first-child {
  border-left: 1px solid var(--border, rgba(128, 128, 128, .25));
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr) > td:last-child {
  border-right: 1px solid var(--border, rgba(128, 128, 128, .25));
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* Под курсором — бирюза, как у кнопок и вкладок. */
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr:hover) > td {
  background: var(--hover-bg, rgba(20, 184, 166, .12));
  border-color: var(--hover, #14b8a6);
}
/* Выбранная строка (УЦ помечает её row-cur): на ячейках, иначе заливка
   карточки перекрыла бы подсветку строки. */
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr.row-cur) > td {
  background: var(--hover-bg2, rgba(20, 184, 166, .20));
  border-color: var(--hover, #14b8a6);
}
:where(:is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) > tbody > tr.row-cur) > td:first-child {
  box-shadow: inset 3px 0 0 var(--hover, #14b8a6);
}

/* ── Кнопки действий в строке: у каждого действия свой цвет ──
   Спокойная подложка своего цвета, под курсором — сплошная заливка.
   Наведение прописано явно: иначе общее .btn:hover перекрасило бы все три
   в бирюзу и цвета потеряли бы смысл. Классы общие — для любых таблиц. */
.btn.btn-listen, .btn.btn-watch, .btn.btn-download,
.btn.btn-restore, .btn.btn-delete, .btn.btn-text {
  border: 1px solid transparent; font-weight: 600;
}
.btn.btn-listen   { color: #3b82f6; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35); }
.btn.btn-watch    { color: #8b5cf6; background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .35); }
.btn.btn-download { color: var(--green, #10b981); background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .35); }
.btn.btn-text     { color: #0ea5e9; background: rgba(14, 165, 233, .12); border-color: rgba(14, 165, 233, .35); }
.btn.btn-text:hover { color: #fff; background: #0ea5e9; border-color: #0ea5e9; }
.btn.btn-text.is-on { color: #fff; background: #0ea5e9; border-color: #0ea5e9; }
.btn.btn-restore  { color: #f59e0b; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); }
.btn.btn-delete   { color: var(--red, #ef4444); background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }
.btn.btn-listen:hover   { color: #fff; background: #3b82f6; border-color: #3b82f6; }
.btn.btn-watch:hover    { color: #fff; background: #8b5cf6; border-color: #8b5cf6; }
.btn.btn-download:hover { color: #fff; background: var(--green, #10b981); border-color: var(--green, #10b981); }
.btn.btn-restore:hover  { color: #fff; background: #f59e0b; border-color: #f59e0b; }
.btn.btn-delete:hover   { color: #fff; background: var(--red, #ef4444); border-color: var(--red, #ef4444); }
/* Открытый плеер: кнопка «⏹ Закрыть» — сплошной заливкой, видно, что играет. */
.btn.btn-listen.is-on   { color: #fff; background: #3b82f6; border-color: #3b82f6; }
.btn.btn-watch.is-on    { color: #fff; background: #8b5cf6; border-color: #8b5cf6; }

/* ── Граница левой колонки: тянется мышью (ручка ставит nav.js) ──
   Сама ручка шире линии (9px) — в тонкую полосу не попасть курсором.
   Видна только под курсором и во время перетаскивания — бирюзой. */
#sbResize { position: fixed; top: 0; width: 9px; height: 100vh; cursor: col-resize;
  z-index: 60; touch-action: none; }
#sbResize::after { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .15s ease; }
#sbResize:hover::after, body.sb-resizing #sbResize::after { background: var(--hover, #14b8a6); }
/* Пока тянем — не выделяем текст, а окна-фреймы (чат, AI) не перехватывают мышь. */
body.sb-resizing, body.sb-resizing * { cursor: col-resize !important; user-select: none !important; }
body.sb-resizing iframe { pointer-events: none !important; }
body.page-max #sbResize, body.chat-solo #sbResize { display: none !important; }

/* lock-mobile-top (18.09): на телефоне экранная клавиатура закрывала кнопку «Разблокировать» —
   карточка блокировки прижата к верху экрана и сделана компактнее, чтобы вся помещалась над клавиатурой. */
@media (max-width:768px), (hover:none) and (pointer:coarse) {
  #lockOverlay { align-items:flex-start; padding:0; }
  #lockOverlay .lock-card { margin:max(10px, 3vh) auto 16px; padding:16px 18px; gap:8px; width:min(320px, calc(100vw - 28px)); box-sizing:border-box; }
  #lockOverlay .lock-card b { font-size:.95rem; }
}

/* Выбранные файлы под полем выбора (nav.js, 19.09.2026) — тот же вид,
   что у очереди загрузки УЦ: строка на файл, имя целиком, размер справа. */
.gl-picked { margin-top: 6px; }
.gl-picked-row { display: flex; gap: 8px; align-items: center; padding: 4px 8px; margin-bottom: 4px;
  border: 1px solid var(--border, rgba(128,128,128,.3)); border-radius: 8px; font-size: .82rem; }
.gl-picked-n { color: var(--muted, #888); min-width: 18px; text-align: right; }
.gl-picked-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gl-picked-size { color: var(--muted, #888); font-size: .74rem; white-space: nowrap; }
.gl-picked-sum { font-size: .76rem; color: var(--muted, #888); margin-top: 2px; }

/* Напоминание о месячной копии (nav.js, 20.09.2026). Поверх всего и во
   всех программах; закрывается только кнопкой — ни крестика, ни ухода по
   щелчку мимо: выбор должен быть сделан. */
.bkr-win { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.bkr-box { background: var(--card, #fff); color: var(--text, #111);
  border: 1px solid var(--border, rgba(128,128,128,.3)); border-radius: 14px;
  max-width: 560px; width: 100%; padding: 22px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.bkr-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.bkr-text { font-size: .88rem; line-height: 1.5; color: var(--muted, #888); }
.bkr-text b { color: var(--text, #111); }
.bkr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; justify-content: flex-end; }

/* Кнопки скорости у плеера записей (20.09.2026): тот же набор, что у
   «Прослушать»/«Смотреть», выбранная — залита. */
.btn.rec-speed-btn { color: #3b82f6; background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .30); padding: 2px 10px; }
.btn.rec-speed-btn:hover { color: #fff; background: #3b82f6; border-color: #3b82f6; }
.btn.rec-speed-btn.is-on { color: #fff; background: #3b82f6; border-color: #3b82f6; }

/* Полоса прокрутки над широкой таблицей (nav.js, 20.09.2026): тонкая,
   всегда видимая, ходит вместе с таблицей. */
.gl-topscroll { overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 2px; }
.gl-topscroll > div { height: 1px; }
.gl-topscroll::-webkit-scrollbar { height: 10px; }
.gl-topscroll::-webkit-scrollbar-thumb { background: var(--border, rgba(128,128,128,.45)); border-radius: 6px; }
.gl-topscroll::-webkit-scrollbar-thumb:hover { background: var(--teal, #14b8a6); }
.gl-topscroll::-webkit-scrollbar-track { background: transparent; }

/* Кнопка, пока идёт расшифровка (20.09.2026): приглушённая, серая, без
   заливки под курсором — нажимать её сейчас незачем, но строка от этого
   не должна выбиваться из общей гаммы. */
.btn.btn-text.is-busy, .btn.btn-text.is-busy:hover {
  color: var(--muted, #8b95a5); background: rgba(128, 137, 150, .12);
  border-color: rgba(128, 137, 150, .30); cursor: default; }

/* ── Контакты: один цвет на всю систему (22.09.2026) ──────────────────
   Телефон — зелёный (звонок), Telegram — его фирменный синий, почта —
   индиго. Индиго выбран намеренно: красный, зелёный и бирюза заняты
   статусами, янтарный — кнопкой «Восстановить», синий и фиолетовый —
   «Прослушать» и «Смотреть». Классы ставит общий слой (nav.js), в
   программах ничего дописывать не нужно.
   !important — потому что во многих местах у ссылки стоит собственный
   color прямо в разметке; без него контакт остался бы серым. */
:where(a).c-tel, :where(a).c-tg, :where(a).c-mail,
:where(a[href^="tel:"]), :where(a[href^="mailto:"]), :where(a[href*="//t.me/"]) {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .05em .45em; border-radius: 7px;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: .15s;
}
a[href^="tel:"], a.c-tel  { color: var(--green, #10b981) !important; background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .28); }
a[href*="//t.me/"], a.c-tg   { color: #229ED9 !important; background: rgba(34, 158, 217, .10); border-color: rgba(34, 158, 217, .28); }
a[href^="mailto:"], a.c-mail { color: #6366f1 !important; background: rgba(99, 102, 241, .10); border-color: rgba(99, 102, 241, .28); }
a[href^="tel:"]:hover, a.c-tel:hover  { color: #fff !important; background: var(--green, #10b981); border-color: var(--green, #10b981); }
a[href*="//t.me/"]:hover, a.c-tg:hover   { color: #fff !important; background: #229ED9; border-color: #229ED9; }
a[href^="mailto:"]:hover, a.c-mail:hover { color: #fff !important; background: #6366f1; border-color: #6366f1; }

/* ── Чат: свой оттенок на каждого собеседника (22.09.2026) ────────────
   Лента одинаково-серых пузырей читается тяжело: не видно, где кончилась
   одна реплика и началась чужая. Оттенок закреплён за человеком (номер
   считается от имени), подложка почти прозрачная — цвет подсказывает, но
   не мешает читать текст. Свои сообщения не трогаем: они и так цветные.
   Полоска слева — чтобы разница была видна и в светлой теме, где
   подложки едва заметны. */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-0 { background: rgba(59, 130, 246, .12); }
.chat-msg.ai.tc-au-0 { background: color-mix(in srgb, #3b82f6 12%, var(--card2, #f1f2f4)); border-left: 3px solid #3b82f6; }   /* синий */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-1 { background: rgba(16, 185, 129, .12); }
.chat-msg.ai.tc-au-1 { background: color-mix(in srgb, #10b981 12%, var(--card2, #f1f2f4)); border-left: 3px solid #10b981; }   /* зелёный */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-2 { background: rgba(139, 92, 246, .12); }
.chat-msg.ai.tc-au-2 { background: color-mix(in srgb, #8b5cf6 12%, var(--card2, #f1f2f4)); border-left: 3px solid #8b5cf6; }   /* фиолетовый */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-3 { background: rgba(245, 158, 11, .12); }
.chat-msg.ai.tc-au-3 { background: color-mix(in srgb, #f59e0b 12%, var(--card2, #f1f2f4)); border-left: 3px solid #f59e0b; }   /* янтарный */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-4 { background: rgba(20, 184, 166, .12); }
.chat-msg.ai.tc-au-4 { background: color-mix(in srgb, #14b8a6 12%, var(--card2, #f1f2f4)); border-left: 3px solid #14b8a6; }   /* бирюзовый */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-5 { background: rgba(236, 72, 153, .12); }
.chat-msg.ai.tc-au-5 { background: color-mix(in srgb, #ec4899 12%, var(--card2, #f1f2f4)); border-left: 3px solid #ec4899; }   /* розовый */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-6 { background: rgba(14, 165, 233, .12); }
.chat-msg.ai.tc-au-6 { background: color-mix(in srgb, #0ea5e9 12%, var(--card2, #f1f2f4)); border-left: 3px solid #0ea5e9; }   /* небесный */
/* запасной вариант для браузеров без color-mix */
.chat-msg.ai.tc-au-7 { background: rgba(132, 204, 22, .12); }
.chat-msg.ai.tc-au-7 { background: color-mix(in srgb, #84cc16 12%, var(--card2, #f1f2f4)); border-left: 3px solid #84cc16; }   /* лаймовый */

/* Ссылка в сообщении чата (22.09.2026): видно, что это ссылка, и по ней
   можно нажать. В своих сообщениях подложка тёмная/цветная, поэтому там
   ссылка белая с подчёркиванием, в чужих — синяя. Длинный адрес ломаем
   по символам, иначе он растягивает пузырь за край экрана. */
.chat-msg .tc-link { color: #2563eb; text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all; }
.chat-msg .tc-link:hover { color: #1d4ed8; }
.chat-msg.user .tc-link { color: #fff; text-decoration-color: rgba(255,255,255,.7); }
.chat-msg.user .tc-link:hover { color: #fff; text-decoration-color: #fff; }

/* Своё сообщение остаётся в цвете программы (22.09.2026): синим должна
   быть ссылка, а не весь пузырь — про это и просил владелец. */
.chat-msg.user { align-self: flex-end; }
/* Ссылка на цветном пузыре: светло-синяя и жирная — на сером фоне
   читается и сразу видно, что это ссылка. */
.chat-msg.user .tc-link { color: #bfdbfe !important; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(191,219,254,.8); }
.chat-msg.user .tc-link:hover { color: #fff !important; text-decoration-color: #fff; }

/* chat-solo-height: отдельное окно должно умещаться целиком (22.09.2026).
   Высоту больше не считаем от 100vh: беседа просто занимает всё, что
   осталось после шапки, иначе строка ввода уезжала за нижний край. */
body.chat-solo .app { height: 100vh; height: 100dvh; overflow: hidden; }
body.chat-solo .main { display: flex; flex-direction: column; overflow: hidden; }
/* solo-stretch: display со звёздочкой — его ставит переключатель страниц
   прямо в разметке, иначе высота не растягивается. */
body.chat-solo #page-teamchat { flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; height: auto !important; }
body.chat-solo #page-teamchat .content-area { flex: 1 1 auto !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; padding: 0 !important; }
body.chat-solo .tc-layout { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; }
/* Пояснение «Как устроен общий чат» в маленьком окне только отнимает
   высоту — оно есть на полной странице чата. */
body.chat-solo #tcHelpToggle, body.chat-solo #tcHelpBody { display: none !important; }
/* solo-thread-fill: без min-height:0 длинная переписка выталкивает строку
   ввода за нижний край окна. Лента прокручивается сама, ввод не уезжает. */
body.chat-solo .tc-thread { display: flex; flex-direction: column; min-height: 0; flex: 1; }
body.chat-solo #tcMessages { flex: 1; min-height: 0; overflow-y: auto; }
body.chat-solo .chat-input-wrap { flex: 0 0 auto; }

/* ↗ у вкладок категорий (22.09.2026): открыть раздел в новой вкладке браузера, как беседу в чате.
   Появляется при наведении на вкладку, у активной — всегда; клик не переключает текущую вкладку. */
.subtab { position:relative; }
.subtab .subtab-pop { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:4px; border-radius:6px;
  font-size:.8rem; line-height:1; text-decoration:none; color:inherit; opacity:.35; transition:opacity .15s, background .15s; }
.subtab:hover .subtab-pop, .subtab.active .subtab-pop { opacity:.85; }
.subtab .subtab-pop:hover { opacity:1; background:rgba(20,184,166,.22); color:var(--hover, #14b8a6); }
.subtab.active .subtab-pop:hover { background:rgba(255,255,255,.28); color:inherit; }

/* ◧ в ряду вкладок: убрать/вернуть меню слева (22.09.2026) */
.subtab-tools { margin-left:auto; display:flex; gap:6px; align-items:center; }
.subtab-side { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:30px; min-width:38px; padding:0 12px; border:1px solid var(--border,#d9dee6); background:var(--card,#fff); color:inherit; border-radius:10px; font:inherit; font-size:.85rem; font-weight:600; line-height:1; cursor:pointer; }
.subtab-side:hover { border-color:var(--hover,#14b8a6); color:var(--hover,#14b8a6); }
body.side-hide .sidebar { display:none !important; }
body.side-hide .main, body.side-hide .main-content { margin-left:0 !important; }
body.side-hide #sbResize { display:none !important; }
/* ▾/▸ у панелей «Управления»: сворачивание до заголовка */
.panel-fold { flex:0 0 auto; border:0; background:transparent; color:var(--hover,#14b8a6); font:inherit; font-size:1.25rem; font-weight:800; cursor:pointer; padding:0; margin-right:2px; line-height:1; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; }
.panel-fold:hover { background:rgba(20,184,166,.16); }
/* заголовок сразу после треугольника, остальное (кнопки) — вправо */
.panel-header:has(> .panel-fold) { justify-content:flex-start; }
.panel-header:has(> .panel-fold) > .panel-title { flex:1 1 auto; }
.panel.panel-closed > :not(.panel-header) { display:none !important; }
.panel.panel-closed > .panel-header { border-bottom:0; }

/* Служебные кнопки ряда вкладок: прибиты к правому краю ПЕРВОЙ строки ряда (23.09.2026) —
   при полном ряде они больше не уезжают на новую строку; под них у ряда правый отступ. */
.subtabs:has(.subtab-tools) { position:relative; padding-right:240px !important; align-items:center; }
.subtab-tools { position:absolute; right:28px; top:14px; margin-left:0; display:inline-flex; gap:6px; align-items:center; height:30px; }
.panel-header-auto { padding-top:10px; padding-bottom:10px; }
.subtab-side { height:30px; line-height:1; }
.subtab-foldall { min-width:150px; }
/* Кнопки страницы в ряду вкладок (27.09.2026, nav.js actionsHoist): инструменты
   встают в поток ряда — справа, на свободное место последней строки вкладок, —
   а шапка страницы с повтором названия вкладки прячется. */
.subtabs:has(.subtab-tools > .page-actions) { padding-right:28px !important; }   /* = правый отступ .content-area: край кнопок по краю панелей */
.subtab-tools:has(> .page-actions) { position:static; margin-left:auto; height:auto; flex-wrap:wrap; justify-content:flex-end; }
.subtab-tools > .page-actions { display:flex; flex-wrap:wrap; gap:6px; margin:0; align-items:center; }
.subtab-tools > .page-actions > .btn, .subtab-tools > .page-actions > button, .subtab-tools > .page-actions > a { height:30px; padding:0 14px; box-sizing:border-box; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; }
.page-header.hdr-hoisted { display:none !important; }
/* Телефон (27.09.2026): под служебные кнопки ряда вкладок справа резервировалось
   240px — на экране в 393px вкладкам оставалось 139px, и каждая вставала в свою
   строку с переносом слов. На узком экране: без резерва, инструменты — в общем
   потоке, надписи на вкладках и кнопках — в одну строку, всё компактнее.
   Ряд мини-площадок начинается правее «☰» (кнопка меню прибита к углу). */
@media (max-width:768px) {
  .subtabs, .subtabs:has(.subtab-tools) { padding:10px 10px 0 !important; gap:6px !important; }
  .subtab-tools, .subtab-tools:has(> .page-actions) { position:static !important; margin-left:0; height:auto; flex-wrap:wrap; }
  .subtab, .subtab-side, .nav-row-actions .btn, .subtab-tools .btn, .page-actions .btn { white-space:nowrap; }
  .subtab { padding:0 10px !important; font-size:.84rem !important; gap:5px !important; }
  .subtab .subtab-pop { display:none; }
  .nav-row-actions { margin-left:0 !important; gap:6px !important; }
  .nav-row-actions .btn, .subtab-tools .btn, .subtab-side { padding:0 10px !important; font-size:.82rem !important; }
  .subtabs:has(.subtab-tools > .page-actions) > .subtab { flex:0 1 auto; }
  body:not(.chat-solo) .mini-cascade { padding-left:58px; padding-right:10px; }
  /* Ровно по обоим краям: кнопки в каждой строке растягиваются на всю ширину. */
  .subtabs > .subtab, .subtabs > .subtab-tools, .subtabs > .nav-row-actions { flex:1 1 auto !important; }
  .subtab-tools > *, .subtab-tools > .page-actions > *, .nav-row-actions > .btn { flex:1 1 auto; justify-content:center; }
  .subtab-tools > .page-actions { flex:1 1 auto; }
  .subtab { justify-content:center; }
  .subtab-tools:empty { display:none !important; }   /* пустой (не «Управление») не должен растягиваться и отнимать место */
  .mini-cascade > .mini-slot, .mini-cascade > button, .mini-cascade > a { flex:1 1 auto; justify-content:center; }
}
/* Ровный блок (27.09.2026): вкладки растягиваются и заполняют строки — обе
   строки начинаются и заканчиваются по краям панелей страницы (отступы
   ряда = отступам .content-area: 28px). Кнопки страницы не растягиваются. */
.subtabs:has(.subtab-tools > .page-actions) { padding-left:28px !important; }
.subtabs:has(.subtab-tools > .page-actions) > .subtab { flex:1 1 auto; justify-content:center; }
.subtabs:has(.subtab-tools > .page-actions) > .subtab-tools { flex:0 0 auto; }

/* один ободок на весь ряд (23.09.2026): цвет рамки как у «AI» — ряд
   перестал выглядеть разнобоем из бирюзовых, серых и сиреневых кнопок.
   Заливку и цвет надписи у особых кнопок не трогаем: по ним их и узнают. */
.mini-cascade .mini-slot,
.mini-cascade .mini-slot-taken,
.mini-cascade .mini-slot-max,
.mini-cascade .mini-slot-ext,
.mini-cascade .mini-slot-chat,
.mini-cascade .mini-slot-ai,
.mini-cascade .mini-slot-back { border-color:#c4b5fd; }
/* Под курсором и у включённой кнопки рамка по-прежнему своя — так видно,
   что именно нажато. */
.mini-cascade .mini-slot:hover,
.mini-cascade .mini-slot.active { border-color:#7c3aed; }
.mini-cascade .mini-slot-back:hover { border-color:#7a4f6a; }

/* Мини-площадка №5 «Звонок»: выпадающий список коллег (23.09.2026) */
.mini-cascade .mini-slot-call{color:var(--text);font-weight:600}
.mini-call-pop{position:fixed;z-index:12050;width:320px;max-height:70vh;display:flex;flex-direction:column;background:var(--card,#fff);color:var(--text,#111);border:1px solid var(--border,#e2e8f0);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:10px}
.mini-call-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mini-call-q{width:100%;box-sizing:border-box;margin-bottom:8px}
.mini-call-list{overflow:auto;display:flex;flex-direction:column;gap:2px}
.mini-call-row{display:flex;align-items:center;gap:8px;padding:0 4px 0 8px;border:1px solid transparent;border-radius:8px}
.mini-call-row:hover{border-color:var(--hover,#14b8a6);background:rgba(20,184,166,.10)}
.mini-call-cb{width:16px;height:16px;margin:0;flex:none;cursor:pointer}
.mini-call-one{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:1;min-width:0;text-align:left;padding:7px 6px;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.mini-call-one small{color:var(--muted);font-size:.74rem}
.mini-call-foot{padding-top:8px;border-top:1px solid var(--border,#e2e8f0);margin-top:6px;display:flex;justify-content:flex-end}
.mini-call-note{padding:10px;color:var(--muted);font-size:.85rem;text-align:center}

/* Имя отправителя в чате — нажимаемое: открывает личную переписку
   (23.09.2026). Подчёркивание точками, чтобы это было видно, но имя не
   выглядело обычной ссылкой. */
.tc-sender-name { cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 2px; }
.tc-sender-name:hover { color: var(--hover, #14b8a6); text-decoration-style: solid; }

/* ── Действия над сообщением: кнопка «⋯» и меню (23.09.2026) ──────────
   Прежняя полоса всплывала над пузырём и перекрывала имя отправителя
   соседней реплики. Теперь всё внутри своего сообщения: кнопка в углу
   появляется при наведении, список открывается по нажатию. */
.chat-msg .tc-msg-more {
  position: absolute; top: 4px; right: 6px; width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted, #8b95a5); font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer; }
.chat-msg:hover .tc-msg-more, .chat-msg .tc-msg-actions.open + .tc-msg-more { display: inline-flex; }
.chat-msg .tc-msg-more:hover { background: rgba(128,128,128,.18); color: var(--text, #111); }
.chat-msg.user .tc-msg-more { color: rgba(255,255,255,.75); }
.chat-msg.user .tc-msg-more:hover { background: rgba(255,255,255,.18); color: #fff; }

.chat-msg .tc-msg-actions {
  display: none !important; position: absolute; top: 30px; right: 6px; left: auto;
  flex-direction: column; gap: 2px; min-width: 176px; padding: 5px;
  background: var(--card, #fff); border: 1px solid var(--border, #d9dee6);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28); z-index: 30; }
.chat-msg .tc-msg-actions.open { display: flex !important; }
.chat-msg .tc-msg-actions button {
  width: 100%; justify-content: flex-start; text-align: left;
  padding: 7px 10px; border-radius: 8px; font-size: .82rem; color: var(--text, #111);
  background: transparent; border: 0; }
.chat-msg .tc-msg-actions button:hover { background: rgba(var(--hover-rgb,20,184,166), .14); color: var(--hover, #14b8a6); }

/* ── Шапка беседы: название и участники одинаковыми кнопками ──────────
   (23.09.2026). Название было текстом, а «участники» — подчёркнутой
   надписью без числа; выглядело как недоделка. */
.tc-head-names { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.tc-head-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 10px; border: 1px solid var(--border, #d9dee6); border-radius: 9px;
  background: var(--card, #fff); color: var(--text, #111);
  font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.25;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-head-btn:hover { border-color: var(--hover, #14b8a6); color: var(--hover, #14b8a6); }
.tc-head-members { font-weight: 600; font-size: .78rem; color: var(--muted, #8b95a5); }
.tc-head-num { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(var(--hover-rgb, 20,184,166), .16); color: var(--hover, #14b8a6);
  font-size: .72rem; font-weight: 700; }
.tc-head-sub { font-size: .75rem; color: var(--muted, #8b95a5); }
.tc-head-initial { display: none; }

/* Имя отправителя не должно заезжать под кнопку «⋯» в углу сообщения:
   оставляем ей место и обрезаем слишком длинное имя (23.09.2026). */
.chat-msg.ai > div:first-child { padding-right: 30px; }
.chat-msg .tc-sender-name { display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* ── Чат на телефоне (узкий экран) ─────────────────────────────
   1) Поле ввода было зажато между кнопками в узкую полоску («Н а»):
      теперь оно первой строкой на всю ширину, кнопки — второй, как в
      боковой панели и отдельном окне чата.
   2) Длинное название беседы («Делопроизводство») не влезало: остаётся
      значок пространства и первая буква («Д»); полное название — в окне
      по нажатию.
   3) «👥 Участники» — только значок и число. */
@media (max-width: 700px) {
  body .chat-input-wrap { flex-wrap: wrap; gap: 6px; padding: 8px; }
  body .chat-input-wrap textarea { flex: 1 1 100%; order: 0; height: auto; min-height: 64px; }
  body .chat-input-wrap .btn-icon, body .chat-input-wrap .emoji-wrap { order: 1; height: 40px; width: 40px; align-self: center; }
  body .chat-input-wrap .btn-primary { order: 2; margin-left: auto; }
  /* Первая буква названия — отдельным span (эмодзи в начале пропущены,
     иначе «📞 Закупки» выглядела как кнопка звонка). */
  .tc-head-title { font-size: 0 !important; }
  .tc-head-title > *:not(.tc-head-initial) { display: none !important; }
  .tc-head-title .tc-head-initial { display: inline !important; font-size: 1.05rem; line-height: 1.2; }
  .tc-head-members { font-size: 0; gap: 4px; }
  .tc-head-members::before { content: "👥"; font-size: 1rem; }
  .tc-head-members .tc-head-num { font-size: .78rem; }
  /* 4) Название («Д») и участники — две кнопки одного размера; колонка
        с ними не сжимается, иначе число участников обрезалось. Кнопки
        справа, аватар и отступы шапки — компактнее, чтобы всё влезло. */
  .tc-head-names { flex: none; }
  .tc-head-names .tc-head-btn { width: 60px; justify-content: center; overflow: visible; padding: 3px 6px; }
  #tcThreadHeader { gap: 6px; padding: 8px 10px; }
  #tcThreadHeader .btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  #tcThreadHeader .tc-item-avatar { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; }
  #tcThreadHeader > div[style*="margin-left:auto"] { gap: 4px !important; }
  /* Подпись под именем в личной беседе («Администратор», «в сети») —
     отдельной строкой ниже кнопки и не шире колонки: раньше вылезала
     на кнопки справа. Аватар на телефоне не нужен — та же буква уже
     на кнопке имени, а место в шапке дорого. */
  #tcThreadHeader .tc-item-avatar { display: none; }
  .tc-head-names { gap: 4px; }
  .tc-head-sub { display: block; max-width: 130px; margin-top: 2px; font-size: .7rem; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Шапка страницы чата: только значки (26.09.2026) ─────────────────
   Подписи «Командные аккаунты», «Новая группа», «Мультичат» занимали три
   строки над чатом. Остались значки одного размера; что делает кнопка —
   во всплывающей подсказке (на телефоне — удержанием пальца). */
.page-header .tc-ico { width: 36px; height: 36px; padding: 0 !important; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; flex: none; }
@media (max-width: 768px) {
  body:not(.chat-solo) #page-teamchat .page-header { flex-wrap: nowrap; align-items: center; margin-bottom: 8px; }
  body:not(.chat-solo) #page-teamchat .page-title { flex: none; font-size: .95rem; }
  body:not(.chat-solo) #page-teamchat .page-actions { margin-left: auto; gap: 4px; justify-content: flex-end; }
  body:not(.chat-solo) #page-teamchat .page-header .tc-ico { width: 32px; height: 32px; font-size: .95rem; }
}

/* ── tw-fit: таблицы всех программ — видно до 6 записей (высоту ставит nav.js),
   остальное листается внутри; шапка прилипает, фон у ячеек шапки обязателен,
   иначе сквозь неё просвечивают строки (27.09.2026). */
.page .table-wrap.tw-fit { overflow: auto; }
.page .table-wrap.tw-fit > table > thead { position: sticky; top: 0; z-index: 3; }   /* шапка целиком: и в две строки (заголовки + фильтры) */
.page .table-wrap.tw-fit > table > thead > tr > th {
  background: var(--card2, #f1f3f7);
  box-shadow: inset 0 -1px 0 var(--border, #d9dee6);
}
.page .table-wrap.tw-fit > table > tbody > tr { position: relative; z-index: 1; }

/* Область «перетащите папку» в видеотеке (29.09.2026). */
.vid-drop { display: flex; flex-direction: column; gap: 4px; align-items: center;
  text-align: center; padding: 14px 16px; margin-bottom: 14px;
  border: 2px dashed var(--border, #d9dee6); border-radius: 14px;
  color: var(--muted, #8b95a5); font-size: .84rem; transition: .15s; }
.vid-drop b { color: var(--text, #111); font-size: .92rem; }
.vid-drop.over { border-color: var(--hover, #14b8a6); color: var(--hover, #14b8a6);
  background: rgba(var(--hover-rgb, 20,184,166), .08); }

/* Свёрнутая загрузка видео: полоска внизу справа, поверх страницы, но
   работать не мешает (29.09.2026). */
.vid-mini { position: fixed; right: 16px; bottom: 16px; z-index: 9000; width: 300px;
  padding: 10px 12px; border-radius: 12px; background: var(--card, #fff);
  border: 1px solid var(--border, #d9dee6); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.vid-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .86rem; margin-bottom: 6px; }
.vid-mini-text { font-size: .78rem; color: var(--muted, #8b95a5); margin-bottom: 6px; }
.vid-mini-bar { height: 6px; border-radius: 4px; background: rgba(128,128,128,.25); overflow: hidden; }
.vid-mini-bar > div { height: 100%; width: 0; background: var(--hover, #14b8a6); transition: width .2s; }