/* ← КРАСОТА: Geist font — чёткий, современный, не Inter/Roboto */
/* Локальные шрифты — Google Fonts в РФ блокируется (рендер-блокер) */
@import url('/vendor/geist/geist.css');

/* ════════════════════════════════════════════════
   PALETTE VARIABLES  ← КРАСОТА
   3 варианта: violet (default) / cyan / rose
════════════════════════════════════════════════ */
:root {
  --accent:      #6366f1;   /* violet */
  --accent2:     #8b5cf6;
  --accent-dim:  rgba(99,102,241,.18);
  --accent-glow: rgba(99,102,241,.35);
}
[data-pal="cyan"]  { --accent:#06b6d4; --accent2:#0891b2; --accent-dim:rgba(6,182,212,.18); --accent-glow:rgba(6,182,212,.35); }
[data-pal="rose"]  { --accent:#f43f5e; --accent2:#e11d48; --accent-dim:rgba(244,63,94,.18);  --accent-glow:rgba(244,63,94,.35);  }

/* ════════════════════════════════════════════════
   DARK THEME (default)  ← КРАСОТА
════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  --bg:        #0c0c0f;
  --surface:   #111116;
  --surface2:  #18181f;
  --surface3:  #1f1f29;
  --border:    rgba(255,255,255,.07);
  --border2:   rgba(255,255,255,.11);
  --text:      #e8e8f2;
  --text2:     #9898b0;
  --text3:     #5c5c78;
  --msg-in:    #1a1a26;
  --msg-in-t:  #e8e8f2;
  --msg-out-t: #fff;
  --input-bg:  #16161e;
  --hover:     rgba(255,255,255,.05);
  --active:    rgba(99,102,241,.14);
  --shadow:    0 8px 40px rgba(0,0,0,.6);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.4);
  --online:    #22c55e;
  --danger:    #ef4444;
  --warn:      #f59e0b;
  --success:   #10b981;
  --glass:     rgba(17,17,22,.75);
  --glass-border: rgba(255,255,255,.08);
  --sb-w:      300px;
}

/* ════════════════════════════════════════════════
   LIGHT THEME  ← КРАСОТА
════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:        #f4f4f8;
  --surface:   #ffffff;
  --surface2:  #f8f8fc;
  --surface3:  #efeff5;
  --border:    rgba(0,0,0,.08);
  --border2:   rgba(0,0,0,.13);
  --text:      #14141e;
  --text2:     #5a5a7a;
  --text3:     #9898b0;
  --msg-in:    #ffffff;
  --msg-in-t:  #14141e;
  --input-bg:  #ffffff;
  --hover:     rgba(0,0,0,.04);
  --active:    rgba(99,102,241,.1);
  --shadow:    0 8px 40px rgba(0,0,0,.12);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.06);
  --glass:     rgba(255,255,255,.8);
  --glass-border: rgba(0,0,0,.08);
}

/* ════════════════════════════════════════════════
   RESET + BASE  ← КРАСОТА
════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ← КРАСОТА: кастомный скроллбар */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }

/* ════════════════════════════════════════════════
   KEYFRAMES  ← КРАСОТА: Framer Motion ощущение
════════════════════════════════════════════════ */
@keyframes fadeUp    { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes slideLeft { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes slideRight{ from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@keyframes msgIn     { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes pulse     { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }
@keyframes ripple    { from{transform:scale(0);opacity:.6} to{transform:scale(3);opacity:0} }
@keyframes recPulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
@keyframes toastIn   { from{opacity:0;transform:translateX(60px) scale(.9)} to{opacity:1;transform:none} }
@keyframes toastOut  { from{opacity:1;transform:none} to{opacity:0;transform:translateX(60px) scale(.9)} }
@keyframes orbFloat  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes shimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes dotBounce { 0%,80%,100%{transform:scale(.5);opacity:.3} 40%{transform:scale(1);opacity:1} }

/* ════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════ */
.hidden   { display: none !important; }
.grad     { background: linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mt       { margin-top: 12px; }
.w-full   { width: 100%; }
.sub-text { font-size: 12px; color: var(--text2); }

/* ════════════════════════════════════════════════
   SPLASH SCREEN  ← КРАСОТА
════════════════════════════════════════════════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity .4s ease;
}
.splash.fade-out { opacity: 0; pointer-events: none; }
.splash-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
  animation: orbFloat 6s ease-in-out infinite;
}
.splash-orb.s1 { width:360px; height:360px; top:-80px; left:-80px; background:var(--accent); animation-delay:0s; }
.splash-orb.s2 { width:280px; height:280px; bottom:-60px; right:-40px; background:var(--accent2); animation-delay:-3s; }
.splash-logo {
  width: 72px; height: 72px; border-radius: 22px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px var(--accent-glow);
  animation: scaleIn .5s cubic-bezier(.16,1,.3,1);
}
.splash-label { font-size: 14px; color: var(--text2); letter-spacing: .04em; }
.splash-bar {
  width: 160px; height: 3px; background: var(--surface3); border-radius: 99px; overflow: hidden;
}
.splash-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius: 99px;
  transition: width .4s ease;
  animation: shimmer 1.5s linear infinite;
  background-size: 200% 100%;
}

/* ════════════════════════════════════════════════
   BUTTONS  ← КРАСОТА + УДОБСТВО
════════════════════════════════════════════════ */
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  position: relative; overflow: hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%); }
.btn-primary:hover  { opacity:.92; transform:translateY(-1px); box-shadow:0 6px 28px var(--accent-glow); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: 14px;
  background: var(--surface3); color: var(--text); font-weight: 500;
  border: 1px solid var(--border);
  transition: background .15s, transform .15s;
}
.btn-secondary:hover { background: var(--surface2); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: 12px;
  background: rgba(255,255,255,.08); color: var(--text); font-weight: 500;
  transition: background .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.13); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: 14px;
  background: linear-gradient(135deg,#ef4444,#c53030);
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 16px rgba(239,68,68,.3);
  transition: opacity .15s, transform .15s;
}
.btn-danger:hover { opacity:.9; transform:translateY(-1px); }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); font-size: 18px;
  transition: background .15s, color .15s, transform .1s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }

/* ════════════════════════════════════════════════
   FIELDS  ← УДОБСТВО + КРАСОТА
════════════════════════════════════════════════ */
.field {
  width: 100%; padding: 13px 16px;
  background: var(--surface3); color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 13px; font-family: inherit; font-size: 14px;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); background: var(--input-bg); }
.field::placeholder { color: var(--text3); }
.field.select { cursor: pointer; }
option { background: var(--surface2); color: var(--text); }

.field-wrap { position: relative; }
.field-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 16px; pointer-events: none; }
.field-wrap .field { padding-left: 44px; }
.field-wrap.has-toggle .field { padding-left: 44px; padding-right: 44px; }

.lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }

.range-slider { width: 100%; height: 5px; accent-color: var(--accent); cursor: pointer; background: var(--surface3); border-radius: 99px; outline: none; }

/* ════════════════════════════════════════════════
   AVATAR  ← КРАСОТА
════════════════════════════════════════════════ */
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0;
  background-size: cover; background-position: center;
  transition: transform .15s, box-shadow .15s;
}
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.lg { width: 80px; height: 80px; font-size: 28px; box-shadow: 0 8px 24px var(--accent-glow); }

/* ════════════════════════════════════════════════
   TOAST  ← УДОБСТВО + КРАСОТА
════════════════════════════════════════════════ */
#toastContainer {
  position: fixed; top: 20px; right: 20px; z-index: 9998;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; max-width: 320px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 500;
  pointer-events: all;
  animation: toastIn .3s cubic-bezier(.16,1,.3,1);
  border-left: 3px solid var(--accent);
}
.toast-text { flex: 1; min-width: 0; }
.toast-close {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.toast-close:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: var(--border);
}
.notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.notif-pref-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}
.notif-pref-check input {
  accent-color: var(--accent);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warn); }
.toast i { font-size: 16px; }
.toast.success i { color: var(--success); }
.toast.error   i { color: var(--danger); }
.toast.warning i { color: var(--warn); }
.toast.info    i { color: var(--accent); }

/* ════════════════════════════════════════════════
   DIALOG  ← УДОБСТВО + КРАСОТА
════════════════════════════════════════════════ */
.dialog-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.dialog-overlay.open { display: flex; }
.dialog-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 24px; padding: 28px 26px 22px;
  width: 90%; max-width: 360px;
  box-shadow: var(--shadow);
  animation: scaleIn .25s cubic-bezier(.16,1,.3,1);
  color: var(--text);
}
.dlg-ico { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.dlg-ico.info    { background:var(--accent-dim); color:var(--accent); }
.dlg-ico.success { background:rgba(16,185,129,.12); color:var(--success); }
.dlg-ico.error   { background:rgba(239,68,68,.12);  color:var(--danger); }
.dlg-ico.warning { background:rgba(245,158,11,.12); color:var(--warn); }
.dialog-box h3   { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 8px; }
.dialog-box p    { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 18px; line-height: 1.6; }
.dlg-btns        { display: flex; gap: 10px; }
.dlg-btns button { flex: 1; }

/* ════════════════════════════════════════════════
   CONTEXT MENU  ← УДОБСТВО
════════════════════════════════════════════════ */
.ctx-menu {
  display: none; position: fixed; z-index: 9500;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 14px; padding: 6px;
  min-width: 180px;
  max-width: min(240px, calc(100vw - 16px)); /* не выходит за экран */
  box-shadow: var(--shadow);
  /* Анимация от точки открытия */
  animation: scaleIn .15s cubic-bezier(.16,1,.3,1);
  transform-origin: top left;
}
.ctx-menu.open { display: block; }
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background .12s;
  white-space: nowrap;
  min-height: 40px; /* удобно тапать на мобиле */
}
.ctx-item:hover { background: var(--hover); }
.ctx-item.danger { color: var(--danger); }
.ctx-item i { font-size: 16px; color: var(--text2); width: 18px; flex-shrink: 0; }
.ctx-item.danger i { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* ════════════════════════════════════════════════
   MODAL  ← КРАСОТА + УДОБСТВО
════════════════════════════════════════════════ */
.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 24px; padding: 24px;
  width: 90%; max-width: 460px; max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: fadeUp .3s cubic-bezier(.16,1,.3,1);
  color: var(--text);
}
.settings-card { max-width: 480px; }
.forward-card { max-width: 420px; width: 100%; }
.fw-search-wrap { display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface2);border-radius:12px;margin-bottom:10px;border:1.5px solid var(--border); }
.fw-search { flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit; }
.forward-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.forward-item { display:flex;align-items:center;gap:10px;padding: 9px 12px; border-radius: 12px; background: var(--surface2); cursor: pointer; transition: background .12s; }
.forward-item:hover { background: var(--surface3); }
.fi-info { display:flex;flex-direction:column;gap:1px;min-width:0; }
.forward-item .fi-title { font-size: 13px; font-weight: 600; color: var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.forward-item .fi-sub { font-size: 11px; color: var(--text3); }

/* Forwarded label */
.fwd-label {
  font-size: 11px;
  color: var(--text3);  /* входящие — приглушённый цвет */
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.fwd-label b { font-weight: 600; color: var(--text3); }
/* Свои сообщения — цвет как у точки (белый полупрозрачный) */
.msg-row.own .fwd-label,
.msg-row.own .fwd-label b {
  color: rgba(255,255,255,.7);
}
.modal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-hd h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.modal-tabs { display: flex; gap: 4px; background: var(--surface3); border-radius: 16px; padding: 5px; margin-bottom: 22px; }
.mtab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px; border-radius: 12px; font-size: 12px; font-weight: 600;
  color: var(--text2); transition: all .2s;
}
.mtab.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mtab i { font-size: 16px; }
.stab-pane { animation: fadeIn .15s ease; }

/* Avatar center */
.ava-center { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.ava-rel { position: relative; display: inline-block; }
.ava-cam {
  position: absolute; bottom: 1px; right: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 3px solid var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: transform .15s;
}
.ava-cam:hover { transform: scale(1.12); }

/* Colors grid */
.clr-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.clr {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cc); border: 3px solid transparent;
  transition: transform .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: transparent;
}
.clr:hover { transform: scale(1.12); }
.clr.active { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); color: #fff; transform: scale(1.1); }

/* Theme toggle */
.theme-toggle { display: flex; gap: 8px; }
.theme-opt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 13px;
  background: var(--surface3); border: 2px solid var(--border);
  font-weight: 600; font-size: 13px; color: var(--text2);
  transition: all .2s;
}
.theme-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* Account card */
.acct-row { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--surface3); border-radius: 16px; }

/* Members grid */
.members-grid { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.member-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  transition: background .12s;
}
.member-check:hover { background: var(--hover); }
.member-check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ════════════════════════════════════════════════
   LOGIN  ← КРАСОТА: cinematic
════════════════════════════════════════════════ */
.login-screen {
  display: none; position: fixed; inset: 0; z-index: 7000;
  background: var(--bg);
  align-items: center; justify-content: center;
}
.login-screen.open { display: flex; }
.login-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lorb {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .25;
  animation: orbFloat 8s ease-in-out infinite;
}
.lorb.l1 { width:500px; height:500px; top:-120px; left:-80px; background:var(--accent); }
.lorb.l2 { width:400px; height:400px; bottom:-100px; right:-60px; background:var(--accent2); animation-delay:-4s; }
.lorb.l3 { width:200px; height:200px; top:40%; left:40%; background:var(--accent); opacity:.1; animation-delay:-2s; }
.login-card {
  position: relative; z-index: 1;
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 28px; padding: 44px 40px 36px;
  width: 90%; max-width: 420px;
  box-shadow: var(--shadow);
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0;
}
.login-logo-wrap {
  width: 84px; height: 84px; border-radius: 26px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px var(--accent-glow);
  position: relative; overflow: hidden;
  transition: background .3s, box-shadow .3s;
}
.login-logo-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.login-card .field-wrap { width: 100%; }
.login-card .field { font-size: 15px; padding-top: 14px; padding-bottom: 14px; }
.login-card .btn-primary { margin-top: 10px; padding: 15px; font-size: 15px; letter-spacing: .02em; }
.login-logo-wrap::after { display: none; }
.login-h1 { font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 8px; letter-spacing: -.3px; color: var(--text); }
.login-sub { font-size: 14px; color: var(--text2); margin-bottom: 24px; line-height: 1.5; }
.login-err { font-size: 13px; color: var(--danger); min-height: 20px; margin-bottom: 4px; width: 100%; text-align: center; animation: fadeIn .2s ease; }
.palette-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.pal-label { font-size: 12px; color: var(--text3); letter-spacing: .03em; }
.pal {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pc); border: 3px solid transparent;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  cursor: pointer; position: relative;
}
.pal::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid transparent;
  transition: border-color .2s;
}
.pal:hover { transform: scale(1.15); }
.pal.active { border-color: rgba(255,255,255,.9); box-shadow: 0 0 0 3px var(--pc); transform: scale(1.18); }

/* ════════════════════════════════════════════════
   APP LAYOUT  ← КРАСОТА
════════════════════════════════════════════════ */
.app {
  display: flex; height: 100dvh; overflow: hidden;
  animation: fadeIn .2s ease;
  background: var(--surface); /* prevents dark gaps at seams */
}
@media (max-width: 768px) {
  .app { overflow: visible; } /* allow sidebar to slide out on mobile */
}

/* ════════════════════════════════════════════════
   SIDEBAR  ← КРАСОТА + УДОБСТВО
════════════════════════════════════════════════ */
.sidebar {
  width: var(--sb-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
  z-index: 100;
}

.sb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
}
.sb-brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.sb-hdr-actions { display: flex; gap: 4px; }

/* Search ← УДОБСТВО */
.sb-search {
  position: relative; padding: 0 12px 12px;
  flex-shrink: 0;
}
.sb-search-ico { position:absolute; left:24px; top:calc(50% - 14px); color:var(--text3); font-size:15px; pointer-events:none; }
.sb-search-input {
  width: 100%; padding: 10px 14px 10px 38px;
  background: var(--surface3); color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px; font-family: inherit; font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.sb-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.sb-search kbd { display: none; }

/* Tabs ← УДОБСТВО */
.sb-tabs {
  display: flex; gap: 2px; padding: 0 10px 10px;
  flex-shrink: 0;
}
.sb-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  transition: all .2s; position: relative;
}
.sb-tab i { font-size: 15px; }
.sb-tab.active { background: var(--active); color: var(--accent); }
.sb-tab:hover:not(.active) { background: var(--hover); color: var(--text); }
.sb-tab-wrap { flex: 1; position: relative; display: flex; min-width: 0; }
.sb-tab-wrap .sb-tab { flex: 1; width: 100%; min-width: 0; }
.nb {
  position: absolute; top: 4px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff;
  border-radius: 99px; font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}

/* Chat list pane */
.sb-pane { flex: 1; overflow-y: auto; padding: 0 8px; min-height: 0; background: var(--surface); }

.new-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--accent);
  transition: background .15s;
}
.new-btn:hover { background: var(--active); }

/* Chat items ← КРАСОТА + УДОБСТВО */
.chat-list-ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.chat-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 13px; cursor: pointer;
  transition: background .15s, transform .1s; position: relative;

}
.chat-item:hover { background: var(--hover); }
.chat-item:active { transform: scale(.98); }
.chat-item.active { background: var(--active); }

.ci-ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
  background-size: cover; background-position: center;
  position: relative; transition: transform .15s;
}
.chat-item:hover .ci-ava { transform: scale(1.06); }
.ci-ava .o-ring {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--online); border: 2px solid var(--surface);
}
.ci-body { flex: 1; min-width: 0; }
.ci-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sub { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Request items */
.req-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 13px;
  animation: fadeIn .2s ease;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.req-section {
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.req-item-out {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.14);
}
.req-item .ci-sub {
  display: block;
  margin-top: 2px;
}
.req-btns { display: flex; gap: 6px; }
.req-btns button { padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.req-acc { background: var(--success); color: #fff; }
.req-rej { background: var(--surface3); color: var(--text2); }
.req-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface3);
  color: var(--text2);
  border: 1px solid var(--border);
}
.req-cancel:hover {
  background: rgba(239,68,68,.12);
  color: var(--danger);
}
.af-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Sidebar profile strip ← КРАСОТА */
.sb-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--border);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.sb-profile:hover { background: var(--hover); }
.sb-pinfo { flex: 1; min-width: 0; }
.sb-pname { font-size: 13px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-psub  { font-size: 11px; color: var(--text2); }

/* ════════════════════════════════════════════════
   MAIN AREA  ← КРАСОТА
════════════════════════════════════════════════ */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); position: relative; }

/* Header ← КРАСОТА: glassmorphism */
.chat-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 10; flex-shrink: 0;
  min-height: 62px;
}
.hamburger { display: none; }
@media (max-width: 768px) {
  .hamburger { display: flex !important; }
}
.hdr-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.hdr-txt { min-width: 0; }
.hdr-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sub  { font-size: 12px; color: var(--text2); }
.hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Online pill */
.online-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 99px;
  background: var(--surface3); border: 1px solid var(--border);
  font-size: 12px; color: var(--text2);
}
.o-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--online);
  animation: pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}

/* Call buttons */
.call-btns { display: flex; gap: 4px; }

/* ← КРАСОТА: dot-grid background */
.msgs {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 6px;
  display: flex; flex-direction: column; gap: 2px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.025) 1px, transparent 0);
  background-size: 24px 24px;
  position: relative;
}
/* During circle expand, allow overflow */
.msgs.circle-expanded { overflow: visible; }
[data-theme="light"] .msgs {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.04) 1px, transparent 0);
}
.msgs-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; flex: 1;
  color: var(--text3); font-size: 14px;
  animation: fadeIn .4s ease;
}
.msgs-empty i { font-size: 48px; opacity: .25; }

/* ════════════════════════════════════════════════
   MESSAGES  ← КРАСОТА
════════════════════════════════════════════════ */
.msg-day {
  text-align: center; font-size: 11px; color: var(--text3); font-weight: 500;
  padding: 5px 14px; background: var(--surface3); border: 1px solid var(--border);
  border-radius: 99px; align-self: center; margin: 10px 0;
  letter-spacing: .03em;
}
.msg-row {
  display: flex; gap: 6px;
  animation: msgIn .2s cubic-bezier(.16,1,.3,1);
  max-width: 100%;
}
.msg-row.own { flex-direction: row-reverse; justify-content: flex-start; }
.msg-row .msg-ava { flex-shrink: 0; align-self: flex-end; }

.msg-bubble {
  max-width: min(78%, 420px);
  width: fit-content;            /* shrinks to content */
  padding: 5px 9px;
  border-radius: 14px 14px 14px 4px;
  background: var(--msg-in);
  color: var(--msg-in-t);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  word-break: break-word;
  position: relative;
  transition: box-shadow .15s;
}
.msg-bubble:hover { box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.msg-row.own .msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--msg-out-t);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 14px var(--accent-glow);
}
.msg-sender {
  font-size: 11px; font-weight: 700; color: var(--accent);
  margin-bottom: 1px; display: block; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.msg-row.own .msg-sender { display: none; }
.msg-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 1px; }
.msg-time { font-size: 10px; opacity: .5; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.msg-edited { font-size: 10px; opacity: .55; letter-spacing: .02em; }

/* Media in messages */
.msg-img { max-width: 100%; max-height: 280px; border-radius: 12px; cursor: pointer; display: block; margin-top: 6px; object-fit: cover; }
/* нативный video скрыт — используем кастомный плеер */
.msg-video { display: none !important; }

/* ─── Кастомный видео-плеер (cvp) ─────────────────────── */
.cvp-wrap {
  position: relative;
  max-width: 340px;
  width: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* Не вылазим за пузырь сообщения */
  max-width: min(340px, calc(100% - 0px));
  flex-shrink: 1;
}
.cvp-wrap video {
  width: 100%;
  /* По умолчанию горизонтальное — высота ограничена */
  max-height: 260px;
  display: block;
  background: #000;
  cursor: pointer;
  /* JS меняет height/max-height для вертикальных видео */
}
/* Вертикальное видео — JS задаёт размеры, CSS не мешает */
.cvp-wrap.cvp-portrait {
  overflow: hidden;
}
.cvp-wrap.cvp-portrait video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}
/* Горизонтальный слайдер скрыт у portrait */
.cvp-wrap.cvp-portrait .cvp-vol-wrap { display: none !important; }

/* Вертикальный слайдер громкости */
.cvp-vol-portrait {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
/* Показываем при hover (десктоп) */
.cvp-wrap.cvp-portrait:hover .cvp-vol-portrait {
  opacity: 1;
  pointer-events: all;
}
/* Показываем при controls visible (любой девайс) */
.cvp-wrap.cvp-portrait:not(.controls-hidden) .cvp-vol-portrait,
.cvp-wrap.cvp-portrait.cvp-vol-touch .cvp-vol-portrait {
  opacity: 1;
  pointer-events: all;
}
.cvp-vol-portrait-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 4px;
  height: 80px;
  cursor: pointer;
  accent-color: var(--accent, #6366f1);
  background: rgba(255,255,255,.25);
  border-radius: 99px;
  outline: none;
}
.cvp-vol-portrait-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: pointer;
}
.cvp-vol-portrait-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 13px !important;
}
/* Видео всегда внутри пузыря */
.msg-bubble .cvp-wrap {
  max-width: 100%;
}
.cvp-big-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .18s;
  background: rgba(0,0,0,.22);
}
.cvp-big-play.hidden { opacity: 0; pointer-events: none; }
.cvp-big-play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .13s, background .13s;
}
.cvp-big-play:hover .cvp-big-play-btn,
.cvp-big-play:active .cvp-big-play-btn { transform: scale(1.1); background: rgba(255,255,255,.28); }
.cvp-big-play-btn i { font-size: 22px; color: #fff; margin-left: 3px; }

.cvp-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.74));
  display: flex; flex-direction: column; gap: 5px;
  transition: opacity .22s, transform .22s;
}
.cvp-wrap.controls-hidden .cvp-bar { opacity: 0; pointer-events: none; transform: translateY(5px); }

.cvp-progress {
  width: 100%; height: 4px;
  background: rgba(255,255,255,.22);
  border-radius: 99px; cursor: pointer;
  position: relative; flex-shrink: 0;
  transition: height .12s;
}
.cvp-progress:hover { height: 6px; }
.cvp-progress-fill {
  height: 100%; background: var(--accent, #6366f1);
  border-radius: 99px; width: 0%;
  pointer-events: none; transition: width .08s linear;
}
.cvp-progress-thumb {
  position: absolute; top: 50%;
  transform: translate(50%, -50%);
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  pointer-events: none; opacity: 0;
  transition: opacity .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  right: 100%;
}
.cvp-progress:hover .cvp-progress-thumb { opacity: 1; }

.cvp-controls { display: flex; align-items: center; gap: 4px; }

.cvp-btn {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 3px 5px; border-radius: 6px;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s; flex-shrink: 0;
}
.cvp-btn:hover { background: rgba(255,255,255,.16); }
.cvp-btn i { font-size: 15px; }

.cvp-time {
  font-size: 11px; color: rgba(255,255,255,.82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; margin: 0 3px; flex-shrink: 0;
}
.cvp-spacer { flex: 1; }

.cvp-vol-wrap { display: flex; align-items: center; gap: 4px; }
.cvp-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 60px; height: 4px;
  border-radius: 99px; background: rgba(255,255,255,.25);
  outline: none; cursor: pointer;
}
.cvp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.cvp-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
}
.cvp-speed-btn {
  font-size: 11px !important; font-weight: 700;
  letter-spacing: -.3px; padding: 3px 6px;
  background: rgba(255,255,255,.1); border-radius: 5px;
  color: rgba(255,255,255,.9);
}
.cvp-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px;
  pointer-events: none;
  display: flex; align-items: center; gap: 4px;
}
.cvp-badge i { font-size: 12px; }

.msg-audio { width: 200px; margin-top: 6px; accent-color: var(--accent); }
.msg-file { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.1); padding: 10px 12px; border-radius: 12px; margin-top: 6px; font-size: 13px; text-decoration: none; color: inherit; cursor: pointer; transition: background .15s; }
.msg-file:hover { background: rgba(0,0,0,.2); }
/* иконка-блок с цветом по типу */
.msg-file-ico-wrap {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 19px;
}
.mft-image  { background: rgba(99,102,241,.18); color: #818cf8; }
.mft-video  { background: rgba(239,68,68,.15);  color: #f87171; }
.mft-audio  { background: rgba(34,197,94,.15);  color: #4ade80; }
.mft-pdf    { background: rgba(239,68,68,.18);  color: #f87171; }
.mft-doc    { background: rgba(59,130,246,.18); color: #60a5fa; }
.mft-sheet  { background: rgba(34,197,94,.18);  color: #4ade80; }
.mft-slide  { background: rgba(249,115,22,.18); color: #fb923c; }
.mft-arch   { background: rgba(234,179,8,.18);  color: #facc15; }
.mft-code   { background: rgba(168,85,247,.18); color: #c084fc; }
.mft-text   { background: rgba(148,163,184,.18);color: #94a3b8; }
.mft-apk    { background: rgba(34,197,94,.18);  color: #4ade80; }
.mft-font   { background: rgba(249,115,22,.18); color: #fb923c; }
.mft-3d     { background: rgba(6,182,212,.18);  color: #22d3ee; }
.mft-file   { background: rgba(148,163,184,.15);color: #94a3b8; }


/* Video circle ← КРАСОТА */
.msg-circle-wrap, .msg-square-wrap {
  position: relative; display: inline-block;
  margin-top: 2px; cursor: pointer;
  overflow: hidden;
  width: 140px; height: 140px;
  transition: width .35s cubic-bezier(.16,1,.3,1),
              height .35s cubic-bezier(.16,1,.3,1),
              border-radius .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.msg-circle-wrap:hover { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.msg-circle, .msg-square {
  width: 100%; height: 100%;
  border-radius: 18px;
  object-fit: cover; display: block;
  transition: width .35s cubic-bezier(.16,1,.3,1),
              height .35s cubic-bezier(.16,1,.3,1);
}
.vc-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28);
  border-radius: 18px;
  transition: opacity .18s;
  pointer-events: none;
}
.vc-overlay.playing { opacity: 0; }
.vc-overlay.playing:hover { opacity: .6; }
.vc-play-ico { font-size: 28px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.vc-dur {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.5);
  border-radius: 6px; padding: 1px 5px;
  pointer-events: none; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.msgs.vc-msgs-expanded { overflow: visible; }
.msg-bubble:has(.msg-circle-wrap) {
  padding: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 18px !important;
  overflow: visible !important;
}
/* Fullscreen overlay */
.vc-fullscreen {
  position: fixed; inset: 0; z-index: 9950;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
  pointer-events: none;
}
.vc-fullscreen.open { background: rgba(0,0,0,.92); pointer-events: all; }
.vc-fs-bg {
  position: absolute; inset: 0;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter .25s;
}
.vc-fullscreen.open .vc-fs-bg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.vc-fs-video {
  position: relative; z-index: 1;
  width: min(88vw, 70vh);
  height: auto;
  max-width: 560px; max-height: 70vh;
  aspect-ratio: 1;
  border-radius: 22px;
  object-fit: cover; display: block;
  box-shadow: 0 20px 80px rgba(0,0,0,.7);
  opacity: 0; transform: scale(.85);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
  cursor: pointer;
}
.vc-fullscreen.open .vc-fs-video { opacity: 1; transform: scale(1); }
.vc-fs-ui {
  position: absolute; z-index: 2;
  top: 0; left: 0; right: 0; padding: 20px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.vc-fs-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: all;
  transition: background .15s; backdrop-filter: blur(8px);
}
.vc-fs-close:hover { background: rgba(255,255,255,.28); }
.vc-fs-timer {
  font-size: 13px; color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 99px;
  backdrop-filter: blur(8px);
}

/* Reaction row */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  font-size: 13px; cursor: pointer; transition: background .12s;
}
.reaction-pill:hover { background: var(--accent-dim); }
.reaction-pill.mine { border-color: var(--accent); background: var(--accent-dim); }

/* System message */
.msg-system {
  text-align: center; font-size: 12px; color: var(--text3);
  padding: 4px 14px; background: var(--surface2);
  border-radius: 99px; align-self: center;
  font-style: italic;
}

/* ════════════════════════════════════════════════
   FILE PREVIEW BAR  ← УДОБСТВО
════════════════════════════════════════════════ */
.fp-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.fp-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 10px;
  background: var(--surface3); border: 1px solid var(--border);
  font-size: 12px; max-width: 180px;
}
.fp-item img { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; }
.fp-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-remove { color: var(--text3); font-size: 14px; transition: color .1s; flex-shrink: 0; }
.fp-remove:hover { color: var(--danger); }

/* ════════════════════════════════════════════════
   RECORDING BAR  ← КРАСОТА
════════════════════════════════════════════════ */
.rec-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(239,68,68,.08);
  border-top: 1px solid rgba(239,68,68,.2);
  font-size: 13px; font-weight: 500;
}
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: recPulse 1s ease-in-out infinite; flex-shrink: 0; }
.rec-type-lbl { color: var(--text2); font-size: 12px; }
#recTimer { color: var(--danger); font-weight: 700; min-width: 36px; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════
   INPUT AREA  ← КРАСОТА + УДОБСТВО
════════════════════════════════════════════════ */
.input-zone {
  padding: 8px 12px 10px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.input-row { display: flex; align-items: flex-end; gap: 8px; }

/* ← УДОБСТВО: auto-grow textarea */
.input-box {
  flex: 1; position: relative;
  background: var(--surface3);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.msg-ta {
  width: 100%; min-height: 44px; max-height: 180px;
  padding: 11px 40px 11px 16px; resize: none; overflow-y: auto;
  background: transparent; color: var(--text);
  border: none; outline: none;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  display: block;
}
.msg-ta::placeholder { color: var(--text3); }
.emoji-ico { position: absolute; right: 8px; bottom: 7px; color: var(--text3); font-size: 17px; transition: color .15s; }
.emoji-ico:hover { color: var(--accent); }

/* Send FAB ← КРАСОТА */
.send-fab {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: all .18s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden;
}
.send-fab::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%); pointer-events:none; }
.send-fab:hover:not(:disabled) { transform: scale(1.08) translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow); }
.send-fab:active:not(:disabled) { transform: scale(.94); }
.send-fab:disabled { background: var(--surface3); box-shadow: none; color: var(--text3); }

.attach { color: var(--text2) !important; }
#attachBtn { position: relative; bottom: 1px; } /* поднимаем на 1px */
#attachBtn i { position: relative; bottom: 1px; }

/* ════════════════════════════════════════════════
   ATTACH MENU  ← КРАСОТА
════════════════════════════════════════════════ */
.attach-popup {
  display: none; position: fixed; z-index: 2000;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 16px; padding: 6px;
  min-width: 175px;
  box-shadow: var(--shadow);
  animation: fadeUp .15s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom left;
}
.attach-popup.open { display: block; }
.att-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text);
  transition: background .12s;
}
.att-item:hover { background: var(--hover); }
.att-item i { font-size: 17px; color: var(--accent); width: 20px; }

/* ════════════════════════════════════════════════
   EMOJI PICKER  ← УДОБСТВО
════════════════════════════════════════════════ */
.emoji-picker {
  display: none; position: fixed; z-index: 5000;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 16px; padding: 12px;
  width: 280px; max-height: 300px;
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.emoji-picker.open { display: block; animation: fadeUp .15s ease; }
.emoji-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; }
.ep-btn { font-size: 22px; border-radius: 8px; padding: 4px; text-align: center; cursor: pointer; transition: background .1s; }
.ep-btn:hover { background: var(--hover); }

/* ════════════════════════════════════════════════
   CALL MODAL  ← КРАСОТА
════════════════════════════════════════════════ */
.call-modal {
  display: none; position: fixed; inset: 0; z-index: 6000;
  align-items: center; justify-content: center; flex-direction: column;
  color: #fff;
}
.call-modal.open { display: flex; }
.call-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(99,102,241,.85),rgba(139,92,246,.85));
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
}
.call-content { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.call-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  padding: 8px;
  animation: pulse 2s ease-in-out infinite;
  margin-bottom: 8px;
}
.call-ava {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff;
  background-size: cover; background-position: center;
}
.call-name  { font-size: 24px; font-weight: 800; }
.call-status { font-size: 14px; opacity: .8; }
.call-actions { display: flex; gap: 20px; margin-top: 16px; }
.call-btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all .15s;
}
.call-btn:hover { transform: scale(1.08); }
.call-end  { background: var(--danger); }
.call-ans  { background: var(--success); }
.call-mute { background: rgba(255,255,255,.2); }

/* ════════════════════════════════════════════════
   CIRCLE RECORD  ← КРАСОТА
════════════════════════════════════════════════ */
.circle-overlay {
  display: none; position: fixed; inset: 0; z-index: 5500;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
.circle-overlay.open { display: flex; }
.circle-card {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  animation: scaleIn .3s cubic-bezier(.16,1,.3,1);
}
.circle-preview-wrap { width: 220px; height: 220px; position: relative; }
.circle-preview-wrap video {
  width: 200px; height: 200px; border-radius: 50%;
  object-fit: cover; position: absolute; top: 10px; left: 10px;
}
.circle-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.c-bg  { fill:none; stroke:rgba(255,255,255,.15); stroke-width:5; }
.c-fg  { fill:none; stroke:var(--danger); stroke-width:5; stroke-linecap:round; stroke-dasharray:628.3; stroke-dashoffset:628.3; transition:stroke-dashoffset 1s linear; }
.circle-badge {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(239,68,68,.85); color:#fff; font-size:11px; font-weight:700;
  padding: 3px 10px; border-radius: 99px;
  display: flex; align-items: center; gap: 5px;
}
.circle-time { font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.circle-actions { display: flex; gap: 14px; }

/* ════════════════════════════════════════════════
   MEDIA VIEWER  ← УДОБСТВО
════════════════════════════════════════════════ */
.media-viewer {
  display: none; position: fixed; inset: 0; z-index: 9900;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
.media-viewer.open { display: flex; }
.mv-close {
  position: absolute; top: 20px; right: 20px;
  color: rgba(255,255,255,.6); font-size: 24px;
  background: rgba(255,255,255,.1); border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mv-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ════════════════════════════════════════════════
   DRAG DROP  ← УДОБСТВО
════════════════════════════════════════════════ */
.drop-zone {
  display: none; position: absolute; inset: 0; z-index: 50;
  background: var(--accent-dim);
  border: 3px dashed var(--accent);
  border-radius: 16px; margin: 8px;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  color: var(--accent); font-size: 18px; font-weight: 700;
  pointer-events: none;
}
.drop-zone.active { display: flex; animation: fadeIn .2s ease; }
.drop-zone i { font-size: 48px; }

/* ════════════════════════════════════════════════
   FRIEND REQUEST POPUP  ← УДОБСТВО
════════════════════════════════════════════════ */
.frq-popup {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 18px; padding: 14px 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px;
  z-index: 8500; min-width: 280px;
  animation: toastIn .3s cubic-bezier(.16,1,.3,1);
}
.frq-ava { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.frq-txt { flex: 1; }
.frq-name { font-weight: 700; font-size: 14px; }
.frq-sub  { font-size: 12px; color: var(--text2); }
.frq-btns { display: flex; gap: 6px; }
.frq-btns button { padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.frq-y { background: var(--success); color: #fff; }
.frq-n { background: var(--surface3); color: var(--text2); }

/* ════════════════════════════════════════════════
   MOBILE  ← УДОБСТВО: mobile-first
════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   KEYBOARD SHORTCUTS OVERLAY  ← УДОБСТВО
════════════════════════════════════════════════ */
.shortcuts-badge {
  display: none; position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 14px; font-size: 12px; color: var(--text2);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
kbd { background: var(--surface3); border: 1px solid var(--border2); border-radius: 5px; padding: 1px 5px; font-size: 11px; font-family: 'Geist Mono', monospace; }

/* ════════════════════════════════════════════════
   SELECTION  ← КРАСОТА
════════════════════════════════════════════════ */
::selection { background: var(--accent-dim); color: var(--text); }

/* ════════════════════════════════════════════════
   FOCUS VISIBLE  ← УДОБСТВО: accessibility
════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ════════════════════════════════════════════════
   SCREEN SHARE UI  ← Discord-style
════════════════════════════════════════════════ */
.screen-win {
  background: #0d0d12 !important;
}
.screen-share-ui {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 20px;
}
.screen-share-viewer {
  justify-content: flex-start;
}
.ss-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 900px;
  padding: 12px 16px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.ss-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent); padding: 5px 14px; border-radius: 99px;
}
.ss-badge i { font-size: 15px; }
.ss-peer { font-size: 13px; color: rgba(255,255,255,.6); }

.ss-preview-wrap {
  flex: 1; width: 100%; max-width: 900px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
  position: relative;
  min-height: 0;
}
.ss-main-view {
  width: 100%; max-width: 100%;
}
.ss-preview {
  width: 100%; height: 100%;
  max-height: calc(100vh - 200px);
  border-radius: 14px;
  background: #000;
  object-fit: contain;
  border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.ss-remote {
  width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
}
.ss-overlay-text {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.7);
  font-size: 12px; padding: 5px 14px; border-radius: 99px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ss-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* ── Password field toggle ── */
.pass-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text3, #9898b0);
  font-size: 16px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s; z-index: 1;
}
.pass-toggle:hover { color: var(--accent, #6366f1); }
.pass-toggle .ti-eye,
.pass-toggle .ti-eye-off {
  width: 18px;
  height: 18px;
  display: block;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--local-toggle-icon) center / contain no-repeat;
  mask: var(--local-toggle-icon) center / contain no-repeat;
}
.pass-toggle .ti-eye::before,
.pass-toggle .ti-eye-off::before {
  content: '' !important;
}
.pass-toggle .ti-eye {
  --local-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M3 12c2.4 -4 5.4 -6 9 -6s6.6 2 9 6c-2.4 4 -5.4 6 -9 6s-6.6 -2 -9 -6z'/%3E%3C/g%3E%3C/svg%3E");
}
.pass-toggle .ti-eye-off {
  --local-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.7 2.7'/%3E%3Cpath d='M9.4 5.4a9.4 9.4 0 0 1 2.6 -0.4c3.6 0 6.6 2 9 6a16 16 0 0 1 -3.1 3.7'/%3E%3Cpath d='M6.5 6.5c-1.3 .9 -2.5 2.1 -3.5 3.5c2.4 4 5.4 6 9 6c1.4 0 2.7 -0.3 3.9 -0.9'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/g%3E%3C/svg%3E");
}

.login-card .btn-primary .ti-arrow-right,
.login-card .btn-primary .ti-user-plus,
.login-links .ti-lock-open,
.login-links .ti-user-plus {
  width: 1em;
  height: 1em;
  font-size: 1em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--local-login-icon) center / contain no-repeat;
  mask: var(--local-login-icon) center / contain no-repeat;
}
.login-card .btn-primary .ti-arrow-right::before,
.login-card .btn-primary .ti-user-plus::before,
.login-links .ti-lock-open::before,
.login-links .ti-user-plus::before {
  content: '' !important;
}
.login-card .btn-primary .ti-arrow-right {
  --local-login-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6l-6 6'/%3E%3C/g%3E%3C/svg%3E");
}
.login-card .btn-primary .ti-user-plus,
.login-links .ti-user-plus {
  --local-login-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M16 19h6'/%3E%3Cpath d='M19 16v6'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4'/%3E%3C/g%3E%3C/svg%3E");
}
.login-links .ti-lock-open {
  --local-login-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M9 11v-4a3 3 0 0 1 5.6 -1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── PWA install button in sidebar ── */
.pwa-install-btn {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 16px); margin: 0 8px 6px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--accent-dim, rgba(99,102,241,.15));
  border: 1.5px dashed var(--accent, #6366f1);
  color: var(--accent, #6366f1); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.pwa-install-btn:hover { background: var(--active, rgba(99,102,241,.22)); }
.pwa-install-btn i { font-size: 16px; }

/* ── Call timer ── */
.call-timer {
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.75);
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* .msg-sender defined above */

/* ── Input box focus ring improvement ── */
.input-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 2px 8px rgba(0,0,0,.1);
}

/* ── Attachment menu item hover ── */
.att-item { border-radius: 11px; transition: background .12s, transform .1s; }
.att-item:hover { background: var(--hover); transform: translateX(3px); }

/* ── New message animation ── */
@keyframes msgPop {
  0%   { opacity:0; transform: translateY(10px) scale(.96); }
  60%  { transform: translateY(-2px) scale(1.01); }
  100% { opacity:1; transform: none; }
}
.msg-row { animation: msgPop .25s cubic-bezier(.16,1,.3,1); }

/* ── Sidebar active tab indicator ── */
.sb-tab.active::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sb-tab { position: relative; }

/* ── Toast improvements ── */
.toast {
  animation: toastIn .35s cubic-bezier(.16,1,.3,1);
  border-radius: 16px;
}

/* ── Avatar hover in header ── */
.hdr-info .avatar.sm { transition: transform .15s; }
.hdr-info .avatar.sm:hover { transform: scale(1.08); }

/* ════════════════════════════════════════════════
   CALL WINDOW REDESIGN 2026  ← КРАСОТА
════════════════════════════════════════════════ */

/* Incoming call modal — glassmorphism card */
.call-modal {
  display: none; position: fixed; inset: 0; z-index: 6000;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.call-modal.open { display: flex; }

/* Override previous call-bg for incoming */
#callModal .call-bg { display: none; }
#callModal .call-content {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 28px;
  padding: 36px 32px 28px;
  min-width: 300px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  animation: scaleIn .25s cubic-bezier(.16,1,.3,1);
}

/* Avatar ring pulse for incoming */
#callModal .call-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  padding: 6px;
  animation: ringPulse 1.4s ease-in-out infinite;
  margin: 0 auto 16px;
}
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 14px transparent; }
}
#callModal .call-ava {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  font-size: 36px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background-size: cover;
}
#callModal .call-name   { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 4px; color: var(--text); }
#callModal .call-status { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 24px; }
#callModal .call-actions { display: flex; gap: 16px; justify-content: center; }

/* Active call window buttons */
.call-win .call-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #0d0d18 0%, #1a0a2e 100%);
}
.call-btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; border: none;
  transition: transform .15s, filter .15s, box-shadow .15s;
  color: #fff;
}
.call-btn:hover { transform: scale(1.1); filter: brightness(1.15); }
.call-btn:active { transform: scale(.93); }
.call-ans  { background: #22c55e; box-shadow: 0 4px 20px rgba(34,197,94,.5); }
.call-end  { background: #ef4444; box-shadow: 0 4px 20px rgba(239,68,68,.5); }
.call-mute { background: rgba(255,255,255,.18); }
.call-mute.muted { background: #ef4444; }

/* Audio call card inside active call-win */
.call-win .call-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.call-win .call-name   { font-size: 22px; font-weight: 800; color: #fff; }
.call-win .call-status { font-size: 13px; color: rgba(255,255,255,.6); }
.call-win .call-timer  { font-size: 13px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.call-win .call-ring   { border-color: rgba(255,255,255,.3); animation: pulse 2.5s ease-in-out infinite; }
.call-win .call-ava    { background: rgba(255,255,255,.15); }
.call-win .call-actions { display: flex; gap: 18px; margin-top: 20px; }

/* ════════════════════════════════════════════════
   FLOATING CALL WINDOW  ← КРАСОТА
════════════════════════════════════════════════ */
.call-win-float {
  position: fixed;
  top: 16px; right: 16px;    /* ← TOP right */
  bottom: auto; left: auto;
  width: 300px; height: 210px;
  border-radius: 18px;
  overflow: hidden;
  z-index: 8000;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s;
  animation: slideRight .3s cubic-bezier(.16,1,.3,1);
}
@keyframes slideRight {
  from { opacity:0; transform: translateX(60px) scale(.9); }
  to   { opacity:1; transform: none; }
}
.call-win-float:active { cursor: grabbing; box-shadow: 0 20px 80px rgba(0,0,0,.8); }
.cw-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #0d0d18 0%, #1a0a2e 100%);
}
/* Controls bar */
.cw-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  z-index: 2;
}
.cw-timer {
  font-size: 11px; color: rgba(255,255,255,.65);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  align-self: flex-start; padding-left: 4px;
}
.cw-btns  { display: flex; gap: 8px; align-items: center; }
.cw-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: none; cursor: pointer; color: #fff;
  transition: transform .12s, filter .12s;
}
.cw-btn:hover  { transform: scale(1.1); filter: brightness(1.2); }
.cw-btn:active { transform: scale(.9); }
.cw-mute      { background: rgba(255,255,255,.2); }
.cw-screen    { background: rgba(255,255,255,.15); }
.cw-flip-cam  { background: rgba(255,255,255,.15); }
.cw-flip-cam:disabled { opacity: .5; pointer-events: none; }
.cw-end       { background: #ef4444; box-shadow: 0 2px 12px rgba(239,68,68,.5); }

/* Split-screen: два видео одинакового размера рядом */
.cw-split {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  z-index: 1;
}
.cw-vid-half {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cw-vid-remote {
  border-right: 1px solid rgba(255,255,255,.12);
  cursor: context-menu;
}
.cw-vid-self {
  /* Зеркало для своей камеры */
  transform: scaleX(-1);
}
/* Развёрнутый режим — оба видео тоже split */
.call-win-float.cw-expanded .cw-split {
  flex-direction: row;
}
.call-win-float.cw-expanded .cw-vid-half {
  object-fit: contain;
  background: #000;
}
/* Audio call content */
.cw-audio-content {
  position: relative; z-index: 2;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  transition: opacity .3s ease;
}
.cw-ava {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 0 6px rgba(255,255,255,.05);
  animation: pulse 2.5s ease-in-out infinite;
}
.cw-name  { font-size: 15px; font-weight: 700; color: #fff; }
.call-win-float .cw-timer { font-size: 13px; color: rgba(255,255,255,.55); }
.call-win-float .cw-btns  { margin-top: 6px; }

/* Call modal — centered card (incoming + outgoing ringing) */
#callModal {
  display: none; position: fixed; inset: 0; z-index: 6000;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
#callModal.open { display: flex; pointer-events: all; animation: fadeIn .2s ease; }
#callModal .call-bg { display: none; }
#callModal .call-content {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 28px; padding: 32px 28px 24px;
  min-width: 300px; max-width: 340px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  animation: scaleIn .25s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#callModal .call-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--accent);
  padding: 5px; animation: ringPulse 1.4s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  60%      { box-shadow: 0 0 0 12px transparent; }
}
#callModal .call-ava {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  font-size: 28px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background-size: cover;
}
#callModal .call-name   { font-size: 17px; font-weight: 800; color: var(--text); }
#callModal .call-status { font-size: 12px; color: var(--text2); }
#callModal .call-actions { display: flex; gap: 20px; margin-top: 8px; }
.call-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: none; cursor: pointer; color: #fff; transition: transform .12s, box-shadow .12s; }
.call-btn:hover  { transform: scale(1.08); }
.call-btn:active { transform: scale(.93); }
.call-ans  { background: #22c55e; box-shadow: 0 4px 16px rgba(34,197,94,.45); }
.call-end  { background: #ef4444; box-shadow: 0 4px 16px rgba(239,68,68,.45); }
.call-mute { background: rgba(255,255,255,.15); }

/* ════════════════════════════════════════════════
   MESSAGE TYPES — optimized layout  ← КРАСОТА
════════════════════════════════════════════════ */



/* Custom voice player — no default browser controls */
.voice-player {
  display: flex; align-items: center; gap: 8px;
  background: transparent;  /* remove border/bg from bubble */
  border-radius: 0; padding: 0;
  margin: 0; min-width: 160px; max-width: 210px;
  user-select: none; -webkit-user-select: none;
}
.msg-row.own .voice-player { background: transparent; }
.vp-play {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.9); color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer; border: none;
  transition: transform .12s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.vp-play:hover  { transform: scale(1.08); }
.vp-play:active { transform: scale(.91); }
.vp-body { flex: 1; min-width: 0; }
.vp-waveform {
  height: 20px; display: flex; align-items: center; gap: 1px;
  cursor: pointer; margin-bottom: 1px;
}
.vp-bar {
  flex: 1; border-radius: 2px; min-height: 2px;
  transition: none; /* no transition — use JS inline style for perf */
  background: rgba(255,255,255,.3);
}
.vp-bar.played { background: rgba(255,255,255,.95); }
/* Incoming messages — dark bars */
.msg-row:not(.own) .voice-player { background: transparent; }
.msg-row:not(.own) .vp-bar { background: var(--border2); }
.msg-row:not(.own) .vp-bar.played { background: var(--accent); }
.msg-row:not(.own) .vp-play { background: var(--accent); color: #fff; }
.vp-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 10px;
  color: var(--text2);
  min-height: 14px;
  font-variant-numeric: tabular-nums;
}
/* pos скрыт по умолчанию, dur виден */
.vp-pos-hidden { display: none !important; }
.vp-dur-hidden { display: none !important; }
.msg-row.own .vp-meta { color: rgba(255,255,255,.6); }
.msg-row.own .vp-dur,
.msg-row.own .vp-pos { color: rgba(255,255,255,.6); font-weight: 600; }

/* File message — compact */
.msg-file-body { min-width: 0; }
.msg-file-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-file-size { font-size: 11px; opacity: .6; }

/* Image — rounded with overlay */
.msg-img-wrap { position: relative; display: inline-block; margin-top: 2px; }
.msg-img { max-width: 240px; max-height: 200px; border-radius: 12px; display: block; cursor: pointer; object-fit: cover; }
.msg-img:hover { filter: brightness(.9); }

/* Expanded call window — full screen */
.call-win-float.cw-expanded {
  top: 0 !important; left: 0 !important;
  right: auto !important; bottom: auto !important;
  width: 100vw !important; height: 100dvh !important;
  border-radius: 0 !important;
  z-index: 9500;
  cursor: default;
}
/* rv/lv теперь внутри .cw-split — управляется через .cw-vid-half */
.cw-expand { background: rgba(255,255,255,.15); }
/* Long press hint */
.call-win-float::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.08);
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.call-win-float.pressing::after { opacity: 1; }

/* Compact bubble for media-only messages */
.msg-bubble:has(.voice-player) {
  padding: 4px 6px;
  background: var(--msg-in);
}
.msg-row.own .msg-bubble:has(.voice-player) {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.msg-bubble:has(.msg-circle-wrap) {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: visible !important;  /* allow expand animation */
}

/* ── Call record in chat ── */
.call-record {
  display: flex; align-items: center; gap: 6px;
  align-self: center;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px; color: var(--text2);
  margin: 4px auto;
  max-width: fit-content;
  animation: fadeIn .2s ease;
}
.cr-icon  { font-size: 13px; }
.cr-label { color: var(--text); font-weight: 600; }
.cr-extra { color: var(--text2); }
.cr-time  { color: var(--text3); font-size: 10px; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════
   LOGIN LINKS — красивые кнопки под формой
════════════════════════════════════════════════ */
.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 16px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
}

.login-link {
  flex: 1;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, color .15s;
  border: none;
  background: none;
  font-family: inherit;
  position: relative;
}
.login-link:hover {
  background: var(--hover);
  color: var(--accent);
}
.login-link:active { background: var(--active); }

/* Разделитель между кнопками */
.login-link-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border2);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   FORGOT PASSWORD MODAL
════════════════════════════════════════════════ */
.forgot-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.forgot-step { display: none; }
.forgot-step.active { display: flex; flex-direction: column; gap: 10px; }

.code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.code-digit {
  width: 44px; height: 52px;
  background: var(--input-bg);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  font-size: 22px; font-weight: 700;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.code-digit:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Отключаем анимацию для загружаемой истории */
.msg-row.no-anim {
  animation: none !important;
}

/* ── Фикс иконки выделения текста на мобиле ── */
/* По умолчанию запрещаем выделение на UI элементах */
.chat-item, .ci-ava, .ci-body, .sb-tab, .sb-profile,
.chat-hdr, .hdr-info, .hdr-right, .online-pill,
.input-zone, .input-row, .send-fab, .icon-btn,
.attach-popup, .fp-bar, .rec-bar,
.msg-row .msg-ava, .msg-meta, .msg-time, .msg-sender,
.reactions, .vc-overlay, .vc-dur {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Но разрешаем выделять текст сообщений */
.msg-text, .msg-bubble p, .msg-file-name {
  user-select: text;
  -webkit-user-select: text;
}
/* Поле ввода всегда выделяемо */
.msg-ta, .field, input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* ── AI cursor blink ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ai-cursor { animation: blink .7s ease-in-out infinite; font-weight:300; }

/* ── iOS Safari: предотвращаем zoom при фокусе на input ── */
/* iOS зумирует страницу если font-size < 16px — фиксим только на мобильных */
@media screen and (max-width: 768px) {
  input, textarea, select, .field, .msg-ta, #aiInput {
    font-size: 16px !important;
  }
  /* Предотвращаем сдвиг при появлении клавиатуры */
  .chat-view {
    /* Не используем fixed height чтобы не прыгало */
    overflow: hidden;
  }
}

/* ── Иконки-fallback: если Tabler не загрузился — показываем текст ── */
.ti::before {
  display: inline-block;
}
/* Принудительная загрузка иконок */
@supports not (font-family: 'tabler-icons') {
  .ti { font-style: normal; }
}

/* ════════════════════════════════════════════════
   MOBILE COMPREHENSIVE FIX
════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Увеличиваем все кнопки для пальцев ── */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .icon-btn.sm { min-width: 36px; min-height: 36px; }
  .send-fab { width: 48px !important; height: 48px !important; border-radius: 16px !important; }
  .sb-tab { min-height: 44px; }

  /* ── Все inputs 16px чтобы iOS не зумировал ── */
  input, textarea, select, .field, .msg-ta, #aiInput, #consoleInput {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  /* ── Предотвращаем 300ms задержку кликов ── */
  * { touch-action: manipulation; }
  .msg-ta, .field, input, textarea { touch-action: auto; }

  /* ── Модальные окна на весь экран ── */
  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 92dvh !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* ── AI чат модал ── */
  #aiChatModal .modal-card {
    height: 85dvh !important;
  }

  /* ── Настройки ── */
  .settings-modal .modal-card {
    height: 90dvh !important;
  }

  /* ── Сообщения: убираем лишние отступы ── */
  .msg-bubble { max-width: 88%; }
  .msg-text { font-size: 15px; line-height: 1.5; }

  /* ── Зона ввода ── */
  .input-zone {
    padding: 8px 8px env(safe-area-inset-bottom, 8px) !important;
  }
  .msg-ta {
    min-height: 42px !important;
    font-size: 16px !important;
    padding: 11px 42px 11px 14px !important;
  }
  /* Скрепка на мобиле */
  #attachBtn { bottom: 0; }
  /* Поиск на мобиле — убрать kbd точно */
  .sb-search kbd { display: none; }
  /* AI model selector mobile */
  

  /* ── Шапка чата ── */
  .chat-hdr { padding: 8px 12px; }
  .hdr-info h3 { font-size: 15px; }

  /* ── Sidebar items ── */
  .chat-item { padding: 10px 12px; min-height: 60px; }
  .ci-body { gap: 1px; }
  .ci-name { font-size: 14px; }
  .ci-last { font-size: 12px; }

  /* ── Emoji picker ── */
  #emojiPicker {
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* ── Context menu ── */
  .ctx-menu {
    min-width: 180px !important;
    font-size: 15px !important;
  }
  .ctx-item { padding: 12px 16px !important; min-height: 44px; }
  .ctx-item i { font-size: 18px !important; }

  /* ── Overflow scroll smooth ── */
  .sb-pane, .msgs, #aiMessages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Safe area insets for notch phones ── */
  .sidebar { padding-top: env(safe-area-inset-top, 0); }
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* Extra small screens (iPhone SE etc) */
@media (max-width: 375px) {
  .modal-card { max-height: 95dvh !important; }
  .msg-bubble { max-width: 92%; }
  .hdr-right .icon-btn:not(:last-child):not(:nth-last-child(2)) { display: none; }
}

/* ════════════════════════════════════════════════
   MOBILE VIDEO & MEDIA FIXES
════════════════════════════════════════════════ */

/* Все видео должны воспроизводиться inline на iOS */
video {
  -webkit-playsinline: true;
  playsinline: true;
}

/* Видео в чате */
.msg-video, .msg-circle, .msg-square {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 768px) {
  /* Видео в AI чате */
  #aiMessages video {
    max-width: 85vw !important;
    width: 100% !important;
  }

  /* Превью файлов в AI */
  #aiMessages img {
    max-width: 85vw !important;
  }

  /* iframe превью — на весь экран */
  #aiPreviewFrame {
    height: 100% !important;
  }

  /* Модальное превью на весь экран */
  [style*="position:fixed"][style*="z-index:9999"] {
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) !important;
  }

  /* Контекстное меню — нижняя шторка */
  .ctx-menu {
    position: fixed !important;
    left: 50% !important;
    bottom: env(safe-area-inset-bottom, 8px) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 16px) !important;
    max-width: 340px !important;
    border-radius: 20px !important;
    padding: 6px 0 8px !important;
    box-shadow: 0 -4px 40px rgba(0,0,0,.3) !important;
  }
  .ctx-item {
    padding: 13px 18px !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Плавная анимация для шторки */
  .ctx-menu.open {
    animation: slideUpSheet .25s cubic-bezier(.16,1,.3,1) !important;
  }
}

@keyframes slideUpSheet {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

/* ════════════════════════════════════════════════
   ICONS FALLBACK — если шрифт не загрузился
════════════════════════════════════════════════ */
/* Базовые стили иконок чтобы не было квадратиков */
.ti {
  font-family: 'tabler-icons', sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* Если шрифт не загрузился — иконки становятся прозрачными точками */
@supports not (font-family: 'tabler-icons') {
  .ti { opacity: 0.3; width: 1em; height: 1em; }
}


/* ── Video Square (квадрат вместо кружка) ── */
.msg-square-wrap {
  border-radius: 14px !important; /* квадрат с закруглёнными углами */
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.msg-square-wrap.expanded {
  border-radius: 16px !important;
}
.msg-square { border-radius: 0 !important; }

/* Предотвращаем прокрутку чата при тапе на видео */
.msg-square-wrap, .msg-circle-wrap {
  touch-action: manipulation; /* НЕ блокируем скролл */
  -webkit-tap-highlight-color: transparent;
}

/* ════════════════════════════════════════════════
   SQUARE VIDEO — вместо кружка
════════════════════════════════════════════════ */

/* Квадратная карточка записи */
.square-card { padding: 12px !important; }

.square-preview-wrap {
  position: relative;
  width: 220px; height: 220px;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto 10px;
  background: #000;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

.square-preview-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* SVG прогресс-рамка */
.square-progress-svg {
  z-index: 2;
}
.sq-bg {
  fill: none;
  stroke: rgba(255,255,255,.15);
  stroke-width: 4;
}
.sq-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 813.7;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  transform-origin: center;
  transform: rotate(-90deg) scaleX(-1);
}

/* Сообщение-квадрат в чате */
.msg-square-wrap {
  position: relative;
  display: inline-block;
  width: 180px; height: 180px;
  border-radius: 14px !important;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.msg-square-wrap:active { transform: scale(.97); }

.msg-square-wrap.vc-expanded {
  /* JS управляет размером через style.width/height */
  border-radius: 14px !important;
  z-index: 10;
  position: relative;
}

.msg-square {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

/* Overlay play кнопка */
.msg-square-wrap .vc-overlay {
  border-radius: 14px;
}

/* Таймер длительности */
.msg-square-wrap .vc-dur {
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 3;
}

/* Кнопка записи - квадрат */
.circle-btn {
  border-radius: 10px !important;
}

@media (max-width: 768px) {
  .square-preview-wrap { width: 180px; height: 180px; }
  /* Мобильный — квадрат чуть меньше */
  .msg-square-wrap { width: 160px !important; height: 160px !important; }
  /* При расширении JS сам задаёт размер */
}


/* ════════════════════════════════════════════════
   CALL WINDOW ADDITIONAL FIXES
════════════════════════════════════════════════ */

/* Расширенный вид — полный экран */
.call-win-float.cw-expanded {
  top: env(safe-area-inset-top, 0) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}
.call-win-float.cw-expanded .cw-controls {
  padding: 16px 20px;
}
.call-win-float.cw-expanded .cw-btns {
  gap: 16px;
}
.call-win-float.cw-expanded .cw-btn {
  width: 52px !important;
  height: 52px !important;
  font-size: 20px !important;
}

/* Подсказка: зажми чтобы развернуть */
#activeCallWin::before {
  content: 'Зажмите для разворота';
  position: absolute;
  bottom: 68px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.6);
  font-size: 10px; padding: 3px 10px;
  border-radius: 99px; white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 10;
}
#activeCallWin.pressing::before {
  opacity: 1;
}

/* cwAudioContent — скрываем во время демонстрации */
#cwAudioContent[style*="display: none"] { display: none !important; }

/* Screen share active — скрываем аватарку */
.screen-sharing #cwAudioContent { display: none !important; }

/* Кнопка записи квадрат */
[onclick="startCircleRecord()"] { border-radius: 10px; }

/* ── Video Square expand: сообщения раздвигаются, скролл работает ── */
.msg-square-wrap.vc-expanded {
  /* Переходы управляются JS */
  overflow: hidden;
}

/* Область сообщений — overflow-y: auto всегда чтобы скролл работал */
#messages {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Запрет только горизонтального скролла в чате */
.msgs {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Vc overlay поверх expanded */
.msg-square-wrap.vc-expanded .vc-overlay {
  opacity: 0 !important;
}

/* Hint под fullscreen video */
#messages .msg-square-wrap.vc-expanded::after {
  content: '2× для полного экрана';
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.7);
  font-size: 10px; padding: 2px 10px;
  border-radius: 99px; white-space: nowrap;
  pointer-events: none;
  font-family: -apple-system, sans-serif;
}


/* ── Call record bubble ─────────────────────────────────────── */
.call-rec-wrap {
  display: flex; align-items: center; gap: 10px; padding: 2px 0;
}
.cr-ico  { font-size: 20px; flex-shrink: 0; }
.cr-info { display: flex; flex-direction: column; gap: 1px; }
.cr-lbl  { font-size: 13px; font-weight: 600; color: var(--text); }
.cr-sub  { font-size: 11px; color: var(--text3); }
.call-rec-bub {
  border-left: 3px solid var(--accent) !important;
  background: var(--surface2) !important;
  min-width: 180px;
}

/* ── Unread message badge on contact ─────────────────────── */




/* ── Call record in chat (no phone emoji version) ──────────── */
.call-record .cr-icon { font-size: 15px; }













/* ════════════════════════════════════════════════
   REPLY, ONLINE, AI DROPDOWN, MOBILE FIXES
   ════════════════════════════════════════════════ */

/* ── Dropdown animation ─────────────────────── */
@keyframes modelDropIn {
  from { opacity:0; transform:translateY(8px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Reply bar above input ───────────────────── */
#replyBar {
  display:none; align-items:center; gap:10px;
  padding:7px 14px; background:var(--surface2);
  border-left:3px solid var(--accent);
  flex-shrink:0;
}

/* ── Reply quote in bubble ───────────────────── */

.rq-name { font-size:11px; font-weight:700; color:var(--accent); line-height:1.3; }
.rq-text { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }

/* ── Unread badge ─────────────────────────────── */



/* ── Call record ──────────────────────────────── */
.call-record { display:flex; align-items:center; gap:6px; padding:4px 0; }
.cr-label { font-size:13px; font-weight:600; color:var(--text); }
.cr-extra { font-size:11px; color:var(--text3); margin-left:2px; }
.cr-time  { font-size:10px; color:var(--text3); margin-left:auto; }


/* ════════════════════════════════════════════════
   ADDITIONS: Reply, Badge, AI Dropdown
   ════════════════════════════════════════════════ */

@keyframes modelDropIn {
  from { opacity:0; transform:translateY(8px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Reply bar above input */
#replyBar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  flex-shrink: 0;
}

/* Reply quote inside bubble */
.reply-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 10px;
  margin-bottom: 6px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: rgba(99,102,241,.1);
  cursor: pointer;
  overflow: hidden;
  transition: background .15s;
  max-width: 100%;
}
.reply-quote:hover { background: rgba(99,102,241,.2); }
.rq-name { font-size:11px; font-weight:700; color:var(--accent); line-height:1.3; }
.rq-text { font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }

/* Unread badge on contact */
.ci-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(239,68,68,.4);
}
.chat-item.has-unread .ci-name { font-weight: 700; }

/* ════════════════════════════════════════════════
   MOBILE SIDEBAR FIX — slide-in panel
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar скрыт по умолчанию, выезжает слева */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 80vw !important;
    max-width: 300px !important;
    z-index: 500 !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s !important;
    border-right: none !important;
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.4) !important;
  }

  /* Main занимает весь экран */
  .main { width: 100% !important; min-width: 0 !important; }

  /* Input zone */
  .input-zone {
    padding: 6px 8px env(safe-area-inset-bottom, 8px) !important;
  }

  /* AI model dropdown position */
  #aiModelWrap { bottom: 3px !important; }
}

@media (max-width: 375px) {
  .sidebar { width: 85vw !important; }
}


/* ══ User Profile Modal ═══════════════════════════════════════ */
.user-profile-modal-bg {
  display: none;
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.user-profile-modal-bg.open { display: flex; }

@keyframes upmAppear {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.user-profile-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 24px;
  width: 100%;
  max-width: 400px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 28px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: upmAppear .22s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

.upm-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface2); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text2); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.upm-close:hover { background: var(--surface3); }

.upm-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  flex-shrink: 0;
}

.upm-name     { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 2px; text-align: center; }
.upm-username { font-size: 13px; color: var(--text3); margin-bottom: 8px; }
.upm-status   { font-size: 12px; color: var(--text3); margin-bottom: 20px;
  padding: 4px 14px; border-radius: 99px; background: var(--surface2); }
.upm-status.upm-online { color: #22c55e; background: rgba(34,197,94,.12); }

.upm-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--surface2); border-radius: 12px; padding: 4px;
  width: 100%;
}
.upm-tab {
  flex: 1; padding: 7px 0; border: none; background: none;
  border-radius: 9px; color: var(--text2); font-size: 13px;
  font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.upm-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.upm-pane { width: 100%; }

.upm-media-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; border-radius: 12px; overflow: hidden;
}
.upm-media-item {
  aspect-ratio: 1; overflow: hidden; cursor: pointer;
  background: var(--surface2); position: relative;
}
.upm-media-item img,
.upm-media-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .2s;
}
.upm-media-item:hover img,
.upm-media-item:hover video { transform: scale(1.06); }
.upm-play-ico {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.32); color: #fff; font-size: 20px;
}

.upm-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 28px 0; color: var(--text3); font-size: 13px;
}
.upm-empty i { font-size: 28px; opacity: .5; }

.upm-file-list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.upm-file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface2); color: var(--text);
  text-decoration: none; font-size: 13px;
  transition: background .15s;
}
.upm-file-row:hover { background: var(--surface3); }
.upm-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px) {
  .user-profile-modal {
    max-width: 100%;
    border-radius: 20px;
    padding: 22px 14px 24px;
    max-height: 92dvh;
  }
}

/* ── Group members list ──────────────────────────────────────── */
.upm-members-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.upm-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--surface2);
  transition: background .15s;
}
.upm-member-row:hover { background: var(--surface3); }
.upm-member-ava {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.upm-member-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid var(--surface2);
}
.upm-member-dot-on { background: #22c55e; }
.upm-member-info { flex: 1; min-width: 0; }
.upm-member-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upm-member-status {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}
.upm-creator-badge {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Day separator ───────────────────────────────────────────── */
.msg-day-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .3px;
}
.msg-day-sep::before,
.msg-day-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 10px;
}

/* ── Delete chat button ────────────────────────────────────── */
.hdr-delete-chat {
  opacity: .7;
  transition: opacity .2s;
}
.hdr-delete-chat:hover { opacity: 1; }

/* ── Delete chat button in profile ────────────────────────── */
.upm-delete-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 9px 20px;
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1.5px solid rgba(239,68,68,.25);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.upm-delete-chat-btn:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.5);
}


/* ── Delete chat button in profile ────────────────────────── */
.upm-delete-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 9px 20px;
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border: 1.5px solid rgba(239,68,68,.25);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.upm-delete-chat-btn:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.5);
}


/* ── Message selection highlight ───────────────────────────── */
.msg-row.msg-selected .msg-bubble,
.msg-row.msg-selected .call-rec-bub {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.msg-row.msg-selected {
  background: rgba(99,102,241,.07);
  border-radius: 10px;
  cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════
   GROUP CALL WINDOW — full redesign
══════════════════════════════════════════════════════════════ */
.group-call-win {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: #0d0d14;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.group-call-win.gcw-compact {
  inset: auto 16px 16px auto;
  width: min(380px, calc(100vw - 24px));
  height: min(270px, calc(100dvh - 24px));
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,12,20,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.group-call-win.gcw-compact .gcw-bg {
  border-radius: 24px;
}
.group-call-win.gcw-compact .gcw-top {
  padding: 12px 12px 6px;
}
.group-call-win.gcw-compact .gcw-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
}
.group-call-win.gcw-compact .gcw-group-name {
  font-size: 14px;
  max-width: 54%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-call-win.gcw-compact .gcw-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-call-win.gcw-compact .gcw-timer,
.group-call-win.gcw-compact .gcw-status {
  margin-top: 0;
  font-size: 11px;
}
.group-call-win.gcw-compact .gcw-grid {
  gap: 8px;
  padding: 8px 12px 6px;
}
.group-call-win.gcw-compact .gp-tile {
  border-radius: 18px;
  background: rgba(255,255,255,.06);
}
.group-call-win.gcw-compact .gp-vid {
  border-radius: 18px;
}
.group-call-win.gcw-compact .gp-ava {
  width: 52px;
  height: 52px;
}
.group-call-win.gcw-compact .gp-info {
  padding: 8px 10px 9px;
}
.group-call-win.gcw-compact .gcw-bottom {
  padding: 8px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 100%);
}
.group-call-win.gcw-compact .gcw-controls {
  gap: 12px;
}
.group-call-win.gcw-compact .gcw-btn {
  width: 46px;
  height: 46px;
  font-size: 17px;
}
.group-call-win.gcw-compact .gcw-end {
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.group-call-win.gcw-expanded {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 9500;
}
.group-call-win.gcw-expanded .gcw-bg {
  border-radius: 0 !important;
}
.group-call-win::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.group-call-win.pressing::after {
  opacity: 1;
}

.group-call-win.gcw-compact {
  top: 16px;
  right: 16px;
  bottom: auto;
  left: auto;
  width: 320px;
  height: 232px;
  border-radius: 22px;
  animation: slideRight .28s cubic-bezier(.16,1,.3,1);
}
.group-call-win.gcw-compact .gcw-top {
  align-items: stretch;
  padding: 12px 12px 8px;
}
.group-call-win.gcw-compact .gcw-handle {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.group-call-win.gcw-compact .gcw-headline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.06);
}
.group-call-win.gcw-compact .gcw-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.group-call-win.gcw-compact .gcw-group-name {
  max-width: 100%;
  font-size: 14px;
}
.group-call-win.gcw-compact .gcw-status {
  margin-top: 0;
  font-size: 11px;
  color: rgba(255,255,255,.46);
}
.group-call-win.gcw-compact .gcw-meta {
  align-items: flex-end;
  justify-content: center;
}
.group-call-win.gcw-compact .gcw-timer {
  margin-top: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
}
.group-call-win.gcw-compact .gcw-grid {
  gap: 8px;
  padding: 0 12px 10px;
}
.group-call-win.gcw-compact .gp-tile,
.group-call-win.gcw-compact .gp-vid {
  border-radius: 18px;
}
.group-call-win.gcw-compact .gp-info {
  padding: 7px 10px 8px;
}
.group-call-win.gcw-compact .gp-name-label {
  font-size: 11px;
}
.group-call-win.gcw-compact .gcw-bottom {
  padding: 0 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.group-call-win.gcw-compact .gcw-controls {
  padding: 10px 12px;
  gap: 10px;
  border-radius: 18px;
  background: rgba(15,17,27,.82);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.group-call-win.gcw-compact .gcw-btn {
  width: 42px;
  height: 42px;
  font-size: 16px;
}
.group-call-win.gcw-compact .gcw-end {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* Background blur overlay */
.gcw-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,.15), transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(139,92,246,.12), transparent 60%);
  pointer-events: none;
}

/* Top bar */
.gcw-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 10px;
  flex-shrink: 0;
}
.gcw-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gcw-handle {
  display: none;
}
.gcw-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gcw-group-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
}
.gcw-timer {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.gcw-status {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

/* Participants grid */
.gcw-grid {
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 6px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Participant tile */
.gp-tile {
  position: relative;
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  border: 1.5px solid rgba(255,255,255,.06);
  transition: border-color .3s;
}
.gp-tile.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.3);
}

.gp-ava-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.gp-ava {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  flex-shrink: 0;
}

.gp-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Portrait video (mobile camera) — contain + dark bg so black bars don't look broken */
.gp-tile[data-orientation="portrait"] .gp-vid {
  object-fit: contain;
  background: #111;
}

.gp-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 7px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.gp-name-label {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-mic-ico {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.gp-mic-ico.muted { color: #ef4444; }

.gp-self-label {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(99,102,241,.8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

/* Local preview (self tile = part of grid) */

/* Bottom controls */
.gcw-bottom {
  position: relative;
  z-index: 2;
  padding: 12px 16px 20px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.gcw-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.gcw-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  transition: transform .12s, opacity .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.gcw-btn:active { transform: scale(.88); }
.gcw-mute  { background: rgba(255,255,255,.15); }
.gcw-mute:hover { background: rgba(255,255,255,.22); }
.gcw-mute.muted  { background: rgba(239,68,68,.75); }
.gcw-vid   { background: rgba(255,255,255,.15); }
.gcw-vid:hover { background: rgba(255,255,255,.22); }
.gcw-vid.muted  { background: rgba(239,68,68,.75); }
.gcw-flip  { background: rgba(255,255,255,.1); font-size:17px; }
.gcw-flip:hover { background: rgba(255,255,255,.18); }
.gcw-end   { background: #ef4444; width: 62px; height: 62px; font-size:24px; }
.gcw-end:hover { background: #dc2626; }

@media (max-width: 600px) {
  .gcw-top    { padding: 14px 12px 8px; }
  .gcw-bottom { padding: 10px 12px env(safe-area-inset-bottom, 16px); }
  .gcw-btn    { width: 48px; height: 48px; font-size: 18px; }
  .gcw-end    { width: 56px; height: 56px; font-size: 22px; }
  .gp-ava     { width: 48px; height: 48px; }
}



/* ── Message status dots ────────────────────────────────── */
.msg-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.msg-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Одна яркая + одна серая = отправлено (не прочитано) */
.msg-dot-1 { background: rgba(255,255,255,.7); }
.msg-dot-grey { background: rgba(255,255,255,.25); }
/* Обе синие = прочитано */
.msg-dot-2 { background: #60a5fa; }

.msg-row.own .msg-meta {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Group screen share button */
.gcw-screen { background: rgba(255,255,255,.15); }
.gcw-screen:hover { background: rgba(255,255,255,.22); }
.gcw-screen.active { background: var(--accent); }
.gcw-compact { background: rgba(255,255,255,.1); }
.gcw-compact:hover { background: rgba(255,255,255,.18); }

/* ── Group tile fullscreen ──────────────────────────────── */
.gcw-grid.has-fullscreen {
  display: block;
  position: relative;
}
.gcw-grid.has-fullscreen .gp-tile:not(.gp-tile-fullscreen) {
  display: none;
}
.gp-tile-fullscreen {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  z-index: 5;
  cursor: zoom-out;
}
.gp-tile {
  cursor: zoom-in;
}
/* Когда есть fullscreen — grid занимает всё доступное пространство */
.group-call-win.has-fs-tile .gcw-grid {
  flex: 1;
  height: 100%;
}

/* ── User volume menu ───────────────────────────────────── */
.user-vol-menu {
  position: fixed;
  z-index: 99999;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 10px;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeUp .15s ease;
}
.uvm-header {
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.uvm-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.uvm-section { padding: 2px 4px; }
.uvm-label {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-weight: 500;
}
.uvm-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.uvm-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  min-width: 38px;
  text-align: right;
}
.uvm-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}
.uvm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .12s;
}
.uvm-item:hover { background: var(--surface2); }

/* ── Online dot in chat list ─────────────────────────────── */
.ci-ava {
  position: relative;
  flex-shrink: 0;
}
.ci-ava .online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: #6b7280;
  transition: background .3s;
  pointer-events: none;
}


/* ════════════════════════════════════════════
   TEXT FORMAT BAR
════════════════════════════════════════════ */
.fmt-bar {
  position: fixed;
  z-index: 99000;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fadeUp .12s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: all;
}
.fmt-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--text2); cursor: pointer;
  font-size: 13px; font-family: inherit;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  line-height: 1;
}
.fmt-btn:hover { background: var(--hover); color: var(--text); }
.fmt-sep {
  width: 1px; height: 18px;
  background: var(--border); margin: 0 3px; flex-shrink: 0;
}
.fmt-link-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 2px 2px 8px;
  background: var(--surface3);
  border-radius: 8px;
  border: 1px solid var(--border2);
}
.fmt-link-input {
  width: 180px; border: none; background: transparent;
  color: var(--text); font-size: 12px; outline: none;
  font-family: inherit; padding: 4px 0;
}
.fmt-link-input::placeholder { color: var(--text3); }
.fmt-link-ok {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; transition: opacity .15s;
}
.fmt-link-ok:hover { opacity: .85; }

/* ════════════════════════════════════════════
   MESSAGE TEXT FORMATTING
════════════════════════════════════════════ */
.msg-text strong { font-weight: 700; }
.msg-text em     { font-style: italic; }
.msg-text u      { text-decoration: underline; text-underline-offset: 2px; }
.msg-text s      { text-decoration: line-through; opacity: .75; }
.msg-code {
  background: rgba(0,0,0,.18);
  padding: 1px 5px; border-radius: 5px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
}
.msg-link {
  /* Цвет акцента темы */
  color: var(--accent);
  text-decoration: none;
  /* Фоновая подсветка */
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 1px 4px;
  /* Нижняя черта */
  border-bottom: 1.5px solid var(--accent);
  font-weight: 500;
  word-break: break-all;
  transition: background .15s, color .15s, border-color .15s;
  display: inline;
  line-height: 1.6;
}
.msg-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
/* Иконка внешней ссылки */
.msg-link::after {
  content: ' ↗';
  font-size: 10px;
  opacity: .7;
  font-weight: 400;
}

/* В своих сообщениях (градиентный пузырь) */
.msg-row.own .msg-link {
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.18);
  border-bottom-color: rgba(255,255,255,.55);
}
.msg-row.own .msg-link:hover {
  background: rgba(255,255,255,.32);
  color: #fff;
  border-color: transparent;
}

/* Светлая тема */
[data-theme="light"] .msg-link {
  color: var(--accent);
  background: var(--accent-dim);
  border-bottom-color: var(--accent);
}
[data-theme="light"] .msg-link:hover {
  background: var(--accent);
  color: #fff;
}
[data-theme="light"] .msg-row.own .msg-link {
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.22);
  border-bottom-color: rgba(255,255,255,.6);
}
/* Битая / незагрузившаяся картинка */
.msg-img.img-broken {
  min-width: 80px; min-height: 60px;
  background: var(--surface3);
  border-radius: 12px;
  opacity: .35;
  position: relative;
}
.msg-img.img-broken::after {
  content: '\e4b0'; /* ti-photo-off */
  font-family: 'tabler-icons';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--text3);
}