:root, [data-theme="dark"] {
  --primary: #96bf32; --primary-dark: #7a9e28; --primary-light: #a8d13c;
  --bg: #17212b; --bg-sidebar: #0e1621; --bg-chat: #0e1621;
  --bg-input: #242f3d; --bg-msg-out: #2b5278; --bg-msg-in: #182533;
  --bg-hover: #1e2c3a; --bg-active: #2b5278; --bg-panel: #0e1621;
  --bg-modal: #17212b; --bg-card: #1e2c3a;
  --text: #f5f5f5; --text-secondary: #708499; --text-muted: #546778;
  --border: #1e2c3a; --border-light: #242f3d;
  --shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="light"] {
  --bg: #ffffff; --bg-sidebar: #f0f2f5; --bg-chat: #ffffff;
  --bg-input: #f0f2f5; --bg-msg-out: #d9fdd3; --bg-msg-in: #f0f2f5;
  --bg-hover: #e5e7eb; --bg-active: #d1e7ff; --bg-panel: #f0f2f5;
  --bg-modal: #ffffff; --bg-card: #ffffff;
  --text: #111b21; --text-secondary: #667781; --text-muted: #8696a0;
  --border: #e5e7eb; --border-light: #d1d5db;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="green"] {
  --bg: #0a1a0a; --bg-sidebar: #0d1f0d; --bg-chat: #0a1a0a;
  --bg-input: #1a2e1a; --bg-msg-out: #2d5a1e; --bg-msg-in: #1a2e1a;
  --bg-hover: #1e3a1e; --bg-active: #2d5a1e; --bg-panel: #0d1f0d;
  --bg-modal: #0a1a0a; --bg-card: #1e3a1e;
  --text: #e8f5e9; --text-secondary: #81c784; --text-muted: #4caf50;
  --border: #1e3a1e; --border-light: #2d5a1e;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; height: 100dvh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; }
/* v64: выделение вырублено по всему приложению (фото/видео/звонки/чат) — не мешает
   тапам, свайпам и удержаниям. Ввод текста — исключение, там выделение нужно. */
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior-y: none; }
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
img, video { -webkit-touch-callout: none; }
/* Mobile 0ms tap delay, instant touch response, no tap flash */
button, a, .chat-item, .icon-btn, .hamburger-item, .settings-nav-item, [role="button"], input[type="button"], input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Mobile viewport fix: dvh accounts for browser chrome, safe-area for iPhone notch */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 3px; }

svg use, svg { display: block; }

/* ─── Auth ─────────────────────────────────── */
.auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg, var(--bg-sidebar) 0%, var(--bg) 100%); padding:20px; }
.auth-container { width:100%; max-width:380px; background:var(--bg-panel); border-radius:16px; padding:40px 32px; box-shadow:0 8px 40px rgba(0,0,0,0.3); border:1px solid var(--border); }
.auth-logo { text-align:center; margin-bottom:32px; }
.auth-logo-icon { margin-bottom:12px; }
.auth-logo h1 { font-size:24px; font-weight:700; color:var(--text); }
.auth-subtitle { color:var(--text-secondary); font-size:14px; margin-top:6px; }
.auth-form h2 { font-size:20px; font-weight:600; margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group textarea { width:100%; padding:12px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px; font-family:inherit; outline:none; transition:border-color .15s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--primary); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-error { color:#e53935; font-size:13px; min-height:20px; margin-bottom:8px; }
.btn-primary { width:100%; padding:12px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:8px 16px; font-size:13px; width:auto; }
.auth-switch { text-align:center; margin-top:20px; font-size:14px; color:var(--text-secondary); }

/* ─── Предложение скачать клиент (только на экране входа) ─── */
/* Все цвета — из токенов темы, поэтому блок корректно выглядит и в dark, и в
   light, и в green-оформлении без отдельных правок. */
.apps-offer { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.apps-offer-head { text-align:center; margin-bottom:14px; }
.apps-offer-title { display:block; font-size:14.5px; font-weight:600; color:var(--text); }
.apps-offer-note { display:block; margin-top:4px; font-size:12.5px; color:var(--text-muted); }
.apps-offer-buttons { display:flex; gap:10px; }
.apps-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  background:var(--bg-input); border:1px solid var(--border); color:var(--text);
  transition:border-color .15s, background .15s;
}
.apps-btn:hover { border-color:var(--primary); background:var(--bg-hover); }
.apps-btn svg { color:var(--primary); flex-shrink:0; }
.apps-btn-label { display:flex; flex-direction:column; align-items:flex-start; font-size:13.5px; font-weight:600; line-height:1.25; }
.apps-btn-meta { font-size:11px; font-weight:400; font-style:normal; color:var(--text-muted); }
/* На узком экране телефоне две кнопки в ряд тесны — ставим столбиком. */
@media (max-width:400px) { .apps-offer-buttons { flex-direction:column; } }
.auth-switch a { color:var(--primary); text-decoration:none; font-weight:500; }

/* ─── Messenger ────────────────────────────── */
.messenger { display:flex; height:100vh; height:100dvh; overflow:hidden; }
@supports (height: 100dvh) {
  .messenger { height: 100dvh; }
}

/* ─── Sidebar ──────────────────────────────── */
.sidebar { width:360px; min-width:360px; background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:10; }
.sidebar-header { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); min-height:56px; }
.hamburger-btn { flex-shrink:0; }
.sidebar-title { font-weight:700; font-size:16px; flex:1; color:var(--text); letter-spacing:-0.3px; }
.sidebar-actions { display:flex; gap:2px; }
.icon-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:none; border-radius:50%; color:var(--text-secondary); cursor:pointer; transition:background .15s, color .15s; flex-shrink:0; }
.icon-btn:hover { background:var(--bg-hover); color:var(--text); }
.sidebar-search { display:flex; align-items:center; gap:8px; margin:8px 12px; padding:8px 12px; background:var(--bg-input); border-radius:8px; border:1px solid transparent; transition:border-color .15s; }
.sidebar-search:focus-within { border-color:var(--primary); }
.sidebar-search svg { color:var(--text-muted); flex-shrink:0; }
.sidebar-search input { flex:1; background:none; border:none; color:var(--text); font-size:14px; font-family:inherit; outline:none; }
.sidebar-search input::placeholder { color:var(--text-muted); }
.chat-list { flex:1; overflow-y:auto; }
.chat-list-empty { display:flex; align-items:center; justify-content:center; height:200px; color:var(--text-muted); font-size:14px; }

/* ─── Chat Item ────────────────────────────── */
.chat-item { display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(128,128,128,0.05); }
.chat-item:hover { background:var(--bg-hover); }
.chat-item.active { background:var(--bg-active); }
.chat-item-avatar { position:relative; flex-shrink:0; }
.chat-item-info { flex:1; min-width:0; }
.chat-item-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.chat-item-name { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; margin-right:8px; }
.chat-item-time { font-size:12px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.chat-item-bottom { display:flex; justify-content:space-between; align-items:center; }
.chat-item-preview { font-size:14px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; margin-right:8px; line-height:1.3; }
.chat-item-last { font-size:14px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; margin-right:8px; line-height:1.3; }
.chat-item-sender { color:var(--text-secondary); }
.typing-preview { color:var(--primary); font-style:italic; animation:pulse 1s infinite; }
.chat-item-unread { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; flex-shrink:0; }

/* ─── Avatar ───────────────────────────────── */
.chat-item-avatar { position:relative; flex-shrink:0; }
.avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; flex-shrink:0; overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); position:relative; }
.avatar img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.avatar span { position:relative; z-index:0; }
.avatar-sm { width:40px; height:40px; font-size:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); position:relative; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.avatar-placeholder { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:linear-gradient(135deg,#7a9e28,#2b5278); }
.online-dot { position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%; background:#4caf50; border:2px solid var(--bg-sidebar); z-index:1; }
.chat-item .avatar-sm, .chat-item .avatar { box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* ─── Chat Area ────────────────────────────── */
.chat-area { flex:1; display:flex; flex-direction:column; background:var(--bg-chat); min-width:0; min-height:0; }
.empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); }
.empty-state-icon { margin-bottom:16px; opacity:0.4; }
.empty-state h2 { font-size:24px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.active-chat { flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; position:relative; }
.chat-header { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bg-sidebar); border-bottom:1px solid var(--border); min-height:56px; flex-shrink:0; }
.mobile-back { display:none; }
.chat-header-info { display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer; }
.chat-header-text { min-width:0; }
.chat-header-name { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header-status { font-size:13px; color:var(--text-secondary); }
.chat-header-status.online { color:var(--primary); }
.chat-header-actions { display:flex; gap:2px; }

/* ─── Messages ─────────────────────────────── */
.messages-container { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0; min-height:0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.messages { display:flex; flex-direction:column; gap:2px; padding:0 12%; }
.message-wrapper { display:flex; flex-direction:column; max-width:70%; }
/* Анимация появления — ТОЛЬКО для реально новых сообщений (класс ставит JS).
   Раньше fadeIn висел на всех узлах сразу: любой патч/перерисовка заставляла
   список на ~0.12с «пропадать и возвращаться». */
.message-wrapper.msg-enter { animation:fadeIn .18s ease; }
/* Обновление одного сообщения (реакция/галочки/расшифровка) — без анимации появления,
   иначе список мигает при каждом фоновом рефреше. */
.message-wrapper.no-anim { animation:none !important; }
.message-wrapper.out { align-self:flex-end; align-items:flex-end; }
.message-wrapper.in { align-self:flex-start; align-items:flex-start; }
.message-bubble { padding:7px 11px 6px; border-radius:12px; font-size:14.5px; line-height:1.4; word-break:break-word; white-space:pre-wrap; position:relative; max-width:100%; overflow:hidden; user-select:none; -webkit-user-select:none; }
.message-wrapper.out .message-bubble { background:var(--bg-msg-out); border-bottom-right-radius:4px; }
.message-wrapper.in .message-bubble { background:var(--bg-msg-in); border-bottom-left-radius:4px; }
.message-sender { font-size:13px; font-weight:600; color:var(--primary); margin-bottom:2px; }
.message-text { color:var(--text); }
.message-meta { display:flex; align-items:center; gap:4px; margin-top:2px; justify-content:flex-end; }
.message-time { font-size:11px; color:var(--text-muted); }
.message-time { display:inline-flex; align-items:center; gap:3px; }
.msg-status { display:inline-flex; align-items:center; margin-left:2px; }
.msg-status svg { display:block; }
.msg-status-sending { color:var(--text-muted); opacity:0.5; }
.msg-status-sent { color:var(--text-muted); }
.msg-status-delivered { color:var(--text-muted); }
.msg-status-read { color:#4fc3f7; }
.message-check { color:var(--primary); }
.message-image { max-width:300px; max-height:300px; border-radius:8px; cursor:pointer; display:block; }
.message-video { max-width:300px; max-height:400px; border-radius:8px; display:block; overflow:hidden; }
.message-video video { max-width:100%; max-height:400px; border-radius:8px; display:block; }
.message-video-circle { display:inline-block; margin:2px; max-width:100%; }
.message-video-circle video { width:160px; height:160px; border-radius:50%; object-fit:cover; background:#000; cursor:pointer; border:2px solid var(--primary); display:block; box-shadow:0 0 0 2px rgba(0,0,0,0.28); transition:width .18s ease, height .18s ease, box-shadow .18s ease, border-color .18s ease; }
.message-video-circle video:hover { opacity:0.9; }
/* Разворот кружка по клику: ровно 1.5x (160 -> 240). Кружок остаётся в потоке
   (не absolute) — другие сообщения раздвигаются, а не перекрываются. Пузырь
   отпускает ограничение ширины, но остаётся прижат к СВОЕЙ стенке (align-self
   у .out/.in), поэтому кружок растёт от своей стены внутрь и не вылезает за
   границу контейнера. Развёрнутый кружок получает усиленную рамку (кольцо +
   тень), чтобы «просмотр» читался как отдельный режим, и играет со звуком. */
.message-video-circle.expanded { display:block; max-width:100%; }
.message-video-circle.expanded video { width:min(240px, 72vw); height:min(240px, 72vw); max-width:100%; opacity:1; border-width:3px; box-shadow:0 0 0 3px rgba(150,191,50,0.35), 0 10px 30px rgba(0,0,0,0.45); }
.message-wrapper.circle-expanded { max-width:100%; }
.message-wrapper.circle-expanded .message-bubble { background:transparent; border:none; padding:0; overflow:visible; max-width:100%; }
/* Стикер: рамка ПОДСТРАИВАЕТСЯ под сам стикер, а не наоборот.
   Раньше рамка была фиксированным квадратом 300px, и не-квадратный стикер
   либо обрезался пузырём (у него overflow:hidden), либо висел в пустых полях.
   Теперь размер задаёт медиа (свои пропорции), а рамка лишь обнимает её.
   Пузырь для стикера не рисуем — иначе получается рамка в рамке. */
.message-wrapper.sticker-msg { max-width:100%; }
.message-wrapper.sticker-msg .message-bubble {
  background:transparent;
  border:none;
  padding:0;
  overflow:visible;
  max-width:100%;
}
.message-sticker {
  --sticker-media:340px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  max-width:min(var(--sticker-media), 86vw);
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.message-sticker .sticker-media {
  display:block;
  width:auto;
  height:auto;
  max-width:min(var(--sticker-media), 82vw);
  max-height:min(var(--sticker-media), 82vw);
  object-fit:contain;
  border-radius:0;
  background:transparent;
}
.message-file { display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(128,128,128,0.08); border-radius:8px; color:var(--text); text-decoration:none; transition:background .15s; }
.message-file:hover { background:rgba(128,128,128,0.15); }
.message-file-icon svg { width:28px; height:28px; color:var(--primary); }
.message-file-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.message-file-size { font-size:11px; color:var(--text-muted); }
.message-forwarded { font-size:12px; color:var(--primary); margin-bottom:4px; font-weight:500; }

/* ─── Date separator ───────────────────────── */
.date-separator { display:flex; align-items:center; justify-content:center; padding:12px 0 8px; margin:6px 0; position:relative; z-index:1; clear:both; width:100%; pointer-events:none; }
.date-separator span { background:var(--bg-date-chip, rgba(0,0,0,0.35)); color:var(--text-secondary); font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 1px 3px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06); letter-spacing:0.2px; }

/* ─── Typing ───────────────────────────────── */
.typing-indicator { display:flex; align-items:center; gap:8px; padding:4px 16px 8px; font-size:13px; color:var(--text-secondary); }
.typing-dots { display:flex; gap:3px; }
.typing-dots span { width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:typingBounce 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ─── Chat Input ───────────────────────────── */
.chat-input-area { display:flex !important; align-items:flex-end; gap:8px; padding:10px 12px; background:var(--bg-sidebar); border-top:1px solid var(--border); flex-shrink:0; position:relative; padding-bottom: max(10px, env(safe-area-inset-bottom)); min-height:56px; visibility:visible !important; opacity:1 !important; }
.chat-input-area[style*="display: none"], .chat-input-area[style*="display:none"] { display:flex !important; }
.chat-input-wrapper { flex:1; background:var(--bg-input); border-radius:8px; border:1px solid var(--border); transition:border-color .15s; display:flex; align-items:flex-end; min-width:0; min-height:44px; }
.chat-input-wrapper:focus-within { border-color:var(--primary); }
.chat-input-wrapper textarea { flex:1; background:none; border:none; color:var(--text); font-size:16px; font-family:inherit; padding:10px 14px; resize:none; outline:none; max-height:120px; line-height:1.4; min-height:24px; -webkit-appearance:none; }
.chat-input-wrapper textarea::placeholder { color:var(--text-muted); }
.send-btn { color:var(--primary); }
.send-btn:hover { background:rgba(150,191,50,0.15); }

/* ─── Sticker Panel ────────────────────────── */
/* Планировка панели. Сетка, плитки и медиа описаны ОДНАЖДЫ ниже в блоке
   #sticker-panel: раньше те же селекторы всплывали в трёх местах, и стикер
   то обрезался (cover), то висел в чужом фоне — та самая «кривая обводка». */
.sticker-panel { position:absolute; bottom:0; left:0; right:0; height:320px; background:var(--bg-panel); border-top:1px solid var(--border); display:flex; flex-direction:column; z-index:10; box-shadow:0 -4px 20px rgba(0,0,0,0.3); margin-bottom:56px; }
.sticker-panel-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); font-weight:600; font-size:14px; }
.sticker-grid { flex:1; overflow-y:auto; }

/* ─── Hamburger Menu ───────────────────────── */
.hamburger-overlay { position:fixed; inset:0; z-index:50; display:none; }
.hamburger-overlay.open { display:flex; }
.hamburger-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.hamburger-panel { position:absolute; left:0; top:0; bottom:0; width:320px; background:var(--bg-panel); box-shadow:4px 0 24px rgba(0,0,0,0.3); display:flex; flex-direction:column; z-index:1; animation:slideIn .2s ease; }
@keyframes slideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }
.hamburger-header { padding:20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.hamburger-user { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.hamburger-user-info { min-width:0; }
.hamburger-username { font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hamburger-email { font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hamburger-menu { flex:1; overflow-y:auto; padding:8px 0; }
.hamburger-item { display:flex; align-items:center; gap:14px; width:100%; padding:12px 20px; background:none; border:none; color:var(--text); font-size:15px; font-family:inherit; cursor:pointer; transition:background .15s; text-align:left; }
.hamburger-item:hover { background:var(--bg-hover); }
.hamburger-item svg { color:var(--text-secondary); flex-shrink:0; }
.hamburger-item.danger { color:#e53935; }
.hamburger-item.danger svg { color:#e53935; }
.hamburger-divider { height:1px; background:var(--border); margin:8px 16px; }
.app-version { text-align:center; font-size:11px; color:var(--text-muted); padding:10px 0 14px; }

/* ─── Side Panels ──────────────────────────── */
.side-panel { position:absolute; top:0; bottom:0; left:0; width:360px; max-width:100%; background:var(--bg-panel); border-right:1px solid var(--border); z-index:20; display:flex; flex-direction:column; animation:slideIn .2s ease; }
.panel-header { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border); min-height:56px; font-weight:600; font-size:16px; }
.panel-back { flex-shrink:0; }
.panel-body { flex:1; overflow-y:auto; padding:20px 16px; }
.profile-avatar-section { display:flex; flex-direction:column; align-items:center; margin-bottom:24px; position:relative; }
.profile-avatar-edit { position:absolute; bottom:0; right:calc(50% - 56px); background:var(--primary) !important; color:#fff !important; width:32px !important; height:32px !important; border-radius:50% !important; }
.profile-fields { display:flex; flex-direction:column; gap:16px; }
.profile-field { display:flex; flex-direction:column; gap:6px; }
.profile-field label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.profile-field input, .profile-field textarea { padding:10px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; font-family:inherit; outline:none; resize:vertical; }
.profile-field input:focus, .profile-field textarea:focus { border-color:var(--primary); }
.profile-field-value { padding:10px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text-secondary); font-size:14px; }
.profile-field .icon-btn { align-self:flex-end; margin-top:4px; color:var(--primary); }

/* ─── Theme Options ────────────────────────── */
.theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.theme-option { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; background:none; border:2px solid var(--border); border-radius:12px; cursor:pointer; transition:border-color .15s; color:var(--text); font-family:inherit; font-size:14px; font-weight:500; }
.theme-option:hover { border-color:var(--primary); }
.theme-option.active { border-color:var(--primary); background:rgba(150,191,50,0.1); }
.theme-preview { width:80px; height:60px; border-radius:8px; overflow:hidden; border:1px solid rgba(128,128,128,0.2); }
.theme-preview-header { height:16px; }
.theme-preview-body { height:44px; }
.theme-dark .theme-preview-header { background:#0e1621; }
.theme-dark .theme-preview-body { background:#17212b; }
.theme-light .theme-preview-header { background:#f0f2f5; }
.theme-light .theme-preview-body { background:#ffffff; }
.theme-green .theme-preview-header { background:#0d1f0d; }
.theme-green .theme-preview-body { background:#0a1a0a; }

/* ─── Sticker Manager ──────────────────────── */
.sticker-manager-actions { margin-bottom:16px; }
.sticker-packs-list { display:flex; flex-direction:column; gap:8px; }
.sticker-pack-item { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-card); border-radius:8px; border:1px solid var(--border); }
.sticker-pack-info { flex:1; }
.sticker-pack-name { font-weight:600; font-size:14px; }
.sticker-pack-count { font-size:12px; color:var(--text-secondary); }

/* ─── Modal ────────────────────────────────── */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(4px); }
.modal-content { width:100%; max-width:420px; max-height:80vh; background:var(--bg-modal); border-radius:16px; border:1px solid var(--border); box-shadow:0 12px 48px rgba(0,0,0,0.4); display:flex; flex-direction:column; overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:17px; font-weight:600; }
.modal-body { padding:16px 20px; overflow-y:auto; }
.modal-search { padding:12px 16px; }
.modal-search input { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; font-family:inherit; outline:none; }
.modal-search input:focus { border-color:var(--primary); }
.user-search-results { flex:1; overflow-y:auto; padding:0 8px 8px; max-height:300px; }
.search-hint { text-align:center; color:var(--text-muted); font-size:14px; padding:40px 20px; }
.user-result { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; transition:background .15s; }
.user-result:hover { background:var(--bg-hover); }
.user-result.selected { background:rgba(150,191,50,0.15); }
.user-result-name { font-weight:500; font-size:14px; }
.search-section-title { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); padding:10px 14px 4px; }
.search-hint-small { text-align:center; color:var(--text-muted); font-size:13px; padding:14px; }
.user-result-text { min-width:0; }
.user-result-sub { font-size:12px; color:var(--text-muted); }
.group-selected { display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px; }
.group-selected-chip { display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--bg-card); border-radius:16px; font-size:13px; border:1px solid var(--border); }
.group-selected-chip button { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:0; display:flex; }

/* ─── Context Menu ─────────────────────────── */
.context-menu { position:fixed; background:var(--bg-modal); border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 24px rgba(0,0,0,0.4); padding:6px; z-index:200; min-width:180px; }
.context-menu-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:6px; font-size:14px; color:var(--text); cursor:pointer; transition:background .15s; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.context-menu-item:hover { background:var(--bg-hover); }
.context-menu-item.danger { color:#e53935; }
.context-menu-item svg { flex-shrink:0; }
/* ─── v63: меню сообщения — реакции сверху, статус прочтения, свайп ─── */
.msg-menu-reacts { display:flex; gap:2px; padding:6px 8px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; justify-content:space-between; }
.msg-menu-react { background:none; border:none; cursor:pointer; font-size:24px; padding:4px 6px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:transform .15s, background .15s; line-height:1; }
.msg-menu-react:hover { background:var(--bg-hover); transform:scale(1.25); }
.msg-menu-react img { width:30px; height:30px; object-fit:contain; pointer-events:none; }
.msg-menu-read { display:flex; align-items:center; gap:6px; padding:5px 14px 7px; font-size:11px; color:var(--text-muted); opacity:.75; }
.msg-menu-read.is-read { color:#4fc3f7; opacity:.9; }
.msg-reaction-img { width:24px; height:24px; object-fit:contain; vertical-align:-6px; }
/* свайп для ответа: вертикальный скролл родной, горизонталь — нам */
.message-bubble { touch-action:pan-y; transition:transform .18s ease; }
.message-bubble.no-trans { transition:none !important; }
.message-wrapper { position:relative; }
.message-wrapper.swiping .message-bubble { box-shadow:0 4px 18px rgba(0,0,0,.35); }
.message-wrapper.swipe-l::after, .message-wrapper.swipe-r::after {
  content:'↩'; position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; z-index:3;
}
.message-wrapper.swipe-l::after { left:-44px; }
.message-wrapper.swipe-r::after { right:-44px; transform:translateY(-50%) scaleX(-1); }

/* ─── Lightbox ─────────────────────────────── */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; z-index:300; cursor:zoom-out; }
.lightbox-close { position:absolute; top:16px; right:20px; color:#fff; background:none; border:none; cursor:pointer; z-index:1; }
.lightbox img { max-width:94vw; max-height:94vh; border-radius:8px; object-fit:contain; }

/* ─── Settings / Toggle ────────────────────── */
.settings-list { display:flex; flex-direction:column; }
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); gap:12px; }
.settings-item:last-child { border-bottom:none; }
.settings-item-info { flex:1; min-width:0; }
.settings-item-label { font-size:15px; font-weight:500; color:var(--text); }
.settings-item-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--bg-input); border-radius:24px; transition:background .2s; }
.toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:var(--text-secondary); border-radius:50%; transition:transform .2s, background .2s; }
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider:before { transform:translateX(20px); background:#fff; }

/* ─── Drop Zone ────────────────────────────── */
.drop-zone { position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:400; backdrop-filter:blur(4px); }
.drop-zone-content { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--primary); font-size:18px; font-weight:600; }
.drop-zone-content svg { color:var(--primary); }

/* ─── Call Screen (Telegram-style) ─────────── */
.call-overlay { position:fixed; inset:0; background:#1a1a2e; z-index:1000; display:flex; align-items:center; justify-content:center; }
.call-screen { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px 20px 40px; position:relative; overflow:hidden; }
.call-top-bar { width:100%; display:flex; justify-content:center; align-items:center; gap:10px; padding:10px 0; position:relative; z-index:5; }
.call-top-bar .call-screen-label { font-size:13px; font-weight:600; color:#4caf50; background:rgba(76,175,80,.15); border:1px solid rgba(76,175,80,.4); padding:4px 12px; border-radius:12px; }
.call-status-badge { width:8px; height:8px; border-radius:50%; background:#4caf50; animation:pulse 2s infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.call-center { display:flex; flex-direction:column; align-items:center; gap:16px; flex:1; justify-content:center; position:relative; z-index:5; pointer-events:none; }
.call-avatar-large { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#ff9800,#f44336); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:700; color:#fff; box-shadow:0 8px 32px rgba(255,152,0,0.3); overflow:hidden; flex-shrink:0; }
.call-avatar-large img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.call-peer-name { font-size:22px; font-weight:600; color:#fff; text-align:center; }
.call-timer { font-size:14px; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums; }
.call-remote-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; background:#000; }
/* v57: видеосвязь с камеры — cover (максимум экрана без ломки пропорций),
   демонстрация экрана — contain по центру (на узком телефоне 16:9 не растягивается) */
.call-remote-video.camera-mode { object-fit:cover; }
.call-remote-video.screen-mode { object-fit:contain; }
#relay-screen-canvas { object-fit:contain; }
/* v57: живой счётчик fps (сколько кадров вижу прямо сейчас) */
#screen-fps-badge { color:#7fd084; border-color:rgba(76,175,80,.4); font-variant-numeric:tabular-nums; }
.call-screen-preview { position:absolute; top:60px; left:20px; width:280px; max-width:40vw; height:200px; border-radius:12px; object-fit:contain; z-index:4; background:#000; border:2px solid rgba(76,175,80,.6); box-shadow:0 4px 20px rgba(0,0,0,0.5); }
.call-remote-screen-label { position:absolute; top:64px; left:28px; z-index:5; font-size:12px; font-weight:600; color:#fff; background:rgba(76,175,80,.85); padding:3px 10px; border-radius:10px; pointer-events:none; }
.call-local-preview { position:absolute; bottom:110px; right:20px; width:120px; height:160px; border-radius:12px; object-fit:cover; z-index:4; border:2px solid rgba(255,255,255,0.2); background:#000; }
.call-local-preview.hidden { display:none; }
.call-bottom-bar { display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:14px 24px; background:rgba(20,20,35,0.85); border:1px solid rgba(255,255,255,0.1); border-radius:28px; backdrop-filter:blur(12px); position:relative; z-index:6; max-width:94vw; flex-wrap:wrap; }
.call-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.call-btn-caption { font-size:10px; color:rgba(255,255,255,.55); font-weight:500; white-space:nowrap; }
.call-action-btn { width:52px; height:52px; min-width:52px; min-height:52px; border-radius:50%; border:none; padding:0; line-height:0; overflow:visible; background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.9); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.call-action-btn svg { display:block; flex-shrink:0; pointer-events:none; overflow:visible; }
.call-action-btn:hover { background:rgba(255,255,255,0.22); transform:scale(1.05); }
.call-action-btn.active { background:rgba(255,255,255,0.25); color:#fff; }
.call-action-btn.sharing { background:rgba(76,175,80,.35) !important; color:#4caf50 !important; border:1px solid rgba(76,175,80,.6); }
.call-end-btn-large { background:#e53935 !important; color:#fff !important; width:64px !important; height:64px !important; min-width:64px !important; min-height:64px !important; box-shadow:0 4px 20px rgba(229,57,53,0.4); }
.call-end-btn-large:hover { background:#c62828 !important; transform:scale(1.08); }
.call-accept-btn-lg { background:#4caf50 !important; color:#fff !important; width:64px !important; height:64px !important; min-width:64px !important; min-height:64px !important; box-shadow:0 4px 20px rgba(76,175,80,0.4); }
.call-accept-btn-lg:hover { background:#43a047 !important; transform:scale(1.08); }
.call-reject-btn-lg { background:#e53935 !important; color:#fff !important; width:64px !important; height:64px !important; min-width:64px !important; min-height:64px !important; box-shadow:0 4px 20px rgba(229,57,53,0.4); }
.call-reject-btn-lg:hover { background:#c62828 !important; transform:scale(1.08); }
.call-incoming-actions { display:flex; gap:32px; margin-top:24px; position:relative; z-index:6; }
/* call settings */
.call-settings-btn { position:absolute; top:16px; right:16px; z-index:7; }
.call-minimize-btn { position:absolute; top:16px; right:76px; z-index:7; font-size:20px; font-weight:700; }
/* ─── Компактное окно звонка ─── */
.call-overlay.minimized { inset:auto; top:auto; left:auto; right:16px; bottom:16px; width:300px; height:auto; background:transparent; pointer-events:none; display:block; z-index:1000; }
.call-overlay.minimized .call-screen { width:300px; height:auto; min-height:0; padding:0; background:rgba(15,15,28,.96); border:1px solid rgba(255,255,255,.15); border-radius:14px; overflow:hidden; pointer-events:auto; box-shadow:0 10px 36px rgba(0,0,0,.55); }
.call-overlay.minimized .call-top-bar { padding:6px 8px; cursor:move; background:rgba(255,255,255,.05); }
.call-overlay.minimized .call-center { display:none; }
.call-overlay.minimized .call-settings-panel, .call-overlay.minimized .call-screen-preview, .call-overlay.minimized .call-local-preview, .call-overlay.minimized .call-remote-screen-label { display:none !important; }
.call-overlay.minimized .call-remote-video { position:relative; inset:auto; width:300px; height:170px; display:block !important; }
.call-overlay.minimized .call-remote-video[style*="display: none"], .call-overlay.minimized .call-remote-video[style*="display:none"] { display:none !important; }
.call-overlay.minimized .call-bottom-bar { padding:8px 10px; gap:6px; border-radius:0; background:rgba(255,255,255,.06); }
.call-overlay.minimized .call-action-btn { width:38px; height:38px; min-width:38px; min-height:38px; }
.call-overlay.minimized .call-end-btn-large { width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; }
.call-overlay.minimized .call-btn-caption { display:none; }
.call-overlay.minimized .call-incoming-actions { margin:8px 0; justify-content:center; }
.call-overlay.minimized .call-settings-btn { top:6px; right:6px; width:32px; height:32px; min-width:32px; min-height:32px; }
.call-overlay.minimized .call-minimize-btn { top:6px; right:44px; width:32px; height:32px; min-width:32px; min-height:32px; }
.call-settings-panel { position:absolute; top:60px; right:16px; width:280px; background:rgba(20,20,35,.97); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px; z-index:8; display:flex; flex-direction:column; gap:12px; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.call-settings-panel label { font-size:12px; font-weight:600; color:rgba(255,255,255,.6); display:block; margin-bottom:4px; }
.call-settings-panel select { width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:#24243a; color:#fff; font-size:13px; outline:none; }
.call-settings-panel input[type=range] { width:100%; accent-color:#4caf50; }
.call-mic-level { height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.call-mic-level > div { height:100%; width:0%; background:#4caf50; transition:width .1s; }
/* Шумоподавление микрофона (v49) */
.call-noise-hint { margin-top:4px; font-size:11px; line-height:1.3; color:#ffb74d; }
.call-settings-panel select#call-noise-select { border-color:rgba(150,191,50,.45); }

/* ─── Voice Messages ───────────────────────── */
.voice-msg { display:flex; align-items:center; gap:10px; min-width:200px; }
.voice-play-btn { width:36px; height:36px; border-radius:50%; border:none; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:transform .2s; }
.voice-play-btn:hover { transform:scale(1.1); }
.voice-msg audio { display:none; }
.voice-track-wrap { flex:1; height:32px; display:flex; align-items:center; position:relative; min-width:120px; background:rgba(128,128,128,0.15); border-radius:16px; overflow:hidden; cursor:pointer; }
.voice-progress { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,rgba(150,191,50,0.3),rgba(150,191,50,0.5)); border-radius:16px; pointer-events:none; transition:width .15s linear; }
.voice-duration { font-size:12px; color:var(--text-secondary); white-space:nowrap; min-width:36px; text-align:right; }
.voice-mic-select { max-width:150px; padding:4px 8px; border-radius:10px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); font-size:12px; outline:none; }
/* Выбор микрофона в меню настроек: строка как пункт меню, но с селектом справа */
.hamburger-mic-row { display:flex; align-items:center; gap:10px; cursor:default; }
.hamburger-mic-row > span { flex:1; }
.hamburger-mic-row .settings-mic-select { max-width:170px; }
.voice-recording { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-input); border-radius:24px; position:fixed; bottom:80px; bottom: calc(80px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:100; box-shadow:var(--shadow); max-width:92vw; }
.voice-rec-dot { width:12px; height:12px; border-radius:50%; background:#f44336; animation:pulse 1s infinite; }
.voice-rec-time { font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }
.voice-rec-cancel { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:14px; }
.voice-rec-send { background:var(--primary); border:none; color:#fff; border-radius:16px; padding:6px 16px; cursor:pointer; font-size:13px; font-weight:500; }
.voice-rec-send:hover { opacity:0.85; }
.call-action-btn.active { background:rgba(229,57,53,0.3) !important; color:#e53935 !important; }
.call-mute-active svg { color:#e53935; }

/* ─── File Preview (pending upload) ─────────── */
.file-preview { padding:8px 12px; background:var(--bg-secondary); border-top:1px solid var(--border); }
.file-preview-inner { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.file-preview-remove { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:16px; padding:4px; border-radius:50%; }
.file-preview-remove:hover { color:var(--danger); background:rgba(229,57,53,0.1); }
.file-preview-caption { margin-bottom:8px; }
.file-preview-caption input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text); font-size:13px; }
.file-preview-actions { display:flex; gap:8px; justify-content:flex-end; }
.file-preview-thumb { position:relative; display:inline-flex; }
.file-preview-thumb-remove { position:absolute; top:-6px; right:-6px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; font-size:12px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; }
.file-preview-thumb-remove:hover { color:var(--danger); background:rgba(229,57,53,0.1); }

/* ─── Message media ────────────────────────── */
.message-image img { max-width:300px; max-height:400px; object-fit:contain; border-radius:8px; display:block; }
.message-image { overflow:hidden; max-width:300px; max-height:400px; border-radius:8px; }
.message-video video { max-width:300px; max-height:400px; border-radius:8px; background:#000; }
.message-audio { padding:4px 0; }
.message-file a { color:var(--primary); text-decoration:none; word-break:break-all; display:flex; align-items:center; gap:6px; }
.message-file a:hover { text-decoration:underline; }

/* ─── Call button in chat header ───────────── */
.call-btn-header { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:8px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
.call-btn-header:hover { background:var(--bg-hover); color:var(--primary); }

/* ─── Sticker Manager ──────────────────────── */
.sticker-manager-actions { display:flex; gap:8px; margin-bottom:16px; }
.sticker-pack-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:8px; background:var(--bg-input); margin-bottom:8px; }
.sticker-pack-item span { font-weight:500; }
.sticker-pack-item div { display:flex; gap:6px; }
.btn-sm { padding:4px 12px; border-radius:6px; border:none; cursor:pointer; font-size:12px; font-weight:500; background:var(--primary); color:#fff; }
.btn-sm:hover { opacity:0.85; }

/* ─── Настройки звука: чувствительность микрофона и горячие клавиши ─── */
.settings-item-col { flex-direction:column; align-items:stretch; gap:10px; }
.mic-sens-row { display:flex; align-items:center; gap:12px; }
.mic-sens-row input[type="range"] { flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:var(--bg-input); outline:none; cursor:pointer; }
.mic-sens-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--primary); border:none; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.mic-sens-row input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--primary); border:none; }
.mic-sens-value { min-width:56px; text-align:right; font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.mic-sens-meter { position:relative; height:10px; border-radius:5px; background:var(--bg-input); overflow:hidden; }
.mic-sens-meter-fill { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:5px;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary)); transition:width .08s linear; }
.mic-sens-meter.hot .mic-sens-meter-fill { background:linear-gradient(90deg,var(--primary),#e0b73c); }
.mic-sens-meter-mark { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--text-secondary); border-radius:1px; }
.hotkey-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hotkey-btn { min-width:118px; padding:6px 10px; border-radius:8px; border:1px solid var(--border-light);
  background:var(--bg-input); color:var(--text); font-size:12px; cursor:pointer; text-align:center;
  font-variant-numeric:tabular-nums; }
.hotkey-btn:hover { border-color:var(--primary); }
.hotkey-btn.recording { border-color:var(--primary); color:var(--primary); }
.hotkey-btn.conflict { border-color:#e0533c; color:#e0533c; }
.hotkey-clear { border:none; background:transparent; color:var(--text-muted); cursor:pointer; padding:4px; display:flex; }
.hotkey-clear:hover { color:var(--text); }
.hotkeys-hint { font-size:12px; color:var(--text-muted); line-height:1.5; padding:8px 2px 0; }
/* ─── Тост-уведомления о сообщениях (ПК-клиент, как в Telegram) ─────── */
.chat-toasts { position:fixed; right:16px; bottom:16px; z-index:9050; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
.chat-toast { pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:340px; padding:10px 12px;
  border-radius:14px; background:var(--bg-card); border:1px solid var(--border-light); box-shadow:0 8px 28px rgba(0,0,0,.45);
  cursor:pointer; animation:eg-toast-in .18s ease-out; }
.chat-toast.out { animation:eg-toast-out .26s ease-in forwards; }
@keyframes eg-toast-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes eg-toast-out { to { opacity:0; transform:translateY(6px) scale(.98); } }
.chat-toast-avatar { width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--bg-active); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.chat-toast-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-toast-body { min-width:0; flex:1; }
.chat-toast-name { font-size:13px; font-weight:600; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-toast-text { font-size:12.5px; color:var(--text); line-height:1.35; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-toast-close { border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:15px; line-height:1; padding:2px 0 0 4px; align-self:flex-start; }
.chat-toast-close:hover { color:var(--text); }
.mic-sens-actions { display:flex; align-items:center; gap:10px; }
.mic-sens-hint { font-size:11px; color:var(--text-muted); line-height:1.45; flex:1; }
.delete-pack-btn { background:#e53935 !important; }

/* ─── Sticker Crop Editor ─────────────────── */
.crop-preview-wrapper { border:1px solid rgba(255,255,255,0.1); }
.crop-preview-wrapper canvas { display:block; }
#crop-box { border:2px solid var(--primary); background:rgba(255,255,255,0.05); }
.sticker-pack-item .add-sticker-btn { background:#4caf50 !important; }
.sticker-pack-item .add-sticker-btn:hover { background:#388e3c !important; }

/* v64: TG-квадрат свёрнутого звонка (только телефон, класс sq) */
.call-overlay.minimized.sq { width:96px; }
.call-overlay.minimized.sq .call-screen { width:96px; height:96px; min-height:0; padding:0; border-radius:26px; }
.call-overlay.minimized.sq .call-top-bar,
.call-overlay.minimized.sq .call-bottom-bar,
.call-overlay.minimized.sq #call-bar-toggle,
.call-overlay.minimized.sq .call-settings-btn,
.call-overlay.minimized.sq .call-minimize-btn,
.call-overlay.minimized.sq .call-settings-panel,
.call-overlay.minimized.sq .call-screen-preview,
.call-overlay.minimized.sq .call-local-preview,
.call-overlay.minimized.sq .call-remote-video,
.call-overlay.minimized.sq .call-remote-screen-label,
.call-overlay.minimized.sq #call-reconnect-btn,
.call-overlay.minimized.sq #call-reset-btn,
.call-overlay.minimized.sq .call-peer-name,
.call-overlay.minimized.sq .call-timer,
.call-overlay.minimized.sq .call-peer-status,
.call-overlay.minimized.sq #call-participants,
.call-overlay.minimized.sq .call-incoming-actions { display:none !important; }
.call-overlay.minimized.sq .call-center { display:flex; padding:0; margin:0; width:100%; height:100%; justify-content:center; }
.call-overlay.minimized.sq .call-avatar-large { width:96px; height:96px; font-size:38px; border-radius:26px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
/* v64: единая action-кнопка ввода */
#msg-action-btn.recording { color:#e53935 !important; animation:pulse 1.2s infinite; }
/* v64: шторка скрепки на телефоне (Фото/видео | Файл) */
.attach-sheet { align-items:flex-end; padding:0; }
.attach-sheet-box { max-width:100% !important; width:100%; border-radius:18px 18px 0 0 !important; border:none !important; border-top:1px solid var(--border) !important; padding-bottom:max(10px, env(safe-area-inset-bottom)); animation:sheetUp .22s ease; }
@keyframes sheetUp { from { transform:translateY(40px); opacity:.5; } to { transform:none; opacity:1; } }
.attach-sheet-item { display:flex; align-items:center; gap:12px; width:100%; padding:15px 20px; background:none; border:none; border-bottom:1px solid var(--border); color:var(--text); font-size:15px; font-family:inherit; cursor:pointer; text-align:left; }
.attach-sheet-item:last-child { border-bottom:none; }
.attach-sheet-item:active { background:var(--bg-hover); }
.attach-sheet-cancel { justify-content:center; color:var(--text-secondary); font-weight:600; }
/* v64: компактное меню сообщения на телефоне + мотаемые реакции */
@media (max-width:768px), (pointer:coarse) {
  .context-menu { min-width:0; max-width:74vw; }
  .msg-menu-reacts { overflow-x:auto; flex-wrap:nowrap; gap:0; padding:4px 2px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .msg-menu-reacts::-webkit-scrollbar { display:none; }
  .msg-menu-react { flex:0 0 auto; padding:3px 8px; }
  .context-menu-item { padding:8px 12px; font-size:13px; gap:8px; }
  .msg-menu-read { padding:4px 12px 5px; font-size:10px; }
}
/* ─── Peer profile modal ─────────────────── */
.peer-profile-avatar-big { width:120px; height:120px; border-radius:50%; margin:0 auto 12px; overflow:hidden; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700; color:#fff; cursor:zoom-in; flex-shrink:0; }
.peer-profile-avatar-big img { width:100%; height:100%; object-fit:cover; }
.peer-profile-name { text-align:center; font-size:19px; font-weight:700; }
.peer-profile-id { text-align:center; font-size:12px; color:var(--text-muted); margin-top:2px; }
.peer-profile-status { text-align:center; font-size:13px; color:var(--text-secondary); margin-top:4px; }
.peer-profile-bio { margin-top:12px; padding:10px 12px; background:var(--bg-input); border-radius:8px; font-size:14px; white-space:pre-wrap; word-break:break-word; }
.peer-profile-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); margin-top:8px; }
.peer-profile-actions { display:flex; gap:8px; margin-top:14px; }
/* Код безопасности: цифры + цветокод, чтобы сверять не переписывая 60 цифр */
.peer-profile-safety { margin-top:14px; padding:12px; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; }
.peer-profile-safety.changed { border-color:#e57373; background:rgba(229,87,53,.08); }
.safety-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.safety-cells { display:flex; gap:4px; margin-bottom:8px; }
.safety-cell { width:18px; height:18px; border-radius:4px; display:inline-block; }
.safety-digits { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; letter-spacing:.4px; line-height:1.7; word-spacing:6px; color:var(--text); user-select:all; }
.safety-hint { font-size:12px; color:var(--text-muted); margin:8px 0; }
.safety-warn { font-size:12px; color:#e57373; margin-bottom:8px; }
.safety-state { font-size:12px; color:#7fd084; margin-top:8px; }
.btn-danger { background:#e53935; color:#fff; border:none; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer; flex:1; }
.btn-secondary { background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer; flex:1; }

/* ─── Sticker tabs / counts ──────────────── */
.sticker-tabs { display:flex; gap:6px; padding:8px 10px 0; overflow-x:auto; flex-shrink:0; }
.sticker-tab { padding:6px 12px; border-radius:16px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.sticker-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.sticker-count-bar { padding:6px 12px; font-size:12px; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.sticker-empty { padding:24px 16px; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.5; }
.sticker-pack-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:10px; }
.sticker-pack-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.sticker-pack-card-top b { font-size:14px; }
.sticker-pack-card-top small { color:var(--text-secondary); font-size:12px; }
.sticker-pack-preview { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.sticker-pack-preview-item { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.sticker-pack-preview img,
.sticker-pack-preview video { width:48px; height:48px; object-fit:contain; border-radius:0; background:transparent; cursor:pointer; }
.sticker-pack-card-btns { display:flex; gap:6px; flex-wrap:wrap; }
.sticker-mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.sticker-mini-grid img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:0; background:transparent; }
.sticker-mini-wrap { position:relative; }
.sticker-mini-del { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; font-size:12px; cursor:pointer; line-height:1; }

/* ─── Blocked list ───────────────────────── */
.blocked-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.blocked-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.blocked-item .avatar-sm { width:36px; height:36px; }
.blocked-item b { flex:1; font-size:14px; }
.section-title { font-size:13px; font-weight:700; color:var(--text-secondary); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.4px; }

/* ─── Message actions / reactions / reply ─── */
/* v64: ховер-панель убрана — действия живут в ПКМ/удержание-меню сообщения */
.msg-loading { text-align:center; color:var(--text-muted); font-size:13px; padding:30px 10px; }
.message-wrapper { position:relative; }
.message-bubble { min-width:60px; }
.msg-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.msg-reaction { display:inline-flex; align-items:center; gap:3px; font-size:12px; padding:2px 8px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); cursor:pointer; }
.msg-reaction.mine { border-color:var(--primary); background:rgba(150,191,50,.15); }
.msg-reply-quote { border-left:3px solid var(--primary); background:rgba(128,128,128,.1); border-radius:0 8px 8px 0; padding:5px 9px; margin-bottom:6px; font-size:12.5px; cursor:pointer; max-width:280px; }
.msg-reply-quote b { display:block; font-size:12px; color:var(--primary); margin-bottom:1px; }
.msg-reply-quote span { color:var(--text-secondary); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-forwarded-label { font-size:11.5px; color:var(--primary); font-weight:600; margin-bottom:3px; }
.reply-preview-bar { display:flex; align-items:center; gap:10px; padding:7px 12px; background:var(--bg-sidebar); border-top:1px solid var(--border); border-left:3px solid var(--primary); font-size:13px; }
.reply-preview-bar .rp-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-secondary); }
.reply-preview-bar .rp-text b { color:var(--primary); }
.reply-preview-bar button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; }
/* undo toast */
.undo-toast { position:fixed; bottom:86px; left:50%; transform:translateX(-50%); background:#20202e; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:12px; z-index:1200; box-shadow:0 8px 30px rgba(0,0,0,.5); font-size:14px; }
.undo-toast button { background:var(--primary); border:none; color:#fff; font-weight:700; border-radius:8px; padding:6px 14px; cursor:pointer; }
.undo-toast .undo-timer { font-variant-numeric:tabular-nums; color:#ffd54f; font-weight:700; min-width:18px; text-align:center; }
/* forward list */
.forward-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.forward-item:hover { background:var(--bg-hover); }
.call-live-banner { display:flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(76,175,80,.12); border-bottom:1px solid rgba(76,175,80,.3); font-size:13px; color:#7fd084; }
.call-live-banner button { margin-left:auto; background:none; border:1px solid rgba(76,175,80,.5); color:#7fd084; border-radius:8px; padding:3px 10px; cursor:pointer; font-size:12px; }

/* ─── Responsive ───────────────────────────── */
@media (max-width:768px) {
  .sidebar { width:100%; min-width:100%; position:absolute; inset:0; z-index:20; transition:transform .25s ease; }
  .sidebar.hidden { transform:translateX(-100%); }
  .chat-area { width:100%; min-height:0; }
  .mobile-back { display:flex; }
  .messages { padding:0 12px; }
  .message-wrapper { max-width:85%; }
  .side-panel { width:100%; }
  .hamburger-panel { width:280px; }
  .call-bottom-bar { gap:8px; padding:10px 14px; border-radius:22px; }
  .call-action-btn { width:46px; height:46px; min-width:46px; min-height:46px; }
  .call-end-btn-large { width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; }
  .call-screen-preview { width:180px; height:130px; top:56px; left:12px; }
  .call-local-preview { width:88px; height:120px; bottom:120px; right:12px; }
  .call-settings-panel { right:8px; left:8px; width:auto; }
  /* MOBILE FIX: input always visible */
  .chat-input-area { gap:6px; padding:8px 8px max(8px, env(safe-area-inset-bottom)); }
  .chat-input-wrapper { min-height:42px; }
  .chat-input-wrapper textarea { font-size:16px !important; padding:9px 12px; }
  .icon-btn { width:40px; height:40px; }
  .attach-btn, #voice-record-btn, #video-record-btn, #sticker-btn { flex-shrink:0; }
  .send-btn { flex-shrink:0; }
  .messages-container { padding-bottom:8px; }
  /* iOS keyboard handling */
  .active-chat { padding-bottom: env(safe-area-inset-bottom); }
}
/* Video circle preview */
#video-circle-preview { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
#video-circle-preview video { width:260px; height:260px; border-radius:50%; object-fit:cover; background:#000; border:3px solid var(--primary); transform:scaleX(-1); }
#video-circle-preview video.back-camera { transform:scaleX(1); }
#video-circle-preview .vc-controls { display:flex; align-items:center; gap:12px; }
#video-circle-preview .vc-timer { color:#fff; font-size:18px; font-variant-numeric:tabular-nums; min-width:56px; text-align:center; }
#video-circle-preview .vc-btn { width:56px; height:56px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; }
#video-circle-preview .vc-btn.flip { background:rgba(255,255,255,0.15); color:#fff; }
#video-circle-preview .vc-btn.cancel { background:rgba(229,57,53,0.9); color:#fff; }
#video-circle-preview .vc-btn.send { background:var(--primary); color:#fff; width:64px; height:64px; }
#video-circle-preview .vc-hint { color:rgba(255,255,255,0.6); font-size:12px; text-align:center; padding:0 20px; }
/* Crypto warning banner */
#crypto-warning { position:fixed; top:0; left:0; right:0; background:#b71c1c; color:#fff; padding:10px 16px; z-index:1000; font-size:13px; line-height:1.4; display:none; }
#crypto-warning.show { display:block; }
#crypto-warning a { color:#ffd54f; text-decoration:underline; }
#crypto-warning button { margin-left:12px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); color:#fff; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:12px; }


/* v43: Sticker crop editor — resize handles */
#crop-box .crop-handle{position:absolute;width:12px;height:12px;background:var(--primary);border:2px solid #fff;border-radius:50%;box-sizing:border-box;z-index:3;}
#crop-box .crop-handle[data-h=nw]{left:-7px;top:-7px;cursor:nwse-resize;}
#crop-box .crop-handle[data-h=n]{left:50%;top:-7px;margin-left:-6px;cursor:ns-resize;}
#crop-box .crop-handle[data-h=ne]{right:-7px;top:-7px;cursor:nesw-resize;}
#crop-box .crop-handle[data-h=w]{left:-7px;top:50%;margin-top:-6px;cursor:ew-resize;}
#crop-box .crop-handle[data-h=e]{right:-7px;top:50%;margin-top:-6px;cursor:ew-resize;}
#crop-box .crop-handle[data-h=sw]{left:-7px;bottom:-7px;cursor:nesw-resize;}
#crop-box .crop-handle[data-h=s]{left:50%;bottom:-7px;margin-left:-6px;cursor:ns-resize;}
#crop-box .crop-handle[data-h=se]{right:-7px;bottom:-7px;cursor:nwse-resize;}

/* v48: мобильные звонки — safe-area, dvh, тач-таргеты, режимы incoming/active */
.call-overlay {
  height:100%; height:100dvh;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
.call-screen { padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
.call-overlay.call-mode-incoming .call-bottom-bar,
.call-overlay.call-mode-incoming #call-bar-toggle { display:none !important; }
.call-overlay.call-mode-incoming .call-incoming-actions { display:flex !important; }
.call-overlay.call-mode-active .call-incoming-actions { display:none !important; }
.call-incoming-actions { touch-action:manipulation; }
.call-bottom-bar, .call-incoming-actions { touch-action:manipulation; }
.call-action-btn { touch-action:manipulation; }
@media (max-width:768px) {
  .call-screen { padding:12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .call-bottom-bar { gap:6px; padding:10px 10px; max-width:96vw; }
  .call-action-btn { width:52px; height:52px; min-width:52px; min-height:52px; }
  .call-btn-caption { font-size:9px; }
  .call-incoming-actions { gap:40px; margin-top:20px; }
  .call-accept-btn-lg, .call-reject-btn-lg { width:72px !important; height:72px !important; min-width:72px !important; min-height:72px !important; }
  .call-local-preview { bottom:calc(120px + env(safe-area-inset-bottom)); }
  .call-avatar-large { width:96px; height:96px; font-size:38px; }
  .call-peer-name { font-size:19px; }
}
/* v45: мут-статус собеседника под ником в звонке */
.call-peer-status { font-size:14px; color:#ffb0ad; background:rgba(229,57,53,0.18); border:1px solid rgba(229,57,53,0.35); border-radius:12px; padding:3px 12px; margin-top:6px; text-align:center; }
/* v57: иконки мута — flex чтобы SVG и текст были в ряд */
.call-peer-status svg { flex-shrink:0; }
#call-rejoin-banner button:hover { filter:brightness(1.1); }
@media (max-width:480px){
  #call-rejoin-banner { flex-wrap:wrap; justify-content:center; text-align:center; }
}
/* v45: складная панель управления звонка */
#call-bar-toggle { position:absolute; bottom:8px; right:14px; z-index:8; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; border-radius:50% !important; font-size:20px; font-weight:700; }
.call-overlay.controls-hidden .call-bottom-bar { display:none; }
.call-overlay.controls-hidden #call-bar-toggle { bottom:20px; background:rgba(255,255,255,0.2) !important; }
/* v45: кнопки переподключения/сброса в топ-баре звонка */
#call-reconnect-btn svg, #call-reset-btn svg { pointer-events:none; }

/* ═══ Панель стикеров: единственный источник правды ═══
   Как в Telegram: у плитки НЕТ рамки и фона, арт лежит на плитке целиком, подсветка
   появляется только под курсором. Никаких border/overflow:hidden/cover — именно
   они давали «обводку» и обрезанные края. */
#sticker-panel .sticker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr)); gap:6px; padding:10px; align-content:start; }
#sticker-panel .sticker-grid-item { display:flex; align-items:center; justify-content:center; min-height:70px; padding:6px; border:0; background:transparent; border-radius:12px; cursor:pointer; transform:none; transition:background .12s ease; }
#sticker-panel .sticker-grid-item:hover,
#sticker-panel .sticker-grid-item:active { background:var(--bg-hover); transform:none; }
#sticker-panel .sticker-grid-item img,
#sticker-panel .sticker-grid-item video { display:block; width:auto; height:auto; max-width:100%; max-height:92px; object-fit:contain; border:0; border-radius:0; box-shadow:none; }
/* v46: на ПК панель стикеров — справа списком, как в Telegram PC */
@media (min-width: 900px) {
  #sticker-panel.sticker-panel { top:0; bottom:0; left:auto; right:0; width:340px; height:auto; margin-bottom:0; border-top:none; border-left:1px solid var(--border); box-shadow:-4px 0 24px rgba(0,0,0,0.3); }
}
/* v46: метка «изменено» у сообщения */
.msg-edited-label { font-size:11px; opacity:.6; margin:2px 0; font-style:italic; }
/* v46: участники группового звонка */
.call-participants { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; flex-wrap:wrap; padding:0 16px; }
.call-participant-chip { width:34px; height:34px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.call-participant-chip img { width:100%; height:100%; object-fit:cover; }
.call-participant-chip span { color:#fff; font-size:14px; font-weight:700; }
.call-participants-count { color:rgba(255,255,255,0.7); font-size:12px; margin-left:6px; }

/* ─── v67: сетка участников группового звонка ─────────────────────────
   Плитка = человек. 2 → два в ряд, 3 → сверху два + один снизу по центру,
   4 → 2×2. Демка участника разворачивается на весь экран кнопкой в плитке. */
.call-grid { position:absolute; inset:0; z-index:3; display:grid; gap:10px;
             padding:72px 14px 128px; box-sizing:border-box; }
.call-grid.n1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.call-grid.n2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.call-grid.n3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.call-grid.n3 > .call-tile:nth-child(3) { grid-column:1 / -1; }
.call-grid.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.call-grid.n5 { grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.call-grid.is-expanded > .call-tile:not(.expanded) { display:none; }

.call-tile { position:relative; overflow:hidden; min-width:0; min-height:0; border-radius:16px;
             background:linear-gradient(160deg,#232338,#171726);
             border:1px solid rgba(255,255,255,.09); display:flex;
             align-items:center; justify-content:center;
             transition:border-color .18s, box-shadow .18s; }
.call-tile.speaking { border-color:rgba(76,175,80,.9); box-shadow:0 0 0 2px rgba(76,175,80,.28); }
.call-tile.silent { border-color:rgba(224,83,60,.55); }
.call-tile.silent .call-tile-name { opacity:.7; }
.call-tile.muted .call-tile-name { opacity:.62; }

/* камера и экран плитки — на весь тайл, иначе аватарка уезжает в угол */
.call-tile-video, .call-tile-screen { position:absolute; inset:0; width:100%; height:100%;
                                      background:#000; display:none; }
.call-tile-video { object-fit:cover; transform:scaleX(-1); }
.call-tile-screen { object-fit:contain; }
.call-tile.cam .call-tile-video { display:block; }
.call-tile.sharing .call-tile-screen { display:block; }
.call-tile.sharing .call-tile-video { display:none; }

.call-tile-face { position:relative; z-index:2; display:flex; flex-direction:column;
                  align-items:center; gap:10px; padding:8px; min-width:0; max-width:100%;
                  transition:all .2s ease; }
.call-tile-avatar { width:clamp(44px,16vh,88px); height:clamp(44px,16vh,88px); border-radius:50%;
                    overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center;
                    font-size:clamp(20px,7vh,38px); font-weight:700; color:#fff;
                    background:linear-gradient(135deg,#ff9800,#f44336); }
.call-tile-avatar img { width:100%; height:100%; object-fit:cover; }
.call-tile-name { font-size:clamp(12px,2.4vh,16px); font-weight:600; color:#fff;
                  text-align:center; max-width:100%; overflow:hidden;
                  text-overflow:ellipsis; white-space:nowrap; }
.call-tile-sub { font-size:11px; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:4px; }

/* идёт демка — лицо сворачивается в бейдж в левый верхний угол */
.call-tile.sharing .call-tile-face { position:absolute; top:8px; left:8px; z-index:4;
                                     flex-direction:row; gap:6px; padding:4px 10px 4px 4px;
                                     background:rgba(10,10,18,.66); border-radius:20px;
                                     backdrop-filter:blur(4px); max-width:calc(100% - 76px); }
.call-tile.sharing .call-tile-avatar { width:24px; height:24px; font-size:11px; }
.call-tile.sharing .call-tile-name { font-size:12px; }
.call-tile.sharing .call-tile-sub { display:none; }

/* метка «Экран» и кнопка развёрнуть/свернуть */
.call-tile-screen-tag { position:absolute; right:8px; top:8px; z-index:4; display:none;
                        align-items:center; gap:4px; font-size:11px; font-weight:600; color:#fff;
                        background:rgba(76,175,80,.85); padding:3px 9px; border-radius:10px; }
.call-tile.sharing .call-tile-screen-tag { display:flex; }
.call-tile-expand, .call-tile-collapse { position:absolute; z-index:5; display:none;
                        width:34px; height:34px; border-radius:10px; cursor:pointer;
                        align-items:center; justify-content:center; color:#fff;
                        background:rgba(10,10,18,.66); border:1px solid rgba(255,255,255,.18);
                        backdrop-filter:blur(4px); }
.call-tile-expand { right:8px; bottom:8px; }
.call-tile-collapse { right:8px; top:8px; }
.call-tile.sharing .call-tile-expand { display:flex; }
.call-tile.sharing .call-tile-screen-tag { right:auto; left:50%; transform:translateX(-50%); }
.call-tile.expanded { position:absolute; inset:0; z-index:9; border-radius:0; }
.call-tile.expanded .call-tile-expand { display:none; }
.call-tile.expanded .call-tile-collapse { display:flex; }

.call-overlay.minimized .call-grid, .call-overlay.minimized .call-tile { display:none !important; }

/* Экран в отдельном окне (picture-in-picture). Кнопка живёт рядом с «развернуть»
   и показывается только там, где есть что показывать, — иначе в плитке появляется
   мёртвая иконка. */
.call-tile-pip { position:absolute; z-index:5; display:none;
                        width:34px; height:34px; border-radius:10px; cursor:pointer;
                        align-items:center; justify-content:center; color:#fff;
                        right:48px; bottom:8px;
                        background:rgba(10,10,18,.66); border:1px solid rgba(255,255,255,.18);
                        backdrop-filter:blur(4px); }
.call-tile.sharing .call-tile-pip { display:flex; }
.call-tile-pip:hover, .call-tile-expand:hover { background:rgba(20,20,32,.86); border-color:var(--primary); }
.call-tile.expanded .call-tile-pip { display:none; }

/* В 1:1 экран показывается в шапке оверлея, где уже лежат чипы качества.
   База — видимая: клиент прячет её инлайн-стилем и снимает его (display=''),
   как и остальные чипы. Если бы тут стоял display:none, кнопка не появилась бы
   никогда — сброс инлайн-стиля возвращается к правилу из таблицы. */
.call-pip-btn { display:flex; align-items:center; justify-content:center;
                        width:30px; height:30px; margin-left:auto; border-radius:9px; cursor:pointer;
                        color:#fff; background:rgba(10,10,18,.6);
                        border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(4px); flex-shrink:0; }
.call-pip-btn:hover { background:rgba(20,20,32,.86); border-color:var(--primary); }
.call-pip-btn:hover { border-color:var(--primary); color:var(--primary); }

/* Зеркало canvas-резерва для PiP. Вне вьюпорта, но НЕ display:none: движок
   отдаёт в PiP кадр только играющего видео, скрытое дало бы чёрное окно. */
.eg-pip-mirror { position:fixed; left:-10000px; top:0; width:2px; height:2px; opacity:0; pointer-events:none; }
@media (max-width:520px) {
  .call-grid { gap:6px; padding:64px 8px 118px; }
  .call-tile { border-radius:12px; }
  .call-tile.sharing .call-tile-face { max-width:calc(100% - 52px); }
}

/* В группе верхний блок сворачивается в узкую полосу над сеткой: аватар и
   чипы не нужны (они есть в плитках), остаются название, таймер и статус. */
.call-screen.group-grid .call-center { position:absolute; top:52px; left:0; right:0; z-index:6;
  flex:0 0 auto; flex-direction:row; justify-content:center; align-items:center; gap:10px; padding:0 12px; }
.call-screen.group-grid .call-avatar-large,
.call-screen.group-grid .call-participants,
.call-screen.group-grid .call-peer-status { display:none !important; }
.call-screen.group-grid .call-peer-name { font-size:14px; opacity:.9; }
.call-screen.group-grid .call-timer { font-size:13px; }
/* Кадры встали, но до «поток умер» ещё далеко: затемняем, не обрывая картинку */
.call-tile.stale .call-tile-screen { opacity:.45; filter:grayscale(.5); }
.call-tile.stale::after { content:'нет данных'; position:absolute; bottom:10px; left:50%;
  transform:translateX(-50%); z-index:5; font-size:11px; color:#fff;
  background:rgba(10,10,18,.7); padding:3px 10px; border-radius:10px; }
/* Своя демка: метка есть, а чёрного канваса в собственной плитке не нужно */
.call-tile.self-sharing .call-tile-screen-tag { display:flex; }
.call-tile.self-sharing .call-tile-expand,
.call-tile.self-sharing .call-tile-collapse { display:none !important; }
.call-tile.self-sharing .call-tile-face { position:absolute; top:8px; left:8px; z-index:4;
  flex-direction:row; gap:6px; padding:4px 10px 4px 4px; background:rgba(10,10,18,.66);
  border-radius:20px; max-width:calc(100% - 76px); }
.call-tile.self-sharing .call-tile-avatar { width:24px; height:24px; font-size:11px; }
.call-tile.self-sharing .call-tile-name { font-size:12px; }

/* ─── v68: прогресс загрузки вложения ────────────────────────────────
   «Сколько закачалось / сколько всего + вес файла». Для видео в 80 МБ
   без этого экран выглядит как зависший. */
.upload-progress {
  display:flex; flex-direction:column; gap:3px; align-items:center;
  margin-top:4px; font-size:10px; line-height:1.25; color:var(--text-muted,#9aa);
  font-variant-numeric:tabular-nums; white-space:nowrap; max-width:110px;
}
.upload-progress-bar { width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.upload-progress-bar > i { display:block; height:100%; width:0; background:var(--primary,#4caf50); transition:width .15s linear; }
.upload-progress-ok { color:#7fd084; }
.upload-progress-fail { color:#ff8a80; }

/* ─── v68: строка сообщения, выделение, ссылки ───────────────────────
   Оболочка строки растягивается на всю ширину: жалоба была не на внешний
   вид, а на то, что жест (меню/двойной клик/свайп) ловился только по пузырю.
   Пузырь при этом остаётся прежних 70% и прижат туда же, куда и был. */
.message-wrapper { width:100%; max-width:100%; }
.message-bubble { max-width:70%; }
/* Текст можно выделить. На таче call-out остаётся закрытым, иначе long-press
   меню сообщения конкурировал бы с системным меню копирования. */
.message-text { user-select:text; -webkit-user-select:text; }
@media (hover:hover) and (pointer:fine) {
  .message-text { -webkit-touch-callout:default; cursor:text; }
}
.msg-link { color:var(--primary); text-decoration:underline; word-break:break-all; }
.msg-link:hover { opacity:.85; }
/* Видеопоток участника (кодек) заменяет собой canvas-кадры: показываем то,
   что реально сейчас идёт */
.call-tile-stream { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#000; display:none; }
.call-tile.stream .call-tile-stream { display:block; }
.call-tile.stream .call-tile-screen { display:none; }

/* ─── Экран загрузки (boot) ─────────────────────────────── */
.boot-screen { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--bg); color:var(--text); transition:opacity .28s ease; animation:bootGuard 12s forwards; }
/* .hide снимает и страховку: иначе keyframe-анимация перекрывала бы плавное исчезновение */
.boot-screen.hide { animation:none; opacity:0; pointer-events:none; }
@keyframes bootGuard { 0%,96%{opacity:1} 100%{opacity:0; visibility:hidden} }
.boot-logo { width:76px; height:76px; border-radius:22px; object-fit:contain; }
.boot-title { font-size:17px; font-weight:600; letter-spacing:.2px; }
.boot-status { font-size:13px; color:var(--text-secondary); min-height:18px; }
.boot-bar { width:132px; height:3px; border-radius:2px; background:var(--bg-input); overflow:hidden; }
.boot-bar-fill { display:block; width:40%; height:100%; border-radius:2px; background:var(--primary); animation:bootSlide 1.15s ease-in-out infinite; }
@keyframes bootSlide { 0%{transform:translateX(-110%)} 100%{transform:translateX(330%)} }

/* ─── Аутбокс: неотправленные сообщения ─────────────────── */
.outbox-hint { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 16px; font-size:12.5px; color:var(--text-secondary); background:var(--bg-input); border-top:1px solid var(--border); }
.outbox-hint button { background:var(--primary); color:#fff; border:0; border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; }
.msg-status-failed { color:#e57373; cursor:pointer; display:inline-flex; align-items:center; }
.msg-status-failed:hover { color:#ff8a80; }
.app-toasts { position:fixed; left:50%; transform:translateX(-50%); bottom:86px; z-index:210; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.app-toast { max-width:min(86vw,460px); padding:8px 14px; border-radius:16px; font-size:13px; background:rgba(0,0,0,.82); color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.3); opacity:1; transition:opacity .45s ease; }
.app-toast.hide { opacity:0; }