/* Call — стили приложения (подключаются из index.html) */
/* Только системные шрифты и свои файлы: никаких запросов на сторонние серверы */
:root {
  --accent: #2f7fd1; --accent-text: #fff; --danger: #e5484d; --ok: #2fb75a;
  --side: #ffffff; --line: #e6e9ee; --text: #17212b; --muted: #707a86; --hover: #f2f5f8; --active: #2f7fd1;
  --chat-bg: #d7e2d2; --dots: rgba(255,255,255,.35);
  --theirs: #ffffff; --mine: #e1f7cf; --mine-text: #17212b; --meta-mine: #4f9a48; --link-mine: #23772e; --input: #ffffff;
  --tick-read: #2f9cf1; --tick-mine: var(--meta-mine); --tick-mine-read: #2f9cf1;
  --head: #ffffff; --pill: rgba(0,0,0,.18); --pill-text: #fff; --seg-on: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text); font-size: 15px;
}
/* тема: системная (по умолчанию), светлая или тёмная — выбирается в настройках */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5aa7f2; --side: #17212b; --line: #0f1720; --text: #e8edf2; --muted: #7f8b97; --hover: #202b36; --active: #2b5278;
    --chat-bg: #0e1621; --dots: rgba(255,255,255,.03);
    --theirs: #182533; --mine: #2b5278; --mine-text: #e8edf2; --meta-mine: #8fbce6; --link-mine: #a5d6ff; --input: #17212b;
    --tick-read: #4db8ff; --tick-mine: rgba(232,237,242,.45); --tick-mine-read: #5ce6ff;
    --head: #17212b; --pill: rgba(0,0,0,.35); color-scheme: dark; --seg-on: #34475a;
  }
}
:root[data-theme="dark"] {
    --accent: #5aa7f2; --side: #17212b; --line: #0f1720; --text: #e8edf2; --muted: #7f8b97; --hover: #202b36; --active: #2b5278;
    --chat-bg: #0e1621; --dots: rgba(255,255,255,.03);
    --theirs: #182533; --mine: #2b5278; --mine-text: #e8edf2; --meta-mine: #8fbce6; --link-mine: #a5d6ff; --input: #17212b;
    --tick-read: #4db8ff; --tick-mine: rgba(232,237,242,.45); --tick-mine-read: #5ce6ff;
    --head: #17212b; --pill: rgba(0,0,0,.35); color-scheme: dark; --seg-on: #34475a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* как в приложении: двойное касание не увеличивает страницу (масштаб двумя пальцами остаётся) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, input, select, textarea, .item, .msg { touch-action: manipulation; }
.pin-pad, .pin-pad button, .cbtn, .icon-btn, .send { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* iPhone увеличивает страницу при нажатии на поле, если шрифт в нём меньше 16px */
@media (max-width: 760px) { html input, html textarea, html select, html .ta-hl { font-size: max(16px, 1rem); } }
/* --app-h и --app-top: видимая часть экрана над клавиатурой телефона (см. «клавиатура на телефоне») */
html, body { margin: 0; height: var(--app-h, 100%); background: var(--side); }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow: hidden; display: flex; flex-direction: column; position: relative; top: var(--app-top, 0); }
body.kb-open { padding-bottom: 0; } /* клавиатура закрывает полоску «домой», отступ под ней не нужен */
body > section#app, body > section#auth, body > section#guest { flex: 1; min-height: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.hidden { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; cursor: pointer; }
@media (hover: hover) { .icon-btn:hover { background: var(--hover); color: var(--accent); } }
/* наведение — только для мыши: на телефоне подсветка оставалась после касания. Там отклик — пока палец на кнопке */
@media (hover: none) {
  .icon-btn:active, .menu button:active, .small-btn:active, .ctx-list button:active, .chat-menu button:active, .list-ctx button:active,
  .ep-list button:active, .lst-pick label:active, .srv-sug button:active, .pw-eye:active, .meet-lobby .lrow:active { background: var(--hover); }
  .btn:active { filter: brightness(.92); }
}
.btn { background: var(--accent); color: var(--accent-text); border-radius: 10px; padding: 11px 16px; font-weight: 600; }
.btn:disabled { opacity: .5; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.danger { background: var(--danger); color: #fff; }
.field { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); outline: none; }
.field:focus { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.error { color: var(--danger); min-height: 1.2em; font-size: .9rem; }

/* ---------- аватарки ---------- */
.avatar { flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; user-select: none; }
.av-48 { width: 48px; height: 48px; font-size: 1.05rem; }
.av-40 { width: 40px; height: 40px; font-size: .95rem; }
.av-42 { width: 42px; height: 42px; font-size: .98rem; }
.av-110 { width: 110px; height: 110px; font-size: 2.4rem; }

/* ---------- вход ---------- */
#auth, #guest { display: grid; place-items: center; padding: 20px; background: var(--chat-bg); overflow-y: auto; }
/* вход и гость встречи: тот же фон и под часами, и под полоской «Домой» (отступы body на iPhone) */
html:has(body > #auth:not(.hidden)), html:has(body > #guest:not(.hidden)),
body:has(> #auth:not(.hidden)), body:has(> #guest:not(.hidden)) { background: var(--chat-bg); }
.auth-box { width: 100%; max-width: 380px; background: var(--side); border-radius: 18px; padding: 30px 26px; box-shadow: 0 6px 30px rgba(0,0,0,.08); }
.logo { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.logo svg { width: 32px; height: 32px; }
.auth-box h1 { margin: 0 0 4px; font-size: 1.6rem; }
.auth-box p.sub { margin: 0 0 20px; color: var(--muted); }
.auth-box form { display: grid; gap: 12px; }
.auth-box label { font-size: .85rem; color: var(--muted); display: grid; gap: 5px; }
#installFirst { display: grid; gap: 12px; }
#installFirst h2 { margin: 0; font-size: 1.15rem; }
#installFirst p, #installFirst ol { margin: 0; color: var(--muted); line-height: 1.5; }
#installFirst ol { padding-left: 20px; display: grid; gap: 4px; }
.switch { margin-top: 12px; text-align: center; }

/* ---------- раскладка ---------- */
#app { display: grid; grid-template-columns: var(--side-w, minmax(300px, 380px)) minmax(0, 1fr); }
.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; position: relative; }
/* объём: список чуть «над» чатом — мягкая тень от края в сторону переписки (только когда стоят рядом) */
@media (min-width: 761px) { .side { z-index: 2; box-shadow: 6px 0 16px -10px rgba(0,0,0,.22); } }
@media (min-width: 761px) { :root[data-theme="dark"] .side { box-shadow: 6px 0 18px -10px rgba(0,0,0,.6); } }
@media (min-width: 761px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side { box-shadow: 6px 0 18px -10px rgba(0,0,0,.6); } }
/* край списка чатов: потянуть — шире или уже, двойной щелчок — как было */
.side-resize { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 17; touch-action: none; outline: none; }
.side-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; transition: background .15s; }
.side-resize:hover::after, .side-resize:focus-visible::after, .side-resize.drag::after { background: var(--accent); }
body.side-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
.side-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.search { flex: 1; position: relative; }
.search input { width: 100%; border: 0; border-radius: 22px; padding: 10px 14px 10px 40px; background: var(--hover); outline: none; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
#status { font-size: .78rem; color: var(--muted); padding: 0 18px 6px; }
#status.online { display: none; }
.menu { position: absolute; top: 54px; left: 10px; z-index: 20; background: var(--side); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 6px; min-width: 230px; }
.menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; }
@media (hover: hover) { .menu button:hover { background: var(--hover); } }
.menu svg { width: 20px; height: 20px; color: var(--muted); }
.menu .me { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; gap: 12px; align-items: center; }
.menu .me small { color: var(--muted); display: block; }

#chatList { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; flex: 1; }
/* фильтры списка, как в WhatsApp: одна узкая строка, при нехватке места прокручивается вбок */
.chat-filters { display: flex; align-items: center; gap: 6px; padding: 4px 10px 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat-filters::-webkit-scrollbar { display: none; }
.chat-filters button { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 16px;
                       background: var(--hover); color: var(--text); font-size: .86rem; line-height: 1.2; font-weight: 500;
                       transition: background-color .18s, color .18s, box-shadow .18s, scale .12s; }
.chat-filters button:active { scale: .95; }
.chat-filters .f-seg { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 16px; background: var(--hover); }
.chat-filters .f-seg button { position: relative; background: transparent; padding: 4px 10px; }
.chat-filters .f-seg button.on { background: var(--seg-on); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.chat-filters .f-seg svg { width: 17px; height: 17px; }
.chat-filters .f-seg .fc, .chat-filters .f-list.compact .fc { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px;
                       font-size: .62rem; line-height: 15px; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--side); }
.chat-filters .f-list { position: relative; }
.chat-filters .f-list .lst-nm { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 160px; text-overflow: ellipsis; }
.chat-filters .f-list.compact { padding: 4px 5px; gap: 0; }
.chat-filters .f-list .lst-tag { width: 18px; height: 18px; font-size: .68rem; }
.chat-filters .f-list.compact .lst-tag { width: 22px; height: 22px; font-size: .78rem; border-radius: 7px; }
.chat-filters .f-list.compact .pin-ic { display: none; }
.chat-filters .f-list.compact:not(.on) .lst-nm { max-width: 0; }
.chat-filters .f-list.compact.on { padding-right: 10px; }
.chat-filters .f-list.compact.on .lst-nm { margin-left: 6px; }
.chat-filters .f-list.compact.on.grow .lst-nm { animation: lstGrow .22s ease-out; }
@keyframes lstGrow { from { max-width: 0; opacity: 0; } }
.chat-filters .f-sep { flex: none; align-self: center; width: 1px; height: 18px; margin: 0 2px; background: color-mix(in srgb, var(--muted) 40%, transparent); }
.chat-filters .f-list.on { background: color-mix(in srgb, var(--lst) 22%, var(--side)); color: var(--text); }
/* мини-анимации: меню и окна мягко появляются, список при смене фильтра и лента при смене чата — проявляются.
   Используем свойства scale/translate, а не transform: у части меню transform уже занят центровкой */
@keyframes uiPop { from { opacity: 0; scale: .94; } }
@keyframes uiFade { from { opacity: 0; } }
@keyframes uiRise { from { opacity: 0; translate: 0 6px; } }
.menu:not(.hidden), .chat-menu:not(.hidden), .ctx:not(.hidden), .list-ctx:not(.hidden), .out-menu:not(.hidden),
.hang-menu:not(.hidden), .peer-menu:not(.hidden) { animation: uiPop .14s cubic-bezier(.2, .8, .3, 1); }
.menu, .ctx, .list-ctx, .peer-menu { transform-origin: top left; }
.chat-menu { transform-origin: top right; }
.out-menu, .hang-menu { transform-origin: bottom center; }
dialog[open] { animation: uiPop .16s cubic-bezier(.2, .8, .3, 1); }
dialog[open]::backdrop { animation: uiFade .16s; }
#chatList.swap > * { animation: uiRise .2s ease-out both; }
#chatList.swap > :nth-child(2) { animation-delay: 15ms; } #chatList.swap > :nth-child(3) { animation-delay: 30ms; }
#chatList.swap > :nth-child(4) { animation-delay: 45ms; } #chatList.swap > :nth-child(5) { animation-delay: 60ms; }
#chatList.swap > :nth-child(n+6) { animation-delay: 75ms; }
#messages.swap { animation: uiFade .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .menu, .chat-menu, .ctx, .list-ctx, .out-menu, .hang-menu, .peer-menu, dialog[open], dialog[open]::backdrop,
  #chatList.swap > *, #messages.swap { animation: none !important; }
  .chat-filters button { transition: none; }
  .chat-filters .f-list.compact.on.grow .lst-nm { animation: none; }
}
.chat-filters .f-list .pin-ic svg { width: 12px; height: 12px; }
.chat-filters .f-add { padding: 5px 9px; color: var(--muted); }
.chat-filters .f-add svg { width: 15px; height: 15px; }
.chat-filters button.on { background: color-mix(in srgb, var(--accent) 22%, var(--side)); color: var(--accent); }
.chat-filters .fc { font-size: .75rem; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--ok); color: #fff; text-align: center; }
.chat-filters svg { width: 14px; height: 14px; }
.fav-ic { color: #f5b301; display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.fav-ic svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.section { padding: 10px 12px 4px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.lst-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--lst); }
/* буква списка: первая буква названия цветом списка на его бледном фоне — у чата и во вкладках */
.lst-tag { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 5px; font-size: .62rem;
           font-weight: 700; line-height: 1; color: var(--lst); background: color-mix(in srgb, var(--lst) 16%, transparent); }
.item-name .lst-tags { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.item.active .lst-tag { color: #fff; background: rgba(255,255,255,.22); }
.lst-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.lst-colors button { width: 30px; height: 30px; border-radius: 50%; background: var(--lst); }
.lst-colors button.on { box-shadow: 0 0 0 2px var(--side), 0 0 0 4px var(--lst); }
.lst-pick { max-height: 38vh; overflow: auto; margin: 8px -6px 12px; }
.lst-pick label { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; cursor: pointer; }
@media (hover: hover) { .lst-pick label:hover { background: var(--hover); } }
.lst-pick .avatar { width: 32px; height: 32px; font-size: .8rem; }
.lst-pick span.nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-pick input { width: 18px; height: 18px; accent-color: var(--lst); flex: none; }
.lst-sub { color: var(--muted); font-size: .85rem; margin: 6px 0 0; }
dialog label.lst-compact { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--text); font-size: .95rem; cursor: pointer; }
.lst-compact input { width: 18px; height: 18px; accent-color: var(--lst); flex: none; }
.lst-compact small { display: block; color: var(--muted); font-size: .8rem; }
.list-ctx .lst-tag { width: 20px; height: 20px; font-size: .72rem; }
.list-ctx button .lst-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.btn.danger-text { color: var(--danger); margin-right: auto; }
/* «Помощь» — возможности Call: группы, в каждой — карточки «что это, пример, где найти» */
dialog.help-dialog { max-width: 560px; display: none; }
dialog.help-dialog[open] { display: flex; flex-direction: column; max-height: min(720px, calc(100dvh - 40px)); }
.help-list { flex: 1; overflow-y: auto; margin: 10px -6px 12px; padding: 0 6px; }
.help-group { margin: 12px 2px 6px; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.help-group:first-child { margin-top: 2px; }
.help-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--hover); margin-bottom: 6px; }
.help-item .hi-ic { font-size: 1.3rem; line-height: 1.5rem; flex: none; width: 1.6rem; text-align: center; }
.help-item b { display: block; margin-bottom: 2px; }
.help-item p { margin: 0; color: var(--text); font-size: .9rem; line-height: 1.4; }
.help-item .hi-ex { color: var(--muted); margin-top: 4px; }
.help-item .hi-where { color: var(--accent); margin-top: 4px; font-size: .85rem; }
.item { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
@media (hover: hover) { .item:hover { background: var(--hover); } }
.item.active { background: var(--active); color: #fff; }
.item.active .preview, .item.active .ltime { color: rgba(255,255,255,.8); }
.item-main { flex: 1; min-width: 0; }
.item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltime { font-size: .76rem; color: var(--muted); flex: none; display: inline-flex; align-items: center; gap: 4px; }
.preview { color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
/* список чатов: имя обычным шрифтом, полужирным — только у непрочитанных; превью без прозрачности;
   тонкая линия между чатами (под текстом, не под аватаром) */
#chatList .item { gap: 10px; padding: 7px 8px; }
#chatList .item-name { font-weight: 400; font-size: 1.07rem; } /* имя в списке чуть крупнее текста сообщений */
#chatList .item.unread .item-name { font-weight: 600; }
#chatList .preview { opacity: 1; }
#chatList .item-main { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px;
                       margin: -7px 0; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
#chatList .item:last-child .item-main, #chatList .item.active .item-main, #chatList .item:has(+ .item.active) .item-main,
@media (hover: hover) { #chatList .item:hover .item-main, #chatList .item:has(+ .item:hover) .item-main { border-bottom-color: transparent; } }
#chatList .ltime .fav-ic, #chatList .ltime .mute-ic { margin-left: 0; vertical-align: 0; }
/* непрочитанные — заметнее: жирное имя, тёмный текст, время цветом */
.item.unread .item-name { font-weight: 600; }
.item.unread .preview { color: var(--text); opacity: 1; }
.item.unread .ltime { color: var(--accent); font-weight: 600; }
/* свои сообщения в списке: галочки вместо «Вы:» */
.ltime .tick { display: inline-flex; color: var(--muted); }
.list-mode-btn { width: 36px; height: 36px; flex: none; color: var(--muted); }
.list-mode-btn svg { width: 20px; height: 20px; }
/* «только у новых»: у прочитанного чата убираем вторую строку, высота и аватар — как у всех; точки списков — у времени */
body.list-new #chatList .item.quiet .item-row + .item-row { display: none; }
.ltime .tick svg { width: 15px; height: 15px; }
.ltime .tick svg.dbl { width: 19px; }
.ltime .tick.read { color: var(--tick-read); }
.item.active .ltime { color: rgba(255,255,255,.85); }
/* у выбранного чата фон синий: доставлено — бледные, прочитано — яркие голубые и жирнее */
.item.active .ltime .tick { color: rgba(255,255,255,.5); }
.item.active .ltime .tick.read { color: #8ff4ff; }
.item.active .ltime .tick.read svg { stroke-width: 2.6; }
/* «Только имена»: без последнего сообщения, строки ниже, счётчик в той же строке */
body.list-names #chatList .item { padding: 5px 10px; }
body.list-names #chatList .item > .avatar { width: 38px; height: 38px; font-size: .88rem; }
body.list-names #chatList .item-main { display: flex; flex-direction: row; align-items: center; gap: 8px; }
body.list-names #chatList .item-main > .item-row:first-child { flex: 1; min-width: 0; }
body.list-names #chatList .preview { display: none; }
.preview .draft-l { color: var(--danger); }
.chat-head .subtitle.online, .profile-card .pc-head .pc-seen.online { color: var(--accent); }
.preview.typing, .chat-head .subtitle.typing { color: var(--accent); }
.item.active .preview.typing { color: #fff; }
.item.active .preview .draft-l { color: #ffd2d2; }
.badge { background: var(--ok); color: #fff; border-radius: 999px; font-size: .78rem; min-width: 22px; padding: 2px 7px; text-align: center; flex: none; }
.empty { color: var(--muted); padding: 28px 18px; text-align: center; line-height: 1.5; }

/* ---------- окно чата ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; background-color: var(--chat-bg);
        background-image: radial-gradient(var(--dots) 1.2px, transparent 1.3px); background-size: 22px 22px; }
.chat-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; background: var(--head); border-bottom: 1px solid var(--line); min-height: 58px; }
.chat-head .who-box { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; }
.chat-head .who-box.clickable { cursor: pointer; }
.chat-head .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .subtitle { font-size: .82rem; color: var(--muted); }
#back { display: none; }
/* на широком экране лента — колонкой ~880px по центру, как в Telegram: свои и чужие сообщения рядом, голову не крутить
   (--lane: проценты в padding считаются от ширины окна чата; на узком экране выходит 0) */
#messages { --lane: max(0px, calc((100% - 880px) / 2));
            flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px calc(var(--pr, var(--pl)) + var(--lane)) 14px calc(var(--pl) + var(--lane)); display: flex; flex-direction: column;
            --pl: 7px; container-type: inline-size; transition: padding-right .18s ease; }
.day { align-self: center; background: var(--pill); color: var(--pill-text); font-size: .8rem; padding: 4px 12px; border-radius: 12px; margin: 10px 0 4px; }
/* текст сообщений растёт с «Размером текста» мягче остального интерфейса: на обычном размере — как всё остальное,
   крупнее — примерно на 70% шага; иначе при крупном интерфейсе облачка становились огромными */
.msg { font-size: calc(5px + .7rem); position: relative; max-width: min(78%, 44em); /* ~660px при обычном шрифте, растёт вместе с размером текста */ padding: 6px 10px; border-radius: 14px; background: var(--theirs); align-self: flex-start;
       white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--bubble-shadow); margin-top: 8px; line-height: 1.38; }
.msg.cont { margin-top: 2px; }
.msg.mine { background: var(--mine); color: var(--mine-text); align-self: flex-end; }
.msg.mine:not(.cont) { border-bottom-right-radius: 4px; }
.tr-badge { display: inline-flex; vertical-align: -2px; padding: 0; margin-right: 5px; background: none; border: 0; color: inherit; opacity: .55; cursor: pointer; }
.tr-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tr-badge.orig { opacity: .3; }
.msg.tr-wait .msg-text { animation: trPulse 1.4s ease-in-out infinite; }
.tr-wait-label { margin-right: 6px; opacity: .7; font-style: italic; }
@keyframes trPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .msg.tr-wait .msg-text { animation: none; opacity: .6; } }
.tr-on { font-size: 1rem; margin-left: 6px; flex: none; }
.msg.failed { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, transparent), var(--bubble-shadow); }
.tick.failed { color: var(--danger) !important; font-weight: 800; }
.fail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: .82rem; color: var(--danger); white-space: normal; }
.fail-bar button { padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-weight: 600; font-size: .82rem; }
.msg:not(.mine):not(.cont) { border-bottom-left-radius: 4px; }
.msg .who { font-size: .85rem; font-weight: 600; margin-bottom: 1px; display: flex; align-items: center; gap: 6px; }
.msg .who .mav { flex: none; }
/* аватарки в группах, как в Telegram: место слева у чужих сообщений, сама аватарка — у последнего в серии */
.av-26 { width: 26px; height: 26px; font-size: .62rem; }
.msg.with-av { margin-left: 32px; }
.msg.with-av:not(.cont) { border-bottom-left-radius: 14px; }
.msg.with-av.tail { border-bottom-left-radius: 4px; }

.msg.with-av .mav, .msg .who:not(.bot) { cursor: pointer; }
/* ответ на сообщение: цитата в начале пузыря, нажатие — к исходному сообщению */
.msg .reply-q { display: block; border-left: 3px solid var(--rq, var(--accent)); background: color-mix(in srgb, var(--rq, var(--accent)) 12%, transparent);
                border-radius: 6px; padding: 3px 8px; margin: 2px 0 4px; cursor: pointer; font-size: .86rem; white-space: normal; }
.msg .reply-q b { display: block; color: var(--rq, var(--accent)); font-size: .8rem; }
.msg .reply-q span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.msg.mine .reply-q { --rq: var(--mine-text); background: rgba(255,255,255,.14); }
/* мини-профиль по нажатию на аватарку или имя автора */
dialog.profile-card { max-width: 320px; }
.profile-card .pc-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding-top: 4px; }
.profile-card .pc-head .avatar { margin-bottom: 8px; }
.profile-card .pc-head b { font-size: 1.15rem; overflow-wrap: anywhere; }
.profile-card .pc-real { color: var(--muted); overflow-wrap: anywhere; }
.profile-card #pcRename, .profile-card #pcBlock, .profile-card #pcReport { width: 100%; margin-top: 10px; }
.profile-card #pcBlock, .profile-card #pcReport { margin-top: 2px; }
#reportReason { appearance: none; -webkit-appearance: none; padding-right: 38px; background-repeat: no-repeat; background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a96a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#reportComment { resize: none; }
.profile-card .pc-alias { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.profile-card .pc-alias .row { justify-content: flex-end; margin: 0; }
.profile-card .pc-head small { color: var(--muted); }
.profile-card .pc-head .pc-role { color: var(--accent); }
.profile-card .row { flex-direction: column; align-items: stretch; margin-top: 18px; }
.meta { float: right; margin: 6px 0 -4px 10px; font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; user-select: none; }
.msg.mine .meta { color: var(--meta-mine); }
.meta .unverified { color: var(--danger, #e5484d); font-size: .9rem; cursor: help; }
.meta svg { width: 15px; height: 15px; stroke-width: 2.2; }
.msg.broken { font-style: italic; opacity: .75; }
/* ссылки в тексте сообщения и подписи */
.msg a.link, .lb-caption a.link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.msg.mine a.link { color: var(--link-mine); }
.msg .mention { color: var(--accent); font-weight: 600; cursor: pointer; }
.msg.mine .mention { color: var(--link-mine); }
.msg .mention.me { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 4px; padding: 0 2px; }
/* подсказка «@»: участники группы над полем ввода */
.mention-box { background: var(--head); border-top: 1px solid var(--line); max-height: 228px; overflow-y: auto; padding: 4px 6px; }
.mention-box .item { padding: 6px 8px; gap: 10px; }
.mention-box .item.on { background: var(--hover); }
.mention-box .item-name { font-weight: 600; }
.badge.at { background: var(--accent); min-width: 22px; padding: 2px 6px; }
.msg img { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; margin-top: 2px; cursor: zoom-in; }
.msg img.sized, .img-ph.sized { height: auto; max-height: none; object-fit: cover; }
.img-ph { display: grid; place-items: center; min-width: 140px; min-height: 90px; margin-top: 2px; border-radius: 10px; background: var(--hover); }
.file { display: flex; gap: 10px; align-items: center; cursor: pointer; text-align: left; min-width: 200px; }
.file .ficon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.file .fname { font-weight: 600; word-break: break-all; }
.fsize { font-size: .8rem; color: var(--muted); }
.callmsg { display: flex; gap: 10px; align-items: center; }
.callmsg .cicon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); flex: none; }
.callmsg .cdone { margin-left: 6px; color: var(--muted); font-size: .82rem; }
.callmsg .join { margin-left: 6px; background: var(--ok); color: #fff; border-radius: 16px; padding: 5px 12px; font-size: .85rem; font-weight: 600; }
.placeholder { flex: 1; display: grid; place-items: center; }
.placeholder span { background: var(--pill); color: var(--pill-text); padding: 6px 14px; border-radius: 14px; font-size: .9rem; }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px max(10px, calc((100% - 900px) / 2)); background: var(--head); position: relative;
            box-shadow: 0 -1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 -6px 14px -8px rgba(0,0,0,.18); }
body.kb-open .composer { padding-bottom: 6px; } /* над клавиатурой — плотнее */
.bot-gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
            background: var(--head); color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
.composer .ta-wrap { flex: 1; min-width: 0; position: relative; display: flex; background: var(--hover); border-radius: 21px; }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; border-radius: 21px; padding: 10px 4px 10px 16px; max-height: 140px; line-height: 1.35;
                     position: relative; z-index: 1; scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; } /* без полосы прокрутки: иначе слой подсветки съедет */
/* слой подсветки ошибок под прозрачным полем: тот же текст, тот же шрифт и отступы */
.ta-hl { font: inherit; line-height: 1.35; /* font сбрасывает line-height — поэтому сначала font */
         position: absolute; inset: 0 38px 0 0; padding: 10px 4px 10px 16px; white-space: pre-wrap; overflow-wrap: break-word;
         color: transparent; overflow: hidden; pointer-events: none; border-radius: 21px; }
.ta-hl mark { background: rgba(229,57,53,.09); border-radius: 3px; color: transparent; text-decoration: underline wavy rgba(229,57,53,.8);
              text-decoration-thickness: 1.5px; text-decoration-skip-ink: none; text-underline-offset: 4px; }
/* карточка с вариантами — всплывает над полем ввода и не сдвигает ленту */
.spell-bar { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; max-width: min(460px, calc(100vw - 16px));
             background: var(--side); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
             font-size: .9rem; animation: uiPop .14s cubic-bezier(.2, .8, .3, 1); }
.spell-bar .sb-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.spell-bar .sb-word { color: var(--danger); font-weight: 600; font-size: .92rem; text-decoration: line-through rgba(229,57,53,.5); }
.spell-bar .sb-head .sb-n { margin-left: auto; }
.spell-bar .sb-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.spell-bar .sb-acts { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.spell-bar button { padding: 6px 13px; border-radius: 16px; background: var(--hover); color: var(--text); font-size: .9rem; }
.spell-bar button.sug { color: var(--accent); font-weight: 600; }
.spell-bar button.sug.best { background: var(--accent); color: #fff; }
.spell-bar button.act { background: none; color: var(--muted); padding: 4px 8px; font-size: .84rem; }
.spell-bar button.act.next { margin-left: auto; color: var(--accent); }
@media (hover: hover) { .spell-bar button:hover { filter: brightness(.95); } .spell-bar button.act:hover { color: var(--text); background: var(--hover); } }
.spell-bar .sb-none { color: var(--muted); }
.spell-bar kbd { font: inherit; font-size: .72rem; opacity: .7; margin-left: 4px; }
/* сколько ошибок в набранном: нажатие ведёт к следующей */
.spell-count { position: absolute; top: -9px; right: 44px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 10px;
               background: #e53935; color: #fff; font-size: .72rem; font-weight: 600; line-height: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer; }
.emoji-btn { width: 38px; height: 42px; flex: none; align-self: flex-end; display: grid; place-items: center; color: var(--muted); border-radius: 0 21px 21px 0; position: relative; z-index: 1; }
.emoji-btn.on { color: var(--accent); }
@media (hover: hover) { .emoji-btn:hover { color: var(--accent); } }
.emoji-btn svg { width: 23px; height: 23px; }
/* камера в поле сообщения: пока поле пустое (начали писать — прячется, как у мессенджеров) */
.cam-btn { width: 34px; height: 42px; flex: none; align-self: flex-end; display: grid; place-items: center; color: var(--muted); position: relative; z-index: 1; }
.cam-btn svg { width: 22px; height: 22px; }
@media (hover: hover) { .cam-btn:hover { color: var(--accent); } }
.ta-wrap:has(textarea:not(:placeholder-shown)) .cam-btn { display: none; }
.cam-dialog { width: min(640px, calc(100vw - 24px)); }
.cam-dialog video { width: 100%; max-height: 62vh; border-radius: 12px; background: #000; display: block; object-fit: contain; }
.cam-dialog .cam-msg { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
/* смайлики: панель над полем ввода (и над сообщением — для реакции) */
.emoji-panel { position: fixed; z-index: 41; width: 352px; height: 330px; max-width: calc(100vw - 16px); background: var(--side); border-radius: 14px;
               box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.ep-grid { flex: 1; overflow-y: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.ep-sec { position: sticky; top: -4px; background: var(--side); color: var(--muted); font-size: .78rem; font-weight: 600; padding: 8px 4px 4px; }
.ep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); content-visibility: auto; contain-intrinsic-size: auto 300px; } /* темы вне экрана не рисуются */
.ep-list button { height: 38px; font-size: 25px; line-height: 1; border-radius: 8px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
@media (hover: hover) { .ep-list button:hover { background: var(--hover); } }
/* вкладки панели: смайлики, поиск GIF, «Мои мемы» (для реакции — только смайлики) */
.ep-modes { display: flex; gap: 4px; padding: 6px 8px 2px; flex: none; }
.ep-modes button { flex: 1; padding: 5px 0; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ep-modes button.on { background: var(--hover); color: var(--text); }
.emoji-panel.pick .ep-modes { display: none; }
.ep-gif { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px 8px 8px; gap: 6px; }
.ep-gif .field { flex: none; }
.mine-bar { flex: none; display: flex; align-items: center; gap: 8px; }
.mine-bar .btn { padding: 5px 12px; font-size: .88rem; }
.mine-hint { font-size: .78rem; color: var(--muted); }
@media (pointer: coarse) { .mine-hint { display: none; } }
.gif-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; align-content: start; overscroll-behavior: contain; }
.gif-grid > button { position: relative; height: 104px; /* высота числом: в Safari квадрат через aspect-ratio сплющивался */ border-radius: 8px; overflow: hidden; background: var(--hover); padding: 0; }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-grid .g-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
                   font-size: 11px; display: grid; place-items: center; }
.gif-grid .g-add { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
                   font-size: 16px; line-height: 1; display: grid; place-items: center; }
.gif-grid .g-add.done { background: var(--accent); }
/* эффекты на весь экран: кнопки в панели, плашка в чате, холст поверх всего */
.fx-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; align-content: start; }
.fx-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--hover); font-size: .8rem; color: var(--text); }
.fx-grid button span { font-size: 30px; line-height: 1; }
@media (hover: hover) { .fx-grid button:hover { background: color-mix(in srgb, var(--accent) 15%, var(--hover)); } }
.msg.fx-msg { align-self: center; background: var(--pill); color: var(--pill-text); box-shadow: none; padding: 5px 12px; border-radius: 14px;
              font-size: .85rem; cursor: pointer; white-space: normal; }
.msg.fx-msg .fx-ic { font-size: 1.15rem; margin-right: 4px; vertical-align: -2px; }
.msg.fx-msg .meta { color: inherit; opacity: .75; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
.gif-note { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; padding: 14px 6px; text-align: center; line-height: 1.4; }
.gif-sec { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; font-weight: 600; padding: 6px 2px 0; }
.ep-tabs { display: flex; border-top: 1px solid var(--line); padding: 4px; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ep-tabs button { flex: 1; min-width: 34px; height: 34px; border-radius: 8px; font-size: 19px; filter: grayscale(1); opacity: .7; }
.ep-tabs button.on { filter: none; opacity: 1; background: var(--hover); }
@media (hover: hover) { .ep-tabs button:hover { filter: none; opacity: 1; background: var(--hover); } }
/* голосовые: кнопка-микрофон, полоса записи, плеер в сообщении */
.composer .rec-bar { display: none; }
.composer.recording > label.icon-btn, .composer.recording > .ta-wrap { display: none; }
.composer.recording .rec-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 2px; background: var(--hover); border-radius: 21px; }
.rec-bar .rec-cancel { width: 38px; height: 38px; color: var(--danger); }
.rec-bar .rec-cancel svg { width: 20px; height: 20px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: blink 1s ease-in-out infinite; }
.rec-time { font-variant-numeric: tabular-nums; min-width: 38px; }
.rec-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.rec-wave span { flex: none; width: 3px; min-height: 3px; border-radius: 2px; background: var(--accent); }
.send.mic svg { margin-left: 0; width: 22px; height: 22px; }
.voice { display: flex; align-items: center; gap: 10px; width: min(300px, 62vw); padding: 2px 0; white-space: normal; }
.voice .vplay { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.voice .vplay svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.voice:not(.playing) .vplay svg { margin-left: 3px; }
.voice.loading .vplay { opacity: .6; }
.voice .vmain { flex: 1; min-width: 0; }
.voice .vwave { height: 28px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.voice .vwave span { flex: 1; max-width: 3px; min-height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.voice .vwave span.on { background: var(--accent); }
/* текст голосового: под плеером ссылка «Показать текстом», после распознавания — сам текст (и перевод) */
.voice-wrap { display: flex; flex-direction: column; gap: 6px; }
.vtxt { align-self: flex-start; font-size: .8rem; font-weight: 600; color: var(--accent); padding: 2px 0; background: none; }
.msg.mine .vtxt { color: var(--meta-mine); }
.vtxt:disabled { opacity: .6; }
.vtext { font-size: .93rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; max-width: min(300px, 62vw); }
.vtext .vt-flip { font-size: .75rem; color: var(--muted); margin-left: 6px; text-decoration: underline; cursor: pointer; }
.voice .vinfo { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.voice .vrate { font-size: .72rem; font-weight: 700; padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.msg.mine .voice .vplay { background: var(--meta-mine); color: var(--mine); }
.msg.mine .voice .vwave span { background: color-mix(in srgb, var(--meta-mine) 35%, transparent); }
.msg.mine .voice .vwave span.on { background: var(--meta-mine); }
.msg.mine .voice .vinfo { color: var(--meta-mine); }
.msg.mine .voice .vrate { background: color-mix(in srgb, var(--meta-mine) 18%, transparent); color: var(--meta-mine); }
.send { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.send svg { width: 20px; height: 20px; margin-left: -2px; }

/* ---------- диалоги ---------- */
dialog { border: 0; border-radius: 16px; padding: 22px; max-width: 440px; width: calc(100% - 28px); background: var(--side); color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog:focus { outline: none; } /* на телефоне фокус — на самом окне, а не в поле */
dialog h2 { margin: 0 0 6px; font-size: 1.2rem; }
dialog p { color: var(--muted); margin: 0 0 14px; }
dialog form { display: grid; gap: 10px; }
dialog label { font-size: .85rem; color: var(--muted); display: grid; gap: 5px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.picker-results { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.picker-results .item { padding: 6px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--hover); border-radius: 16px; padding: 4px 6px 4px 10px; font-size: .9rem; }
.chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.chip svg { width: 14px; height: 14px; }
.members { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 45vh; overflow-y: auto; }
.members .item { cursor: default; }
.role { font-size: .78rem; color: var(--accent); }
.small-btn { color: var(--danger); font-size: .88rem; padding: 6px 8px; border-radius: 8px; }
@media (hover: hover) { .small-btn:hover { background: var(--hover); } }
.small-btn.accent { color: var(--accent); }
.member-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; flex: none; max-width: 52%; }

/* ---------- звонок ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: #0d141c; color: #fff; display: flex; flex-direction: column;
           padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 18px); }
.call-top { text-align: center; padding: 6px 0 12px; }
.call-top .cname { font-size: 1.2rem; font-weight: 600; }
.call-top .cstatus { color: #9fb0c0; font-size: .9rem; margin-top: 3px; }
.call-grid { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; position: relative; }
.tile { position: relative; background: #1b2633; border-radius: 16px; overflow: hidden; display: grid; place-items: center; min-height: 140px; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile video.mirror { transform: scaleX(-1); }
.tile.screen { background: #0b1118; }
.tile.screen video { object-fit: contain; } /* экран целиком, без обрезки */
.call-grid.has-screen .tile:not(.screen) { min-height: 0; }
.cbtn.on { background: var(--accent); color: #fff; }
.tile.has-video .avatar { display: none; }
.tile.speaking { box-shadow: inset 0 0 0 3px var(--ok); }
.tile .tname { position: absolute; left: 10px; bottom: 8px; font-size: .85rem; background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: 10px; }
.call-grid[data-count="2"] { grid-template-columns: 1fr; }
.call-grid[data-count="2"] .tile.local { position: absolute; right: 12px; bottom: 12px; width: 26%; max-width: 170px; aspect-ratio: 3/4; min-height: 0; z-index: 2; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.call-grid[data-count="2"] .tile.local .avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.controls { display: flex; justify-content: center; gap: 22px; padding-top: 18px; }
.cbtn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.cbtn.off { background: #fff; color: #0d141c; }
.cbtn.lit { background: #fff; color: #0d141c; }
.cbtn.hang { background: var(--danger); }
.cbtn.accept { background: var(--ok); }
.cbtn svg { width: 28px; height: 28px; }
.incoming { justify-content: space-between; align-items: center; text-align: center; padding-top: 12vh; }
.incoming .avatar { margin: 0 auto 18px; }
.incoming .cname { font-size: 1.5rem; font-weight: 600; }
.incoming .ckind { color: #9fb0c0; margin-top: 6px; }
.incoming .controls { gap: 70px; padding-bottom: 6vh; }
.incoming .clabel { font-size: .85rem; color: #c6d2dd; margin-top: 8px; }
/* аватарки-фото */
.avatar { background-size: cover; background-position: center; }
.avatar.has-img { color: transparent; }
/* объём аватарок: мягкая тень и тонкая обводка — светлые картинки не сливаются с фоном */
/* объём: аватарки и облачка сообщений — мягкая тень (в тёмной теме глубже) */
:root { --avatar-shadow: 0 2px 6px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.07);
        --bubble-shadow: 0 1px 2px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.08); }
:root[data-theme="dark"] { --avatar-shadow: 0 2px 7px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
        --bubble-shadow: 0 1px 2px rgba(0,0,0,.35), 0 3px 9px rgba(0,0,0,.28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --avatar-shadow: 0 2px 7px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
  --bubble-shadow: 0 1px 2px rgba(0,0,0,.35), 0 3px 9px rgba(0,0,0,.28); } }
.avatar { box-shadow: var(--avatar-shadow); }
.avatar.has-img > svg { display: none; }
.avatar-edit { position: relative; border-radius: 50%; }
.avatar-edit .cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--side); }
.avatar-edit .cam svg { width: 16px; height: 16px; }
.av-88 { width: 88px; height: 88px; font-size: 2rem; }
.av-28 { width: 28px; height: 28px; font-size: .7rem; }

/* плашка уведомлений / установки */
.auth-hint { margin: 14px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.auth-hint.legal-links a, .terms-links a, .legal-row a { color: var(--accent); }
.style-ai { font-size: .82rem; color: var(--muted); margin: -6px 0 10px !important; }
.reg-terms { display: flex !important; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 4px 0 6px; }
.reg-terms input { width: auto; margin: 3px 0 0; flex: none; }
.reg-terms a { color: var(--accent); }
.legal-row { gap: 18px; justify-content: flex-start; flex-wrap: wrap; font-size: .9rem; }
/* высота окна задана: иначе Safari на iPhone сжимает тело с flex: 1 и прокруткой до нуля — пустое окно с одной кнопкой */
dialog.legal-dialog[open] { height: min(720px, calc(100dvh - 40px)); }
.legal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: -4px -6px 12px; padding: 0 6px; font-size: .93rem; line-height: 1.5; }
.legal-body h1 { font-size: 1.25rem; margin: 0 0 4px; }
.legal-body h2 { font-size: 1.02rem; margin: 18px 0 4px; }
.legal-body h3 { font-size: .95rem; margin: 14px 0 2px; }
.legal-body .lg-date { color: var(--muted); margin-top: 0; }
.legal-body p { color: var(--text); margin: 6px 0; }
.legal-body ul { padding-left: 20px; margin: 6px 0; }
.legal-body a { color: var(--accent); }
.legal-body .lg-wrap { overflow-x: auto; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: .86rem; margin: 6px 0; }
.legal-body td, .legal-body th { border: 1px solid var(--line); padding: 5px 7px; text-align: left; vertical-align: top; }
.apk-link { display: block; text-align: center; margin: 14px 0 0; font-size: .9rem; }
.banner { margin: 0 10px 8px; padding: 10px 8px 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--side)); display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.banner span { flex: 1; }
.btn.small { padding: 7px 12px; font-size: .88rem; }
/* «Завод залов»: кнопки вместо поля ввода, шторка с формами, карточка итога */
.srv-panel { background: var(--head); padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; border-top: 1px solid var(--line); }
.srv-left { font-size: .8rem; color: var(--muted); min-height: 1em; }
.srv-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.srv-acts button { min-height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; font-size: .85rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.srv-acts button.main { background: var(--accent); color: var(--accent-text); }
.srv-acts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.srv-acts button:not(.main) svg { stroke: var(--accent); }
dialog.srv-sheet { max-width: 480px; padding: 16px 18px 18px; }
dialog.srv-sheet.in-chat { margin: 0; inset: auto; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 28px)); }
.srv-sheet .field { outline: none; color: var(--text); font-weight: 600; }
.srv-sheet .field::placeholder { color: var(--muted); opacity: .55; font-weight: 400; }
.srv-sheet .field:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 760px) { dialog.srv-sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; max-height: 92dvh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } }
/* на телефоне лист прижат к низу — оттуда и выезжает (как в iOS), а не проявляется из центра */
@keyframes sheetUp { from { translate: 0 100%; } }
@media (max-width: 760px) { dialog.srv-sheet[open] { animation: sheetUp .4s cubic-bezier(.32, .72, 0, 1); } }
.srv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.srv-head h2 { margin: 0; }
.srv-body { display: grid; gap: 12px; max-height: min(62dvh, 560px); overflow: auto; padding: 2px 0; }
.srv-foot { display: grid; gap: 8px; margin-top: 12px; }
.srv-foot:empty { display: none; }
.srv-field { display: grid; gap: 8px; }
.srv-sug-wrap { position: relative; }
.srv-sug { margin-top: 6px; background: var(--side); border: 1px solid var(--line); border-radius: 12px;
           box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 240px; overflow: auto; padding: 4px; }
.srv-item.srv-sug-wrap { flex-wrap: wrap; }
.srv-item.srv-sug-wrap .srv-sug { flex-basis: 100%; }
.srv-sug button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--text);
                  font-family: ui-monospace, monospace; font-size: .95rem; }
.srv-sug button:focus-visible { background: var(--hover); }
@media (hover: hover) { .srv-sug button:hover { background: var(--hover); } }
.srv-sug b { color: var(--accent); }
.srv-sheet label { font-size: .85rem; color: var(--muted); display: grid; gap: 6px; }
.srv-path { background: color-mix(in srgb, var(--accent) 9%, var(--side)); border-radius: 12px; padding: 9px 12px; display: grid; gap: 4px; font-size: .92rem; overflow-wrap: anywhere; }
.srv-path small { color: var(--muted); font-size: .8rem; }
.srv-err { color: var(--danger); font-size: .86rem; }
.srv-steps { border: 1px solid var(--line); border-radius: 12px; }
.srv-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.srv-step + .srv-step { border-top: 1px solid var(--line); }
.srv-step .stp { display: flex; align-items: center; gap: 10px; }
.srv-step button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--side); color: var(--text); font-size: 1.25rem; }
.srv-step button:disabled { opacity: .35; }
.srv-step b { min-width: 22px; text-align: center; font-size: 1.1rem; display: inline-block; }
.srv-step b.bump { animation: srv-bump .18s ease-out; }
@keyframes srv-bump { 40% { transform: scale(1.35); color: var(--accent); } }
.srv-step.srv-fold { max-height: 64px; overflow: hidden; transition: max-height .22s ease, opacity .18s ease, padding .22s ease, border-color .22s ease; }
.srv-step.srv-fold.shut { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
dialog.srv-sheet.tall[open] { display: flex; flex-direction: column; height: min(640px, calc(100dvh - 40px)); }
dialog.srv-sheet.tall .srv-body { flex: 1; max-height: none; align-content: start; }
@media (max-width: 760px) { dialog.srv-sheet.tall[open] { height: 88dvh; } }
@media (prefers-reduced-motion: reduce) { .srv-step b.bump { animation: none; } .srv-step.srv-fold { transition: none; } }
.srv-preview { display: grid; gap: 6px; }
.srv-preview:empty { display: none; }
.srv-pre { font-family: ui-monospace, monospace; font-size: .84rem; line-height: 1.55; background: var(--hover); border-radius: 10px; padding: 9px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.srv-go { width: 100%; min-height: 50px; font-size: 1rem; }
.srv-items { border: 1px solid var(--line); border-radius: 12px; }
.srv-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.srv-item + .srv-item { border-top: 1px solid var(--line); }
.srv-item .field { border: 0; padding: 8px 2px; }
.srv-item .st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.srv-item .st.ok { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.srv-item .st.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.srv-item .st.wait { background: var(--hover); color: var(--muted); }
.srv-item .im { flex: 1; min-width: 0; display: grid; gap: 1px; }
.srv-item small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.srv-item.bad small { color: var(--danger); }
.srv-card { display: grid; gap: 8px; white-space: normal; }
/* API чата: сообщения от программ и окно ключей */
.msg.api-msg { border-left: 3px solid var(--accent); }
.msg .who.api { color: var(--accent); }
dialog.api-dialog { max-width: 560px; }
.api-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.api-new { display: flex !important; gap: 8px; margin: 12px 0 0; }
.api-new .field { flex: 1; min-width: 0; }
.api-new.hidden { display: none !important; }
.api-key { margin-top: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--side)); display: grid; gap: 10px; }
.api-copy { display: grid; gap: 4px; }
.api-line { display: flex; gap: 8px; align-items: flex-start; }
.api-line code { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .8rem; background: var(--side); border: 1px solid var(--line);
                 border-radius: 8px; padding: 7px 9px; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.api-note { margin: 12px 0 0 !important; }
/* чат с «Заводом»: писать туда нельзя — итоги лентой по центру, без хвостика облачка */
#messages.srv-feed .msg { align-self: center; width: min(560px, 100%); max-width: 100%; box-sizing: border-box; padding: 12px 14px;
  border-radius: 14px; margin-top: 10px; }
#messages.srv-feed .msg.cont { margin-top: 10px; }
#messages.srv-feed .msg .who { display: none; }
.srv-card .ttl { font-weight: 700; }
.srv-card .mono { font-family: ui-monospace, monospace; }
.srv-card .btn.small { padding: 6px 8px; }
.srv-sec { font-family: ui-monospace, monospace; }
.banner .icon-btn { width: 32px; height: 32px; }
.banner .icon-btn svg { width: 18px; height: 18px; }

/* настройки */
.panel { position: absolute; inset: 0; z-index: 15; background: var(--side); display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 58px; font-size: 1.1rem; }
/* панели (настройки и т. п.) прокручиваются только по вертикали: на телефоне лишний пиксель ширины у любого элемента
   давал таскать весь экран пальцем вбок */
.panel-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 18px 30px; }
.panel-body h3 { font-size: .9rem; color: var(--accent); margin: 26px 0 10px; }
.profile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 0; text-align: center; }
.profile small { color: var(--muted); display: block; }
.link { color: var(--accent); font-size: .9rem; }
.link.danger { color: var(--danger); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: default; }
.set-row small { color: var(--muted); font-size: .8rem; display: block; margin-top: 2px; line-height: 1.35; }
/* настройки: каждый раздел — карточка с цветным значком (собирает groupSettings) */
.panel-body .set-card { background: color-mix(in srgb, var(--text) 3.5%, var(--side)); border-radius: 14px; padding: 2px 14px 4px; margin: 14px 0; }
.panel-body .set-card > h3 { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 1rem; color: var(--text); }
.set-card > h3 .sic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.set-card > h3 .sic svg { width: 17px; height: 17px; }
.set-card .set-row { border-bottom-color: color-mix(in srgb, var(--text) 8%, transparent); }
.set-card .set-row:last-child, .set-card .set-row:has(+ :not(.set-row)) { border-bottom: 0; }
.set-card .set-form { padding-bottom: 10px; }
.set-danger { padding: 4px 0 10px; } /* «Удалить аккаунт» — последняя в карточке: отступ снизу, как у «Сохранить имя» */
.set-card .members { margin: 0 -6px 4px; }
.set-foot { margin-top: 18px; }
.bot-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: .7rem; font-weight: 600; vertical-align: 2px;
           background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.item.active .bot-tag { background: rgba(255,255,255,.25); color: #fff; }
#botsList .item { cursor: default; }
#botsList .btn { flex: none; }
.set-card .members > li:last-child { border-bottom: 0; }
.set-intro { color: var(--muted); font-size: .82rem; line-height: 1.4; margin: 0 0 6px; }
.set-sub { font-size: .95rem; margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.set-row small.set-state { color: var(--ok); font-weight: 600; margin-top: 5px; }
.set-row small.set-state.warn-text { color: var(--danger); }
a.btn { text-decoration: none; }
.set-row .dev-select { max-width: 52%; min-width: 0; text-overflow: ellipsis; }
.set-row .grow { flex: 1; min-width: 0; }
.mic-meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; max-width: 220px; }
.mic-meter span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .08s linear; }
.set-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.set-form { display: grid; gap: 10px; }
.set-form label { font-size: .85rem; color: var(--muted); display: grid; gap: 5px; }
.muted.small { color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 22px 0 0; }

/* меню сообщения */
.ctx { position: fixed; z-index: 40; background: var(--side); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.22); padding: 6px; min-width: 190px; }
.ctx-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; }
@media (hover: hover) { .ctx-list button:hover { background: var(--hover); } }
.ctx-list button.danger { color: var(--danger); }
.ctx-list svg { width: 19px; height: 19px; color: var(--muted); }
.ctx-list button.danger svg { color: var(--danger); }
/* реакции: ряд в меню сообщения и значки под сообщением */
.ctx .ctx-reacts { display: flex; gap: 1px; padding: 0 0 5px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ctx .ctx-reacts button { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1;
                          font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: transform .1s; }
@media (hover: hover) { .ctx .ctx-reacts button:hover { transform: scale(1.18); background: var(--hover); } }
.ctx .ctx-reacts button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ctx .ctx-reacts button.more svg { width: 20px; height: 20px; color: var(--muted); }
.ctx-dim { display: none; }
/* на телефоне — как в Telegram: фон размыт, сообщение приподнято, реакции над ним, меню под ним.
   Сообщение — копия (.ctx-bubble), настоящее на это время скрыто (.lifted). Анимации — в liftOpen/liftClose */
@media (hover: none) {
  .msg { transition: scale .2s ease; }
  .msg.pressing { scale: .96; transition-duration: .35s; }
}
.msg.lifted { visibility: hidden; }
.ctx.lift, .ctx.lift:not(.hidden) { inset: 0; padding: 0; min-width: 0; background: none; box-shadow: none; border-radius: 0; animation: none; }
.ctx.lift .ctx-dim { display: block; position: absolute; inset: 0; background: var(--pill); touch-action: none;
                     -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.ctx-bubble { position: absolute; display: flex; flex-direction: column; transform-origin: center; }
.ctx-bubble.scroll { overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
.ctx-bubble.scroll .mav { display: none; }
.ctx .ctx-bubble > .msg { margin: 0; max-width: none; width: 100%; align-self: stretch; box-shadow: 0 6px 24px rgba(0,0,0,.18), var(--bubble-shadow);
                          -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.ctx.hold .ctx-bubble, .ctx.hold .ctx-bubble * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
.ctx.lift .ctx-list, .ctx.lift .ctx-reacts { position: absolute; border-radius: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.25);
    background: color-mix(in srgb, var(--side) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.ctx.lift .ctx-list { min-width: 230px; max-width: calc(100vw - 24px); padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.ctx.lift .ctx-list button { padding: 11px 14px; gap: 14px; font-size: 1.02rem; border-radius: 10px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ctx.lift .ctx-list button.hot, .ctx.lift .ctx-list button:active { background: var(--hover); }
.ctx.lift .ctx-list svg { width: 21px; height: 21px; }
.ctx.lift .ctx-reacts { padding: 4px 6px; margin: 0; border: 0; border-radius: 999px; gap: 0; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
.ctx.lift .ctx-reacts::-webkit-scrollbar { display: none; }
.ctx.lift .ctx-reacts button { flex: none; width: 39px; height: 39px; font-size: 27px; animation: ctxReactIn .32s cubic-bezier(.3, 1.5, .5, 1) backwards;
                               animation-delay: calc(40ms + var(--i, 0) * 22ms); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ctx.lift .ctx-reacts button.hot { transform: scale(1.25); background: var(--hover); }
@keyframes ctxReactIn { from { opacity: 0; transform: scale(.3); } }
@media (prefers-reduced-motion: reduce) { .ctx.lift .ctx-reacts button { animation: none; } }
.reacts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-top: 5px; white-space: normal; }
.rc { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 5px; border-radius: 13px; font-size: .8rem; font-weight: 700; line-height: 1.6;
      background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.rc .rc-e { font-size: 1.05rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rc.mine { background: var(--accent); color: #fff; }
.msg.mine .rc { background: color-mix(in srgb, var(--meta-mine) 20%, transparent); color: var(--meta-mine); }
.msg.mine .rc.mine { background: var(--meta-mine); color: var(--mine); }
.rc.pending { opacity: .6; }
.reacts .meta { float: none; margin: 0 0 -3px auto; padding-left: 8px; }
.msg .fwd { font-size: .82rem; color: var(--accent); margin-bottom: 2px; font-style: italic; }
.msg.mine .fwd { color: var(--meta-mine); }
.msg.selected { outline: 2px solid var(--accent); }
/* выбор нескольких сообщений: кружок слева сверху у каждого, отмеченные — с галочкой и рамкой */
.sel-bar { position: absolute; inset: 0; z-index: 22; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 4px; background: var(--head); }
.sel-bar b { flex: 1; min-width: 0; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.sel-bar .btn.small { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; }
.sel-bar .btn svg { width: 18px; height: 18px; }
.sel-bar #selDelete { color: var(--danger); }
.sel-bar .btn:disabled { opacity: .35; }
/* как в Telegram: лента сдвигается влево, справа — колонка кружков, выбранная строка подсвечена целиком.
   Лента — контейнер (container-type), 100cqw — ширина её содержимого: так кружки встают в одну колонку
   и у левых, и у правых пузырей. --ml — отступ под аватарку слева у сообщений в группе */
#messages.picking { --pr: calc(var(--pl) + 40px); }
#messages.picking .msg[data-id] { cursor: pointer; -webkit-user-select: none; user-select: none; z-index: 0; }
#messages.picking .msg.with-av { --ml: 32px; }
#messages.picking .msg[data-id]::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    left: calc(100cqw + 9px - var(--ml, 0px)); width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid var(--muted); background: var(--side); }
#messages.picking .msg.mine[data-id]::before { left: calc(100% + 9px); }
#messages.picking .msg.picked::after { content: ""; position: absolute; z-index: -1; top: -1px; bottom: -1px; pointer-events: none; /* стык в стык у соседних */
    left: calc(-1 * (var(--ml, 0px) + var(--pl))); width: calc(100cqw + 2 * var(--pl) + 40px);
    background: color-mix(in srgb, var(--accent) 16%, transparent); }
#messages.picking .msg.mine.picked::after { left: calc(100% - 100cqw - var(--pl)); }
#messages.picking .msg.picked::before { border-color: var(--accent); background: var(--accent) no-repeat center / 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
/* свайп влево на телефоне — «Ответить»: стрелка выезжает справа от сообщения */
.msg .swipe-ic { position: absolute; right: -44px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
                 background: var(--pill); color: #fff; display: grid; place-items: center; opacity: var(--sw, 0); transform: scale(calc(.6 + var(--sw, 0) * .4)); }
.msg .swipe-ic svg { width: 18px; height: 18px; }
.msg.swipe-armed .swipe-ic { background: var(--accent); transform: scale(1.12); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), background .15s; }
@media (hover: none) { .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
/* на телефоне долгое нажатие открывает меню — выделять текст можно в отдельном окне */
.sel-text { max-height: 55vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--hover); border-radius: 12px;
            padding: 12px 14px; margin: 8px 0 12px; line-height: 1.45; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* редактирование */
.edit-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; background: var(--head); }
/* вложения над полем ввода: превью, кружок загрузки, крестик */
.attach-tray { display: flex; gap: 8px; padding: 10px 12px 2px; background: var(--head); overflow-x: auto; scrollbar-width: thin; }
.attach-tray.sending { opacity: .6; pointer-events: none; }
.att { position: relative; flex: none; width: 68px; height: 68px; border-radius: 12px; overflow: hidden; background: var(--hover); display: grid; place-items: center; }
.att img { width: 100%; height: 100%; object-fit: cover; }
.att.doc { width: 170px; display: flex; align-items: center; gap: 8px; padding: 8px 26px 8px 10px; }
.att.doc .ficon { flex: none; }
.att-name { min-width: 0; display: grid; font-size: .8rem; line-height: 1.25; text-align: left; }
.att-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-name small { color: var(--muted); }
.att-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
            background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; pointer-events: none; }
.att-play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-left: 2px; }
.att-wait { position: absolute; inset: 0; background: rgba(0,0,0,.38); display: grid; place-items: center; }
.att.doc .att-wait { inset: auto; left: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--accent); }
.att.doc .att-wait .ring { width: 28px; height: 28px; }
.att .ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.att .ring circle { fill: none; stroke-width: 3; }
.att .ring .bg { stroke: rgba(255,255,255,.3); }
.att .ring .fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 75; transition: stroke-dashoffset .25s; }
.att.wait .ring, .att.encrypting .ring, .att.compress .ring { animation: attSpin 1s linear infinite; }
.att-q { position: absolute; left: 3px; bottom: 3px; z-index: 2; font-size: .66rem; font-weight: 700; line-height: 1; padding: 4px 5px;
         border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }
.att-q.orig { background: var(--accent); }
@keyframes attSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.att-retry { position: absolute; inset: 0; background: rgba(229,72,77,.55); color: #fff; font-size: 1.4rem; font-weight: 700; }
.att-rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
          display: grid; place-items: center; z-index: 2; }
.att-rm svg { width: 12px; height: 12px; stroke-width: 2.6; }
@media (hover: hover) { .att-rm:hover { background: var(--danger); } }
/* несколько фото и видео в сообщении — плиткой */
.album { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: min(340px, 64vw); border-radius: 10px; overflow: hidden; margin-top: 2px; }
.album.n3 .al-tile:first-child { grid-column: span 2; aspect-ratio: 2; }
.al-tile { position: relative; aspect-ratio: 1; background: #10171f center / cover no-repeat; cursor: zoom-in; }
.al-tile.loading { background-color: var(--hover); }
.al-tile.broken { display: grid; place-items: center; }
.al-dur { position: absolute; left: 6px; bottom: 6px; font-size: .74rem; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 8px; }
.files-body .file + .file, .files-body .album + div { margin-top: 6px; }
.msg .caption { margin-top: 5px; }
/* разметка текста */
.msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.md-ic { font: .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(127,127,127,.16); padding: 1px 5px; border-radius: 5px; }
.md-code { position: relative; margin: 4px 0; background: rgba(127,127,127,.13); border-radius: 9px; min-width: 0; }
.md-code pre { margin: 0; padding: 25px 11px 9px; overflow-x: auto; white-space: pre; font: .84em/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md-code .md-lang { position: absolute; left: 11px; top: 4px; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.md-copy { position: absolute; right: 6px; top: 4px; font-size: .72rem; padding: 2px 8px; border-radius: 6px; background: rgba(127,127,127,.2); color: inherit; opacity: .75; }
@media (hover: hover) { .md-copy:hover { opacity: 1; } }
.md-table { overflow-x: auto; margin: 4px 0; max-width: 100%; }
.md-table table { border-collapse: collapse; font-size: .92em; white-space: normal; }
.md-table th, .md-table td { border: 1px solid rgba(127,127,127,.35); padding: 4px 8px; text-align: left; vertical-align: top; }
.md-table th { background: rgba(127,127,127,.12); font-weight: 600; }
.md-h { font-weight: 700; margin: 4px 0 2px; }
.md-h1 { font-size: 1.22em; } .md-h2 { font-size: 1.12em; } .md-h3 { font-size: 1.04em; }
.md-quote { border-left: 3px solid currentColor; opacity: .85; padding-left: 9px; margin: 3px 0; }
.md-list { margin: 3px 0; padding-left: 22px; white-space: normal; }
.md-list li { white-space: pre-wrap; }
.md-list li + li { margin-top: 1px; }
.edit-bar .eb-line { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; }
.edit-bar .eb-text { flex: 1; min-width: 0; font-size: .88rem; }
.edit-bar .eb-text b { color: var(--accent); display: block; font-size: .82rem; }
.edit-bar .eb-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }

/* информация о группе */
.ginfo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.ginfo .gtitle { font-size: 1.15rem; font-weight: 600; }
.rename { display: flex; gap: 8px; width: 100%; }
.rename .field { flex: 1; }

/* анимации звонка */
.pulse { position: relative; width: 110px; height: 110px; margin: 22px auto 20px; }
.pulse .avatar { position: relative; z-index: 1; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: ring 2.2s ease-out infinite; }
.pulse::after { animation-delay: 1.1s; }
@keyframes ring { from { transform: scale(1); opacity: .85; } to { transform: scale(2.1); opacity: 0; } }
.wiggle { animation: wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle { 0%, 55%, 100% { transform: rotate(0); } 8%, 24%, 40% { transform: rotate(-16deg); } 16%, 32%, 48% { transform: rotate(16deg); } }
.in-label { color: #9fb0c0; font-size: .95rem; letter-spacing: .01em; }
.call-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.call-wait .cw-text { color: #9fb0c0; }
.wait-banner { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 50%; transform: translateX(-50%); z-index: 5; width: min(420px, calc(100% - 20px));
               background: #24313f; border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.wait-banner .wb-text { flex: 1; min-width: 0; }
.wait-banner small { color: #9fb0c0; display: block; }
.cbtn.sm { width: 42px; height: 42px; }
.cbtn.sm svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .pulse::before, .pulse::after, .wiggle { animation: none; } }

.nh-body p { color: var(--text); margin: 0 0 10px; line-height: 1.45; }
.nh-body ol { margin: 0 0 10px; padding-left: 20px; line-height: 1.55; }
.nh-body .hint { color: var(--muted); font-size: .88rem; }
/* поле пароля: глаз, раскладка, Caps Lock */
.pw-wrap { position: relative; display: block; }
.pw-wrap .field { padding-right: 84px; }
.pw-tools { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; }
.pw-lang { font-size: .72rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; letter-spacing: .03em; }
.pw-lang.ru { color: #c26a00; border-color: #e7a64f; }
.pw-eye { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .pw-eye:hover { color: var(--accent); background: var(--hover); } }
.pw-eye svg { width: 20px; height: 20px; }
.pw-hint { font-size: .82rem; color: #c26a00; min-height: 0; }
.pw-hint:empty { display: none; }
.audio-unlock.mic-resume { top: 60%; background: var(--danger); }
.audio-unlock { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 6; background: var(--ok); color: #fff;
                font-weight: 600; font-size: 1.05rem; padding: 16px 22px; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.call-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--ok); color: #fff; font-size: .92rem; }
.call-bar span { flex: 1; }
.call-bar button { background: #fff; color: var(--ok); border-radius: 14px; padding: 6px 14px; font-weight: 700; }
.live-call { color: var(--ok); display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.live-call svg { width: 16px; height: 16px; }
.item.active .live-call { color: #fff; }
/* верхняя полоса: свёрнутый звонок или идущий звонок, в который можно войти */
.gbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--ok); color: #fff; cursor: pointer; font-size: .93rem; flex: none; }
.gbar .gdot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; animation: blink 1.4s ease-in-out infinite; }
.gbar span.gtext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar button { background: #fff; color: var(--ok); border-radius: 14px; padding: 5px 13px; font-weight: 700; flex: none; }
/* ---------- встречи по ссылке ---------- */
body.guest-mode #addToCall { display: none !important; }
/* карточка «гость хочет войти»: одна на весь экран, видна и поверх звонка */
.lobby-card { position: relative; z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 10px 0;
              padding: 10px 12px; background: var(--side); color: var(--text); border-radius: 14px; border-left: 4px solid var(--accent);
              box-shadow: 0 6px 24px rgba(0,0,0,.18); flex: none; }
.lobby-card .lc-ic { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; flex: none; }
.lobby-card .lc-ic svg { width: 20px; height: 20px; }
.lobby-card .lc-text { flex: 1; min-width: 150px; cursor: pointer; line-height: 1.3; }
.lobby-card .lc-text b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-card .lc-text small { display: block; color: var(--muted); font-size: .84rem; }
.lobby-card .lc-btns { display: flex; gap: 8px; margin-left: auto; }
.meet-ic { color: var(--accent); display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.meet-ic svg { width: 16px; height: 16px; }
.meet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 14px; background: color-mix(in srgb, var(--accent) 12%, var(--head)); font-size: .88rem; position: relative; }
.meet-bar .mb-text { flex: 1; min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-bar .mb-text small { display: block; color: var(--muted); white-space: normal; }
/* гостей может быть много: список выпадает поверх ленты и прокручивается, место под сообщения не съедает */
.meet-lobby { position: absolute; top: calc(100% + 4px); right: 10px; width: min(380px, calc(100% - 20px)); max-height: min(60vh, 420px); overflow-y: auto;
              z-index: 12; background: var(--side); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.22); padding: 6px; display: grid; gap: 2px; }
.meet-lobby .lempty { color: var(--muted); padding: 8px 10px; }
.meet-lobby .lhead { color: var(--muted); font-size: .8rem; font-weight: 600; padding: 6px 10px 2px; }
.meet-lobby .lrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 8px; }
@media (hover: hover) { .meet-lobby .lrow:hover { background: var(--hover); } }
.meet-lobby .lrow span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-link { word-break: break-all; background: var(--hover); border-radius: 10px; padding: 10px 12px; font-size: .9rem; -webkit-user-select: all; user-select: all; }
#guest .note { font-size: .82rem; color: var(--muted); margin: 18px 0 0; }
#guest .gstate { margin: 0 0 14px; line-height: 1.45; }
#guest .gbtns { display: grid; gap: 8px; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gbar .gdot { animation: none; } }
.call-head { display: flex; align-items: center; gap: 8px; }
.call-head .call-top { flex: 1; }
.call-head .cbtn { width: 44px; height: 44px; }
.call-head .cbtn svg { width: 22px; height: 22px; }
.call-head .spacer { width: 44px; }
.out-menu { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 8; background: #24313f; border-radius: 14px; padding: 6px; min-width: 240px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.out-menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; color: #fff; text-align: left; }
.out-menu button.on { background: rgba(255,255,255,.12); }
@media (hover: hover) { .out-menu button:hover { background: rgba(255,255,255,.12); } }
.out-menu button.on::after { content: "✓"; margin-left: auto; color: var(--ok); }
/* реакции в звонке: меню, рука на плитке, всплывающие смайлики */
.react-menu { min-width: 0; width: min(330px, calc(100vw - 24px)); }
.react-menu .rm-ico { font-size: 1.3rem; line-height: 1; }
.react-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); margin: 4px 0; }
.out-menu .react-grid button { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 2px; font-size: .68rem; color: rgba(255,255,255,.75); text-align: center; line-height: 1.15; }
.react-grid button b { font-size: 1.7rem; line-height: 1; font-weight: normal; }
.tile .hand { font-size: 1.05rem; margin-right: 4px; }
.tile.hand-up { box-shadow: inset 0 0 0 3px #f5b83d; }
.react-layer { position: absolute; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
.react-fly { position: absolute; bottom: 120px; display: flex; flex-direction: column; align-items: center; animation: reactFly 3.2s cubic-bezier(.2, .7, .3, 1) forwards; }
.react-fly b { font-size: 48px; line-height: 1; font-weight: normal; }
.react-fly.mini b { font-size: 30px; }
.react-fly small { margin-top: 4px; font-size: .74rem; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
@keyframes reactFly {
  0% { transform: translate(0, 30px) scale(.5); opacity: 0; }
  12% { transform: translate(0, 0) scale(1.15); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), -52vh) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .react-fly { animation-duration: 2.2s; } }
@media (max-width: 420px) { #callView .controls { gap: 9px; } #callView .controls .cbtn { width: 52px; height: 52px; } }
/* субтитры с переводом в звонке: окно над кнопками со всеми фразами звонка (прокрутка), «Больше» — выше */
.cc-box { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 7; width: min(720px, calc(100% - 24px));
          max-height: 34vh; display: flex; flex-direction: column; background: rgba(0,0,0,.62); color: #fff; border-radius: 14px;
          -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: uiFade .2s; }
.cc-box.big { max-height: 62vh; }
/* рейтинг «кто больше говорит» — под шапкой звонка справа */
.talk-box { position: absolute; top: calc(env(safe-area-inset-top) + 70px); right: 12px; z-index: 7; width: min(320px, calc(100% - 24px));
            max-height: 50vh; display: flex; flex-direction: column; background: rgba(0,0,0,.62); color: #fff; border-radius: 14px;
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: uiFade .2s; }
.talk-list { overflow-y: auto; padding: 4px 12px 10px; }
.talk-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 8px; align-items: center; padding: 5px 0; font-size: .88rem; }
.talk-row .tr-place { text-align: center; font-size: .95rem; color: rgba(255,255,255,.6); }
.talk-row .tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-row .tr-time { color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; font-size: .82rem; }
.talk-row .tr-bar { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.talk-row .tr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ok); transition: width .5s; }
.talk-row.now .tr-name::after { content: " 🎙"; }
.talk-empty { padding: 8px 0 4px; font-size: .85rem; color: rgba(255,255,255,.65); }
.cc-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px 4px 14px; font-size: .78rem; color: rgba(255,255,255,.7); }
.cc-head span { flex: 1; }
.cc-head button { color: #fff; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.13); font-size: .78rem; }
.cc-list { overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 7px; }
.cc-list:empty::before { content: attr(data-empty); color: rgba(255,255,255,.55); font-size: .9rem; }
.cc-line { font-size: 1.05rem; line-height: 1.4; cursor: pointer; animation: uiFade .2s; }
.cc-line.old { color: rgba(255,255,255,.78); }
.cc-line b { color: #9ecbff; font-weight: 600; margin-right: 6px; }
.cc-line .cc-orig { display: block; font-size: .85rem; color: rgba(255,255,255,.6); margin-top: 2px; }
#ccBtn.on { background: color-mix(in srgb, var(--accent) 70%, transparent); }
/* на компьютере входящий звонок — карточка в углу, а не весь экран */
@media (min-width: 761px) {
  .overlay.incoming { inset: auto 22px 22px auto; width: 340px; border-radius: 22px; padding: 22px 20px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.45); gap: 8px; }
  .overlay.incoming .pulse { transform: scale(.75); margin: 0 auto; }
  .overlay.incoming .controls { gap: 60px; padding: 12px 0 0; }
  .overlay.incoming .cname { font-size: 1.25rem; }
}
.invite-code { font-size: 2.2rem; font-weight: 700; letter-spacing: .1em; text-align: center; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.seg { display: flex; background: var(--hover); border-radius: 11px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 8px 6px; border-radius: 9px; font-size: .9rem; color: var(--text); }
.seg button.on { background: var(--side); box-shadow: 0 1px 3px rgba(0,0,0,.15); font-weight: 600; color: var(--accent); }
/* значок группы поверх фото группы */
.avatar { position: relative; }
.gbadge { position: absolute; right: -2px; bottom: -2px; width: 48%; height: 48%; min-width: 20px; min-height: 20px; right: -3px; bottom: -3px; border-radius: 50%;
          background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--side); }
.gbadge svg { width: 62% !important; height: 62% !important; stroke-width: 2.4; }
.item.active .gbadge { border-color: var(--active); }
/* подтверждение входа и блокировка: полноэкранные панели */
/* экраны поверх приложения (подтверждение входа, блокировка, код): высота — видимая часть над клавиатурой,
   содержимое по центру через margin: auto — длинное не обрезается сверху, а прокручивается */
.gate { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%); z-index: 44; background: var(--side);
        display: flex; padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px); overflow-y: auto; }
.gate-box { width: 100%; max-width: 400px; text-align: center; margin: auto; }
body.kb-open .gate { padding-top: 12px; padding-bottom: 12px; }
body.kb-open .gate .gate-icon { display: none; } /* клавиатура открыта — компактнее */
body.kb-open .gate-box h2 { margin-top: 0; font-size: 1.2rem; }
body.kb-open .gate-box p { font-size: .88rem; margin-bottom: 8px; }
body.kb-open .gate .big-code { font-size: 1.9rem; margin: 2px 0 10px; }
.gate-box h2 { margin: 14px 0 8px; font-size: 1.4rem; }
.gate-box p { color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.gate-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin: 0 auto; }
.gate-icon svg { width: 36px; height: 36px; }
.big-code { font-size: 2.4rem; font-weight: 700; letter-spacing: .1em; margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.gate-actions { display: grid; gap: 8px; margin-top: 10px; }
.link-danger { color: var(--danger); font-size: .88rem; margin-top: 18px; }
#lockView { z-index: 46; }
.pin-dots { font-size: 1.6rem; letter-spacing: .45em; margin: 18px 0 6px; color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; margin: 18px 0 8px; }
.pin-pad button { width: 72px; height: 72px; border-radius: 50%; background: var(--hover); font-size: 1.6rem; font-weight: 600; }
.pin-pad button:active { background: var(--line); }
.key-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--danger) 14%, var(--head)); font-size: .88rem; }
.key-banner span { flex: 1; }
.key-banner button { background: var(--danger); color: #fff; border-radius: 10px; padding: 7px 12px; font-weight: 600; flex: none; }
.chat-head { position: relative; }
.chat-menu { position: absolute; right: 8px; top: 54px; z-index: 20; background: var(--side); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.2); padding: 6px; min-width: 240px; }
.chat-menu button.danger { color: var(--danger); }
.chat-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; }
@media (hover: hover) { .chat-menu button:hover { background: var(--hover); } }
.chat-menu svg { width: 20px; height: 20px; color: var(--muted); }
.chat-menu button.danger svg { color: var(--danger); }
.device-item { cursor: default; padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0; flex-wrap: wrap; }
@media (hover: hover) { .device-item:hover { background: none; } }
.dev-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--hover); color: var(--accent); display: grid; place-items: center; flex: none; }
.dev-ic.archive { color: var(--ok); }
.dev-acts { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.device-item { flex-wrap: wrap; row-gap: 6px; }
.device-item .item-main { flex: 1 1 140px; min-width: 0; }
.device-item .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warn-text { color: var(--danger) !important; }
.recovery-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-align: center;
                 background: var(--hover); border-radius: 12px; padding: 14px; word-break: break-all; margin: 8px 0 12px; user-select: all; }
.check-row { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--text); margin: 10px 0 0; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.set-row select { font: inherit; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--input); color: var(--text);
                  min-width: 0; max-width: 60%; text-overflow: ellipsis; } /* длинный пункт не выталкивает список за край карточки */
.progress-toast { bottom: 80px; }
/* переключатель как в iOS */
.set-row input[type=checkbox].switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px;
               background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .2s; margin: 0; }
.set-row input[type=checkbox].switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
                      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.2, .8, .3, 1), width .2s; }
.set-row input[type=checkbox].switch:checked { background: var(--ok); }
.set-row input[type=checkbox].switch:checked::after { transform: translateX(20px); }
/* пока палец на переключателе, ручка вытягивается в сторону хода, как в iOS */
.set-row input[type=checkbox].switch:active:not(:disabled)::after { width: 30px; }
.set-row input[type=checkbox].switch:checked:active:not(:disabled)::after { transform: translateX(14px); }
.set-row input[type=checkbox].switch:disabled { opacity: .45; cursor: default; }
#pinSheet { z-index: 47; }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.text-size { margin-top: 14px; }
.ts-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ts-head small { color: var(--muted); }
.ts-row { display: flex; align-items: center; gap: 12px; }
.ts-row input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
.ts-row span { color: var(--muted); font-weight: 600; line-height: 1; }
.ts-preview { margin: 12px 0 6px; padding: 12px 10px; border-radius: 14px; display: flex; flex-direction: column;
              background-color: var(--chat-bg); background-image: radial-gradient(var(--dots) 1.2px, transparent 1.3px); background-size: 22px 22px; }
.ts-preview .msg { max-width: 85%; }
/* панели «Файлы и фото» и «Поиск» поверх переписки */
.chat { position: relative; }
.side-panel { position: absolute; inset: 0; z-index: 16; background: var(--side); display: flex; flex-direction: column; }
.side-panel .panel-head { gap: 8px; }
.side-panel .panel-head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-panel .panel-head .field { flex: 1; }
.panel-tools { padding: 0 12px 10px; display: grid; gap: 8px; }
.files-list { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.files-list.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; align-content: start; }
/* «Файлы и фото» — окно поверх переписки: фото и видео превью, файлы — значком, по месяцам */
.files-pop { position: absolute; inset: 0; z-index: 16; display: flex; justify-content: center; align-items: flex-start;
             padding: 66px 14px 14px; background: rgba(0,0,0,.28); }
.files-pop:not(.hidden) { animation: uiFade .16s; }
.files-card { width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--side);
              border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.3); animation: uiPop .18s cubic-bezier(.2, .8, .3, 1); transform-origin: top center; }
.files-card .panel-head { min-height: 52px; padding: 8px 8px 8px 16px; }
.files-card .panel-head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .files-pop { padding: 60px 6px 6px; } }
.files-month { grid-column: 1 / -1; padding: 10px 2px 2px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.files-month:first-child { padding-top: 2px; }
.media-tile, .file-tile { position: relative; overflow: hidden; border-radius: 10px; }
.media-tile.video.thumb { background-size: cover; background-position: center; }
.media-tile.video.thumb svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: rgba(0,0,0,.45); }
.file-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
             background: var(--hover); color: var(--text); text-align: center; }
.file-tile .file-ext { width: 40px; height: 40px; border-radius: 9px; font-size: .66rem; }
.file-tile .ft-name { max-width: 100%; font-size: .74rem; line-height: 1.2; overflow: hidden; word-break: break-word;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.file-tile .ft-size { font-size: .68rem; color: var(--muted); }
.file-tile.gone, .media-tile.gone { opacity: .5; }
@media (hover: hover) { .file-tile:hover, .media-tile:hover { filter: brightness(.96); } }
@media (prefers-reduced-motion: reduce) { .files-pop:not(.hidden), .files-card { animation: none; } }
.media-grid .empty { grid-column: 1 / -1; }
.media-tile { aspect-ratio: 1; background-color: var(--hover); background-size: cover; background-position: center; border-radius: 6px; color: var(--muted); font-size: .8rem; }
.media-tile.gone { display: grid; place-items: center; }
.file-ext { width: 44px; height: 44px; border-radius: 10px; color: #fff; font-weight: 700; font-size: .7rem; display: grid; place-items: center; flex: none; letter-spacing: .02em; }
.file-acts { display: flex; flex: none; }
.file-acts .icon-btn { width: 38px; height: 38px; }
.icon-btn.danger-ic { color: var(--danger); }
.panel-foot { padding: 8px 14px; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); }
.search-info { padding: 0 18px 6px; color: var(--muted); font-size: .85rem; min-height: 1.2em; }
.search-hit { width: 100%; text-align: left; }
/* «Поиск по чату» — окно поверх переписки, найденное — карточками, как в «Избранном» */
.files-card .pop-search { flex: 1; min-width: 0; margin-right: 4px; }
.files-card .search-info { padding: 0 16px 8px; }
.star-card.search-hit { display: block; color: var(--text); font: inherit; }
.star-card .sc-text mark { background: color-mix(in srgb, #f5b301 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.msg.starred .meta::before { content: "★"; color: #f5b301; font-size: .95em; margin-right: 1px; }
.msg.note-card, .msg.mine.note-card { align-self: center; width: min(100%, 720px); max-width: 100%; background: var(--theirs); color: inherit;
          border-radius: 12px; border-left: 3px solid #f0a03c; padding: 8px 12px; }
.msg.note-card .meta { color: var(--muted); }
.msg.note-card .meta .tick { display: none; }
.note-src { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); margin-bottom: 4px; max-width: 100%;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-src svg { width: 15px; height: 15px; flex: none; }
button.note-src { background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; cursor: pointer; color: var(--accent); text-align: left; }
@media (hover: hover) { button.note-src:hover span { text-decoration: underline; } }
.note-src span { overflow: hidden; text-overflow: ellipsis; }
.note-c { margin-top: 6px; padding: 5px 9px; border-left: 3px solid var(--accent); border-radius: 6px;
          background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .92em; white-space: pre-wrap; overflow-wrap: anywhere; }
#noteDialog textarea { width: 100%; resize: vertical; font: inherit; }
#styleDialog textarea { width: 100%; resize: vertical; font: inherit; }
.style-pre { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.style-pre button { padding: 5px 11px; border-radius: 999px; background: var(--hover); font-size: .86rem; }
#composer.styling textarea { opacity: .55; }
.note-prev { color: var(--muted); font-size: .9rem; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere;
             max-height: 4.5em; overflow: hidden; }
.stars-empty { padding: 18px; color: var(--muted); line-height: 1.5; font-size: .92rem; }
.star-hit { cursor: pointer; }
/* «Избранные сообщения» — окно поверх переписки, как «Файлы и фото»: каждое сообщение — карточкой */
.files-card .panel-head .stars-count { flex: none; color: var(--muted); font-size: .85rem; }
.stars-list { flex: 1; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 2px 12px 14px; }
.star-card { background: var(--hover); border-radius: 12px; padding: 9px 10px 10px 12px; cursor: pointer; }
@media (hover: hover) { .star-card:hover { filter: brightness(.98); } }
.sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sc-head .sc-name { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-head .star-off { width: 30px; height: 30px; margin: -4px -4px -4px 0; }
.sc-head .star-off svg { width: 18px; height: 18px; }
.sc-text { font-size: .93rem; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
           display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.star-card .star-thumbs { margin-top: 8px; }
.star-thumbs { display: flex; gap: 4px; flex: none; }
.star-thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--line) center / cover no-repeat; flex: none; position: relative; }
.star-thumb .att-play { transform: scale(.6); }
.star-off { flex: none; color: #f5b301; }
.star-off svg { fill: currentColor; }
.snippet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
mark { background: color-mix(in srgb, var(--accent) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
/* закреплённое сообщение: полоска над лентой; нажатие — к сообщению и к следующему закреплённому */
.pin-bar { display: flex; align-items: center; gap: 10px; padding: 5px 4px 5px 14px; background: var(--head); border-bottom: 1px solid var(--line); cursor: pointer; flex: none; }
.pin-bar .pb-line { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; }
.pin-bar .pb-text { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.3; }
.pin-bar .pb-text b { display: block; color: var(--accent); font-size: .8rem; }
.pin-bar .pb-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-bar .icon-btn { width: 36px; height: 36px; }
.pin-bar .icon-btn svg { width: 18px; height: 18px; }
/* кнопка «вниз»: видна, когда ленту отлистали вверх; цифра — новые сообщения ниже края экрана */
.to-bottom { position: absolute; right: 14px; bottom: var(--tb-bottom, 76px); z-index: 6; width: 44px; height: 44px; border-radius: 50%;
             background: var(--side); color: var(--muted); box-shadow: 0 2px 10px rgba(0,0,0,.22); display: grid; place-items: center; }
@media (hover: hover) { .to-bottom:hover { color: var(--accent); } }
.to-bottom .tb-count { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff;
                       font-size: .72rem; font-weight: 700; line-height: 1.35; min-width: 20px; padding: 1px 6px; border-radius: 10px; text-align: center; }
/* плашка перед первым непрочитанным при открытии чата */
.unread-mark { align-self: stretch; text-align: center; margin: 10px 0 2px; padding: 4px 10px; border-radius: 10px; font-size: .82rem; font-weight: 600;
               color: var(--accent); background: color-mix(in srgb, var(--side) 82%, transparent); }
.msg.flash { animation: flash 2.2s ease; }
@keyframes flash { 0%, 45% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--bubble-shadow); } }
.lightbox { position: fixed; inset: 0; z-index: 48; background: rgba(8,12,17,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            display: flex; flex-direction: column; color: #fff; animation: lbIn .16s ease; }
@keyframes lbIn { from { opacity: 0; } }
.lb-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px 14px; }
.lb-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lb-who > div { min-width: 0; }
.lb-who b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who small { display: block; color: rgba(255,255,255,.6); font-size: .8rem; }
.lb-count { color: rgba(255,255,255,.7); font-size: .88rem; white-space: nowrap; }
.lb-top .icon-btn { color: #fff; }
@media (hover: hover) { .lb-top .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; } }
.lb-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 72px; }
.lb-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-media img, .lb-media video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.55); background: #000; }
.lb-media video { width: min(100%, 1100px); }
/* увеличение фото: двойной клик или касание, колесо, два пальца; увеличенное перетаскивается */
.lb-media img { cursor: zoom-in; touch-action: none; -webkit-user-drag: none; user-select: none; will-change: transform; }
.lightbox.zoomed .lb-stage { overflow: hidden; } /* верхняя полоса с «Закрыть» и подпись остаются видны */
.lightbox.zoomed .lb-media img { cursor: grab; box-shadow: none; border-radius: 0; }
.lightbox.zoomed .lb-media img.dragging { cursor: grabbing; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff;
          display: grid; place-items: center; }
@media (hover: hover) { .lb-nav:hover { background: rgba(255,255,255,.2); } }
.lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; }
.lb-nav svg { width: 26px; height: 26px; stroke-width: 2.2; }
.lb-spin { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
           animation: lbSpin .8s linear infinite; pointer-events: none; }
@keyframes lbSpin { to { transform: rotate(360deg); } }
.lb-caption { padding: 10px 16px calc(env(safe-area-inset-bottom) + 14px); text-align: center; font-size: .95rem; max-height: 22vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .lb-stage { padding: 0 4px; } .lb-nav { display: none; } .lb-media img, .lb-media video { border-radius: 0; } }
/* видео в сообщении: обложка с кнопкой, нажатие открывает плеер */
.vtile { position: relative; display: block; width: min(320px, 64vw); max-height: 360px; aspect-ratio: var(--ar, 16 / 9); border-radius: 10px; margin-top: 2px;
         background: #10171f center / cover no-repeat; cursor: pointer; overflow: hidden; }
.vtile .att-play { width: 52px; height: 52px; }
.vtile .att-play svg { width: 22px; height: 22px; margin-left: 4px; }
.vtile .al-dur { left: 8px; bottom: 8px; }
@media (hover: hover) { .vtile:hover .att-play { background: var(--accent); } }
.drop-zone { position: absolute; inset: 10px; z-index: 17; border: 3px dashed var(--accent); border-radius: 18px;
             background: color-mix(in srgb, var(--accent) 14%, var(--side)); display: grid; place-items: center; text-align: center;
             pointer-events: none; padding: 20px; }
.drop-zone .dz-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin: 0 auto 12px; }
.drop-zone .dz-icon svg { width: 36px; height: 36px; }
.drop-zone b { font-size: 1.2rem; display: block; margin-bottom: 4px; }
.drop-zone span { color: var(--muted); }
@media (max-width: 760px) { .chat-head .icon-btn { width: 38px; height: 38px; } .chat-head { gap: 0; padding-left: 4px; } }
/* видео и аудио в переписке */
.media-box { min-width: 220px; max-width: 100%; }
.media-box video { display: block; width: 100%; max-height: 360px; border-radius: 10px; background: #000; margin-top: 2px; }
.media-box audio { display: block; width: 260px; max-width: 100%; margin: 4px 0 2px; }
.play-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 4px 0; }
.play-card .play { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.play-card .play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.media-tile.video { background: #1b2633; color: #fff; display: grid; place-items: center; position: relative; }
.media-tile.video svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.media-tile.video small { position: absolute; left: 6px; right: 6px; bottom: 5px; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
/* закреплённые чаты */
.pin-ic { color: var(--muted); display: inline-flex; flex: none; }
.pin-ic svg { width: 15px; height: 15px; transform: rotate(40deg); }
.item.active .pin-ic { color: rgba(255,255,255,.85); }
.list-ctx { position: fixed; z-index: 40; background: var(--side); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.22); padding: 6px; min-width: 210px; }
.list-ctx button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; }
@media (hover: hover) { .list-ctx button:hover { background: var(--hover); } }
.list-ctx svg { width: 19px; height: 19px; color: var(--muted); }
/* «без звука» */
#muteMenu { z-index: 42; min-width: 200px; }
#muteMenu .mm-head { padding: 8px 12px 4px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.mute-ic { color: var(--muted); display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.mute-ic svg { width: 14px; height: 14px; }
.item.active .mute-ic { color: rgba(255,255,255,.8); }
.badge.muted { background: var(--muted); }
.tile .tname { display: inline-flex; align-items: center; gap: 5px; }
.tile .mic-off { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); }
.tile .mic-off svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.4; }
.tile .tmenu { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -5px; border-radius: 50%; color: #fff; flex: none; }
.tile .tmenu:focus-visible { background: rgba(255,255,255,.18); }
@media (hover: hover) { .tile .tmenu:hover { background: rgba(255,255,255,.18); } }
.tile .tmenu svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
/* на весь экран: кнопка на плитке с чужим экраном; двойной клик/касание — на любой плитке с видео */
.tile .tfull { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.tile .tfull svg { width: 20px; height: 20px; }
@media (hover: hover) { .tile .tfull:hover { background: rgba(0,0,0,.72); } }
/* на весь экран уходит окно звонка: плитка — на всё место, снизу только кнопки звонка */
#callView.tile-full { padding: 0 0 env(safe-area-inset-bottom); background: #000; }
#callView.tile-full .call-head, #callView.tile-full .call-wait { display: none; }
#callView.tile-full .call-grid { display: block; overflow: hidden; }
#callView.tile-full .call-grid > .tile:not(.full) { display: none; }
#callView.tile-full .call-grid .tile.full { position: absolute; inset: 0; width: auto; height: auto; max-width: none; aspect-ratio: auto; min-height: 0; z-index: auto; border-radius: 0; background: #000; box-shadow: none; }
#callView.tile-full .tile.full video { object-fit: contain; transform-origin: 50% 50%; }
#callView.tile-full .tile.full { touch-action: none; } /* щипок и перетаскивание — наши, страница не масштабируется */
#callView.tile-full .tile.full.zoomed video { cursor: grab; }
#callView.tile-full .tile.full.zoomed video.dragging { cursor: grabbing; }
.call-grid .tile.screen { touch-action: pan-x pan-y; } /* щипок по экрану собеседника — развернуть и увеличить его */
#callView.tile-full .controls { padding: 10px 0; }
.call-grid.tiny .tile .tmenu { width: 18px; height: 18px; margin-left: -3px; }
.peer-menu { position: fixed; z-index: 9; background: #24313f; color: #fff; border-radius: 14px; padding: 6px; width: 270px; max-width: calc(100vw - 16px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.peer-menu .pm-head { padding: 8px 12px 6px; font-weight: 600; overflow-wrap: anywhere; }
.peer-menu .pm-head small { display: block; font-weight: 400; color: #9fb0c0; margin-top: 1px; }
.peer-menu .pm-vol { padding: 4px 12px 10px; }
.peer-menu .pm-row { display: flex; justify-content: space-between; font-size: .9rem; color: #c9d4de; margin-bottom: 6px; }
.peer-menu .pm-vol input { width: 100%; accent-color: #5aa7f2; }
.peer-menu .pm-vol small { display: block; color: #9fb0c0; font-size: .78rem; margin-top: 4px; }
.peer-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 9px; color: #fff; font-weight: 600; }
@media (hover: hover) { .peer-menu button:hover:not(:disabled) { background: rgba(255,255,255,.1); } }
.peer-menu button:disabled { opacity: .5; }
.peer-menu button svg { width: 19px; height: 19px; flex: none; }
.peer-menu button.danger { color: #ff6b6b; }
.hang-menu.bot-menu { top: 64px; bottom: auto; left: auto; right: 12px; transform: none; }
.msg .who.bot { font-style: italic; }
.inv-label { font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }
.inv-h { font-size: .9rem; color: var(--accent); margin: 20px 0 4px; }
.inv-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.inv-item .inv-code { font-weight: 700; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.inv-item .item-main { min-width: 0; }
/* групповой звонок: всё помещается над кнопками, кнопки всегда видны */
#callView .controls { flex: none; }
.call-grid.fit .tile { min-height: 0; }
.call-grid.scroll { overflow-y: auto; align-content: start; -webkit-overflow-scrolling: touch; }
.call-grid.dense .tile .avatar { width: 72px !important; height: 72px !important; font-size: 1.6rem !important; }
.call-grid.tiny .tile .avatar { width: 50px !important; height: 50px !important; font-size: 1.15rem !important; }
.call-grid.tiny .tile .tname { font-size: .74rem; left: 6px; bottom: 5px; padding: 2px 7px; max-width: calc(100% - 12px); }
.call-grid.tiny .tile .tname, .call-grid.dense .tile .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-grid.tiny .tile .mic-off { width: 16px; height: 16px; flex: none; }
.call-grid.tiny .tile .mic-off svg { width: 10px; height: 10px; }
/* отметки отправки: ✓ отправлено, ✓✓ доставлено, синие ✓✓ прочитано */
.msg .meta .tick { display: inline-flex; }
.msg .meta .tick svg.dbl { width: 20px; stroke-width: 2.2; }
/* в тёмной теме своё облачко синее: доставлено — серые, прочитано — яркие голубые, иначе не различить */
.msg .meta .tick.read { color: var(--tick-read); }
.msg.mine .meta .tick { color: var(--tick-mine); }
.msg.mine .meta .tick.read { color: var(--tick-mine-read); }
.receipt-list { list-style: none; margin: 0; padding: 0; }
.receipt-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.receipt-h { font-size: .85rem; color: var(--muted); margin: 14px 0 2px; display: flex; align-items: center; gap: 6px; }
.receipt-h svg { width: 18px; height: 18px; }
.receipt-h.read { color: var(--tick-read); }
/* группа: мини-аватарки тех, кто дочитал до этого места */
.av-18 { width: 18px; height: 18px; font-size: .5rem; font-weight: 700; }
.seen-row { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin: 1px 8px 5px; cursor: pointer; align-self: flex-end; }
.seen-row .avatar { box-shadow: 0 0 0 2px var(--chat-bg); transition: transform .15s; }
@media (hover: hover) { .seen-row:hover .avatar { transform: scale(1.15); } }
.seen-row .more { font-size: .7rem; color: var(--muted); margin-left: 3px; }
/* запись звонка: кнопка в шапке и метка «Идёт запись» для всех участников */
#recBtn .rec-core { fill: currentColor; stroke: none; }
#recBtn.on { background: #e5484d; color: #fff; }
.rec-banner { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px;
              background: rgba(20,28,38,.88); color: #fff; padding: 6px 12px; border-radius: 16px; font-size: .85rem; white-space: nowrap; max-width: 92%; }
.rec-banner span:last-child { overflow: hidden; text-overflow: ellipsis; }
.recb-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; flex: none; animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity: .35; } }
.alone-banner { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); z-index: 6; background: rgba(36,49,63,.96);
                border-radius: 14px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.4);
                font-size: .92rem; width: min(440px, calc(100% - 28px)); }
.alone-banner span { flex: 1; line-height: 1.35; }
.alone-banner button { background: #fff; color: #0d141c; border-radius: 10px; padding: 7px 12px; font-weight: 700; flex: none; }
.hang-menu { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 8; background: #24313f; border-radius: 14px; padding: 6px; min-width: 250px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.hang-menu button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 9px; color: #fff; font-weight: 600; }
@media (hover: hover) { .hang-menu button:hover { background: rgba(255,255,255,.1); } }
.hang-menu button.danger { color: #ff6b6b; }
.hang-menu small { display: block; font-weight: 400; color: #9fb0c0; margin-top: 2px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(20,28,38,.92); color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 60; font-size: .92rem; max-width: 90%; text-align: center; pointer-events: none; } /* не закрывает кнопки под собой (например, микрофон в звонке) */

@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .side-resize { display: none; }
  #app.in-chat .side { display: none; }
  #app:not(.in-chat) .chat { display: none; }
  /* свайп вправо по чату — назад: под чатом виден список, чуть сдвинутый и затемнённый */
  #app.swipe-back { position: relative; }
  #app.swipe-back .side { display: flex; position: absolute; inset: 0; transform: translateX(calc((var(--bk, 0) - 1) * 28%)); }
  #app.swipe-back .side::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: rgba(0,0,0,calc(.3 - .3 * var(--bk, 0))); }
  #app.swipe-back .chat { z-index: 1; box-shadow: -6px 0 24px rgba(0,0,0,.28); }
  #app.swipe-release .side, #app.swipe-release .side::after { transition: transform var(--rel, .2s) cubic-bezier(.2, .8, .3, 1), background var(--rel, .2s) ease-out; }
  #back { display: grid; }
  #messages { padding-top: 8px; padding-bottom: 12px; --pl: 4px; }
  .msg { max-width: 86%; }
  .controls { gap: 16px; }
}
/* телефон: список чатов и фильтры крупнее (чат и меню — как есть), пальцем попадать и читать удобнее */
@media (max-width: 760px) {
  .chat-filters { gap: 8px; padding: 4px 10px 10px; }
  .chat-filters button { font-size: .92rem; padding: 7px 14px; border-radius: 18px; }
  .chat-filters .f-seg { border-radius: 18px; }
  .chat-filters .f-seg button { padding: 6px 13px; }
  .chat-filters .f-seg svg { width: 20px; height: 20px; }
  .chat-filters .f-list.compact { padding: 5px 6px; }
  .chat-filters .f-list.compact .lst-tag { width: 26px; height: 26px; font-size: .86rem; border-radius: 8px; }
  .chat-filters .f-sep { height: 22px; }
  #chatList .item { gap: 12px; padding: 8px 10px; }
  #chatList .item .av-42 { width: 46px; height: 46px; font-size: 1.04rem; }
  #chatList .item-name { font-size: 1.12rem; }
  #chatList .preview { font-size: .94rem; }
  #chatList .ltime { font-size: .84rem; }
}