/* ============================================================================
 * ВИЗУАЛЬНЫЙ АУДИТ 02.10.2026 — правки «как у Jitsi» поверх app.css.
 *
 * Каждое значение снято со снимков meet.jit.si (build 9442) и meet.ffmuc.net
 * (build 10741) и их computed styles; номера в скобках — пункты аудита
 * (obsidian/project/meet405-visual-audit-2026-10-02.md).
 *
 * ⚑ Отдельный файл, а не хвост app.css: app.css одновременно правят потоки
 * 4c / 4d / 4e, и общий хвост означал бы конфликт в каждом мерже. Файл
 * подключён ПОСЛЕ app.css (index.html, room.html) и побеждает каскадом при
 * той же специфичности.
 * ========================================================================== */

/* (1) Шрифт — стек Jitsi. На Windows это Arial, на Mac — системный, как у них.
   open_sanslight из их стека — имя шрифта, которого у пользователя нет. */
/* Только там, где на экране Jitsi-подобное: встреча, экран перед входом,
   главная. «Мои комнаты» и гостевая до входа остаются на Open Sans. */
body:has(.call-overlay), body:has(.j-prejoin), body:has(.j-welcome), body:has(.guest-page) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-sans);
}

/* (4) Аватар с инициалами — плоский цвет, без градиента и разрядки. */
.call-overlay .avatar,
.j-prejoin .avatar {
  background: hsl(var(--avatar-hue, 210) 62% 45%);
  letter-spacing: 0;
}

/* ---- тулбар ---------------------------------------------------------------- */

/* (27) Шаг кнопок 56 px (48 + 8): 10 кнопок = 564 px. На узком экране кнопки
   остаются впритык — там своя раскладка (заплатка W4-0, поток 4e). */
@media (min-width: 601px) {
  .call-actions { gap: 8px; }
}

/* (5) hover #525252, включённая #3D3D3D — в app.css стояло наоборот. */
.call-btn:hover { background: #525252; }
.call-btn--on { background: #3D3D3D; }
.call-btn--on:hover { background: #525252; }
.call-btn--end:hover { background: #E04757; }
/* (31) Камера: включённая камера кнопку не подсвечивает (у Jitsi подсвечены
   только чат, участники, плитка, рука, шара). Класс остаётся — на нём иконка. */
.call-actions [data-key="camera"].call-btn--on:not(:hover) { background: transparent; }

/* (28, 18) Шеврон — 18×18 в правом верхнем углу кнопки, а не над кромкой. */
.t-chev,
.j-prejoin-devices .t-chev {
  top: -3px; right: -4px;
  width: 18px; height: 18px; padding: 1px; box-sizing: border-box;
  background: #36383C;
  box-shadow: rgba(0, 0, 0, .25) 0 4px 4px, rgba(0, 0, 0, .1) 0 0 0 1px;
  z-index: 1;
}
.t-chev:hover { background: #525252; }
.t-chev .icon { width: 14px; height: 14px; }
.t-chev--open { background: #fff; color: #040404; }
.t-chev--open:hover { background: #E0E0E0; }

/* (29) Счётчик участников — тёмный кружок 18×18 с белой цифрой. */
.t-count {
  top: -3px; right: -4px;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; box-sizing: border-box;
  background: #3D3D3D; color: #fff;
  font-size: 12px; line-height: 18px;
}

/* (30) Непрочитанное в чате — синий кружок по центру нижней кромки кнопки. */
.call-actions .t-badge {
  top: auto; right: auto; bottom: -4px; left: 50%; transform: translateX(-50%);
  min-width: 18px; height: 18px; border-radius: 9px; box-sizing: border-box;
  background: #4687ED;
  font-size: 12px; line-height: 18px;
}

/* (33) Шапка: название r6 слева, таймер r6 справа, rgba(0,0,0,.8). */
.j-subject { border-radius: 6px; }
.j-subject-name { padding: 0 16px; }
.j-subject-timer { background: rgba(0, 0, 0, .8); }

/* (37) Меню реакций — padding 16, кнопки 40×40, на 8 px выше тулбара. */
.j-reactions { padding: 16px; gap: 8px; bottom: 84px; }
.j-reactions button { width: 40px; height: 40px; }

/* ---- плитки и миниатюры ----------------------------------------------------- */

/* (42) Скругление 4 px у плиток в сетке (у миниатюр оно уже есть). */
.call-grid .call-tile { border-radius: 4px; }

/* (43) Говорящий — рамка 2 px #4687ED. */
.call-tile--speaking { outline: 2px solid #4687ED; outline-offset: -2px; }
.call-tile--speaking.call-tile--hand { outline-color: #4687ED; }

/* (39) Подпись: внизу слева, 12/16/600, rgba(0,0,0,.7), r4 — и на плитке, и на
   миниатюре (в app.css на миниатюре она стояла по центру). */
.call-tile-name {
  left: 4px; bottom: 4px;
  padding: 4px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .7);
  font-size: 12px; line-height: 16px; font-weight: 600;
  max-width: calc(100% - 8px);
}
.j-filmstrip .call-tile-name {
  left: 4px; transform: none; bottom: 4px;
  padding: 2px 6px;
  max-width: calc(var(--strip-tile-w, 122px) - 8px);
}

/* ---- уведомления (62): белая карточка 320 px ----------------------------------- */
.call-notices {
  left: 16px;
  width: min(320px, calc(100vw - 32px));
}
/* При открытом чате стопка стоит правее него — те же 16 px и 320 px. */
body.call-chat-open .call-notices {
  left: calc(var(--chat-w, 315px) + 16px);
  width: min(320px, calc(100vw - var(--chat-w, 315px) - 32px));
}
/* Узкое окно (≤ 580, W4-31): чат — лист во весь экран, стопке правее него
   встать негде — без этого она сжималась в столбик 28 px поверх крестика чата. */
@media (max-width: 580px) {
  body.call-chat-open .call-notices { left: 16px; width: min(320px, calc(100vw - 32px)); }
}
.call-notice {
  padding: 16px 12px 16px 16px;
  background: #fff; color: #040404;
  box-shadow: 0 3px 5px rgba(9, 30, 66, .2), 0 0 1px rgba(9, 30, 66, .31);
  line-height: 20px;
}
.call-notice-title { color: #040404; }
.call-notice-desc { color: #040404; font-size: 14px; }
.call-notice-btn { color: #4687ED; }
.call-notice-close { color: #040404; }
.call-notice-close:hover { background: rgba(0, 0, 0, .08); color: #040404; }

/* ---- выпадающие списки устройств (3, 22): палитра и строки Jitsi ------------- */
.call-devices {
  width: 300px; min-width: 0; max-width: 90vw;
  padding: 8px 0;
  background: #141414;
  border: 1px solid #525252;
  border-radius: 6px;
  box-shadow: rgba(41, 41, 41, .25) 0 1px 2px;
}
.call-devices-label {
  padding: 10px 16px;
  font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none;
  color: #fff;
}
.call-devices-label:not(:first-child) { border-top: 1px solid #525252; margin-top: 8px; padding-top: 18px; }
.call-devices-item {
  gap: 16px;
  padding: 10px 16px;
  border-radius: 0;
  color: #fff;
  font-size: 14px; line-height: 20px;
  overflow-wrap: normal;
}
.call-devices-item:hover { background: #292929; }
/* Выбранное устройство: подложка и синяя полоса слева, текст остаётся белым. */
.call-devices-item--on { color: #fff; background: #292929; box-shadow: inset 3px 0 0 #4687ED; }
.call-devices-check { flex-basis: 20px; }
.call-devices-check .icon { width: 20px; height: 20px; }
/* Название — в одну строку с обрезкой, как у Jitsi (полное — в title). */
.call-devices-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-devices-row { gap: 0; }
/* Строка динамика — пара «устройство + Test»: подложка выбранной и наведённой
   строки идёт на всю ширину, а не обрывается перед кнопкой. */
.call-devices-row:hover { background: #292929; }
.call-devices-row:has(.call-devices-item--on) { background: #292929; box-shadow: inset 3px 0 0 #4687ED; }
.call-devices-row .call-devices-item, .call-devices-row .call-devices-item:hover { background: transparent; box-shadow: none; }
.call-devices-test { margin-right: 16px; background: #4687ED; font-weight: 600; }
.call-devices-test:hover { background: #246FE5; }

/* (22) В приджоине меню устройств раскрывается ВВЕРХ и от левого края кнопки:
   раскрытое вниз, на 1280×800 оно уходило за нижний край (515 + 318 > 800).
   Jitsi тоже накрывает им форму — меню закрывается по выбору и по Esc. */
.t-wrap .call-devices {
  top: auto; bottom: calc(100% + 6px);
  left: 0; transform: none;
  max-height: min(60vh, 420px);
}

/* ---- малые окна (63): каркас окна «Настройки» -------------------------------- */
.confirm-overlay:has(> .call-dialog) { padding-top: 64px; background: rgba(41, 41, 41, .75); }
.call-dialog {
  width: 400px; padding: 24px;
  background: #141414; color: #fff;
  border: 1px solid #3D3D3D; border-radius: 6px;
  box-shadow: 0 4px 25px 4px rgba(20, 20, 20, .6);
}
.call-dialog-head { margin-bottom: 24px; }
.call-dialog-head h3 { font-size: 20px; line-height: 28px; color: #fff; }
.call-dialog-close { width: 28px; height: 28px; border-radius: 6px; color: #fff; }
.call-dialog-close:hover { background: #3D3D3D; }
.call-dialog-close .icon { width: 24px; height: 24px; }
.call-dialog-body { gap: 16px; line-height: 24px; }
.call-dialog-text { color: #fff; font-size: 12px; line-height: 24px; }
.call-dialog-sep { border-top-color: #525252; margin: 8px -24px; width: auto; align-self: stretch; }
.call-dialog .call-switch-label { font-weight: 700; }

/* ---- чат ---------------------------------------------------------------------- */

/* (50) Шапка 60 px, заголовок 16/600, поля 24. */
.j-chat-head { min-height: 60px; box-sizing: border-box; padding: 16px 16px 16px 24px; align-items: center; }
.j-chat-head h3 { font-size: 16px; line-height: 23px; }

/* (49) Лента прижата к низу: первый элемент забирает свободное место сверху. */
.j-chat-list > :first-child { margin-top: auto; }

/* (52) Свой пузырь светлее входящего, острый правый нижний угол. */
.j-chat-bubble { border-radius: 0 12px 12px 12px; }
.j-chat-msg--own .j-chat-bubble { background: #525252; border-radius: 12px 12px 0 12px; }
/* (51) Время 12/16 #858585. */
.j-chat-meta { font-size: 12px; line-height: 16px; color: #858585; }
.j-chat-msg--own .j-chat-meta { color: #C2C2C2; }

/* (53, 54) Получатель и поле ввода — высотой 40, r6. */
.j-chat-to { height: 40px; font-size: 14px; padding: 0 12px; }
.j-chat-input-row { align-items: center; min-height: 40px; box-sizing: border-box; padding: 0 4px; }
.j-chat-input-row:focus-within { box-shadow: 0 0 0 2px #D7E3F9; }
.j-chat-send { border-radius: 6px; }

/* ---- список участников ------------------------------------------------------- */

/* (56) Поля 24, заголовок раздела 14/20/600 #C2C2C2 без капса. */
.j-pane { padding: 16px 24px 24px; }
.j-pane-section {
  font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #C2C2C2;
}
/* (57) */
.j-pane-invite { height: 44px; }
/* (58) Строки — без скругления, с линией между ними. */
.j-pane-row { border-radius: 0; box-shadow: inset 0 -1px 0 #292929; min-height: 56px; box-sizing: border-box; }
.j-pane-row-sub { font-weight: 600; }
/* (59) Действия при наведении — синие. */
.j-pane-quick { height: 32px; padding: 0 12px; border-radius: 6px; background: #4687ED; }
.j-pane-quick:hover { background: #246FE5; }
.j-pane-row .j-pane-more { width: 32px; height: 32px; border-radius: 6px; background: #4687ED; }
.j-pane-row .j-pane-more:hover { background: #246FE5; }
/* (60) Говорящий — белый микрофон на зелёной подложке. */
.j-pane-row--speaking:not(.j-pane-row--muted) .j-pane-mic-on {
  width: 20px; height: 20px; border-radius: 3px; background: #1EC26A;
  align-items: center; justify-content: center;
}
.j-pane-row--speaking:not(.j-pane-row--muted) .j-pane-mic-on .icon { color: #fff; }
/* (61) Низ панели — светлые вторичные кнопки, прижаты вправо, без линии. */
.j-pane-footer { border-top: 0; justify-content: flex-end; }
.j-pane-footer-btn { flex: 0 0 auto; padding: 0 16px; background: #E0E0E0; color: #040404; }
.j-pane-footer-btn:hover { background: #fff; }
.j-pane-footer-more { background: #E0E0E0; }
.j-pane-footer-more:hover { background: #fff; }
.j-pane-footer-more .icon { color: #040404; }

/* ---- экран перед входом (то, что не входит в поток 4c) ---------------------- */

/* (24) Логотип на 32, 32. */
.j-prejoin-brand { top: 32px; left: 32px; }
/* (12) Заголовок 28/36. */
.j-prejoin-title { line-height: 36px; }
/* (13) Имя комнаты 20/28/600, белое. */
.j-prejoin-room { font-size: 20px; line-height: 28px; color: #fff; margin-top: 12px; }
/* (14) Поле имени: текст по центру, в фокусе — светлое кольцо 2 px без рамки. */
.j-prejoin-name { text-align: center; line-height: 20px; }
.j-prejoin-name:focus { border-color: transparent; box-shadow: 0 0 0 2px #D7E3F9; }
.j-prejoin-name--missing:focus { border-color: #D83848; }
/* (15) Кнопка входа — цельная: без черты перед шевроном, шеврон крупный. */
.j-prejoin-join { line-height: 24px; }
.j-prejoin-join-more { border-left: 0; }
.j-prejoin-join-more .icon { width: 24px; height: 24px; }
/* (16) «Join without audio» — светлая вторичная кнопка во всю ширину. */
.j-prejoin-join-menu {
  top: 38px; left: 0; right: 0; min-width: 0; padding: 0;
  background: transparent; box-shadow: none;
}
.j-prejoin-join-item {
  height: 44px; padding: 10px 16px; border-radius: 6px;
  background: #E0E0E0; color: #040404;
  font-size: 14px; line-height: 20px; font-weight: 600; text-align: center;
}
.j-prejoin-join-item:hover, .j-prejoin-join-item:focus-visible { background: #fff; }
/* (19) «Устройства работают» — 14/20, белым, точка 16. */
.j-prejoin-ok { font-size: 14px; line-height: 20px; color: #fff; gap: 16px; }
.j-prejoin-ok i { width: 16px; height: 16px; }
/* (20) Справа без камеры — фон сцены #040404 и аватар 200 с буквами 80. */
.j-prejoin-preview { background: #040404; }
.j-prejoin-preview .avatar--stage { width: 200px; height: 200px; font-size: 80px; }
.j-stage .avatar--stage { font-size: 80px; }

/* ============================================================================
 * Вторая пачка (02.10): пункты 21, 41, 44 аудита.
 * ========================================================================== */

/* (21) Аватар без имени — серый значок-силуэт (defaultAvatar Jitsi, #AAA). */
.avatar.avatar--default { background: #AAA; color: #fff; }
.avatar.avatar--default .icon { width: 50%; height: 50%; }

/* (41) Индикатор громкости — пять точек столбиком у левого края плитки, по
   центру высоты (.audioindicator-container Jitsi: left 6, top 50%, 6×35), без
   подложки. Руке и меню он больше не мешает — сдвиги вправо сняты. */
.call-tile-level,
.call-tile--hand .call-tile-level,
.call-tile--hand:is(:hover, :focus-within, .call-tile--menu) .call-tile-level,
.call-tile:is(:hover, :focus-within, .call-tile--menu) .call-tile-level {
  top: 50%; right: auto; left: 6px;
  width: 6px; height: 35px; margin-top: -17px; padding: 0;
  flex-direction: column; justify-content: center; gap: 2px;
  border-radius: 0; background: transparent;
}
.call-tile-level i { flex: none; filter: blur(.5px); }

/* (44) СНЯТ 07.10.2026 (Матвей: «демонстрация экрана почему-то плиткой где-то
   внизу»). Было `.j-filmstrip > .call-tile--self { margin-bottom: auto }` —
   своя миниатюра вверху, чужие прижаты к низу, как remote-videos у Jitsi над
   тулбаром. Втроём это дыра в пол-экрана между своей плиткой и остальными, а
   экран докладчика — у самого тулбара. Теперь чужие и плитки экранов идут
   сразу под своей. */

/* Окно «How to share audio» — анимация Jitsi (.share-audio-animation). */
.confirm-box:has(.confirm-image) { width: 520px; max-width: calc(100vw - 32px); }
.confirm-image { display: block; width: 100%; height: auto; object-fit: contain; margin-bottom: 10px; border-radius: 4px; }

/* ============================================================================
 * Третья пачка (03.10): гостевая /r/<код> и ожидание в лобби — в разметке
 * приджоина Jitsi (п. 25, 26): колонка 400 px, превью на весь остаток.
 * ========================================================================== */
.guest-page { background: #040404; color: #F1F1F1; min-height: 100vh; }
.guest-body {
  flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
  gap: 0; padding: 0; min-height: 100vh;
}
.guest-side {
  position: relative; flex: 0 0 400px; width: 400px; max-width: 100vw; box-sizing: border-box;
  background: #141414; padding: 24px 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.guest-brand { position: absolute; top: 32px; left: 32px; font-size: 17px; font-weight: 700; color: #fff; }
.guest-title { font-size: 28px; line-height: 36px; font-weight: 600; color: #fff; margin: 0; }
.guest-room-name { font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; margin-top: 8px; overflow-wrap: anywhere; }
.guest-room-name:empty { display: none; }
.guest-sub { font-size: 14px; line-height: 20px; color: #C2C2C2; margin: 12px 0 0; max-width: 300px; }
.guest-sub:empty { display: none; }
.guest-form { width: 300px; max-width: 100%; margin-top: 16px; }
.guest-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guest-form #guest-name {
  width: 100%; height: 40px; box-sizing: border-box; padding: 10px 16px; border: 0; border-radius: 6px;
  background: #3D3D3D; color: #fff; font: inherit; font-size: 14px; line-height: 20px; text-align: center;
}
.guest-form #guest-name::placeholder { color: #A3A3A3; }
.guest-form #guest-name:focus { outline: 0; box-shadow: 0 0 0 2px #D7E3F9; }
.guest-join-btn {
  width: 100%; height: 40px; margin-top: 12px; border: 0; border-radius: 6px;
  background: #4687ED; color: #fff; font-size: 14px; line-height: 24px; font-weight: 600;
}
.guest-join-btn:hover { background: #246FE5; }
.guest-join-btn:disabled { background: #3D3D3D; color: #858585; }
.guest-note { font-size: 12px; line-height: 16px; color: #A3A3A3; margin-top: 12px; }
.guest-waiting { justify-content: center; margin-top: 24px; }
.guest-spinner { width: 32px; height: 32px; border-width: 3px; border-color: #3D3D3D; border-top-color: #4687ED; }
/* «Отмена» у стучащего (12.10.2026) — под спиннером, во всю ширину колонки
   (300 px, как поле имени и «Ask to join»), серая — вторичная кнопка Jitsi
   (action02 #3D3D3D, наведение #525252). */
.guest-waiting { flex-wrap: wrap; width: 300px; max-width: 100%; row-gap: 24px; }
.guest-cancel-btn {
  flex: 0 0 100%; height: 40px; border: 0; border-radius: 6px; cursor: pointer;
  background: #3D3D3D; color: #fff; font: inherit; font-size: 14px; line-height: 24px; font-weight: 600;
}
.guest-cancel-btn:hover { background: #525252; }
.guest-cancel-btn:disabled { color: #858585; cursor: default; }
.guest-dead { margin-top: 16px; width: 300px; max-width: 100%; box-sizing: border-box; border-color: #D83848; color: #F8AE1A; text-align: left; }
.guest-preview-bar { position: static; margin-top: 24px; gap: 8px; }
.guest-page .call-btn { background: transparent; color: #F1F1F1; width: 48px; height: 48px; border-radius: 6px; }
.guest-page .call-btn:hover { background: #292929; }
.guest-preview-note {
  position: static; margin-top: 16px; max-width: 300px;
  font-size: 14px; line-height: 20px; color: #fff; text-shadow: none;
}
.guest-employee { margin-top: 24px; font-size: 12px; line-height: 16px; color: #A3A3A3; }
.guest-employee a { color: #6EA2FF; }
.guest-preview {
  flex: 1 1 auto; width: auto; aspect-ratio: auto; min-height: 100vh;
  border: 0; border-radius: 0; background: #040404;
}
.guest-preview-placeholder { color: #C2C2C2; font-size: 14px; }
/* Узко (телефон) — колонка на всю ширину поверх превью, как у Jitsi. */
@media (max-width: 720px) {
  .guest-body { flex-direction: column; }
  .guest-side { flex: 1 1 auto; width: 100%; padding: 72px 24px 24px; background: rgba(20, 20, 20, .85); z-index: 1; }
  .guest-preview { position: absolute; inset: 0; min-height: 0; }
  .guest-page { position: relative; }
}

/* ---- (7, 8) главная: заголовок, подзаголовок, поле и кнопка — размеры Jitsi ---- */
.j-welcome .meet-login-sub { font-size: 42px; line-height: 50px; font-weight: 400; margin-bottom: 16px; }
.j-welcome .meet-hero-sub { font-size: 20px; line-height: 26px; font-weight: 600; color: #fff; margin-bottom: 32px; }
.j-welcome .meet-quick { width: min(480px, 92%); }
.j-welcome .meet-quick-row { border-radius: 4px; padding: 4px; gap: 4px; }
.j-welcome .meet-quick-row input { height: 50px; font-size: 14px; color: #000; }
.j-welcome .meet-quick-row input:focus { box-shadow: 0 0 0 2px #0074E0 inset; border-radius: 3px; }
.j-welcome .meet-quick-row .meet-login-btn {
  height: 50px; min-width: 124px; padding: 0 16px; border-radius: 3px;
  background: #0074E0; font-size: 14px; font-weight: 400;
}
.j-welcome .meet-quick-row .meet-login-btn:hover { background: #4687ED; }

/* ---- (22) значок в заголовке группы меню устройств ---- */
.call-devices-label { display: flex; align-items: center; gap: 12px; }
.call-devices-label .icon { width: 20px; height: 20px; flex: none; }

/* ---- (46) поднятая рука на плитке — жёлтый квадрат 24 слева вверху ---- */
.call-tile-hand,
.call-tile:is(:hover, :focus-within, .call-tile--menu) .call-tile-hand {
  top: 4px; left: 4px; right: auto;
  width: 24px; height: 24px; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: #F8AE1A; color: #040404; font-size: 14px;
}
.call-tile-hand .icon { width: 16px; height: 16px; }
.call-tile-hand[hidden] { display: none; }

/* ---- (51) имя автора — внутри пузыря ---- */
.j-chat-bubble > .j-chat-name { padding: 0; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: #C2C2C2; }

/* ---- (55) реакция в чате — пузырём ---- */
.j-chat-reactionline {
  align-self: flex-start; width: fit-content; max-width: 100%; box-sizing: border-box;
  background: #292929; border-radius: 0 12px 12px 12px; padding: 8px 12px;
  font-size: 14px; line-height: 20px; color: #fff;
}
.j-chat-reactionline--own { align-self: flex-end; margin-left: auto; background: #525252; border-radius: 12px 12px 0 12px; }

/* ---- (53) получатель — поле на всю ширину без подписи «To», свой шеврон ---- */
.j-chat-to-row > span { display: none; }
.j-chat-to {
  width: 100%; height: 40px; padding: 0 40px 0 16px; border-radius: 6px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #3D3D3D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
}

/* ---- (54) ввод: поле 40 #3D3D3D r6 со смайликом внутри, отправка — отдельная
   синяя кнопка 40×40 ---- */
.j-chat-input-row { position: relative; background: transparent; padding: 0; gap: 8px; align-items: flex-end; }
.j-chat-input-row:focus-within { box-shadow: none; }
.j-chat-input {
  min-height: 40px; box-sizing: border-box; padding: 10px 12px 10px 46px;
  background: #3D3D3D; border-radius: 6px;
}
.j-chat-input:focus, .j-chat-input:focus-visible { box-shadow: 0 0 0 2px #D7E3F9; }
.j-chat-emoji-btn { position: absolute; left: 8px; bottom: 4px; z-index: 1; }
.j-chat-send { width: 40px; height: 40px; border-radius: 6px; background: #4687ED; color: #fff; }
.j-chat-send:disabled { background: #3D3D3D; color: #858585; }

/* ---- (56) панель участников: без заголовка, порядок Jitsi ---- */
.j-pane h3 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.j-pane-lobby { flex: none; overflow: visible; margin-top: 44px; }
.j-pane-lobby[hidden] { display: none; }
.j-pane-count { margin: 44px 0 16px; }
.j-pane-lobby:not([hidden]) + .j-pane-count { margin-top: 16px; }

/* ---- (62) значок типа в уведомлении ---- */
.call-notice-icon { flex: none; width: 20px; height: 20px; margin-right: 12px; color: #4687ED; }
.call-notice-icon .icon { width: 20px; height: 20px; }
.call-notice--error .call-notice-icon { color: #CB2233; }
.call-notice--warning .call-notice-icon { color: #F8AE1A; }

/* ---- (38) сцена на всё окно под плёнкой; уже — только при плёнке ≥ 180 px
   (--stage-inset ставит paintGeometry) ---- */
.j-stage { right: var(--stage-inset, 0px); }
.call-overlay--pane .j-stage { right: calc(315px + var(--stage-inset, 0px)); }
.call-overlay--nostrip .j-stage { right: 0; }
.call-overlay--pane.call-overlay--nostrip .j-stage { right: 315px; }
/* Несколько закреплённых на сцене (сетка сцены) — плёнка плитки не накрывает. */
.j-stage:has(> .j-stage-grid:not([hidden])) { right: var(--strip-outer, 140px); }
.call-overlay--pane .j-stage:has(> .j-stage-grid:not([hidden])) { right: calc(315px + var(--strip-outer, 140px)); }
.call-overlay--nostrip .j-stage:has(> .j-stage-grid:not([hidden])) { right: 0; }
.call-overlay--pane.call-overlay--nostrip .j-stage:has(> .j-stage-grid:not([hidden])) { right: 315px; }
/* Узкое окно: панель — лист поверх, сцена её не уступает (как в app.css). */
@media (max-width: 580px) {
  .call-overlay--pane .j-stage { right: var(--stage-inset, 0px); }
  .call-overlay--pane .j-stage:has(> .j-stage-grid:not([hidden])) { right: var(--strip-outer, 140px); }
}
@media (max-width: 720px) { .guest-preview-placeholder { display: none; } }

/* ---- (6) главная: шапка с фото-фоном Jitsi (welcome-background.png, затемнение
   20 %, фон #131519), ниже — белая страница с недавними встречами ---- */
.meet-login.j-welcome { background: #fff; }
.j-welcome .meet-login-card { position: relative; justify-content: flex-start; padding: 120px 24px 48px; }
.j-welcome .meet-login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 381px; z-index: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), #131519 url('/images/welcome-background.png') center / cover no-repeat;
}
.j-welcome .meet-login-card > * { position: relative; z-index: 1; }
.j-welcome .meet-login-note { background: #fff; color: #CB2233; border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.j-welcome .j-recent { width: min(688px, 92%); margin-top: 111px; }
.j-welcome .j-recent-title { color: #1C2025; }
.j-welcome .j-recent-item { color: #1C2025; }
.j-welcome .j-recent-item:hover { background: #F2F3F4; }
.j-welcome .j-recent-when { color: #5E6D7A; }
.j-welcome .j-recent-del { color: #5E6D7A; }
.j-welcome .j-recent-del:hover { background: #E0E0E0; color: #1C2025; }
@media (max-width: 420px) {
  .j-welcome .meet-login-card { padding-top: 96px; }
  .j-welcome .meet-login-card::before { height: 440px; }
  .j-welcome .meet-quick-row input { box-shadow: none; }
  .j-welcome .j-recent { margin-top: 72px; }
}
.j-welcome .j-recent { text-align: left; }
@media (max-width: 420px) { .j-welcome .j-recent { margin-top: 124px; } }