/* Телефон (30.09.2026): меню, AI-помощник и поиск.
   • Меню слева — во всю видимую высоту (100dvh) с прокруткой: «Выйти» внизу
     больше не уезжает под панель браузера; сверху место под кнопку ☰.
   • AI-помощник — во всю видимую высоту: поле ввода внизу видно; шапка в два
     ряда: заголовок и ×, ниже выбор модели, 🧹 и «💬 Чат».
   • В поиске подсказка «Ctrl K» на телефоне не нужна. */
.ai-to-chat { display: none; }
@media (max-width: 768px) {
  .sidebar { height: 100dvh !important; max-height: 100dvh; overflow-y: auto !important; box-sizing: border-box; padding-top: 58px !important; }
  #aiDock { height: 100dvh !important; width: 100vw !important; min-width: 0 !important; left: 0; }
  #aiDock .ai-dock-head { flex-wrap: wrap; row-gap: 8px; }
  #aiDock .ai-dock-head .ai-dock-title { flex: 1 1 60%; min-width: 0; order: 0; }
  #aiDock .ai-dock-head .ai-close { order: 1; }
  #aiDock .ai-dock-head select { order: 2; flex: 1 1 auto; max-width: none; min-width: 0; }
  #aiDock .ai-dock-head .ai-clear { order: 3; }
  #aiDock .ai-dock-head .ai-to-chat { order: 4; display: inline-flex; }
  #glbSearchKbd { display: none !important; }
  /* Меню: без выбора фирмы и поиска; список разделов не сжимается — блок
     пользователя больше не наезжает на «Управление», меню листается целиком. */
  .sidebar .sidebar-org, .sidebar #glbSearchBox { display: none !important; }
  .sidebar > * { flex-shrink: 0 !important; }
  .sidebar > .nav-cats { flex: 1 0 auto !important; min-height: auto !important; overflow: visible !important; }
  /* ☰ — на одной линии с кнопками полосы мини-площадок: та же высота и верх. */
  body.has-minibar .sb-burger { top: 8px; height: 30px; width: 40px; font-size: 1rem; }
}
/* Окно «Позвонить»: кнопка общего звонка — сверху, под поиском, во всю ширину. */
.mini-call-foot.mini-call-top { border-top: 0; margin: 0 0 8px; padding: 0; }
.mini-call-top .mini-call-group { width: 100%; }

/* «📞 Звонок» в полосе мини-площадок (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 rgba(239,68,68,.65)!important;   /* ободок всегда виден (17.10.2026) */
  font-size:1.2rem!important;font-weight:700!important;line-height:1!important;cursor:pointer;transition:.15s}
.close-btn:hover{border-color:#dc2626!important;color:#b91c1c!important;background:rgba(239,68,68,.22)!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; }

/* Площадка «Чат» отмечена, пока обращение не прочитано. Ровный цвет и
   обводка без мигания (по просьбе владельца, 11.10.2026). */
.mini-cascade .mini-slot-alert {
  color: var(--yellow, #f59e0b);
  border-color: var(--yellow, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .35);
}


/* ═══════════════════════════════════════════════════════════════
   Автоблокировка (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; }

/* Боковой док мини-площадки (17.10.2026, решение владельца): «Часы», «Оценка», «Приложение» открываются
   правой колонкой, как чат и AI, а не окном поверх страницы или новой вкладкой. */
#sideDock.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); }
#sideDock.chat-dock-embed iframe { flex:1; border:0; width:100%; background:transparent; }
#sideDock .side-dock-body { flex:1; overflow:auto; min-height:0; }
.wrap:has(> #sideDock) { display:flex; }
.wrap > #sideDock { position:sticky; top:0; }
#sideDock.chat-dock-full { position:fixed !important; inset:0; width:100vw !important; max-width:100vw; height:100vh; z-index:13000; }
@media (max-width:1099px) { #sideDock.chat-dock-embed { position:fixed; right:0; top:0; z-index:12000; width:100vw; } }
.mini-slot.mini-slot-ext.active { background:rgba(20,184,166,.14); border-color:var(--hover,#14b8a6); color:var(--hover,#14b8a6); }

/* Чат сбоку на весь экран (кнопка «⛶ Экран» в шапке колонки). */
#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, #sideDock { 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; }
/* Место №1 мини-площадок — «Приложение» (30.09.2026) */
.mini-cascade .mini-slot-app{color:var(--text);font-weight:600}
/* Открытая беседа в списке чата — заметное выделение (30.09.2026): бирюзовая полоса слева и фон акцента программы;
   с id-селектором, чтобы перекрыть светло-серую подсветку и розовый фон закреплённых. */
#tcConvList .tc-item.active { background:rgba(20,184,166,.16); box-shadow:inset 3px 0 0 var(--hover,#14b8a6); }
/* tc-link-dark (01.10.2026): ссылки в чужих сообщениях в вечерней и тёмной темах — светло-голубые (синий #2563eb на тёмном фоне не читался).
   Свои сообщения (.chat-msg.user) остаются светлыми на цветном фоне, как были. */
body:not(.light-mode) .chat-msg .tc-link { color: #7dd3fc; text-decoration-color: rgba(125,211,252,.6); }
body:not(.light-mode) .chat-msg .tc-link:hover { color: #bae6fd; text-decoration-color: #bae6fd; }

/* ── Плашки и статусы в светлой теме (01.10.2026, правило владельца) ──
   Светлые оттенки (#fbbf24, #34d399, #f59e0b) на светлом фоне сливаются. В светлой теме — тёмные тона:
   жёлтый #92400e, зелёный #047857, красный #b91c1c, синий #1d4ed8, оранжевый #c2410c, фиолетовый #7e22ce, серый #475569.
   Новые цветные плашки/статусы делать в этих же тонах. Светлая тема: body.light-mode, у Финансов html[data-theme=light]. */
body.light-mode .badge-yellow, body.light-mode td.col-status .badge-yellow, html[data-theme="light"] .badge-yellow, html[data-theme="light"] td.col-status .badge-yellow { color:#92400e; font-weight:700; }
body.light-mode .badge-green,  body.light-mode td.col-status .badge-green,  html[data-theme="light"] .badge-green,  html[data-theme="light"] td.col-status .badge-green  { color:#047857; font-weight:700; }
body.light-mode .badge-red,    body.light-mode td.col-status .badge-red,    html[data-theme="light"] .badge-red,    html[data-theme="light"] td.col-status .badge-red    { color:#b91c1c; font-weight:700; }
body.light-mode .badge-blue,   body.light-mode td.col-status .badge-blue,   html[data-theme="light"] .badge-blue,   html[data-theme="light"] td.col-status .badge-blue   { color:#1d4ed8; }
body.light-mode .badge-orange, body.light-mode td.col-status .badge-orange, html[data-theme="light"] .badge-orange, html[data-theme="light"] td.col-status .badge-orange { color:#c2410c; font-weight:700; }
body.light-mode .badge-purple, body.light-mode td.col-status .badge-purple, html[data-theme="light"] .badge-purple, html[data-theme="light"] td.col-status .badge-purple { color:#7e22ce; }
body.light-mode .badge-gray,   body.light-mode td.col-status .badge-gray,   html[data-theme="light"] .badge-gray,   html[data-theme="light"] td.col-status .badge-gray   { color:#475569; }

/* Кнопки-действия таблиц в светлой теме — тёмные тона, как плашки (01.10.2026, «Восстановить» в Копиях всех площадок) */
body.light-mode .btn.btn-listen, html[data-theme="light"] .btn.btn-listen { color:#1d4ed8; }
body.light-mode .btn.btn-watch, html[data-theme="light"] .btn.btn-watch { color:#6d28d9; }
body.light-mode .btn.btn-download, html[data-theme="light"] .btn.btn-download { color:#047857; }
body.light-mode .btn.btn-text, html[data-theme="light"] .btn.btn-text { color:#0369a1; }
body.light-mode .btn.btn-restore, html[data-theme="light"] .btn.btn-restore { color:#92400e; border-color:rgba(180,83,9,.5); }
body.light-mode .btn.btn-delete, html[data-theme="light"] .btn.btn-delete { color:#b91c1c; border-color:rgba(185,28,28,.45); }
body.light-mode .btn.btn-restore:hover, html[data-theme="light"] .btn.btn-restore:hover { color:#fff; background:#b45309; border-color:#b45309; }
body.light-mode .btn.btn-download:hover, html[data-theme="light"] .btn.btn-download:hover { color:#fff; background:#047857; border-color:#047857; }
body.light-mode .btn.btn-delete:hover, html[data-theme="light"] .btn.btn-delete:hover { color:#fff; background:#b91c1c; border-color:#b91c1c; }
body.light-mode .btn.btn-listen:hover, html[data-theme="light"] .btn.btn-listen:hover { color:#fff; background:#1d4ed8; border-color:#1d4ed8; }
body.light-mode .btn.btn-text:hover, body.light-mode .btn.btn-text.is-on, html[data-theme="light"] .btn.btn-text:hover, html[data-theme="light"] .btn.btn-text.is-on { color:#fff; background:#0369a1; border-color:#0369a1; }
body.light-mode .btn.btn-watch:hover, html[data-theme="light"] .btn.btn-watch:hover, body.light-mode .btn.btn-watch.is-on { color:#fff; background:#6d28d9; border-color:#6d28d9; }
body.light-mode .btn.btn-listen.is-on { color:#fff; background:#1d4ed8; border-color:#1d4ed8; }

/* ── Светлая тема, все программы: статусные цвета текста — тёмными тонами (01.10.2026, проверка 15 программ) ──
   Яркие #10b981 / #f59e0b / #ef4444 / #14b8a6 на светлом фоне дают контраст 1.8–2.5; здесь — тёмные тона. */
.light-mode { --green:#047857; --red:#b91c1c; --yellow:#92400e; --orange:#c2410c; --ok:#047857; --danger:#b91c1c; --warn:#92400e; --hover:#0f766e; }
.light-mode .panel-fold { color:#0f766e; }
.light-mode [style*="color:#f59e0b"]:not([style*="background"]):not([style*="border"]), .light-mode [style*="color: #f59e0b"]:not([style*="background"]):not([style*="border"]), .light-mode [style*="color:#d97706"]:not([style*="background"]):not([style*="border"]) { color:#92400e !important; }
.light-mode [style*="color:#10b981"]:not([style*="background"]):not([style*="border"]), .light-mode [style*="color: #10b981"]:not([style*="background"]):not([style*="border"]) { color:#047857 !important; }
.light-mode [style*="color:#ef4444"]:not([style*="background"]):not([style*="border"]), .light-mode [style*="color: #ef4444"]:not([style*="background"]):not([style*="border"]) { color:#b91c1c !important; }
.light-mode [style*="color:#14b8a6"]:not([style*="background"]):not([style*="border"]), .light-mode [style*="color: #14b8a6"]:not([style*="background"]):not([style*="border"]) { color:#0f766e !important; }
.light-mode .stat-value[style*="10b981"], .light-mode .stat-value[style*="var(--green"] { color:#047857 !important; }
.light-mode .stat-value[style*="f59e0b"], .light-mode .stat-value[style*="var(--yellow"] { color:#92400e !important; }
.light-mode .st-badge.st-on { color:#047857; } .light-mode .st-badge.st-off { color:#b91c1c; }
.light-mode .btn-green, .light-mode a.btn-green { background:#047857 !important; border-color:#047857 !important; color:#fff !important; }
.light-mode .btn-danger { color:#b91c1c; }
.light-mode .pm-badge.pm-green { color:#047857; } .light-mode .pm-badge.pm-red { color:#b91c1c; } .light-mode .pm-badge.pm-yellow, .light-mode .pm-badge.pm-orange { color:#92400e; }
.light-mode .sw-sec-title { color:#0f766e; }
/* Светлая тема: заголовки сворачиваемых панелей (#8AB4D4 — цвет тёмной темы), синяя кнопка, ссылки на Telegram */
.light-mode .panel-title-btn { color:#1e3a5f; }
.light-mode a[href*="t.me"], .light-mode a[href^="tg:"] { color:#0369a1; }
.light-mode .sw-sec-title { color:#475569; }
/* Светлая тема (Финансы: html[data-theme=light]; остальные: body.light-mode) — бейджи ролей, ссылки Telegram, серые подписи */
.light-mode .user-role-badge.role-owner, html[data-theme="light"] .user-role-badge.role-owner { color:#92400e; }
.light-mode .user-role-badge.role-admin, html[data-theme="light"] .user-role-badge.role-admin { color:#047857; }
.light-mode .user-role-badge.role-director, html[data-theme="light"] .user-role-badge.role-director { color:#7e22ce; }
html[data-theme="light"] a[href*="t.me"], html[data-theme="light"] a[href^="tg:"] { color:#0369a1; }
html[data-theme="light"] .avatar, html[data-theme="light"] .user-avatar-gray { color:#475569; }
html[data-theme="light"] .chip.net { color:#475569; }
html[data-theme="light"] [style*="color:#888"]:not([style*="background"]), html[data-theme="light"] [style*="color: #888"]:not([style*="background"]) { color:#555 !important; }
html[data-theme="light"] .user-role-badge.role-owner, html[data-theme="light"] .user-role-badge.role-admin { font-weight:700; }
/* Светлая тема: контакты-чипы (телефон, Telegram) и серая подпись Финансов */
.light-mode a[href^="tel:"], .light-mode a.c-tel, html[data-theme="light"] a[href^="tel:"], html[data-theme="light"] a.c-tel { color:#047857 !important; }
.light-mode a[href*="//t.me/"], .light-mode a.c-tg, html[data-theme="light"] a[href*="//t.me/"], html[data-theme="light"] a.c-tg { color:#0369a1 !important; }
html[data-theme="light"] { --muted:#5f6368; }

/* Свои сообщения (серый пузырь .chat-msg.user): вишнёвые метки темы и @упоминания сливались — белое на светлой подложке (01.10.2026) */
.chat-msg.user .tc-topic-badge, .chat-msg.user .tc-mention, .chat-msg.user .tc-mention-me { color:#fff !important; background:rgba(255,255,255,.26) !important; font-weight:700; border:1px solid rgba(255,255,255,.45); }
.chat-msg.user .tc-mention-me { background:#f97316 !important; border-color:#f97316; }
.chat-msg.user a { color:#fff; text-decoration:underline; }

/* ── Светлая тема AI-Auth (проверка 01.10.2026): роли, бейджи, календарь, подсказки доступа тёмными тонами ── */
.light-mode .badge { color:#475569; }
.light-mode .badge.role-owner, .light-mode .role-card-title.role-owner-title, .light-mode .access-read, .light-mode .rm-sel.access-read, .light-mode .app-tile .access.acc-read { color:#92400e; }
.light-mode .badge.role-director, .light-mode .rk-app, .light-mode .rk-apps { color:#7e22ce; }
.light-mode .badge.role-admin { color:#047857; }
.light-mode [style*="color:#b07cc7"]:not([style*="background"]), .light-mode [style*="color: #b07cc7"]:not([style*="background"]) { color:#7e22ce !important; }
.light-mode .side-cals .cal-day.hol-other { color:#92400e; }
.light-mode .side-cals .cal-day.out, .light-mode .cal-day.out { color:#8a94a6; }
.light-mode .cal-btn { color:#92400e; }
.light-mode .companies-sep { color:#8a94a6; }
.light-mode .rk-rule { color:#94a3b8; }

/* Шапка в две строки (заголовки + фильтры): между строками шапки при border-spacing 0 10px оставался просвет, и сквозь него
   были видны строки таблицы. Нижняя кромка ячеек первой строки закрашивается на высоту просвета (04.10.2026). */
.page .table-wrap.tw-fit > table > thead > tr:first-child:not(:last-child) > th {
  box-shadow: 0 10px 0 0 var(--card2, #f1f3f7), inset 0 -1px 0 var(--border, #d9dee6);
}

/* ── Закреплённые колонки таблиц: фон всегда сплошной (04.10.2026, правило «ничего не просвечивает») ──
   stickyFirstColumns() в каждой программе ставит ячейкам position:sticky. Подсветка строки (row-flash: анимация с прозрачным
   фоном) и прочие полупрозрачные фоны перебивали им фон, и из-под закреплённых колонок просвечивал текст прокрученных.
   Фон с !important выигрывает у анимации. Шапка — тоном шапки (--card2), тело — тоном карточки (--card).
   Любую новую закреплённую ячейку (sticky) делать непрозрачной; прилипающая шапка — тоже. */
.table-wrap tbody td[style*="sticky"], .table-wrap tfoot td[style*="sticky"] { background: var(--card) !important; }
.table-wrap thead th[style*="sticky"], .table-wrap thead td[style*="sticky"] { background: var(--card2, var(--card)) !important; }

/* Плитки дашборда: длинные суммы («22 250 000,00 ₽») не вылезают за плитку —
   размер цифр подстраивается под ширину, при нужде переносится (04.10.2026). */
.stat-card { min-width:0; }
.stats-grid .stat-value, .stat-card .stat-value { font-size:clamp(.95rem, 1.35vw, 1.45rem); line-height:1.15; overflow-wrap:anywhere; word-break:break-word; white-space:normal; }

/* Меню «Почта» (04.10.2026): пункт — одной строкой, домены в своих цветах; в светлой теме
   у кнопок «Почта» и «Чат» цветная окантовка. */
.mini-call-pop .mini-mail-one{flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:9px 10px;border:1px solid var(--border,#e2e8f0);border-radius:10px;margin-bottom:6px;background:transparent}
.mini-call-pop .mini-mail-one:hover{border-color:var(--hover,#14b8a6)}
.mini-mail-one[data-dom="secretvibe.ru"] b, .mail-dom-secretvibe{color:#8b5cf6}
.mini-mail-one[data-dom="tsws.ai"] b, .mail-dom-tsws{color:#14b8a6}
.mini-mail-one[data-tab] b, .mail-dom-comms{color:#f59e0b}
.light-mode .mini-cascade .mini-slot[data-ext="mail"]{border-color:#8b5cf6;color:#6d28d9}
.light-mode .mini-cascade .mini-slot-chat{border-color:#14b8a6;color:#0f766e}
.mini-mail-one[data-dom^="golibas.ru"] b{color:#0369a1}
.mail-dom-golibas{color:#0369a1}.mail-dom-alevrika{color:#c2410c}.mail-dom-yandex{color:#d97706}.mail-dom-gmail{color:#dc2626}
.mini-mail-one[data-dom^="общие"] b{color:#d97706}

/* chat-contrast (05.10.2026): цвета в чате не сливаются. Свой пузырь темнее (белый текст читается на любом акценте),
   цитата ответа — светлая плашка с белой чертой и непрозрачным текстом, время и подписи ярче. Работает во всех программах с чатом. */
.chat-msg.user { background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #777) 70%, #000), color-mix(in srgb, var(--accent2, #999) 70%, #000)) !important; }
.chat-msg.user .tc-reply-quote { background: rgba(255,255,255,.22) !important; border-left: 3px solid #fff !important; }
.chat-msg.user .tc-reply-quote > div { opacity: 1 !important; color: #fff !important; }
.chat-msg.user .tc-reply-quote > div:first-child { font-weight: 700 !important; }
.chat-msg.user > div[style*="font-size:.68rem"][style*="opacity"] { opacity: .92 !important; color: #f1f5f9 !important; }
.chat-msg.ai .tc-reply-quote { background: rgba(0,0,0,.07) !important; border-left: 3px solid var(--accent, #777) !important; }
.chat-msg.ai .tc-reply-quote > div { opacity: 1 !important; }
.chat-msg.ai .tc-reply-quote > div:first-child { font-weight: 700 !important; }
.chat-msg.ai > div[style*="font-size:.68rem"][style*="opacity"] { opacity: .8 !important; }

/* chat-contrast-light (05.10.2026): светлая тема — подписи и время у чужих сообщений темнее, рамка пузыря чётче, цитата заметнее. */
body.light-mode .chat-msg.ai,
html[data-theme="light"] .chat-msg.ai { border-top-color: #aeb6c2 !important; border-right-color: #aeb6c2 !important; border-bottom-color: #aeb6c2 !important; }
body.light-mode .chat-msg.ai > div[style*="color:var(--muted)"],
html[data-theme="light"] .chat-msg.ai > div[style*="color:var(--muted)"] { color: #374151 !important; }
body.light-mode .chat-msg.ai > div[style*="font-size:.68rem"][style*="opacity"],
html[data-theme="light"] .chat-msg.ai > div[style*="font-size:.68rem"][style*="opacity"] { opacity: 1 !important; color: #475569 !important; }
body.light-mode .chat-msg.ai .tc-reply-quote,
html[data-theme="light"] .chat-msg.ai .tc-reply-quote { background: rgba(0,0,0,.09) !important; }
body.light-mode .chat-msg.ai .tc-reply-quote > div:last-child,
html[data-theme="light"] .chat-msg.ai .tc-reply-quote > div:last-child { color: #1f2937 !important; }
body.light-mode .chat-msg.user,
html[data-theme="light"] .chat-msg.user { box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* topics-right-edge (05.10.2026): правый край полосы тем совпадает с правым краем кнопок шапки беседы */
#tcTopicsBar { padding-right: 18px; }
.chat-docked #tcTopicsBar, #page-teamchat:not(.chat-docked) #tcTopicsBar { padding-right: 18px; }
.chat-docked #tcTopicsBar { padding-right: 12px; }
@media (max-width: 900px) { #page-teamchat:not(.chat-docked) #tcTopicsBar { padding-right: 12px; } }

/* more-visible (05.10.2026): кнопка «⋯» действий над сообщением заметнее — крупная, с заливкой, рамкой и тенью; на сенсорных экранах видна всегда. */
.chat-msg .tc-msg-more { top: -13px !important; right: -7px !important; width: 30px !important; height: 30px !important; border-radius: 9px !important;
  border: 1px solid var(--border, #cbd5e1) !important; background: var(--card, #fff) !important; color: var(--text, #111) !important;
  font-size: 1.35rem !important; font-weight: 900 !important; box-shadow: 0 1px 5px rgba(0,0,0,.3); padding: 0 0 5px !important; }
.chat-msg .tc-msg-more:hover { background: var(--hover, #14b8a6) !important; border-color: var(--hover, #14b8a6) !important; color: #fff !important; }
.chat-msg.user .tc-msg-more { background: rgba(255,255,255,.94) !important; border-color: #fff !important; color: #1f2937 !important; }
.chat-msg.user .tc-msg-more:hover { background: var(--hover, #14b8a6) !important; color: #fff !important; }
@media (hover: none) { .chat-msg .tc-msg-more { display: inline-flex !important; opacity: .9; } }
/* mention-wide (05.10.2026): список @ выше и шире — виден состав беседы, а не два пункта */
.tc-mention-popup { width: 280px !important; max-height: 340px !important; }

/* ── Таблицы на телефоне удобнее (05.10.2026): компактные ячейки + видимая
   полоса прокрутки, чтобы было ясно, что таблица листается вбок. ── */
@media (max-width:768px) {
  .table-wrap { overflow-x:auto; scrollbar-width:thin; scrollbar-color: var(--muted,#94a3b8) transparent; }
  .table-wrap::-webkit-scrollbar { height:7px; -webkit-appearance:none; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--muted,#94a3b8); border-radius:4px; }
  :is(.table-wrap > table, table.emp-table, table.orgs-summary-table, table.data-table):not(.tbl-plain) :is(th, td) {
    padding:6px 8px; font-size:.82rem;
  }
}

/* chip-hover-light (05.10.2026): в светлой теме при наведении на телефон/Telegram цвет текста оставался тёмным и сливался с заливкой — теперь белый на насыщенном фоне */
body.light-mode a[href^="tel:"]:hover,
html[data-theme="light"] a[href^="tel:"]:hover, body.light-mode a.c-tel:hover,
html[data-theme="light"] a.c-tel:hover { color:#fff !important; background:#047857 !important; border-color:#047857 !important; }
body.light-mode a[href*="//t.me/"]:hover,
html[data-theme="light"] a[href*="//t.me/"]:hover, body.light-mode a.c-tg:hover,
html[data-theme="light"] a.c-tg:hover { color:#fff !important; background:#0369a1 !important; border-color:#0369a1 !important; }
body.light-mode a[href^="mailto:"]:hover,
html[data-theme="light"] a[href^="mailto:"]:hover, body.light-mode a.c-mail:hover,
html[data-theme="light"] a.c-mail:hover { color:#fff !important; background:#4338ca !important; border-color:#4338ca !important; }
/* tc-call-btn (05.10.2026): «📞 Позвонить» в списке бесед — появляется при наведении рядом с кнопками закрепления и отдельного окна */
.tc-call-btn{display:none;position:absolute;right:76px;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-call-btn{display:flex}
body.pwa-app .tc-item .tc-call-btn{right:42px}
@media (hover:none),(max-width:768px){.tc-call-btn{display:flex;right:42px}}
/* tc-call-green (05.10.2026): трубка «позвонить» в списке бесед зелёная, как в шапке и в карточках */
.tc-call-btn { color: transparent !important; text-shadow: 0 0 0 #15803d; }
body:not(.light-mode) .tc-call-btn { text-shadow: 0 0 0 #4ade80; }

/* tc-call-layout (05.10.2026): справа в строке беседы закреплённое место под кнопки — «📞» всегда виден по центру у самого края, рядом «📌»; текст не заезжает под кнопки, «↗» появляется при наведении левее. */
.tc-item:has(.tc-call-btn) .tc-item-body { padding-right: 88px !important; min-width: 0; }
.tc-item .tc-call-btn { display: flex !important; position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 34px !important; height: 34px !important; font-size: 1.05rem !important; }
.tc-item:has(.tc-call-btn) .tc-pin-btn { display: flex !important; position: absolute !important; right: 50px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important; opacity: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.tc-item:has(.tc-call-btn).is-pinned .tc-pin-btn { opacity: .95; }
.tc-item:has(.tc-call-btn):hover .tc-pin-btn { opacity: 1; background: var(--card) !important; border: 1px solid var(--border) !important; }
.tc-item:has(.tc-call-btn) .tc-pop-btn { right: 88px !important; }
/* modal-footer-wrap (05.10.2026): на телефоне кнопки внизу окна переносятся на новые строки и не выходят за край */
@media (max-width:600px){.modal-footer{flex-wrap:wrap;justify-content:stretch}.modal-footer .btn,.modal-footer button{flex:1 1 calc(50% - 10px);min-width:0;white-space:normal;text-align:center;line-height:1.2}}
.tc-snd-btn.ep-bell{animation:epBellRing 1.2s ease-in-out 1;transform-origin:50% 10%}@keyframes epBellRing{0%,100%{transform:rotate(0)}10%{transform:rotate(-22deg)}22%{transform:rotate(20deg)}34%{transform:rotate(-16deg)}46%{transform:rotate(12deg)}58%{transform:rotate(-8deg)}70%{transform:rotate(4deg)}}
/* tc-snd-size (05.10.2026): кнопка звука сообщений («ноты») — того же размера и вида, что кнопки площадок рядом */
.tc-snd-btn{display:inline-flex !important;align-items:center;justify-content:center;width:42px;height:38px;padding:0 !important;font-size:1.3rem !important;line-height:1;border:1px solid #cdc6ee !important;border-radius:10px !important;background:var(--card,#fff) !important}
.tc-snd-btn:hover{border-color:#14b8a6 !important}
/* tc-snd-anim (05.10.2026): кнопка звука «ноты» — подпрыгивает один раз при появлении, пританцовывает при наведении; на телефоне стоит справа в строке поиска, поиск уже */
@keyframes epNoteDance{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-7px) rotate(-12deg)}30%{transform:translateY(0) rotate(10deg)}45%{transform:translateY(-5px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}78%{transform:translateY(-2px) rotate(-3deg)}}
.tc-snd-btn.ep-note-in{animation:epNoteDance 1.3s ease-in-out 1}
.tc-snd-btn:hover{animation:epNoteDance .9s ease-in-out 1}
.tc-snd-btn:active{transform:scale(.92)}
.tc-search-bar .tc-snd-btn{flex:none;margin-left:8px}
.tc-search-bar{display:flex;align-items:center}
.tc-search-bar #tcSearchInput{flex:1 1 auto;min-width:0}
/* tc-snd-mobile (05.10.2026): в строке поиска на телефоне кнопка звука — того же размера, что «Позвонить» в списке */
.tc-search-bar .tc-snd-btn{width:32px !important;height:32px !important;font-size:1rem !important;border-radius:9px !important;margin-left:6px}
/* tc-head-still (05.10.2026): кнопки шапки беседы (↗ в отдельное окно и др.) не сдвигаются при наведении и нажатии */
#tcThreadHeader .btn-icon, #tcThreadHeader .btn-icon:hover, #tcThreadHeader .btn-icon:active, #tcThreadHeader .btn-icon:focus { transform:none !important; box-shadow:none !important; transition:background-color .15s, border-color .15s, color .15s !important }
/* solo-nomax (05.10.2026): в отдельном окне беседы (и мультичате) нет кнопки «Вернуть меню» — полноэкранный режим страницы там не нужен и она перекрывала кнопки шапки */
body.chat-solo #pgMaxExit, body.chat-multi #pgMaxExit, html.tc-solo-boot #pgMaxExit { display:none !important }
/* emoji-contents (05.10.2026): обёртка кнопки смайликов «растворяется», кнопка встаёт в ряд наравне с соседними (те же размеры и выравнивание, что у обёртки) */
.chat-input-wrap > .emoji-wrap{display:contents !important}
.chat-input-wrap > .emoji-wrap > .btn-icon{width:inherit !important;height:inherit !important;align-self:flex-end !important;order:inherit;margin:0 !important}
@media (max-width:700px){.chat-input-wrap > .emoji-wrap > .btn-icon{align-self:center !important}}
/* tc-btn-noshift (05.10.2026): кнопки ↗ / 📌 / 📞 в строке беседы стоят по центру через translateY(-50%); общее правило «нажатие = сдвиг на 1 px» подменяло это значение, и кнопка при нажатии проваливалась вниз */
.tc-item .tc-pop-btn:active, .tc-item .tc-pop-btn:hover, .tc-item .tc-call-btn:active { transform: translateY(-50%) !important; box-shadow: none !important }
.tc-item:hover .tc-pin-btn:active, .tc-item:hover .tc-pin-btn:hover { transform: translateY(-50%) !important; box-shadow: none !important }
.tc-item.is-pinned:not(:hover) .tc-pin-btn:active { transform: none !important }
/* sendrow (05.10.2026): на телефоне «Отправить» стоит в одном ряду со смайликами и вложениями (раньше уезжала на отдельную строку и пустовало место) */
@media (max-width: 700px) {
  body .chat-input-wrap { gap: 4px; }
  body .chat-input-wrap .btn-icon, body .chat-input-wrap .emoji-wrap { width: 36px; height: 36px; }
  body .chat-input-wrap > .btn-primary { order: 2; flex: 1 1 auto; min-width: 96px; height: 36px; padding: 0 10px; margin-left: 4px; white-space: nowrap; font-size: .85rem; }
}
/* bubble-50 (05.10.2026): фон пузырей сообщений (текст и голосовые) на 50% прозрачнее; GIF, эмодзи и кружки — уже без фона */
.chat-msg.ai.tc-au-0:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #3b82f6 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-1:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #10b981 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-2:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #8b5cf6 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-3:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #f59e0b 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-4:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #14b8a6 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-5:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #ec4899 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-6:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #0ea5e9 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai.tc-au-7:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, #84cc16 12%, var(--card2, #f1f2f4)) 50%, transparent) !important; }
.chat-msg.ai:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, var(--card2, #f1f2f4) 50%, transparent); }
.chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) { background: linear-gradient(135deg, color-mix(in srgb, color-mix(in srgb, var(--accent, #777) 50%, #000) 50%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent2, #999) 50%, #000) 50%, transparent)) !important; }
/* bubble-light (05.10.2026): в светлой теме свой пузырь — светлый полупрозрачный с тёмным текстом (белый на прозрачном читался плохо); тени у букв нет */
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg), html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) { background: color-mix(in srgb, color-mix(in srgb, var(--accent, #14b8a6) 30%, #ffffff) 50%, transparent) !important; color: #0f172a !important; border: 1px solid rgba(15,23,42,.10) !important; text-shadow: none !important; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) a, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) a, body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-link, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-link { color: #1d4ed8 !important; text-decoration: underline; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-msg-more, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-msg-more { color: #334155; }
/* полоса голосового: всегда различима */
.chat-msg .vm-voice .vm-wave { height: 8px !important; background: rgba(15,23,42,.30) !important; box-shadow: inset 0 0 0 1px rgba(15,23,42,.18); }
.chat-msg .vm-voice .vm-wave i { background: #0d9488 !important; }
body:not(.light-mode) .chat-msg .vm-voice .vm-wave { background: rgba(255,255,255,.40) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
body:not(.light-mode) .chat-msg .vm-voice .vm-wave i { background: #2dd4bf !important; }
/* hdr-small (05.10.2026): на телефоне кнопка «к списку бесед» и кнопки шапки беседы меньше — все помещаются (☑ «Выбрать» обрезалась) */
@media (max-width: 700px) {
  body .chat-docked .tc-back-btn, body #tcThreadHeader .btn-icon.tc-back-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0 0 2px !important; font-size: 1rem !important; border-radius: 10px !important; }
  body #tcThreadHeader { gap: 4px !important; padding: 6px 8px !important; }
  body #tcThreadHeader .btn-icon:not(.tc-back-btn) { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: .95rem !important; }
  body #tcThreadHeader > div[style*="margin-left:auto"] { gap: 3px !important; flex-wrap: nowrap; }
}
/* mob-hdr-clean (05.10.2026): на телефоне из шапки беседы убраны «Выбрать» (теперь в меню «⋯» сообщения) и, в личной переписке, «Открыть в отдельном окне» (беседа и так на весь экран) */
@media (max-width: 700px) {
  body #tcThreadHeader button[onclick*="toggleTcSelectMode"] { display: none !important; }
  body #tcThreadHeader:has(.tc-head-sub) button[onclick*="tcOpenChatWindow"] { display: none !important; }
}
/* tc-share-grid (05.10.2026): плитки «отправить в другое приложение» — иконка сверху, подпись снизу */
.tc-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.tc-share-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--border, #cbd5e1); background: var(--card2, #f1f5f9); color: var(--text, #111); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.tc-share-tile:hover, .tc-share-tile:active { border-color: #14b8a6; background: rgba(20,184,166,.12); }
.tc-share-tile svg, .tc-share-tile .tc-share-ico { flex: none; height: 30px; display: flex; align-items: center; justify-content: center; line-height: 1; }
/* share-compact (05.10.2026): телефон — плитки «в другое приложение» компактнее, список получателей ниже: окно «Переслать» помещается без прокрутки; в шапке личной беседы «был(а) N мин назад» читается целиком */
@media (max-width: 700px) {
  .tc-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .tc-share-tile { min-height: 52px; padding: 6px 4px; gap: 3px; border-radius: 12px; font-size: .7rem; }
  .tc-share-tile svg { width: 24px; height: 24px; }
  .tc-share-tile svg, .tc-share-tile .tc-share-ico { height: 24px; }
  .tc-share-tile .tc-share-ico { font-size: 1.15rem !important; }
  .modal-body:has(.tc-share-grid) > div[style*="max-height"] { max-height: 24vh !important; }
  .modal-body:has(.tc-share-grid) { padding-bottom: 6px; }
  body #tcThreadHeader .tc-head-sub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; max-width: none; }
  body #tcThreadHeader .tc-head-sub .tc-presence-txt { display: block; white-space: normal; margin-left: 0 !important; }
  body #tcThreadHeader .tc-head-names { min-width: 0; flex: 1 1 auto; }
}
/* ep-upl (05.10.2026): кнопка «Выбрать свой файл…» — стрелка «вылетает» вверх: дважды при открытии окна, постоянно при наведении */
@keyframes epArrowUp { 0%,100% { transform: translateY(0); opacity: 1 } 45% { transform: translateY(-6px); opacity: .55 } 55% { transform: translateY(5px); opacity: 0 } 70% { transform: translateY(0); opacity: 1 } }
.ep-upl .ep-arrow { display: inline-block; animation: epArrowUp 1.1s ease-in-out 2; }
.ep-upl:hover .ep-arrow, .ep-upl:active .ep-arrow { animation: epArrowUp .8s ease-in-out 2; }
/* ep-disk (05.10.2026): «Сохранить» — дискета «вставляется» (двукратно при открытии окна, постоянно при наведении и нажатии) */
@keyframes epDisk { 0%,100% { transform: translateY(0) scale(1) } 35% { transform: translateY(-4px) scale(1.1) } 65% { transform: translateY(3px) scale(.85) } }
.ep-save .ep-disk { display: inline-block; animation: epDisk .9s ease-in-out 2; }
.ep-save:hover .ep-disk, .ep-save:active .ep-disk { animation: epDisk .7s ease-in-out 2; }
/* ep-save-border (05.10.2026): у «Сохранить» такая же рамка, как у «Отмена» */
.ep-save { border: 1px solid #93b4f5 !important; font-weight: 700; }
/* hdr-row (05.10.2026): телефон — шапка беседы в одну линию: [назад] [буква-кнопка] [подпись «Директор / ● был(а)…» рядом] [кнопки справа]; шапка вдвое ниже */
@media (max-width: 700px) {
  body #tcThreadHeader { align-items: center !important; flex-wrap: nowrap !important; padding: 5px 8px !important; }
  body #tcThreadHeader .tc-head-names { display: flex !important; flex-direction: row !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 6px !important; }
  body #tcThreadHeader .tc-head-names .tc-head-btn { width: auto !important; min-width: 42px !important; height: 34px !important; padding: 3px 9px !important; flex: none; }
  body #tcThreadHeader .tc-head-sub { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; font-size: .7rem; line-height: 1.2; }
}
/* hdr-btn42 (05.10.2026): кнопки справа в шапке беседы на телефоне — тот же размер, что у кнопки с буквой (42×34) */
@media (max-width: 700px) {
  body #tcThreadHeader .btn-icon:not(.tc-back-btn) { width: 42px !important; min-width: 42px !important; height: 34px !important; }
  body #tcThreadHeader > div[style*="margin-left:auto"] { gap: 6px !important; }
}
/* burger-nosidebar (05.10.2026): кнопка «☰» (показать боковое меню) нужна только там, где боковое меню есть; на страницах без него (AI-Auth, главная) она висела над мини-площадками и ничего не открывала */
body:not(:has(.sidebar)) #sbBurger { display: none !important; }
/* noPopAll (05.10.2026): на телефоне «Открыть в отдельном окне» в шапке беседы не нужна ни в личных, ни в группах */
@media (max-width: 700px) { body #tcThreadHeader button[onclick*="tcOpenChatWindow"] { display: none !important; } }
/* gm-add-list (05.10.2026): список сотрудников для добавления в группу */
.gm-add-list { max-height: 34vh; overflow-y: auto; margin: 8px 0 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; background: var(--card, #fff); -webkit-overflow-scrolling: touch; }
.gm-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border, #e2e8f0); cursor: pointer; transition: background .12s; }
.gm-row:last-child { border-bottom: 0; }
.gm-row:hover { background: rgba(20,184,166,.08); }
.gm-row.on { background: rgba(20,184,166,.16); }
.gm-name { font-weight: 700; font-size: .9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-pos { font-size: .74rem; color: var(--muted, #64748b); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-chk { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong, #94a3b8); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; }
.gm-row.on .gm-chk { background: #14b8a6; border-color: #14b8a6; }
.gm-row.on .gm-chk::after { content: '✓'; font-weight: 700; }
/* ep-plus (05.10.2026): «+ Добавить» — плюс проворачивается и «вспыхивает» дважды, когда отмечен новый сотрудник, и дважды при наведении/нажатии */
@keyframes epPlus { 0%,100% { transform: rotate(0) scale(1) } 50% { transform: rotate(90deg) scale(1.5) } }
#gm_add_btn .ep-plus { display: inline-block; font-weight: 700; }
#gm_add_btn.ep-pop .ep-plus { animation: epPlus .55s ease-in-out 2; }
#gm_add_btn:not(:disabled):hover .ep-plus, #gm_add_btn:not(:disabled):active .ep-plus { animation: epPlus .55s ease-in-out 2; }
#gm_add_btn:not(:disabled) { background: #15803d; border-color: #15803d; color: #fff; font-weight: 700; }
/* ep-bin (05.10.2026): «🗑 Удалить беседу» — корзина «покачивается» дважды при открытии окна и дважды при наведении/нажатии */
@keyframes epBin { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-16deg) } 75% { transform: rotate(14deg) } }
@keyframes epBin2 { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-16deg) } 75% { transform: rotate(14deg) } }
.ep-bin { display: inline-block; transform-origin: 50% 90%; animation: epBin .6s ease-in-out 2; }
button:hover > .ep-bin, button:active > .ep-bin { animation: epBin2 .6s ease-in-out 2; }
/* meet-nav (05.10.2026): страница «Совещания» на телефоне — ряд кнопок «Чат · Почта · AI» с ободками; на компьютере скрыт (там вкладки) */
.meet-nav { display: none; }
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  .meet-nav { display: flex; gap: 8px; margin: 0 0 12px; }
  .meet-nav button { flex: 1 1 0; min-width: 0; padding: 9px 6px; border-radius: 12px; border: 1.5px solid var(--hover, #14b8a6); background: var(--card, #fff); color: var(--text, #111); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
  .meet-nav button:active { background: rgba(20,184,166,.15); }
}
/* ep-plus2 (05.10.2026): плюс в «Назначить совещание/созвон» дважды проворачивается при появлении и дважды при наведении */
@keyframes epPlusA { 0%,100% { transform: rotate(0) scale(1) } 50% { transform: rotate(90deg) scale(1.5) } }
@keyframes epPlusB { 0%,100% { transform: rotate(0) scale(1) } 50% { transform: rotate(90deg) scale(1.5) } }
.ep-plus2 { display: inline-block; font-weight: 700; animation: epPlusA .55s ease-in-out 2; }
button:hover > .ep-plus2, button:active > .ep-plus2 { animation: epPlusB .55s ease-in-out 2; }
/* meet-layout (05.10.2026): «Совещания» на телефоне — одинаковые боковые поля, отступ сверху, кнопки сеткой в два столбца с ровными краями, «Звонки» зелёная */
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  body #page-meetings { padding-top: 12px; box-sizing: border-box; }
  body #page-meetings > .meet-nav { margin: 0 12px 10px; }
  body #page-meetings > .page-header { padding: 6px 12px 0 !important; }
  body #page-meetings > .page-header .page-title { width: 100%; }
  body #page-meetings .page-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 0 !important; box-sizing: border-box; }
  body #page-meetings .page-actions > * { min-width: 0; width: 100%; box-sizing: border-box; margin: 0 !important; }
  body #page-meetings .page-actions > input { grid-column: 1 / -1; }
  body #page-meetings .page-actions .btn, body #page-meetings .page-actions select { height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
  body #page-meetings .page-actions select { justify-content: flex-start; }
  body #page-meetings .page-actions button[onclick*="callHistoryOpen"] { background: #dcfce7 !important; border: 1.5px solid #15803d !important; color: #14532d !important; font-weight: 700; }
  body #page-meetings .content-area { padding: 10px 12px 14px !important; }
}
/* meet-landscape (05.10.2026): телефон лёжа — элементы управления «Совещаний» в одну строку, поля 16 px, таблица на всю ширину */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 701px) {
  body #page-meetings { padding-top: 6px; }
  body #page-meetings > .meet-nav { margin: 0 16px 6px; }
  body #page-meetings > .meet-nav button { padding: 6px 4px; }
  body #page-meetings > .page-header { padding: 2px 16px 0 !important; gap: 6px; }
  body #page-meetings > .page-header .page-title { width: 100%; font-size: .9rem; }
  body #page-meetings .page-actions { grid-template-columns: 2.2fr 1.2fr 1fr 1fr 1.6fr; gap: 8px; }
  body #page-meetings .page-actions > input { grid-column: auto; }
  body #page-meetings .page-actions .btn, body #page-meetings .page-actions select { height: 36px; font-size: .82rem; padding: 0 8px; }
  body #page-meetings .content-area { padding: 8px 16px 12px !important; }
}
/* DND (06.10.2026): точка «Не беспокоить» */
.tc-st-dnd{background:#8b5cf6 !important;box-shadow:0 0 0 2px rgba(139,92,246,.25)}
/* cal-pill (06.10.2026): «Совещания» — тот же размер, что у «Не беспокоить» */
.cal-btn.cal-pill{border-radius:999px !important;padding:3px 12px !important;font-size:.74rem !important;font-weight:700;line-height:1.4}
/* btn-labels (06.10.2026): подписи кнопок не ломаются по слову, в узких списках часов/минут видны цифры */
.btn, .btn-secondary, .btn-primary, .cal-btn, .modal-footer button { white-space: nowrap; }
@media (max-width: 700px) {
  .btn, .btn-secondary, .btn-primary, .modal-footer button { font-size: .88rem; padding-left: 12px; padding-right: 12px; }
  #cl_h, #cl_m { padding-left: 8px; padding-right: 22px; background-position: right 6px center; text-overflow: clip; }
}
/* tp-c (06.10.2026): ячейки своего выбора времени */
.tp-c{padding:10px 0;border-radius:10px;border:1px solid var(--border,#cbd5e1);background:var(--card,#fff);color:var(--text,#222);font:inherit;font-weight:600;cursor:pointer}
.tp-c.on{background:#14b8a6;border-color:#14b8a6;color:#fff}

/* own-light-text (06.10.2026): в светлой теме у своего светлого пузыря цитата, время и галочка были белыми — не читались */
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote { background: rgba(15,23,42,.08) !important; border-left: 3px solid #0d9488 !important; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote > div, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote > div { color: #1f2937 !important; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote > div:first-child, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-reply-quote > div:first-child { color: #0f172a !important; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) > div[style*="font-size:.68rem"], html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) > div[style*="font-size:.68rem"], body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) > div[style*="font-size:.68rem"] *, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) > div[style*="font-size:.68rem"] * { color: #475569 !important; opacity: 1 !important; text-shadow: none !important; }
/* own-light-ticks (06.10.2026): галочки в светлом пузыре: доставлено — серо-синяя, прочитано — зелёная */
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-ticks, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-ticks { color: #64748b !important; font-weight: 700; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-ticks-read, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-ticks-read { color: #059669 !important; }
/* contacts-sym (06.10.2026): контакты в карточке — строки на всю ширину: значок слева, копирование у правого края, «Копировать всё» во всю ширину */
.staff-contacts { align-items: stretch !important; }
.staff-contacts > div { width: 100%; box-sizing: border-box; }
.staff-contacts > div > a { flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.staff-contacts > div > .tc-copy-btn { flex: none; margin-left: auto; }
.staff-contacts .tc-copy-all { width: 100%; justify-content: center; text-align: center; }
/* dock-home-fit (06.10.2026): главная с открытым чатом сбоку — рабочая область уже, плитки и подписи сжимаются, а не налезают друг на друга */
body.chat-dock-on .apps-grid, body.chat-embed-on .apps-grid, body.side-dock-on .apps-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 226px)) !important; gap: 10px !important; }
body.chat-dock-on .app-tile, body.chat-embed-on .app-tile, body.side-dock-on .app-tile { padding: 16px 8px !important; overflow: hidden; }
body.chat-dock-on .app-tile .name, body.chat-embed-on .app-tile .name, body.side-dock-on .app-tile .name { font-size: clamp(.92rem, 1.05vw, 1.12rem) !important; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
body.chat-dock-on .app-tile .access, body.chat-embed-on .app-tile .access, body.side-dock-on .app-tile .access { font-size: .78rem !important; }
body.chat-dock-on .app-tile .icon, body.chat-embed-on .app-tile .icon, body.side-dock-on .app-tile .icon { font-size: 2rem !important; margin-bottom: 6px !important; }
body.chat-dock-on .main-row, body.chat-embed-on .main-row, body.side-dock-on .main-row, body.side-dock-on .main-row { gap: 10px !important; }
/* item-hover-pad (06.10.2026): при наведении на беседу появляется ↗ (right:88px, ширина 30) — тело строки отступает от правого края на 126px, счётчик непрочитанных не налезает на кнопки */
.tc-item:has(.tc-call-btn):hover .tc-item-body { padding-right: 126px !important; }
.tc-item .tc-item-top .nav-badge { flex: none; }
.tc-item .tc-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* own-light-mention (06.10.2026): @упоминания и метки тем в своём светлом пузыре — белое на светлом не читалось */
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-mention, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-mention, body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-topic-badge, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-topic-badge { color: #0f766e !important; background: rgba(20,184,166,.16) !important; border: 1px solid rgba(20,184,166,.55) !important; font-weight: 700; }
body.light-mode .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-mention-me, html[data-theme="light"] .chat-msg.user:not(.ep-bigmsg):not(.vm-circle-msg) .tc-mention-me { color: #fff !important; background: #ea580c !important; border-color: #ea580c !important; }
/* dock-clocks-fit (06.10.2026): главная с открытым чатом — часы собираются плотной сеткой по три в ряд, циферблаты меньше, без дыр между ними */
body.chat-dock-on .hdr-clocks, body.chat-embed-on .hdr-clocks, body.side-dock-on .hdr-clocks { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px !important; justify-content: stretch !important; align-items: stretch !important; }
body.chat-dock-on .hdr-clocks .wc-pill, body.chat-embed-on .hdr-clocks .wc-pill, body.side-dock-on .hdr-clocks .wc-pill { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 8px 10px !important; gap: 8px !important; }
body.chat-dock-on .hdr-clocks .wc-pill svg, body.chat-embed-on .hdr-clocks .wc-pill svg, body.side-dock-on .hdr-clocks .wc-pill svg { width: 68px !important; height: 68px !important; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2), body.chat-embed-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2), body.side-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.25rem !important; }
/* dock-clocks-one-line (06.10.2026): при открытом чате все часы — строго в одну линию, колонки поровну, содержимое сжимается */
body.chat-dock-on .hdr-clocks, body.chat-embed-on .hdr-clocks, body.side-dock-on .hdr-clocks { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 8px !important; }
body.chat-dock-on .hdr-clocks .wc-pill, body.chat-embed-on .hdr-clocks .wc-pill, body.side-dock-on .hdr-clocks .wc-pill { padding: 6px 7px !important; gap: 6px !important; overflow: hidden; }
body.chat-dock-on .hdr-clocks .wc-pill svg, body.chat-embed-on .hdr-clocks .wc-pill svg, body.side-dock-on .hdr-clocks .wc-pill svg { width: 52px !important; height: 52px !important; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text, body.chat-embed-on .hdr-clocks .wc-pill .wc-text, body.side-dock-on .hdr-clocks .wc-pill .wc-text { min-width: 0; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text > div, body.chat-embed-on .hdr-clocks .wc-pill .wc-text > div, body.side-dock-on .hdr-clocks .wc-pill .wc-text > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(1), body.chat-embed-on .hdr-clocks .wc-pill .wc-text > div:nth-child(1), body.side-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(1) { font-size: .72rem !important; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2), body.chat-embed-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2), body.side-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.05rem !important; }
body.chat-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(3), body.chat-embed-on .hdr-clocks .wc-pill .wc-text > div:nth-child(3), body.side-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(3) { font-size: .68rem !important; }
/* ai-dock-home-fit (06.10.2026): главная с открытым чатом сбоку — рабочая область уже, плитки и подписи сжимаются, а не налезают друг на друга */
body.ai-dock-on .apps-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 226px)) !important; gap: 10px !important; }
body.ai-dock-on .app-tile { padding: 16px 8px !important; overflow: hidden; }
body.ai-dock-on .app-tile .name { font-size: clamp(.92rem, 1.05vw, 1.12rem) !important; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
body.ai-dock-on .app-tile .access { font-size: .78rem !important; }
body.ai-dock-on .app-tile .icon { font-size: 2rem !important; margin-bottom: 6px !important; }
body.ai-dock-on .main-row { gap: 10px !important; }
/* ai-dock-clocks-fit (06.10.2026): главная с открытым чатом — часы собираются плотной сеткой по три в ряд, циферблаты меньше, без дыр между ними */
body.ai-dock-on .hdr-clocks { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px !important; justify-content: stretch !important; align-items: stretch !important; }
body.ai-dock-on .hdr-clocks .wc-pill { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 8px 10px !important; gap: 8px !important; }
body.ai-dock-on .hdr-clocks .wc-pill svg { width: 68px !important; height: 68px !important; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.25rem !important; }
/* ai-dock-clocks-one-line (06.10.2026): при открытом чате все часы — строго в одну линию, колонки поровну, содержимое сжимается */
body.ai-dock-on .hdr-clocks { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 8px !important; }
body.ai-dock-on .hdr-clocks .wc-pill { padding: 6px 7px !important; gap: 6px !important; overflow: hidden; }
body.ai-dock-on .hdr-clocks .wc-pill svg { width: 52px !important; height: 52px !important; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text { min-width: 0; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(1) { font-size: .72rem !important; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.05rem !important; }
body.ai-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(3) { font-size: .68rem !important; }
/* ai-head-align (06.10.2026): шапка AI-помощника — отступ сверху от ряда мини-площадок, все органы управления одной высоты и по центру */
#aiDock .ai-dock-head { margin-top: 12px; padding: 14px 12px 12px; align-items: center; }
#aiDock .ai-dock-head select.ai-engine, #aiDock .ai-dock-head .btn, #aiDock .ai-dock-head .close-btn { height: 40px; min-height: 40px; box-sizing: border-box; margin: 0; }
#aiDock .ai-dock-head select.ai-engine { padding: 0 10px; line-height: 38px; font-size: .86rem; }
#aiDock .ai-dock-head .btn, #aiDock .ai-dock-head .close-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; line-height: 1; }
#aiDock .ai-dock-head .ai-clear { width: 40px; padding: 0; }
#aiDock .ai-dock-head .close-btn { width: 40px; padding: 0; }
/* ai-head-align2 (06.10.2026): колонка AI отступает от ряда мини-площадок; «Авто» не обрезается; на главной AI-Auth кнопки «Чат» в шапке AI нет */
/* высоту и верхний отступ задаёт ai-dock.js (fitDocks) */
#aiDock .ai-dock-head { margin-top: 0 !important; }
#aiDock .ai-dock-head select.ai-engine { flex: 0 1 150px; min-width: 120px; max-width: 150px; text-overflow: ellipsis; padding-right: 22px; }
body:has(#page-home:not([style*="display: none"])) #aiDock .ai-to-chat { display: none !important; }
/* ai-compose-wide (06.10.2026): поле ввода AI — во всю ширину колонки, кнопка «Отправить» под ним; низ колонки всегда виден */
#aiDock .ai-dock-compose { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 14px; flex: none; }
#aiDock .ai-dock-compose textarea { display: block; width: 100%; box-sizing: border-box; min-height: 76px; max-height: 220px; resize: vertical; }
#aiDock .ai-dock-compose .ai-send { width: 100%; flex: none; box-sizing: border-box; }
#aiDock .ai-dock-msgs { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
/* docks-frame (06.10.2026): у колонок AI и чата полная рамка со скруглением — видны нижняя и правая границы */
#aiDock, #chatDock:not(.chat-dock-full), #sideDock:not(.chat-dock-full) { border: 1px solid var(--border, #cbd5e1) !important; border-radius: 14px !important; margin-right: 10px; margin-bottom: 8px; box-sizing: border-box; overflow: hidden; }
/* calls-dock (06.10.2026): «Звонки» — правая колонка, как чат */
#callsDock { display: flex; flex-direction: column; width: 400px; min-width: 320px; flex-shrink: 0; height: 100vh; background: var(--card, #fff); border: 1px solid var(--border, #cbd5e1); border-radius: 14px; margin-right: 10px; margin-bottom: 8px; box-sizing: border-box; overflow: hidden; }
.wrap:has(> #callsDock) { display: flex; }
.wrap > #callsDock { position: sticky; top: 0; }
#callsDock .mini-call-pop.mini-call-docked { position: static; width: auto; max-width: none; max-height: none; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; padding: 14px 14px 12px; overflow: hidden; }
#callsDock .mini-call-pop.mini-call-docked .mini-call-list { flex: 1 1 auto; min-height: 0; max-height: none; }
#callsDock .mini-call-pop.mini-call-docked .mini-call-recent { flex: none; max-height: 34%; overflow: auto; }
@media (max-width: 1099px) { #callsDock { display: none !important; } }
/* calls-green (06.10.2026): трубки в колонке «Звонки» зелёные; кнопка мелодии — размером с крестик */
#miniCallPop .mini-call-redial, #miniCallPop .mini-call-head .call-e { color: transparent !important; text-shadow: 0 0 0 #15803d !important; }
body:not(.light-mode) #miniCallPop .mini-call-redial, body:not(.light-mode) #miniCallPop .mini-call-head .call-e { text-shadow: 0 0 0 #4ade80 !important; }
#miniCallPop .mini-call-redial { background: rgba(21,128,61,.10) !important; border-color: rgba(21,128,61,.45) !important; }
#miniCallPop .mini-call-ring, #miniCallPop .mini-call-close { width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; font-size: 1.1rem; }
/* calls-dock-home-fit (06.10.2026): раскладка главной при открытой колонке «Звонки» — как у AI */
/* calls-dock-home-fit (06.10.2026): главная с открытым чатом сбоку — рабочая область уже, плитки и подписи сжимаются, а не налезают друг на друга */
body.calls-dock-on .apps-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 226px)) !important; gap: 10px !important; }
body.calls-dock-on .app-tile { padding: 16px 8px !important; overflow: hidden; }
body.calls-dock-on .app-tile .name { font-size: clamp(.92rem, 1.05vw, 1.12rem) !important; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
body.calls-dock-on .app-tile .access { font-size: .78rem !important; }
body.calls-dock-on .app-tile .icon { font-size: 2rem !important; margin-bottom: 6px !important; }
body.calls-dock-on .main-row { gap: 10px !important; }
/* calls-dock-clocks-fit (06.10.2026): главная с открытым чатом — часы собираются плотной сеткой по три в ряд, циферблаты меньше, без дыр между ними */
body.calls-dock-on .hdr-clocks { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px !important; justify-content: stretch !important; align-items: stretch !important; }
body.calls-dock-on .hdr-clocks .wc-pill { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 8px 10px !important; gap: 8px !important; }
body.calls-dock-on .hdr-clocks .wc-pill svg { width: 68px !important; height: 68px !important; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.25rem !important; }
/* calls-dock-clocks-one-line (06.10.2026): при открытом чате все часы — строго в одну линию, колонки поровну, содержимое сжимается */
body.calls-dock-on .hdr-clocks { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 8px !important; }
body.calls-dock-on .hdr-clocks .wc-pill { padding: 6px 7px !important; gap: 6px !important; overflow: hidden; }
body.calls-dock-on .hdr-clocks .wc-pill svg { width: 52px !important; height: 52px !important; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text { min-width: 0; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(1) { font-size: .72rem !important; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(2) { font-size: 1.05rem !important; }
body.calls-dock-on .hdr-clocks .wc-pill .wc-text > div:nth-child(3) { font-size: .68rem !important; }
/* calls-position-color (06.10.2026): должность в списке «Позвонить» — цветом, как в справочнике «Сотрудники» (#8b1a3a); в тёмной теме светлее */
#miniCallPop .mini-call-one small { color: #8b1a3a !important; font-weight: 600; }
body:not(.light-mode) #miniCallPop .mini-call-one small { color: #f0a3b8 !important; }
/* home-side-gap (06.10.2026, решение владельца): при открытом боковом окне (чат / AI / звонки) колонка календаря и
   «Совещаний» стоит с одинаковыми полями слева и справа — зазор «плитки ⇄ колонка» равен полю страницы (40px, как слева у плиток),
   а сами плитки растягиваются по ширине ряда (первая у левого поля, последняя у колонки), чтобы свободное место не скапливалось перед колонкой. */
body.chat-dock-on .main-row, body.chat-embed-on .main-row, body.side-dock-on .main-row, body.ai-dock-on .main-row, body.calls-dock-on .main-row { gap: 40px !important; }
/* плитки компактные, с прежними зазорами, прижаты к левому полю (решение владельца 06.10); до колонки — зазор ряда 40px */
/* home-keep-cols (06.10.2026, решение владельца): при боковом окне число столбцов плиток НЕ меняется — только размер плиток.
   Число столбцов без бокового окна замеряет index.html AI-Auth и кладёт в --home-cols; здесь сетка строится на столько же равных долей. */
body.chat-dock-on .main-row .apps-grid, body.chat-embed-on .main-row .apps-grid, body.side-dock-on .main-row .apps-grid, body.ai-dock-on .main-row .apps-grid, body.calls-dock-on .main-row .apps-grid { margin: 0 !important; max-width: none !important; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(var(--home-cols, 4), minmax(0, 1fr)) !important; justify-content: stretch !important; }
body.chat-dock-on .main-row .app-tile, body.chat-embed-on .main-row .app-tile, body.side-dock-on .main-row .app-tile, body.ai-dock-on .main-row .app-tile, body.calls-dock-on .main-row .app-tile { min-width: 0; width: auto !important; }
@media (max-width: 1100px) { body.chat-dock-on .main-row, body.chat-embed-on .main-row, body.side-dock-on .main-row, body.ai-dock-on .main-row, body.calls-dock-on .main-row { gap: 20px !important; } }
/* bottom-lift (06.10.2026, решение владельца): низ боковых окон (чат, AI, звонки) и колонки календаря/Совещаний — чуть выше края экрана */
#aiDock, #chatDock, #callsDock { box-sizing: border-box; padding-bottom: 18px !important; }
/* .side-cals без нижнего отступа: низ «Совещаний» на одной линии с плитками (06.10) */
body.chat-dock-on .main-row, body.chat-embed-on .main-row, body.side-dock-on .main-row, body.ai-dock-on .main-row, body.calls-dock-on .main-row { padding-bottom: 6px; }
/* dock-fade (06.10.2026): боковое окно появляется плавно — кадр с «кривой» раскладкой, пока сетка плиток пересчитывается, не виден */
@keyframes golibasDockIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes golibasDockSlide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
#aiDock, #chatDock, #callsDock { animation: golibasDockSlide .28s ease-out both; }
/* сетка плиток ужимается сразу, как только колонка звонков появилась в разметке (не ждём класса на body) — наложения нет */
body:has(#callsDock) .main-row .apps-grid { margin: 0 !important; max-width: none !important; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(var(--home-cols, 4), minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 10px !important; }
body:has(#callsDock) .main-row .app-tile { min-width: 0; width: auto !important; padding: 16px 8px !important; overflow: hidden; }
body:has(#callsDock) .main-row { gap: 40px !important; }
/* cal-pill (06.10.2026, решение владельца): созвон в колонке «Совещания» — одна кнопка-ободок: дата, название, участники; ✏️/🗑 справа; клик по ободку открывает созвон */
.side-cals .cal-row.cal-pill { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 12px; padding: 7px 10px; margin: 6px 0; cursor: pointer; transition: border-color .15s, background .15s; }
.side-cals .cal-row.cal-pill:hover { border-color: #14b8a6; background: rgba(20,184,166,.08); }
.side-cals .cal-row.cal-pill .d { width: auto; flex: none; font-size: .78rem; line-height: 1.15; }
.side-cals .cal-row.cal-pill .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cals .cal-row.cal-pill .n a { font-weight: 700; text-decoration: none; color: inherit; }
.side-cals .cal-row.cal-pill .cal-btn.cal-ico { flex: none; padding: 2px 6px; font-size: .8rem; line-height: 1; border-radius: 8px; margin-left: 0; }
/* calls-narrow (06.10.2026): колонка «Звонки» уже чата и AI (330px); основное содержимое занимает освободившееся место само */
#callsDock { width: 330px !important; min-width: 300px !important; }
#callsDock .mini-call-pop.mini-call-docked { padding: 12px 12px 10px; }
#callsDock .mini-call-list .mini-call-one { font-size: .92rem; }
/* cols-narrow (06.10.2026): колонки AI и чата — 330px, как «Звонки»; ширину чата сбоку по-прежнему можно потянуть мышью */
#aiDock { width: 330px !important; min-width: 300px !important; }
#chatDock.chat-dock-embed { width: 330px !important; min-width: 300px !important; }
#chatDock:not(.chat-dock-embed) { min-width: 300px; }
/* msg-font-up (07.10.2026): текст сообщения на размер крупнее (.88 → .98rem), цитата чуть мельче — не сливаются */
#tcMessages .chat-msg { font-size: .98rem; }
#tcMessages .chat-msg .tc-reply-quote > div:first-child { font-size: .72rem !important; }
#tcMessages .chat-msg .tc-reply-quote > div:last-child { font-size: .74rem !important; }

/* mention-picked (07.10.2026): уже отмеченный в сообщении человек в списке @ выделен отдельно */
.tc-mention-item { position: relative; }
.tc-mention-item.picked { background: rgba(16,185,129,.14); box-shadow: inset 3px 0 0 #10b981; }
.tc-mention-item.picked.active { background: rgba(16,185,129,.26); }
.tc-mention-picked { margin-left: auto; flex: none; font-size: .68rem; font-weight: 700; color: #047857; white-space: nowrap; padding-left: 6px; }

/* chat-format (07.10.2026): кнопки Ж / К / цвет над полем ввода и цветной текст в сообщениях */
.tc-fmt-bar { display: flex; align-items: center; gap: 2px; flex: none; }
.tc-fmt-bar button { width: 28px; height: 30px; border: 1px solid transparent; background: transparent; border-radius: 7px; cursor: pointer; color: var(--text); font-size: .95rem; padding: 0; }
.tc-fmt-bar button:hover { background: var(--card2, rgba(148,163,184,.2)); border-color: var(--border); }
.tc-fmt-pop { position: fixed; z-index: 14600; display: flex; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--border); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.tc-fmt-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.tc-fmt-dot:hover { transform: scale(1.15); }
.tc-fc { font-weight: 600; }
.tc-fc-red { color: #ef4444; } .tc-fc-orange { color: #f59e0b; } .tc-fc-green { color: #10b981; }
.tc-fc-blue { color: #3b82f6; } .tc-fc-purple { color: #8b5cf6; } .tc-fc-gray { color: #64748b; } .tc-fc-cherry { color: #f43f5e; }
body.light-mode .tc-fc-orange { color: #b45309; } body.light-mode .tc-fc-green { color: #047857; }
body.light-mode .tc-fc-cherry { color: #9f1239; } body.light-mode .tc-fc-red { color: #dc2626; } body.light-mode .tc-fc-blue { color: #1d4ed8; } body.light-mode .tc-fc-purple { color: #6d28d9; }

/* reply-purple (07.10.2026): цитата и плашка «ответ» — фиолетовые, чтобы не сливались с серым фоном */
#tcMessages .chat-msg .tc-reply-quote { background: rgba(167,139,250,.24) !important; border-left: 4px solid #a78bfa !important; }
#tcMessages .chat-msg .tc-reply-quote > div:first-child { color: #ddd6fe !important; }
body.light-mode #tcMessages .chat-msg .tc-reply-quote, html[data-theme="light"] #tcMessages .chat-msg .tc-reply-quote { background: rgba(139,92,246,.16) !important; border-left: 4px solid #7c3aed !important; }
body.light-mode #tcMessages .chat-msg .tc-reply-quote > div:first-child, html[data-theme="light"] #tcMessages .chat-msg .tc-reply-quote > div:first-child { color: #5b21b6 !important; }
body.light-mode #tcMessages .chat-msg .tc-reply-quote > div:last-child, html[data-theme="light"] #tcMessages .chat-msg .tc-reply-quote > div:last-child { color: #1f2937 !important; }
.tc-reply-preview { background: rgba(139,92,246,.14) !important; border-top: 2px solid #8b5cf6 !important; }
.tc-reply-preview .tc-reply-preview-bar { background: #8b5cf6 !important; width: 4px; }
.tc-reply-preview #tcReplyPreviewName { color: #6d28d9 !important; }
body:not(.light-mode) .tc-reply-preview #tcReplyPreviewName { color: #c4b5fd !important; }
.tc-reply-preview #tcReplyPreviewText { color: var(--text) !important; opacity: .85; }

/* sender-cherry (07.10.2026): имя отправителя всегда вишнёвое, от кружка статуса — отступ */
.chat-msg .tc-st-dot { margin-right: 8px; }
.chat-msg .tc-sender-name { color: #fb7185 !important; font-weight: 600 !important; }
body.light-mode .chat-msg .tc-sender-name, html[data-theme="light"] .chat-msg .tc-sender-name { color: #9f1239 !important; }
.chat-msg .tc-sender-name:hover { filter: brightness(1.15); }

/* team-chip (07.10.2026): участники командного аккаунта — цветные плашки, а не серая строка */
.team-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.team-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.5); color: #c4b5fd; white-space: nowrap; }
body.light-mode .team-chip, html[data-theme="light"] .team-chip { background: rgba(139,92,246,.14); color: #5b21b6; border-color: rgba(124,58,237,.45); }
.team-chip-all { background: rgba(16,185,129,.18); border-color: #10b981; color: #34d399; }
body.light-mode .team-chip-all, html[data-theme="light"] .team-chip-all { color: #047857; }
.team-chip-none { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.5); color: var(--muted); font-weight: 400; }

/* chat-sched (07.10.2026): отложенные сообщения */
.tc-sched-btn { position: relative; flex: none; }
.tc-sched-n { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #8b5cf6; color: #fff; font-size: .65rem; font-weight: 800; line-height: 16px; text-align: center; }
.tc-sched-pop { position: fixed; z-index: 14600; width: 300px; max-width: calc(100vw - 16px); padding: 10px; border-radius: 14px; background: var(--card, #fff); color: var(--text); border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(0,0,0,.3); }
.tc-sched-pop.tc-sched-wide { width: 420px; max-height: 70vh; overflow-y: auto; }
.tc-sched-h { font-weight: 800; font-size: .95rem; margin: 2px 4px 8px; }
.tc-sched-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; margin: 2px 0; border: 1px solid var(--border); border-radius: 9px; background: rgba(139,92,246,.08); color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.tc-sched-opt:hover { background: rgba(139,92,246,.2); border-color: #8b5cf6; }
.tc-sched-opt span { color: var(--muted); font-size: .8rem; }
.tc-sched-custom { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.tc-sched-custom input, .tc-sched-edit input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: .85rem; }
.tc-sched-link { display: block; width: 100%; margin-top: 8px; padding: 6px; border: 0; background: none; color: #7c3aed; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: center; }
.tc-sched-row { padding: 8px 10px; margin: 6px 0; border: 1px solid var(--border); border-left: 4px solid #8b5cf6; border-radius: 10px; background: rgba(139,92,246,.07); }
.tc-sched-row.bad { border-left-color: #ef4444; background: rgba(239,68,68,.08); }
.tc-sched-when { font-size: .78rem; color: var(--muted); }
.tc-sched-when b { color: var(--text); }
.tc-sched-txt { margin: 3px 0 6px; font-size: .88rem; overflow-wrap: anywhere; }
.tc-sched-err { color: #ef4444; font-size: .76rem; margin-bottom: 4px; }
.tc-sched-act { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-sched-act button { padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2, rgba(148,163,184,.15)); color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.tc-sched-act button.red { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; font-weight: 700; }
.tc-sched-edit { gap: 6px; align-items: center; margin-top: 6px; }
.tc-sched-empty { padding: 14px; text-align: center; color: var(--muted); font-size: .88rem; }

/* tc-react-pop (07.10.2026): всплывающая карточка «отреагировал(а)» вместо строки в переписке */
.tc-react-pop { width: 320px; max-width: 92vw; padding: 10px 14px; border-radius: 14px; background: var(--card, #fff); color: var(--text, #111); border: 1px solid #f59e0b; border-left: 5px solid #f59e0b; box-shadow: 0 10px 30px rgba(0,0,0,.3); cursor: pointer; animation: slideIn .25s ease; transition: opacity .4s; }
.tc-react-pop.tc-react-out { opacity: 0; }
.tc-react-head { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.tc-react-emo { font-size: 1.7rem; line-height: 1; flex: none; }
.tc-react-head i { color: var(--muted); font-style: normal; font-size: .8rem; }
.tc-react-quote { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(245,158,11,.14); font-size: .84rem; overflow-wrap: anywhere; }

/* tc-sched v2 (07.10.2026): быстрые кнопки и свой выбор времени */
.tc-sched-sub { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 4px 4px; }
.tc-sched-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tc-sched-chips.two { grid-template-columns: repeat(2, 1fr); margin-top: 6px; }
.tc-sched-chips .tc-sched-opt { justify-content: center; margin: 0; padding: 9px 4px; font-weight: 700; }
.tc-sp { display: flex; align-items: center; gap: 4px; flex: 1; }
.tc-sp select { padding: 7px 4px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: .88rem; background: var(--card2, #fff); color: var(--text); min-width: 0; }
.tc-sp .tc-sp-day { flex: 1; }
.tc-sp .tc-sp-h, .tc-sp .tc-sp-m { width: 58px; text-align: center; }
.tc-sched-go { display: block; width: 100%; margin-top: 8px; padding: 9px; font-weight: 700; }
.tc-sched-edit { flex-wrap: nowrap; }

/* пересылка со своим комментарием и показ в «Запланировано» (07.10.2026) */
.tc-fwd-comment { margin-top: 12px; }
.tc-fwd-comment label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tc-fwd-comment label span { text-transform: none; font-weight: 400; letter-spacing: normal; }
.tc-fwd-comment textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px; padding: 8px 10px; border: 1px solid #8b5cf6; border-radius: 10px; font: inherit; font-size: .9rem; background: rgba(139,92,246,.06); color: var(--text); }
.tc-sched-cmt { margin-bottom: 4px; font-weight: 600; }
.tc-sched-from { color: #7c3aed; font-weight: 700; }

/* chat-tunread (07.10.2026): число новых сообщений на вкладках тем */
.tc-topic-chip { position: relative; }
.tc-topic-chip .tc-topic-n { display: inline-block; margin-left: 7px; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #e11d48; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.35; text-align: center; box-shadow: 0 0 0 2px rgba(225,29,72,.25); animation: tcNewPulse 1.6s ease-in-out infinite; }
.tc-topic-chip.tc-topic-hasnew:not(.active) { border-color: #e11d48 !important; background: rgba(225,29,72,.10) !important; font-weight: 700; }
@keyframes tcNewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* tc-unread (07.10.2026): новое (ещё не виденное) сообщение — цветом и меткой «новое» */
#tcMessages .chat-msg.tc-unread { position: relative; background-image: linear-gradient(90deg, rgba(37,99,235,.22), rgba(37,99,235,.10)) !important; border-color: #2563eb !important; box-shadow: inset 5px 0 0 #2563eb, 0 0 0 2px rgba(37,99,235,.28) !important; transition: box-shadow .8s, background-image .8s, border-color .8s; }
#tcMessages .chat-msg.tc-unread::after { content: 'новое'; position: absolute; right: 14px; bottom: 8px; padding: 1px 9px; border-radius: 999px; background: #2563eb; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
#tcMessages .chat-msg.tc-unread.tc-unread-fade { box-shadow: none !important; background-image: none !important; }
#tcMessages .chat-msg.tc-unread.tc-unread-fade::after { opacity: 0; transition: opacity .8s; }

/* vm-heard (07.10.2026): отметка «прослушано» у голосовых */
.vm-heard { margin-top: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; }
.vm-heard.new { color: #2563eb; }
.vm-heard.ok { color: #059669; }
.vm-heard.wait { color: var(--muted, #64748b); font-weight: 600; }
body:not(.light-mode) .vm-heard.new { color: #60a5fa; } body:not(.light-mode) .vm-heard.ok { color: #34d399; }
.chat-msg:has(.vm-heard.new) .vm-play { background: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.25); }

/* oc-grey-light (07.10.2026): в светлой теме серые кнопки звонка («Камера», «Экран», «Добавить», «Свернуть») — тёмный текст; раньше он был светлым на светлом и не читался */
body.light-mode #ownCallBox .oc-btn.oc-grey, body.light-mode #ownCallBox .oc-btn.st-off, html[data-theme="light"] #ownCallBox .oc-btn.oc-grey, html[data-theme="light"] #ownCallBox .oc-btn.st-off { color: #0f172a !important; background: rgba(20,184,166,.22) !important; border: 1px solid rgba(13,148,136,.75) !important; }
body.light-mode #ownCallBox .oc-btn.oc-grey .oc-txt, body.light-mode #ownCallBox .oc-btn.st-off .oc-txt { color: #0f172a !important; }

/* peermuted (07.10.2026): у собеседника выключен микрофон */
#ownCallBox .oc-info-people span.peermuted { border-color: #ef4444 !important; background: rgba(239,68,68,.22) !important; }
#ownCallBox .oc-info-people span.peermuted::after { content: ' 🔇'; }
#ownCallBox .oc-tile.peermuted::after { content: '🔇 микрофон выключен'; position: absolute; left: 8px; top: 8px; z-index: 3; background: rgba(239,68,68,.92); color: #fff; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
#ownCallBox .oc-mutedbar { margin: 6px auto 0; padding: 6px 14px; border-radius: 999px; background: rgba(239,68,68,.14); border: 1px solid #ef4444; color: #b91c1c; font-size: .85rem; font-weight: 700; text-align: center; max-width: 92%; }
body:not(.light-mode) #ownCallBox .oc-mutedbar { color: #fca5a5; }

/* oneonone (07.10.2026): в разговоре двоих имя собеседника уже сверху — подпись под видео не дублируем */
#ownCallBox .oc-gridwrap.oneonone .oc-tile .oc-cap { display: none !important; }

/* chat-gifs (07.10.2026): окно гифок — вкладки «Общие / Мои», темы, загрузка набора */
.tc-gif-pop.tcg-pop { max-width: 380px; width: 380px; }
.tcg-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tcg-tabs button { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card2, rgba(148,163,184,.15)); color: inherit; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.tcg-tabs button.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tcg-themes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; max-height: 76px; overflow-y: auto; }
.tcg-themes button { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.tcg-themes button.on { background: rgba(124,58,237,.18); border-color: #7c3aed; font-weight: 700; }
.tcg-search, .tcg-theme { width: 100%; box-sizing: border-box; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: .85rem; background: var(--card2, transparent); color: inherit; }
.tcg-pop .tc-gif-grid { grid-template-columns: repeat(3, 1fr); max-height: 280px; }
.tcg-pop .tc-gif-grid img { width: 100%; height: 100px; }
.tcg-it { position: relative; display: block; }
.tcg-it .tcg-del, .tcg-it .tcg-mv { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: .72rem; font-style: normal; font-weight: 700; line-height: 20px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tcg-it .tcg-del { right: 3px; } .tcg-it .tcg-mv { left: 3px; }
.tcg-it:hover .tcg-del, .tcg-it:hover .tcg-mv { opacity: 1; }
.tcg-it .tcg-del:hover { background: #ef4444; }
.tcg-add { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.tcg-add .tcg-theme { margin: 0; flex: 1; }
.tcg-st { font-size: .76rem; color: var(--muted); min-height: 14px; margin-top: 4px; }

.tcg-share { display: block; width: 100%; margin-bottom: 8px; padding: 6px 10px; border: 1px dashed #7c3aed; border-radius: 9px; background: transparent; color: #7c3aed; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.tcg-share.on { background: rgba(16,185,129,.14); border: 1px solid #10b981; color: #047857; }
.tcg-tabs button { font-size: .8rem; padding: 7px 6px; }

.tcg-lbl { font-size: .72rem; color: var(--muted); margin: 6px 2px 3px; }
.tcg-add .btn-sm { white-space: nowrap; }

/* tcg-add2 (07.10.2026): поле названия темы — на всю ширину, кнопки под ним */
.tcg-add { flex-wrap: wrap; }
.tcg-add .tcg-theme { flex: 1 1 100%; min-width: 0; padding: 9px 12px; font-size: .95rem; }
.tcg-add .btn-sm { flex: 1 1 0; padding: 9px 8px; }

/* tcg-multi (07.10.2026): выбор многих файлов, перетаскивание */
.tcg-hint { font-size: .72rem; color: var(--muted); margin-top: 6px; line-height: 1.3; }
.tcg-addlbl { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tc-gif-pop.tcg-drop { outline: 3px dashed #7c3aed; outline-offset: -4px; background: rgba(124,58,237,.08); }

.tcg-dedupe { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: #7c3aed; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline dotted; }

/* tcg-fixed (07.10.2026): плитки гифок одного размера — сетка не «прыгает» во время загрузки */
.tcg-pop .tc-gif-grid { grid-auto-rows: 100px; }
.tcg-pop .tc-gif-grid .tcg-it { display: block; width: 100%; height: 100px; overflow: hidden; border-radius: 10px; background: rgba(148,163,184,.18); }
.tcg-pop .tc-gif-grid img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* tcg-move (07.10.2026): перенос гифок между темами — перетаскиванием и меню существующих тем */
.tc-gif-pop.tcg-pop { position: fixed; }
.tcg-menu { position: absolute; z-index: 5; min-width: 170px; max-width: 280px; max-height: 240px; overflow-y: auto; padding: 6px; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.tcg-menu-h { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px 4px; }
.tcg-menu-e { padding: 6px; font-size: .8rem; color: var(--muted); }
.tcg-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.tcg-menu button:hover { background: rgba(124,58,237,.14); }
.tcg-menu .tcg-menu-new { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: #7c3aed; font-weight: 700; }
.tcg-themes .tcg-droptarget { background: #7c3aed !important; color: #fff !important; border-color: #7c3aed !important; transform: scale(1.06); }
.tcg-it[draggable="true"] { cursor: grab; }

/* tcg-deltheme (07.10.2026): удаление темы гифок */
.tcg-deltheme { display: block; width: 100%; margin-bottom: 8px; padding: 5px 10px; border: 1px dashed #ef4444; border-radius: 9px; background: transparent; color: #dc2626; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.tcg-confirm { margin-bottom: 8px; padding: 8px; border: 1px solid #ef4444; border-radius: 10px; background: rgba(239,68,68,.08); }
.tcg-confirm div { margin-bottom: 6px; font-size: .85rem; }
.tcg-confirm button { display: block; width: 100%; margin-top: 5px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2, rgba(148,163,184,.15)); color: inherit; font: inherit; font-size: .82rem; cursor: pointer; }
.tcg-confirm button.red { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; font-weight: 700; }

.tcg-it.tcg-over { box-shadow: -5px 0 0 0 #7c3aed; transform: translateX(3px); }

/* tcg-resize (07.10.2026): окно гифок тянется за уголок; сетка подстраивается под размер */
.tc-gif-pop.tcg-pop { max-width: 96vw; max-height: 92vh; box-sizing: border-box; }
.tc-gif-pop.tcg-pop.tcg-sized { max-width: none; display: flex; flex-direction: column; overflow-y: auto; }
.tcg-pop.tcg-sized > .tc-gif-grid { flex: 1 1 auto; max-height: none !important; min-height: 90px; }
.tcg-pop .tc-gif-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tcg-pop > .tcg-grip { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 8px; background: rgba(124,58,237,.14); color: #7c3aed; font-size: 15px; line-height: 26px; text-align: center; cursor: nesw-resize; touch-action: none; user-select: none; z-index: 6; }
.tcg-pop > .tcg-grip:hover { background: #7c3aed; color: #fff; }
.tcg-pop .tcg-tabs { padding-right: 30px; }

/* tcg-fixed-size (07.10.2026): окно гифок одного размера на всех вкладках («Общие», «Мои», «Общие темы»); растянутый вручную размер (⤢) сильнее */
.tc-gif-pop.tcg-pop { display: flex; flex-direction: column; height: min(600px, 80vh); overflow-y: auto; }
.tcg-pop > .tc-gif-grid { flex: 1 1 auto; max-height: none !important; min-height: 90px; }

/* tcg-fav (07.10.2026): избранное и «взять себе» */
.tcg-tabs { flex-wrap: wrap; }
.tcg-tabs button { flex: 1 1 auto; white-space: nowrap; }
.tcg-it .tcg-star { position: absolute; bottom: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; font-style: normal; text-decoration: none; line-height: 22px; text-align: center; cursor: pointer; opacity: .85; }
.tcg-it .tcg-star.on { background: #f59e0b; color: #fff; opacity: 1; }
.tcg-it .tcg-star:hover { opacity: 1; transform: scale(1.15); }
.tcg-it .tcg-take { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(16,185,129,.9); color: #fff; font-size: .7rem; font-style: normal; line-height: 20px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tcg-it:hover .tcg-take { opacity: 1; }

/* tcg-contain (07.10.2026): превью гифок показывают картинку целиком (раньше квадрат обрезал верх и края) */
.tcg-pop .tc-gif-grid img, .tcg-pop .tcg-it img { object-fit: contain !important; object-position: center !important; background: transparent; }
.tcg-pop .tc-gif-grid .tcg-it { background: rgba(148,163,184,.16); border: 1px solid var(--border); }

/* tcg-noshrink (07.10.2026): при фиксированной высоте окна вкладки, ряд тем, поиск и кнопки не сжимаются — сжимается только сетка гифок */
.tcg-pop > * { flex-shrink: 0; }
.tcg-pop > .tc-gif-grid { flex: 1 1 auto; flex-shrink: 1; min-height: 120px; }
.tcg-pop .tcg-themes { max-height: none; overflow: visible; flex-wrap: wrap; }
.tcg-pop .tcg-tabs, .tcg-pop .tcg-search, .tcg-pop .tcg-share, .tcg-pop .tcg-deltheme { flex-shrink: 0; }

/* silent (07.10.2026): отправка без звука */
.tc-send-menu { position: fixed; z-index: 14600; min-width: 230px; max-width: 280px; padding: 6px; background: var(--card, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.tc-send-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.tc-send-menu button:hover { background: rgba(124,58,237,.14); }
.tc-send-hint { padding: 6px 12px 4px; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.chat-msg { position: relative; }
.chat-msg > .tc-silent-mark { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(100,116,139,.18); color: var(--muted, #64748b); font-size: .68rem; font-weight: 700; }

.tc-sched-silent { display: flex; align-items: center; gap: 6px; margin: 2px 4px 8px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 9px; font-size: .86rem; font-weight: 700; cursor: pointer; }
.tc-sched-silent span { font-weight: 400; font-size: .74rem; color: var(--muted); }
.tc-sched-silent input { width: auto; margin: 0; }

/* tcg-att (08.10.2026): выбранная гифка — карточка с превью и кнопкой ✕; вкладки окна гифок — ровная сетка; кнопка «Отправить» всегда с ободком */
#tcAttachPreview.tcg-att { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 0 12px 6px; border: 1px solid #7c3aed; border-radius: 14px; background: rgba(124,58,237,.07); }
#tcAttachPreview.tcg-att .tcg-att-img { display: block; width: 72px; height: 72px; max-width: 72px; max-height: 72px; object-fit: contain; margin: 0; border-radius: 10px; background: rgba(148,163,184,.18); flex: none; }
#tcAttachPreview.tcg-att .tcg-att-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; overflow: hidden; }
#tcAttachPreview.tcg-att .tcg-att-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tcAttachPreview.tcg-att .tcg-att-txt span { color: var(--muted); font-size: .76rem; }
#tcAttachPreview.tcg-att .tcg-att-x { flex: none; width: 38px; height: 38px; border: 1px solid #fca5a5; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 1rem; font-weight: 800; cursor: pointer; padding: 0; }
#tcAttachPreview.tcg-att .tcg-att-x:hover { background: #ef4444; color: #fff; }
.tcg-tabs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; }
.tcg-tabs button { flex: none; width: 100%; white-space: normal; line-height: 1.2; min-height: 40px; }
#tcInputWrap .btn.btn-primary, .chat-input-wrap > .btn-primary { border: 1.5px solid rgba(37,99,235,.55); box-shadow: none; }
#tcInputWrap.tc-has-attach .btn.btn-primary, .chat-input-wrap.tc-has-attach > .btn-primary { border: 1.5px solid rgba(37,99,235,.55); }

/* tc-new-btn (08.10.2026): кнопка «Новые сообщения» — когда ленту прокрутили вверх, а пришло новое */
.tc-new-btn { position: fixed; z-index: 13000; transform: translateX(-50%); padding: 8px 16px; border: 0; border-radius: 999px; background: #7c3aed; color: #fff; font: inherit; font-weight: 700; font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; }

/* tc-note (09.10.2026): памятка темы — невысокая, с прокруткой; сворачивается до строки */
#tcTopicNote.tc-note-min { max-height: 34px !important; overflow: hidden !important; }
#tcTopicNote .tc-note-arrow { font-weight: 600; color: #b45309; margin-left: 6px; }

/* tc-prof-btns (11.10.2026): кнопки карточки коллеги не выходят за рамку на телефоне — «Написать» и «Позвонить» делят строку, «Закрыть» на всю ширину ниже */
.tc-prof-btns .btn { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: nowrap; justify-content: center; text-align: center; }
.tc-prof-btns .btn:last-child { flex-basis: 100%; }

/* emp-actions (11.10.2026): карточка сотрудника у администратора на телефоне — два «Сохранить» в одной строке, «Отмена» ниже на всю ширину (как в карточке коллеги) */
@media (max-width: 640px) {
  .modal-actions.emp-actions { flex-wrap: wrap; gap: 8px; }
  .modal-actions.emp-actions > button { min-width: 0; white-space: normal; text-align: center; height: auto !important; min-height: 44px; line-height: 1.25; padding: 8px 10px; }
  .modal-actions.emp-actions > .btn-warn { order: 1; flex: 1 1 calc(50% - 4px) !important; }
  .modal-actions.emp-actions > .btn-primary { order: 2; flex: 1 1 calc(50% - 4px) !important; }
  .modal-actions.emp-actions > button:first-child { order: 3; flex: 1 1 100% !important; }
}

/* памятка темы (11.10.2026): ссылки в жёлтой памятке — синие, жирные, подчёркнутые (были серыми и сливались с текстом) */
#tcTopicNote a, #tcTopicNote a.tc-link { color: #1d4ed8 !important; font-weight: 700; text-decoration: underline; word-break: break-all; }

/* tc-sched-pill / tc-sched-menu (11.10.2026): «Повторять» и «Закрепить» в окне «Отправить позже» — плашки и выпадающий список, как в Telegram */
.tc-sched-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.tc-sched-pill { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card2, rgba(148,163,184,.14)); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.tc-sched-pill b { font-weight: 800; }
.tc-sched-pill i { font-style: normal; opacity: .6; }
.tc-sched-pill:hover { border-color: #7c3aed; }
.tc-sched-menu { position: fixed; z-index: 14700; min-width: 200px; max-height: 70vh; overflow: auto; padding: 6px; border-radius: 14px; background: var(--card, #fff); color: var(--text); border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.tc-sched-mi { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: .93rem; cursor: pointer; }
.tc-sched-mi:hover { background: rgba(124,58,237,.14); }
.tc-sched-mi.on { font-weight: 800; color: #7c3aed; }

/* aboutBtns (11.10.2026): кнопки окна «О программе» — с ободком, овальнее */
.aboutBtns .btn { border: 1.5px solid color-mix(in srgb, #8b5cf6 55%, var(--border, #d1d5db)) !important; border-radius: 16px !important; }

/* tc-typing (11.10.2026): «Иванов Иван печатает…» над полем ввода */
.tc-typing { flex: 0 0 auto; padding: 3px 14px 2px; font-size: .8rem; font-style: italic; color: var(--muted, #6b7280); display: flex; align-items: baseline; gap: 2px; min-height: 18px; }
.tc-typing-dots b { font-style: normal; font-weight: 900; animation: tcTypingDot 1.2s infinite both; }
.tc-typing-dots b:nth-child(2) { animation-delay: .2s; } .tc-typing-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes tcTypingDot { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }

/* tc-typing-prev (11.10.2026): в списке бесед вместо последнего сообщения — «Имя печатает…» зелёным курсивом */
.tc-item-preview.tc-typing-prev { color: #059669; font-style: italic; font-weight: 600; }

.tc-head-sub.tc-typing-prev { color: #059669; font-style: italic; font-weight: 600; }
/* a11y контраст #5 (16.10.2026): role-admin зелёный до 4.5:1 на светло-зелёном фоне */
.light-mode .user-role-badge.role-admin, html[data-theme="light"] .user-role-badge.role-admin, .light-mode .badge.role-admin { color:#065f46; }

/* Окно «Позвонить» (17.10.2026): блоки в своих рамках */
.mini-call-pop .mini-call-foot.mini-call-top { border:1px solid var(--border); border-radius:12px; padding:8px; margin:6px 0; background:color-mix(in srgb, var(--card) 70%, transparent); }
.mini-call-pop .mini-call-list { border:1px solid var(--border); border-radius:12px; padding:4px 6px; }
.mini-call-pop .mini-call-recent { border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-top:8px; }

/* Значок «@» в списке бесед (17.10.2026): тот же кружок и размер, что у числа непрочитанных */
.tc-item .tc-item-top .nav-badge.tc-badge-at { min-width:24px; padding:3px 8px; font-size:.9rem; line-height:1.2; box-sizing:border-box; text-align:center; }

/* Красные кнопки — с ободком (17.10.2026, решение владельца): мягкие красные (опасное действие, «Убрать/Удалить») — ободок цвета кнопки; сплошные красные (крестики, «Отклонить») — тёмно-красный ободок */
.btn-danger, .btn-soft-red, .btn.btn-delete, .tc-sched-act button.red, .tcg-confirm button.red { border:2px solid #ef4444 !important; box-sizing:border-box; }
.btn-danger:hover, .btn-soft-red:hover, .btn.btn-delete:hover { border-color:#dc2626 !important; }
.btn-red, button[style*="background:#ef4444"], button[style*="background: #ef4444"], a[style*="background:#ef4444"], a[style*="background: #ef4444"] { border:2px solid #b91c1c !important; box-sizing:border-box; }

/* Список бесед (17.10.2026, вариант A): сотрудник — круг с бирюзовым ободком, группа и площадка — скруглённый квадрат с фиолетовым */
body:not(.chat-plain) .tc-item[data-ctype="dm"] .tc-item-avatar { border: 2px solid #1D9E75 !important; box-sizing: border-box; border-radius: 50% !important; }
body:not(.chat-plain) .tc-item[data-ctype="group"] .tc-item-avatar, body:not(.chat-plain) .tc-item[data-ctype="space"] .tc-item-avatar { border: 2px solid #7c3aed !important; box-sizing: border-box; border-radius: 11px !important; }

/* Список бесед, вариант B (17.10.2026): цветная полоска слева — сотрудник бирюзовая, группа/площадка фиолетовая + лёгкий фиолетовый фон группы. Идёт вместе с вариантом A (ободок значка) */
body:not(.chat-plain) #tcConvList .tc-item[data-ctype="dm"] { box-shadow: inset 2px 0 0 #1D9E75; background-image: linear-gradient(rgba(29,158,117,.08), rgba(29,158,117,.08)); }   /* лёгкий бирюзовый фон сотрудника — в паре с фиолетовым у групп (17.10.2026) */
body:not(.chat-plain) #tcConvList .tc-item[data-ctype="group"], body:not(.chat-plain) #tcConvList .tc-item[data-ctype="space"] { box-shadow: inset 2px 0 0 #7c3aed; background-image: linear-gradient(rgba(124,58,237,.07), rgba(124,58,237,.07)); }
body:not(.chat-plain) #tcConvList .tc-item.active[data-ctype="dm"] { box-shadow: inset 2px 0 0 #1D9E75; }
body:not(.chat-plain) #tcConvList .tc-item.active[data-ctype="group"], body:not(.chat-plain) #tcConvList .tc-item.active[data-ctype="space"] { box-shadow: inset 2px 0 0 #7c3aed; }

/* Область переписки — светлый бледно-жёлтый (17.10.2026, решение владельца); только светлая тема, обои чата (картинка) не затрагиваются */
body.light-mode:not(.chat-plain) #tcMessages { background-color: #fffbeb !important; }

/* Без «Моих гифок» (17.10.2026): кнопка «взять себе» больше не нужна — всё общее, личное — в «Избранных» */
.tcg-take { display: none !important; }

/* Окно гифок (17.10.2026): кнопка закрытия, значок увеличения, отступ вкладок под две кнопки */
.tcg-pop > .tcg-x { position: absolute; top: 4px; right: 36px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(239,68,68,.65); background: rgba(239,68,68,.14); color: #b91c1c; font-size: 13px; font-weight: 700; line-height: 22px; padding: 0; text-align: center; cursor: pointer; z-index: 6; box-sizing: border-box; }
.tcg-pop > .tcg-x:hover { border-color: #dc2626; background: rgba(239,68,68,.25); }
body:not(.light-mode) .tcg-pop > .tcg-x { color: #f87171; }
.tcg-pop > .tcg-tabs { margin-right: 70px; }
.tcg-it .tcg-zoom { position: absolute; bottom: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; font-style: normal; line-height: 22px; text-align: center; cursor: zoom-in; opacity: .85; z-index: 3; }
.tcg-it .tcg-zoom:hover { opacity: 1; transform: scale(1.15); }

/* Окно гифок: кнопка ⤢ убрана, ✕ — в самом углу (17.10.2026) */
.tcg-pop > .tcg-grip { display: none !important; }
.tcg-pop > .tcg-x { right: 6px; }
.tcg-pop > .tcg-tabs { margin-right: 38px; }

/* Клипы со звуком в чате (17.10.2026) */
.tcc-it .tcc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 3px 30px; font-size: .62rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tcc-it { cursor: pointer; }

/* Кнопки карточек GIF и клипов (17.10.2026): равные колонки и одинаковая высота, длинная подпись переносится */
.gif-acts > .btn { width: 100%; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; min-height: 36px; margin: 0; }

/* Кнопки GIF и клипов: подпись обязана помещаться — перенос строки, меньший шрифт и поля (17.10.2026) */
.gif-acts > .btn { white-space: normal !important; overflow-wrap: anywhere; font-size: .8rem !important; padding: 5px 6px !important; overflow: hidden; }

/* Видеокружки: щипок двумя пальцами меняет размер (17.10.2026) — браузер не должен сам масштабировать страницу */
.vm-circ, .vm-circle-wrap { touch-action: pan-x pan-y; }

/* Видеокружки: холст приближения в окне записи (17.10.2026) */
.vm-circle-wrap canvas { width: 100%; height: 100%; border-radius: 50%; background: #111; display: block; touch-action: pan-x pan-y; }
.vm-circ video { transition: none; will-change: transform; }

/* Видеофайлы в переписке — плеер вместо скрепки (17.10.2026) */
.vm-clip { position: relative; display: inline-block; max-width: min(320px, 100%); margin-top: 6px; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; line-height: 0; }
.vm-clip video { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; min-width: 140px; min-height: 90px; }
.vm-clip .vm-clip-snd { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.62); color: #fff; border-radius: 99px; padding: 3px 8px; font-style: normal; font-size: .85rem; line-height: 1.2; pointer-events: none; }
.vm-clip .vm-clip-dl { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; line-height: 26px; text-align: center; text-decoration: none; opacity: .85; }

/* favgreen-2026: закреплённый сотрудник в панели над чатом — зелёный ободок плитки и кружка, как в списке бесед */
body:not(.chat-plain) #tcSpaceJump .tc-space-ico.tc-fav[data-ctype="dm"] { border-color: #1D9E75 !important; }
body:not(.chat-plain) #tcSpaceJump .tc-space-ico.tc-fav[data-ctype="dm"]:hover { border-color: #0F6E56 !important; }
body:not(.chat-plain) #tcSpaceJump .tc-space-ico.tc-fav[data-ctype="dm"] .tc-fav-ini { box-shadow: 0 0 0 2px #1D9E75 !important; }

/* Переход к сообщению (закреп, ответ, поиск) — мягкая подсветка около трёх секунд (17.10.2026) */
#tcMessages .chat-msg.tc-msg-highlight { background-image: linear-gradient(90deg, rgba(245,158,11,.34), rgba(245,158,11,.14)) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.55) !important; border-color: #f59e0b !important; transition: box-shadow 1.2s, background-image 1.2s, border-color 1.2s; }
#tcMessages .chat-msg.tc-msg-highlight.tc-msg-highlight-fade { box-shadow: none !important; background-image: none !important; border-color: var(--border) !important; }

/* Окна гифок и клипов на телефоне (17.10.2026): по ширине экрана с полями, высота по содержимому, не выше 70% экрана */
@media (max-width: 560px) {
  .tc-gif-pop.tcg-pop { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; height: auto !important; max-height: 70vh !important; overflow-y: auto; }
  .tc-gif-pop.tcg-pop.tcg-sized { display: block; }
  .tcg-pop .tc-gif-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Окна гифок и клипов (17.10.2026): розовый ✕ симметричен кнопке-вкладке — тот же отступ 12px от края и та же высота 40px */
.tcg-pop > .tcg-x { top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 9px; line-height: 36px; font-size: 15px; }
.tcg-pop .tcg-tabs { padding-right: 0; margin-right: 48px; }