/* ============================================================
   style.css — Nexus v53.0
   + Восстановлены stagger-animation-delay
   + Fix: z-index universal-modal
   + Fix: fullscreen screen-viewer
   + Fix: зелёная рамка говорящего
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-deep:#050810; --bg-main:#0c1220; --bg-sidebar:#0c1220;
    --bg-panel:#111a2b; --bg-hover:#162237; --bg-active:#11232f;
    --bg-input:#111a2b; --bg-msg-own:#113443; --bg-msg-other:#111a2b;
    --text-primary:#ede9e8; --text-secondary:#9aa8ba; --text-muted:#718197;
    --accent:#087f96; --accent-light:#22d3ee;
    --success:#4dd47d; --warning:#f5a623; --danger:#e05353;
    --star-blue:#64b5ef; --star-red:#ff4d4d;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.35);
    --shadow-lg:0 20px 60px rgba(0,0,0,.55);
    --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    --sidebar-width: 340px;
    --msg-gap: 3px;
    --font-size: 15px;
    --ease-spring: cubic-bezier(.22,1.4,.36,1);
    --ease-out: cubic-bezier(.22,1,.36,1);
    --ease-in-out: cubic-bezier(.65,.05,.36,1);
}
html[data-theme="darker"] {
    --bg-deep:#000; --bg-main:#050709; --bg-sidebar:#0a0d11;
    --bg-panel:#0e1116; --bg-hover:#161a20; --bg-active:#1a1f26;
    --bg-input:#12161b; --bg-msg-own:#1a4d73; --bg-msg-other:#0f1318;
}
html[data-theme="light"] {
    --bg-deep:#d1d5db; --bg-main:#f3f4f6; --bg-sidebar:#e5e7eb;
    --bg-panel:#ffffff; --bg-hover:#e8ebef; --bg-active:#dbeafe;
    --bg-input:#ffffff; --bg-msg-own:#d0e7ff; --bg-msg-other:#ffffff;
    --text-primary:#111827; --text-secondary:#4b5563; --text-muted:#9ca3af;
    --accent:#3b82f6; --accent-light:#2563eb;
    --star-blue:#2563eb; --star-red:#dc2626;
    --shadow-sm:0 1px 2px rgba(0,0,0,.06);
    --shadow-md:0 4px 14px rgba(0,0,0,.08);
    --shadow-lg:0 20px 60px rgba(0,0,0,.18);
}
html, body { height:100%; width:100%; overflow:hidden; background:var(--bg-deep); color:var(--text-primary); font-family:var(--font); font-size:var(--font-size); line-height:1.45; -webkit-font-smoothing:antialiased; }
body { user-select:text; -webkit-user-select:text; }
button, .icon-btn, .contact, .sidebar-header, .sidebar-tab, .chat-header, .msg-avatar, .date-sep, .msg-meta, .msg-reactions, .scroll-to-bottom, .msg-system, .composer-btn, .composer-mic, .composer-send { user-select:none; -webkit-user-select:none; }
.msg-text { cursor:text; }
input, textarea { user-select:text; font-family:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; position:relative; overflow:hidden; }
.hidden { display:none !important; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.06); border-radius:4px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); }

/* ============ KEYFRAMES ============ */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInScale { from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
@keyframes pop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.1);opacity:1;} 100%{transform:scale(1);} }
@keyframes slideDown { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes popIn { from { opacity:0; transform:translateY(10px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes slideInRight { from{opacity:0;transform:translateX(40px) scale(.94);} to{opacity:1;transform:translateX(0) scale(1);} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-40px) scale(.94);} to{opacity:1;transform:translateX(0) scale(1);} }
@keyframes slideInRightSoft { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
@keyframes springPop { 0%{transform:scale(.5);opacity:0;} 50%{transform:scale(1.08);opacity:1;} 75%{transform:scale(.97);} 100%{transform:scale(1);} }
@keyframes rippleEffect { to { transform: scale(4); opacity: 0; } }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-4px);} 40%,80%{transform:translateX(4px);} }
@keyframes typingWave { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.05); } }
@keyframes starSpin { from{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.3);} to{transform:rotate(360deg) scale(1.08);} }
@keyframes starGlow { 0%,100% { text-shadow: 0 0 3px currentColor, 0 0 8px currentColor; } 50% { text-shadow: 0 0 6px currentColor, 0 0 16px currentColor, 0 0 24px currentColor; } }
@keyframes onlinePulse { 0%{box-shadow:0 0 0 0 rgba(77,212,125,.55);} 70%{box-shadow:0 0 0 10px rgba(77,212,125,0);} 100%{box-shadow:0 0 0 0 rgba(77,212,125,0);} }
@keyframes breathing { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(1.15);} }
@keyframes recPulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(.85);} }
@keyframes callTileIn { from { opacity:0; transform:scale(.9) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes pulseRing { 0% { transform:translateX(-50%) scale(.7); opacity:1; } 100% { transform:translateX(-50%) scale(2); opacity:0; } }
@keyframes screenPulse { 0%,100% { box-shadow:0 0 0 0 rgba(82,136,193,.6); } 50% { box-shadow:0 0 0 14px rgba(82,136,193,0); } }
@keyframes muteAppear { from { opacity:0; transform:scale(.5); } 60% { transform:scale(1.15); } to { opacity:1; transform:scale(1); } }
@keyframes speakingAvatarPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes speakingRingGreen {
    0%, 100% { box-shadow: 0 0 0 3px #4dd47d, 0 0 26px rgba(77, 212, 125, .55); }
    50%      { box-shadow: 0 0 0 4px #6be092, 0 0 0 34px rgba(77, 212, 125, .75); }
}
@keyframes blobFloat { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-30px) scale(1.08);} 66%{transform:translate(-30px,40px) scale(.95);} }
@keyframes cardAppear { from{opacity:0;transform:translateY(20px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes ctxPop { from { opacity:0; transform:scale(.94) translateY(-6px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes highlightFade { 0% { box-shadow: 0 0 0 3px rgba(82,136,193,.9); } 100% { box-shadow: var(--shadow-sm); } }
@keyframes jelly { 0%{transform:scale(1,1);} 25%{transform:scale(1.2,.85);} 50%{transform:scale(.9,1.15);} 75%{transform:scale(1.05,.95);} 100%{transform:scale(1,1);} }
@keyframes shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(82,136,193,.4); } 50% { box-shadow: 0 0 0 8px rgba(82,136,193,0); } }
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes bounceIn { 0% { transform: scale(.3); opacity:0; } 50% { transform: scale(1.15); opacity:1; } 75% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes slideInFromRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes notifSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes notifSlideOut { to { transform: translateX(120%); opacity: 0; } }
@keyframes notifProgress { from { width: 100%; } to { width: 0%; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ RIPPLE ============ */
.btn-primary, .btn-secondary, .btn-danger, .icon-btn, .composer-btn,
.composer-send, .composer-mic, .auth-tab, .sidebar-tab, .settings-nav-item,
.ctx-item, .reaction-cell, .emoji-cell, .contact, .media-item,
.device-remove, .read-avatar, .poll-option, .role-option, .perm-check,
.star-btn, .theme-opt, .settings-check, .member-pick, .auth-recover-btn,
.select-toolbar-btn { position: relative; overflow: hidden; }
.btn-primary::after, .btn-secondary::after, .btn-danger::after,
.icon-btn::after, .composer-btn::after, .composer-send::after,
.composer-mic::after, .sidebar-tab::after, .settings-nav-item::after,
.ctx-item::after, .select-toolbar-btn::after {
    content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.45); opacity: 0; pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    top: var(--ripple-y, 50%); left: var(--ripple-x, 50%);
}
.btn-primary.rippling::after, .btn-secondary.rippling::after,
.btn-danger.rippling::after, .icon-btn.rippling::after,
.composer-btn.rippling::after, .composer-send.rippling::after,
.composer-mic.rippling::after, .sidebar-tab.rippling::after,
.settings-nav-item.rippling::after, .ctx-item.rippling::after,
.select-toolbar-btn.rippling::after { animation: rippleEffect .6s ease-out; }

/* ============ АВТОРИЗАЦИЯ ============ */
.auth-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background: radial-gradient(ellipse at top left, #16273a 0%, transparent 55%), radial-gradient(ellipse at bottom right, #1a1a3a 0%, transparent 55%), linear-gradient(135deg, #070b12 0%, #0b131f 50%, #070b12 100%); }
html[data-theme="light"] .auth-screen { background: radial-gradient(ellipse at top left, #dbeafe 0%, transparent 55%), radial-gradient(ellipse at bottom right, #ede9fe 0%, transparent 55%), linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); }
.auth-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }
.auth-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(82,136,193,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(82,136,193,.05) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center,#000 30%, transparent 80%); }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; animation:blobFloat 18s ease-in-out infinite; }
.blob-1{width:420px;height:420px;top:-120px;left:-100px;background:radial-gradient(circle,#3b7cff 0%, transparent 70%);}
.blob-2{width:380px;height:380px;bottom:-140px;right:-80px;background:radial-gradient(circle,#a537f5 0%, transparent 70%);animation-delay:-6s;}
.blob-3{width:320px;height:320px;top:40%;left:55%;background:radial-gradient(circle,#26c2ff 0%, transparent 70%);animation-delay:-12s;}
.auth-card { position:relative; z-index:1; width:100%; max-width:420px; margin:20px; padding:40px 36px 28px; border-radius:var(--radius-xl); background:rgba(17,26,38,.72); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); animation:cardAppear .7s var(--ease-spring); }
html[data-theme="light"] .auth-card { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08); }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:6px; animation:fadeInUp .5s var(--ease-out) .15s both; }
.auth-logo-icon { width:48px;height:48px;border-radius:14px; background:linear-gradient(135deg,#5288c1,#8b5cf6); display:flex;align-items:center;justify-content:center; font-weight:800;font-size:22px;color:#fff; box-shadow:0 8px 24px rgba(82,136,193,.4); transition: transform .25s var(--ease-spring); }
.auth-logo-icon:hover { transform: rotate(-6deg) scale(1.08); }
.auth-logo-text { font-size:24px;font-weight:800;letter-spacing:-.5px; background:linear-gradient(135deg,#fff,#a8c8e8); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
html[data-theme="light"] .auth-logo-text { background:linear-gradient(135deg,#111827,#4b5563); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.auth-tabs { position:relative; display:grid; grid-template-columns:1fr 1fr; background:rgba(0,0,0,.3); border-radius:var(--radius-md); padding:4px; margin-bottom:22px; margin-top:20px; animation:fadeInUp .5s var(--ease-out) .2s both; }
html[data-theme="light"] .auth-tabs { background:rgba(0,0,0,.05); }
.auth-tab { position:relative; z-index:2; padding:10px; text-align:center; font-size:14px; font-weight:500; color:var(--text-secondary); border-radius:7px; transition:color .25s; }
.auth-tab.active { color:#fff; }
.auth-tab-slider { position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px); background:linear-gradient(135deg,#5288c1,#6b8dd6); border-radius:7px; transition:transform .4s var(--ease-spring); }
.auth-tabs[data-active="register"] .auth-tab-slider { transform:translateX(100%); }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; animation:fadeInUp .4s var(--ease-out) both; }
.form-group:nth-child(1) { animation-delay: .15s; }
.form-group:nth-child(2) { animation-delay: .2s; }
.form-group:nth-child(3) { animation-delay: .25s; }
.form-group:nth-child(4) { animation-delay: .3s; }
.form-group:nth-child(5) { animation-delay: .35s; }
.form-label { font-size:12px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.6px; }
.form-input { width:100%; padding:13px 15px; background:rgba(0,0,0,.28); border:1.5px solid transparent; border-radius:var(--radius-md); color:#fff; font-size:15px; outline:none; resize:vertical; transition: border-color .25s, background .25s, box-shadow .25s, transform .15s; }
html[data-theme="light"] .form-input { background:#fff; color:#111827; border-color:rgba(0,0,0,.1); }
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus { border-color:var(--accent); background:rgba(0,0,0,.44); box-shadow:0 0 0 4px rgba(82,136,193,.16); animation: glowPulse 2s infinite; }
html[data-theme="light"] .form-input:focus { background:#fff; }
.auth-error { min-height:18px; color:#ff7a7a; font-size:13px; opacity:0; transition:opacity .2s; }
.auth-error.visible { opacity:1; animation: shake .4s ease-in-out; }
.btn-primary { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; background:linear-gradient(135deg,#5288c1,#6b8dd6); background-size: 200% 200%; color:#fff; font-size:15px; font-weight:600; border-radius:var(--radius-md); transition: transform .2s var(--ease-spring), box-shadow .25s, filter .25s; box-shadow:0 8px 24px rgba(82,136,193,.32); }
.btn-primary:hover { filter:brightness(1.1); box-shadow:0 12px 34px rgba(82,136,193,.5); transform:translateY(-2px); animation: gradientShift 3s ease infinite; }
.btn-primary:active { transform:translateY(0) scale(.97); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-secondary { padding:12px 20px; background:rgba(255,255,255,.06); color:#fff; border-radius:var(--radius-md); font-size:15px; font-weight:500; transition: background .2s, transform .2s var(--ease-spring); }
html[data-theme="light"] .btn-secondary { background:rgba(0,0,0,.06); color:#111827; }
.btn-secondary:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
html[data-theme="light"] .btn-secondary:hover { background:rgba(0,0,0,.1); }
.btn-secondary:active { transform:scale(.98); }
.btn-danger { padding:12px 20px; background:rgba(224,83,83,.15); color:#ff8a8a; border-radius:var(--radius-md); font-size:15px; font-weight:500; transition: background .2s, transform .2s var(--ease-spring); }
.btn-danger:hover { background:rgba(224,83,83,.28); transform:translateY(-1px); }
.btn-danger:active { transform:scale(.98); }
.auth-recover-row { margin-top: 10px; text-align: center; animation:fadeInUp .5s var(--ease-out) .4s both; }
.auth-recover-btn { background: none; border: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: color .2s, background .2s, transform .15s; }
.auth-recover-btn:hover { color: var(--accent-light); background: rgba(82,136,193,.1); transform:translateY(-1px); }

/* ============ CAP.JS ============ */
#group-captcha { animation: fadeInUp .4s var(--ease-out); display: flex; justify-content: center; }
#group-captcha cap-widget {
    --cap-background: #ffffff; --cap-color: #212121; --cap-border-color: #d0d0d0; --cap-border-radius: 10px;
    --cap-widget-width: 100%; --cap-widget-height: 58px; --cap-widget-padding: 14px; --cap-gap: 15px;
    --cap-checkbox-size: 25px; --cap-checkbox-border: 1px solid #aaaaaa; --cap-checkbox-background: #fafafa; --cap-checkbox-border-radius: 6px;
    --cap-spinner-color: #5288c1; --cap-spinner-background-color: #eeeeee; --cap-spinner-thickness: 3;
    --cap-focus-ring: #5288c1; --cap-font: inherit;
    display: block; width: 100%; max-width: 320px;
}

/* ============ ОСНОВНОЙ ЭКРАН ============ */
.app-screen { display:grid; grid-template-columns: var(--sidebar-width) 4px 1fr; height:100vh; width:100vw; animation: fadeIn .5s var(--ease-out); }
.sidebar { display:flex; flex-direction:column; background:var(--bg-sidebar); border-right:1px solid rgba(255,255,255,.04); overflow:hidden; min-width:0; grid-column:1; animation: slideInFromLeft .5s var(--ease-spring); }
html[data-theme="light"] .sidebar { border-color:rgba(0,0,0,.06); }
.sidebar-resizer { grid-column:2; background:rgba(255,255,255,.03); cursor:ew-resize; transition:background .2s; position:relative; }
html[data-theme="light"] .sidebar-resizer { background:rgba(0,0,0,.04); }
.sidebar-resizer:hover { background:rgba(82,136,193,.4); }
.sidebar-resizer::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:36px; border-radius:2px; background:rgba(255,255,255,.15); transition: background .2s, height .2s; }
html[data-theme="light"] .sidebar-resizer::after { background:rgba(0,0,0,.15); }
.sidebar-resizer:hover::after { background:var(--accent-light); height:60px; }
.chat-area { grid-column:3; animation: fadeIn .5s var(--ease-out) .1s backwards; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); background:linear-gradient(180deg,#131e2b,#111a26); }
html[data-theme="light"] .sidebar-header { background:linear-gradient(180deg,#eef1f4,#e5e7eb); border-color:rgba(0,0,0,.06); }
.sidebar-actions { display:flex; gap:4px; }
.icon-action { background:rgba(82,136,193,.15) !important; color:var(--accent-light) !important; border:1px solid rgba(82,136,193,.25); }
.icon-action:hover { background:rgba(82,136,193,.35) !important; color:#fff !important; border-color:rgba(82,136,193,.5); transform: translateY(-2px) scale(1.05) !important; }
.icon-action:active { transform: scale(.92) !important; }
.me-card { display:flex; align-items:center; gap:11px; flex:1; min-width:0; padding:6px; border-radius:var(--radius-md); cursor:pointer; transition: background .2s, transform .15s; }
.me-card:hover { background:rgba(255,255,255,.03); transform: translateX(2px); }
.me-card:active { transform: translateX(0) scale(.99); }
html[data-theme="light"] .me-card:hover { background:rgba(0,0,0,.04); }
.me-info { min-width:0; flex:1; }
.me-name { font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); display:flex; align-items:center; gap:4px; }
.me-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); margin-top:1px; }
.avatar { flex-shrink:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,#5288c1,#6b8dd6); background-size:cover; background-position:center; text-transform:uppercase; user-select:none; position:relative; overflow:hidden; transition: transform .25s var(--ease-spring), box-shadow .25s; }
.avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(82,136,193,.3); }
.avatar.nexus-avatar { background:linear-gradient(135deg,#5288c1,#8b5cf6); }
.avatar-me { width:42px; height:42px; }
.avatar-lg { width:84px; height:84px; font-size:32px; }
.avatar-xl { width:120px; height:120px; font-size:44px; }
.avatar-sm { width:32px; height:32px; font-size:13px; }
.icon-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:var(--text-secondary); font-size:18px; transition: background .2s, color .2s, transform .2s var(--ease-spring), border-color .2s; }
.icon-btn:hover { background:rgba(255,255,255,.08); color:var(--text-primary); transform: translateY(-2px) scale(1.05); }
html[data-theme="light"] .icon-btn:hover { background:rgba(0,0,0,.06); }
.icon-btn:active { transform: translateY(0) scale(.92); }
.sidebar-search { position:relative; padding:12px 14px 8px; }
.search-input { width:100%; padding:10px 34px 10px 16px; background:var(--bg-input); border:1.5px solid transparent; border-radius:10px; color:var(--text-primary); font-size:14px; outline:none; transition: border-color .25s, box-shadow .25s; }
.search-input::placeholder { color:var(--text-muted); }
.search-input:focus { border-color:var(--accent); box-shadow: 0 0 0 3px rgba(82,136,193,.15); animation: glowPulse 2s infinite; }
.search-clear { position:absolute; right:22px; top:50%; transform: translateY(-50%); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text-secondary); font-size:16px; transition: background .2s, transform .2s; }
html[data-theme="light"] .search-clear { background:rgba(0,0,0,.08); }
.search-clear:hover { background:rgba(255,255,255,.18); transform: translateY(-50%) scale(1.12); }
html[data-theme="light"] .search-clear:hover { background:rgba(0,0,0,.15); }
.sidebar-tabs { display:flex; padding:0 14px 10px; gap:4px; overflow-x:auto; scrollbar-width:none; }
.sidebar-tabs::-webkit-scrollbar { display:none; }
.sidebar-tab { position:relative; padding:6px 12px; font-size:12.5px; color:var(--text-secondary); border-radius:var(--radius-full); background:rgba(255,255,255,.03); white-space:nowrap; transition: background .2s, color .2s, transform .2s var(--ease-spring); display:flex; align-items:center; gap:6px; }
html[data-theme="light"] .sidebar-tab { background:rgba(0,0,0,.04); }
.sidebar-tab:hover { background:rgba(255,255,255,.07); color:var(--text-primary); transform: translateY(-1px); }
html[data-theme="light"] .sidebar-tab:hover { background:rgba(0,0,0,.08); }
.sidebar-tab:active { transform: scale(.96); }
.sidebar-tab.active { background:rgba(82,136,193,.22); color:var(--accent-light); box-shadow: 0 0 0 1px rgba(82,136,193,.35); }
.tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; animation: bounceIn .5s var(--ease-spring); }
.contacts-list { flex:1; overflow-y:auto; padding:0 8px 12px; }
.contact { display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:var(--radius-md); cursor:pointer; position:relative; transition: background .2s, transform .2s var(--ease-spring); animation: fadeInUp .35s var(--ease-out) both; }
.contact:nth-child(1) { animation-delay: .02s; }
.contact:nth-child(2) { animation-delay: .04s; }
.contact:nth-child(3) { animation-delay: .06s; }
.contact:nth-child(4) { animation-delay: .08s; }
.contact:nth-child(5) { animation-delay: .1s; }
.contact:nth-child(n+6) { animation-delay: .12s; }
.contact:hover { background:var(--bg-hover); transform: translateX(3px); }
.contact:active { transform: translateX(1px) scale(.99); }
.contact.active { background:var(--bg-active); box-shadow: inset 3px 0 0 var(--accent-light); }
.contact.pinned::after {
    content: ''; position: absolute; right: 12px; top: 12px; width: 14px; height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='17' x2='12' y2='22'></line><path d='M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z'></path></svg>");
    background-size: contain; background-repeat: no-repeat; opacity: 0.85; pointer-events: none; animation: fadeIn .3s ease-out;
}
.contact.muted { opacity:.55; }
.contact-avatar-wrap { position:relative; flex-shrink:0; }
.contact-dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; border:2.5px solid var(--bg-sidebar); background:#4a5563; transition: background .3s; }
.contact.online .contact-dot { background:var(--success); animation: onlinePulse 2.2s infinite; }
.contact-kind-badge { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:9px; border:2px solid var(--bg-sidebar); animation: fadeInScale .3s var(--ease-spring); }
.contact-kind-badge.channel { background:#8b5cf6; }
.contact-kind-badge.nexus { background:linear-gradient(135deg,#5288c1,#8b5cf6); }
.contact-body { flex:1; min-width:0; }
.contact-name { font-size:14.5px; font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.contact-status { font-size:12.5px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.contact.online .contact-status { color:var(--success); }
.unread-badge { flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent-light); color:#fff; font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center; animation: bounceIn .5s var(--ease-spring); }
.empty-contacts { padding:30px 20px; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.6; animation: fadeIn .4s ease-out; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-online { background:var(--success); box-shadow:0 0 8px rgba(77,212,125,.6); animation: breathing 2s ease-in-out infinite; }

/* ЗВЁЗДЫ */
.user-star { display: inline-block; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Arial Unicode MS', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 900; font-size: 1em; line-height: 1; vertical-align: -0.06em; margin-left: 3px; transform: scale(1.08); transform-origin: center; user-select: none; animation: starSpin .7s var(--ease-spring) both, starGlow 3s ease-in-out infinite; }
.user-star-red { color: var(--star-red); text-shadow: 0 0 3px rgba(255,77,77,.85), 0 0 8px rgba(255,77,77,.45); }
.user-star-blue { color: var(--star-blue); text-shadow: 0 0 3px rgba(100,181,239,.85), 0 0 8px rgba(100,181,239,.45); }
.user-stars { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.user-stars .user-star { font-size: 16px; }
.info-name-stars { display: flex; gap: 4px; align-items: center; }
.info-name-stars .user-star { font-size: 20px; }
.contact-name .user-star, .chat-header-name .user-star, .me-name .user-star,
.msg-author .user-star, .info-member-name .user-star { font-size: 13px; vertical-align: 0; }

/* ЧАТ */
.chat-area { position:relative; min-width:0; background: radial-gradient(ellipse at top, rgba(82,136,193,.06) 0%, transparent 60%), var(--bg-main); display:flex; flex-direction:column; overflow:hidden; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; gap:16px; }
.chat-empty h2 { font-size:22px; font-weight:700; color:var(--text-primary); animation: fadeInUp .5s var(--ease-out) both; }
.chat-empty p { max-width:380px; color:var(--text-secondary); font-size:14px; line-height:1.6; animation: fadeInUp .5s var(--ease-out) .1s both; }
.chat-wrapper { display:flex; flex-direction:column; flex:1; min-height:0; position:relative; animation:fadeIn .35s var(--ease-out); }
.chat-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(17,26,38,.85); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.05); z-index:5; gap:8px; animation: slideDown .35s var(--ease-spring); }
html[data-theme="light"] .chat-header { background:rgba(229,231,235,.9); border-color:rgba(0,0,0,.06); }
.chat-header-user { display:flex; align-items:center; gap:12px; min-width:0; flex:1; cursor:pointer; padding:4px 8px 4px 4px; border-radius:var(--radius-md); transition: background .2s, transform .15s; }
.chat-header-user:hover { background:rgba(255,255,255,.04); transform: translateX(2px); }
html[data-theme="light"] .chat-header-user:hover { background:rgba(0,0,0,.04); }
.chat-header-info { min-width:0; }
.chat-header-name { font-size:15.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.chat-header-status { font-size:12.5px; color:var(--text-secondary); margin-top:1px; }
.chat-header-status.online { color:var(--success); }
.chat-header-actions { display:flex; gap:4px; }

.messages-wrap { flex:1; position:relative; min-height:0; display:flex; flex-direction:column; }
.scroll-to-bottom { position: absolute; right: 22px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(30, 43, 58, 0.85); color: #8ba3bc; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; transition: transform .25s var(--ease-spring), background .2s, color .2s, border-color .2s; z-index: 8; animation: fadeInScale .3s var(--ease-spring); }
.scroll-to-bottom:hover { background: rgba(43, 60, 80, 0.92); color: #b3c8dd; border-color: rgba(255,255,255,.14); transform: scale(1.1) translateY(-2px); }
.scroll-to-bottom:active { transform: scale(.92); }
html[data-theme="light"] .scroll-to-bottom { background: rgba(203, 210, 220, 0.92); color: #4b5563; border-color: rgba(0,0,0,.08); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
html[data-theme="light"] .scroll-to-bottom:hover { background: rgba(180, 190, 205, 0.96); color: #1f2937; }
html[data-theme="darker"] .scroll-to-bottom { background: rgba(15, 22, 30, 0.9); border-color: rgba(255,255,255,.06); }
.scroll-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 2px 8px rgba(224,83,83,.4); animation: bounceIn .4s var(--ease-spring); }

.pinned-bar { display:flex; align-items:center; gap:10px; padding:8px 20px; background:rgba(82,136,193,.12); border-bottom:1px solid rgba(82,136,193,.2); font-size:13px; animation: slideDown .35s var(--ease-spring); }
.pinned-bar-content { flex:1; display:flex; align-items:center; gap:8px; min-width:0; cursor:pointer; border-radius:6px; padding:2px 4px; transition: background .2s, transform .15s; }
.pinned-bar-content:hover { background:rgba(255,255,255,.05); transform: translateX(2px); }
.pinned-bar-content svg { color:var(--accent-light); flex-shrink:0; }
.pinned-bar-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinned-bar-nav { display:flex; gap:2px; align-items:center; }
.pinned-bar-close { width:28px; height:28px; font-size:14px; }

.chat-search-bar { display:flex; align-items:center; gap:6px; padding:8px 20px; background:rgba(17,26,38,.9); border-bottom:1px solid rgba(255,255,255,.06); animation: slideDown .3s var(--ease-spring); }
html[data-theme="light"] .chat-search-bar { background:rgba(229,231,235,.95); border-color:rgba(0,0,0,.06); }
.chat-search-bar input { flex:1; padding:8px 12px; background:var(--bg-input); border:1.5px solid transparent; border-radius:8px; color:var(--text-primary); font-size:13.5px; outline:none; transition: border-color .2s; }
.chat-search-bar input:focus { border-color:var(--accent); }
.chat-search-count { font-size:12.5px; color:var(--text-secondary); min-width:52px; text-align:center; }

.messages { flex:1; overflow-y:auto; padding:18px 26px 8px; display:flex; flex-direction:column; gap:var(--msg-gap); scroll-behavior:auto; }
.messages.fade-swap { animation: fadeIn .3s ease; }
.date-sep { align-self:center; margin:14px 0 6px; padding:4px 14px; background:rgba(17,26,38,.85); border-radius:var(--radius-full); font-size:11.5px; font-weight:500; color:var(--text-secondary); animation: fadeInScale .35s var(--ease-spring); }
html[data-theme="light"] .date-sep { background:rgba(229,231,235,.9); }

/* СООБЩЕНИЯ */
.msg { display:flex; margin:1px 0; position:relative; align-items:flex-end; gap:8px; transition: transform .25s var(--ease-spring); }
.msg.new-msg.own { animation: slideInRight .45s var(--ease-spring) both; }
.msg.new-msg.other { animation: slideInLeft .45s var(--ease-spring) both; }
.msg:not(.new-msg) { animation: none; }
.msg.own { justify-content: flex-end; }
.msg.other { justify-content:flex-start; }
.msg-avatar { flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; color:#fff; background-size:cover; background-position:center; cursor:pointer; transition: transform .25s var(--ease-spring), box-shadow .25s; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.msg-avatar:hover { transform: scale(1.12) rotate(-3deg); box-shadow: 0 4px 16px rgba(82,136,193,.5), 0 0 0 3px rgba(82,136,193,.25); }
.msg-avatar.placeholder { visibility:hidden; }
.msg-system { align-self:center; margin:8px auto; padding:6px 16px; background:rgba(82,136,193,.1); border-radius:var(--radius-full); font-size:12.5px; color:#89a3bc; font-style:italic; display:flex; align-items:center; gap:6px; max-width:80%; text-align:center; animation: fadeInScale .4s var(--ease-spring); }
.msg-bubble { position:relative; max-width:min(520px, 72%); padding:7px 12px; border-radius:14px; font-size:14.5px; line-height:1.42; word-wrap:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow-sm); cursor:context-menu; transition: transform .25s var(--ease-spring), box-shadow .25s, outline-color .15s; }
.msg-bubble:hover { box-shadow: var(--shadow-md); }
.msg.own .msg-bubble { background:linear-gradient(135deg,#2b5278,#2d5786); color:#fff; border-bottom-right-radius:4px; }
html[data-theme="light"] .msg.own .msg-bubble { background:linear-gradient(135deg,#d0e7ff,#c7e0fb); color:#111827; }
.msg.other .msg-bubble { background:var(--bg-msg-other); color:#eaeef2; border-bottom-left-radius:4px; }
html[data-theme="light"] .msg.other .msg-bubble { color:#111827; border:1px solid rgba(0,0,0,.06); }
.msg.same-author.prev .msg-avatar.placeholder { visibility:visible; opacity:0; }
.msg.same-author.prev .msg-bubble { border-top-left-radius:6px; border-top-right-radius:6px; }
.msg-author { font-size:12px; font-weight:600; color:var(--accent-light); margin-bottom:2px; display:flex; align-items:center; gap:4px; }
.msg-text { white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.msg-text::after { content:''; display:inline-block; width:58px; height:1px; vertical-align:bottom; margin-right:-4px; }
.msg-text.own::after { width:64px; }
.msg-text.edited::before { content:'(ред.) '; font-size:11px; opacity:.6; }
.msg.deleted .msg-bubble { opacity:.6; }
.msg.deleted .msg-text { font-style:italic; color:var(--text-muted); }
.msg-meta { position:absolute; right:8px; bottom:5px; display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:1; color:rgba(255,255,255,.55); pointer-events:none; }
.msg.other .msg-meta { color:var(--text-muted); }
html[data-theme="light"] .msg.own .msg-meta { color:rgba(17,24,39,.5); }
.msg-check { color:rgba(255,255,255,.55); transition: color .35s ease; }
html[data-theme="light"] .msg.own .msg-check { color:rgba(17,24,39,.45); }
.msg-check.read { color:#7dd3fc; text-shadow:0 0 6px rgba(125,211,252,.5); animation: bounceIn .5s var(--ease-spring); }
html[data-theme="light"] .msg.own .msg-check.read { color:#2563eb; text-shadow:none; }
.msg.swiping .msg-bubble::before { content: '↩'; position: absolute; left: -28px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--accent-light); opacity: 1; animation: fadeIn .2s; }
.msg-reply-preview { display:flex; gap:8px; padding:6px 8px; background:rgba(0,0,0,.22); border-left:3px solid var(--accent-light); border-radius:6px; margin-bottom:4px; cursor:pointer; transition: background .2s, transform .15s; }
.msg-reply-preview:hover { background:rgba(0,0,0,.32); transform: translateX(-2px); }
html[data-theme="light"] .msg-reply-preview { background:rgba(0,0,0,.06); }
html[data-theme="light"] .msg-reply-preview:hover { background:rgba(0,0,0,.1); }
.msg-reply-preview:active { transform: scale(.98); }
.msg-reply-preview .rp-author { font-weight:600; color:var(--accent-light); font-size:12px; }
.msg-reply-preview .rp-text { color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; font-size:13px; }
.msg-forwarded { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--accent-light); margin-bottom:4px; padding-bottom:4px; border-bottom:1px dashed rgba(100,181,239,.2); opacity:.9; }
.msg-attachment { display:block; margin:-3px -6px 5px; border-radius:10px; overflow:hidden; max-width:340px; cursor:pointer; transition: transform .35s var(--ease-spring); }
.msg-attachment:hover { transform: scale(1.02); }
.msg-attachment img { display:block; width:100%; max-height:420px; object-fit:cover; opacity:0; transition: opacity .5s ease; }
.msg-attachment img.loaded { opacity:1; animation: fadeInScale .4s var(--ease-out); }
.msg-attachment video { display:block; width:100%; max-height:420px; background:#000; border-radius:10px; }

.voice-msg { display:flex; align-items:center; gap:10px; padding:6px 4px; min-width:220px; max-width:340px; }
.voice-play { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition: background .2s, transform .2s var(--ease-spring); }
.voice-play:hover { background:rgba(255,255,255,.28); transform: scale(1.08); }
.voice-play:active { transform: scale(.92); }
.voice-body { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.voice-wave { flex:1; display:flex; align-items:center; gap:2px; height:22px; }
.voice-wave span { display:block; width:2px; border-radius:2px; background:rgba(255,255,255,.4); transition: background .2s; }
.voice-wave.playing span { background:rgba(125,211,252,1); animation: breathing 1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .05s); }
.voice-time { font-size:12px; color:rgba(255,255,255,.7); min-width:34px; text-align:right; }
.msg.other .voice-play { background:rgba(0,0,0,.25); }
.msg.other .voice-time { color:var(--text-secondary); }
.msg.other .voice-wave span { background:rgba(255,255,255,.2); }
.msg-file { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(0,0,0,.18); border-radius:10px; margin:-2px 0 4px; text-decoration:none; color:inherit; max-width:340px; transition: background .2s, transform .2s var(--ease-spring); }
.msg-file:hover { background:rgba(0,0,0,.28); transform: translateY(-1px); }
.msg-file-icon { flex-shrink:0; width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#5288c1,#6b8dd6); display:flex; align-items:center; justify-content:center; }
.msg-file-info { min-width:0; flex:1; }
.msg-file-name { font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-file-size { font-size:11.5px; color:var(--text-secondary); margin-top:2px; }

.msg-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; margin-bottom:-2px; }
.reaction-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:rgba(82,136,193,.25); border-radius:12px; font-size:12px; color:#fff; cursor:pointer; user-select:none; animation: bounceIn .4s var(--ease-spring); transition: background .2s, transform .2s var(--ease-spring); }
html[data-theme="light"] .reaction-badge { color:#111827; }
.reaction-badge.mine { background:rgba(82,136,193,.5); }
.reaction-badge .reaction-av { width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; overflow:hidden; }
.reaction-badge:has(.reaction-av) { padding-left:3px; }
html[data-theme="light"] .reaction-badge.mine { color:#fff; }
.reaction-badge:hover { background:rgba(82,136,193,.45); transform: scale(1.12); }
.reaction-badge:active { animation: jelly .5s ease; }

.msg-read-by { display: flex; align-items: center; margin-top: 6px; margin-bottom: -2px; padding-top: 5px; border-top: 1px dashed rgba(255,255,255,.1); cursor: pointer; min-height: 20px; transition: opacity .2s; }
html[data-theme="light"] .msg-read-by { border-color: rgba(0,0,0,.08); }
.msg.own .msg-read-by { border-color: rgba(255,255,255,.14); }
html[data-theme="light"] .msg.own .msg-read-by { border-color: rgba(0,0,0,.1); }
.msg-read-by:hover .read-avatar { transform: translateY(-2px) scale(1.05); }
.msg-read-by .read-avatar { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5288c1, #6b8dd6); background-size: cover; background-position: center; margin-left: -6px; border: 2px solid rgba(43,82,120,1); transition: transform .25s var(--ease-spring), border-color .2s, z-index .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); position: relative; z-index: 1; text-transform: uppercase; user-select: none; animation: pop .35s var(--ease-spring); }
.msg.other .msg-read-by .read-avatar { border-color: var(--bg-msg-other); }
html[data-theme="light"] .msg.own .msg-read-by .read-avatar { border-color: #d0e7ff; }
html[data-theme="light"] .msg.other .msg-read-by .read-avatar { border-color: #fff; }
.msg-read-by .read-avatar:first-child { margin-left: 0; }
.msg-read-by .read-avatar:hover { transform: scale(1.25) translateY(-2px); z-index: 5; }
.msg-read-by .read-more { margin-left: 2px; padding: 0 6px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.14); font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 20px; user-select: none; transition: background .2s; }
html[data-theme="light"] .msg-read-by .read-more { background: rgba(0,0,0,.1); color: #4b5563; }

/* READ MODAL */
.readby-card { max-width: 440px; max-height: 80vh; display: flex; flex-direction: column; }
.readby-card .modal-body { overflow-y: auto; }
.readby-section { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.readby-section:last-child { margin-bottom: 0; }
.readby-title { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 2px 4px 8px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 4px; }
html[data-theme="light"] .readby-title { border-color: rgba(0,0,0,.06); }
.readby-title span { color: var(--text-secondary); margin-left: 4px; }
.readby-list { display: flex; flex-direction: column; gap: 3px; }
.read-by-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); transition: background .2s, transform .2s var(--ease-spring); animation: fadeInUp .3s var(--ease-out) both; }
.read-by-item:nth-child(2) { animation-delay: .03s; }
.read-by-item:nth-child(3) { animation-delay: .06s; }
.read-by-item:nth-child(4) { animation-delay: .09s; }
.read-by-item:nth-child(n+5) { animation-delay: .12s; }
html[data-theme="light"] .read-by-item { background: rgba(0,0,0,.03); }
.read-by-item:hover { background: rgba(82,136,193,.12); transform: translateX(3px); }
.read-by-item-unread { opacity: .6; }
.read-by-info { flex: 1; min-width: 0; }
.read-by-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-by-time { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* COMMENTS */
.comments-btn { display: block; margin-top: 6px; padding: 4px 10px; background: rgba(82,136,193,.15); border: none; border-radius: 8px; color: var(--accent-light); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .2s, transform .2s var(--ease-spring); }
.comments-btn:hover { background: rgba(82,136,193,.3); transform: translateY(-1px); }
.comments-btn:active { transform: scale(.97); }
html[data-theme="light"] .comments-btn { background: rgba(59,130,246,.12); }
html[data-theme="light"] .comments-btn:hover { background: rgba(59,130,246,.22); }
.comments-card { max-width: 520px; height: 80vh; display: flex; flex-direction: column; }
.comments-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.comment-post-preview { padding: 10px 14px; background: rgba(82,136,193,.08); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 13.5px; flex-shrink: 0; }
.comment-post-preview .cp-author { font-weight: 600; color: var(--accent-light); margin-bottom: 3px; }
.comment-post-preview .cp-text { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.comments-list { display: flex; flex-direction: column; gap: 8px; }
.comments-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }
.comment-item { display: flex; gap: 10px; padding: 6px 0; animation: fadeInUp .3s var(--ease-out) both; }
.comment-item:nth-child(2) { animation-delay: .04s; }
.comment-item:nth-child(3) { animation-delay: .08s; }
.comment-item:nth-child(4) { animation-delay: .12s; }
.comment-item:nth-child(n+5) { animation-delay: .16s; }
.comment-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg,#5288c1,#6b8dd6); background-size: cover; background-position: center; text-transform: uppercase; }
.comment-body { flex: 1; min-width: 0; }
.comment-author { font-size: 13px; font-weight: 600; color: var(--accent-light); }
.comment-text { font-size: 14px; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
.comment-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.comments-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .comments-composer { border-color: rgba(0,0,0,.06); }
.comments-composer .composer-input { flex: 1; min-height: 40px; max-height: 120px; }
.comments-composer .composer-send { width: 40px; height: 40px; flex-shrink: 0; }

/* FORMATTING */
.msg-text b { font-weight: 700; }
.msg-text i { font-style: italic; }
.msg-text code { font-family: 'SF Mono', Consolas, 'Courier New', monospace; font-size: 13px; background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 4px; color: #7dd3fc; }
html[data-theme="light"] .msg-text code { background: rgba(0,0,0,.08); color: #0369a1; }
.msg.own .msg-text code { background: rgba(0,0,0,.4); color: #bae6fd; }
html[data-theme="light"] .msg.own .msg-text code { background: rgba(0,0,0,.06); color: #0c4a6e; }
.msg-text s { text-decoration: line-through; opacity: .8; }
.msg-text .spoiler { background: #2a3542; color: transparent; border-radius: 3px; padding: 0 4px; cursor: pointer; user-select: none; transition: background .25s, color .25s; }
html[data-theme="light"] .msg-text .spoiler { background: #b8bfcc; }
.msg-text .spoiler.open { background: transparent; color: inherit; }
.msg-text .mention { background: rgba(82,136,193,.3); color: var(--accent-light); padding: 1px 6px; border-radius: 5px; font-weight: 600; cursor: pointer; user-select: none; transition: background .2s, transform .2s; }
.msg-text .mention-me { background: rgba(77,212,125,.3); color: var(--success); animation: breathing 2.5s ease-in-out infinite; }
.msg.own .msg-text .mention { background: rgba(255,255,255,.2); color: #fff; }
html[data-theme="light"] .msg.own .msg-text .mention { background: rgba(0,0,0,.1); color: #111827; }
.msg-text .mention:hover { background: rgba(82,136,193,.55); transform: scale(1.05); display: inline-block; }

/* POLLS */
.poll-block { padding:10px 12px; background:rgba(0,0,0,.12); border-radius:10px; margin:-2px -4px 4px; min-width:260px; max-width:400px; }
html[data-theme="light"] .poll-block { background:rgba(0,0,0,.04); }
.poll-question { font-weight:600; font-size:14.5px; margin-bottom:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.poll-multiple-badge { font-size:10px; padding:2px 6px; background:rgba(82,136,193,.3); border-radius:8px; font-weight:500; }
.poll-options { display:flex; flex-direction:column; gap:6px; }
.poll-option { position:relative; display:block; padding:8px 12px; background:rgba(255,255,255,.06); border-radius:8px; cursor:pointer; overflow:hidden; text-align:left; transition: background .2s, transform .2s var(--ease-spring); }
html[data-theme="light"] .poll-option { background:rgba(0,0,0,.05); }
.poll-option:hover { background:rgba(255,255,255,.1); transform: translateX(2px); }
html[data-theme="light"] .poll-option:hover { background:rgba(0,0,0,.08); }
.poll-option:active { transform: scale(.99); }
.poll-option.mine { background:rgba(82,136,193,.2); }
.poll-option.mine::after { content:'✓'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--accent-light); animation: bounceIn .4s var(--ease-spring); }
.poll-option.disabled { cursor:default; opacity:.7; }
.poll-option.disabled:hover { background:rgba(255,255,255,.06); }
.poll-option-fill { position:absolute; left:0; top:0; bottom:0; background:rgba(82,136,193,.25); transition: width .5s var(--ease-out); }
.poll-option.mine .poll-option-fill { background:rgba(82,136,193,.4); }
.poll-option-text { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; }
.poll-option-label { flex:1; }
.poll-option-count { font-size:12px; color:var(--text-secondary); font-weight:500; white-space:nowrap; }
.poll-footer { font-size:11.5px; color:var(--text-secondary); margin-top:8px; }
.poll-closed { opacity:.85; }
.msg.highlight .msg-bubble { animation: highlightFade 2.4s var(--ease-out); }

/* FIRST UNREAD */
.msg.first-unread { position: relative; margin-top: 22px; }
.msg.first-unread::before { content: 'Непрочитанные'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--danger); background: var(--bg-main); padding: 2px 14px; border-radius: 10px; white-space: nowrap; z-index: 1; animation: bounceIn .55s var(--ease-spring); }
.msg.first-unread::after { content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(224,83,83,.5), transparent); pointer-events: none; animation: fadeIn .5s ease-out; }

/* SELECT MODE */
.messages.select-mode .msg-bubble { cursor: pointer; }
.messages.select-mode .msg { padding-left: 32px; }
.messages.select-mode .msg::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); transition: background .2s, border-color .2s, transform .25s var(--ease-spring); }
html[data-theme="light"] .messages.select-mode .msg::before { border-color:rgba(0,0,0,.25); }
.messages.select-mode .msg:hover::before { border-color: var(--accent-light); }
.messages.select-mode .msg.selected::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(82,136,193,.3); transform: translateY(-50%) scale(1.15); }
.messages.select-mode .msg.selected .msg-bubble { outline: 2px solid var(--accent); outline-offset: 2px; }
.select-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(180deg, rgba(82,136,193,.18), rgba(82,136,193,.08)); border-top: 1px solid rgba(82,136,193,.3); animation: slideUp .3s var(--ease-spring); z-index: 6; }
.select-toolbar-info { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--accent-light); }
.select-toolbar-info span { font-size: 15px; }
.select-toolbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font-size: 13.5px; font-weight: 500; transition: background .2s, transform .2s var(--ease-spring); }
html[data-theme="light"] .select-toolbar-btn { background: rgba(0,0,0,.08); color:#111827; }
.select-toolbar-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
html[data-theme="light"] .select-toolbar-btn:hover { background: rgba(0,0,0,.14); }
.select-toolbar-btn:active { transform: scale(.96); }
.select-toolbar-btn.danger { background: rgba(224,83,83,.2); color: #ff9a9a; }
.select-toolbar-btn.danger:hover { background: rgba(224,83,83,.35); }

/* TYPING + COMPOSER */
.typing-indicator { display:flex; align-items:center; gap:10px; padding:2px 28px 6px; font-size:12.5px; color:var(--text-secondary); animation: fadeIn .25s ease-out; }
.typing-dots { display:inline-flex; gap:4px; padding:8px 12px; background:var(--bg-msg-other); border-radius:14px; }
.typing-dots i { display:block; width:6px; height:6px; background:var(--text-secondary); border-radius:50%; animation: typingWave 1.4s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay:.15s; }
.typing-dots i:nth-child(3) { animation-delay:.3s; }
.attach-preview, .reply-preview { display:flex; align-items:center; gap:12px; padding:10px 20px; background:rgba(17,26,38,.6); border-top:1px solid rgba(255,255,255,.05); animation: slideUp .3s var(--ease-spring); position:relative; }
html[data-theme="light"] .attach-preview, html[data-theme="light"] .reply-preview { background:rgba(229,231,235,.7); border-color:rgba(0,0,0,.05); }
.attach-preview-body { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.attach-preview-body img { max-height:60px; max-width:80px; object-fit:cover; border-radius:8px; animation: fadeInScale .3s var(--ease-spring); }
.attach-preview-body video { max-height:60px; max-width:100px; border-radius:8px; }
.attach-preview-info { min-width:0; }
.attach-preview-name { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-preview-size { font-size:11.5px; color:var(--text-secondary); margin-top:2px; }
.attach-uploading { font-size:13.5px; color:var(--text-secondary); }
.attach-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(128,128,128,.2); }
.attach-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#5288c1,#6b8dd6,#5288c1); background-size: 200% 100%; animation: gradientShift 2s linear infinite; transition: width .3s var(--ease-out); }
.reply-preview-body { flex:1; min-width:0; border-left:3px solid var(--accent); padding-left:10px; }
.reply-preview-author { font-size:12px; font-weight:600; color:var(--accent-light); }
.reply-preview-text { font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-wrap { position:relative; }
.comments-toggle { display:flex; align-items:center; gap:8px; padding:8px 20px; background:var(--bg-sidebar); border-top:1px solid rgba(255,255,255,.05); font-size:13px; color:var(--text-secondary); cursor:pointer; animation: slideDown .3s var(--ease-spring); transition: background .2s; }
html[data-theme="light"] .comments-toggle { border-color:rgba(0,0,0,.05); }
.comments-toggle:hover { background: var(--bg-hover); }
.comments-toggle input { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; transition: transform .15s var(--ease-spring); }
.comments-toggle input:active { transform: scale(1.15); }
.composer { display:flex; align-items:flex-end; gap:6px; padding:12px 18px 16px; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%); position:relative; }
html[data-theme="light"] .composer { background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.03) 100%); }
.composer-btn { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--bg-input); color:var(--text-secondary); font-size:20px; transition: background .25s, color .25s, transform .25s var(--ease-spring); }
.composer-btn:hover { background:var(--bg-hover); color:var(--text-primary); transform: scale(1.08) rotate(-5deg); }
.composer-btn:active { transform: scale(.92); }
.composer-input { flex:1; min-height:42px; max-height:180px; padding:11px 16px; background:var(--bg-input); border:1.5px solid transparent; border-radius:22px; color:var(--text-primary); font-size:14.5px; line-height:1.4; outline:none; resize:none; overflow-y:auto; transition: border-color .25s, box-shadow .25s, height .15s ease; }
.composer-input::placeholder { color:var(--text-muted); }
.composer-input:focus { border-color:rgba(82,136,193,.5); box-shadow: 0 0 0 3px rgba(82,136,193,.12); }
.composer-input:disabled { opacity:.6; cursor:not-allowed; }
.composer-send { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#5288c1,#6b8dd6); background-size: 200% 200%; color:#fff; font-size:18px; box-shadow:0 4px 14px rgba(82,136,193,.35); transition: transform .25s var(--ease-spring), filter .2s, box-shadow .25s; animation: bounceIn .4s var(--ease-spring); }
.composer-send:hover { filter:brightness(1.15); transform: scale(1.1) rotate(-3deg); box-shadow: 0 8px 22px rgba(82,136,193,.55); animation: gradientShift 2s ease infinite; }
.composer-send:active { transform: scale(.9); }
.composer-mic { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--bg-input); color:var(--text-secondary); transition: background .25s, color .25s, transform .25s var(--ease-spring); }
.composer-mic:hover { background:var(--bg-hover); color:var(--text-primary); transform: scale(1.08); }
.composer-mic:active { transform: scale(.92); }
.composer.recording { gap:12px; }
.rec-cancel, .rec-stop { flex-shrink:0; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition: background .2s, transform .2s var(--ease-spring); }
.rec-cancel { background:rgba(224,83,83,.25); }
.rec-cancel:hover { background:rgba(224,83,83,.4); transform: scale(1.06); }
.rec-stop { background:linear-gradient(135deg,#5288c1,#6b8dd6); box-shadow:0 4px 14px rgba(82,136,193,.35); }
.rec-stop:hover { filter:brightness(1.15); transform: scale(1.06); }
.rec-dot { flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--danger); animation: recPulse 1s infinite; }
.rec-timer { font-size:15px; font-weight:600; color:var(--text-primary); min-width:52px; font-variant-numeric:tabular-nums; }
.rec-waves { flex:1; display:flex; align-items:center; gap:2px; height:32px; overflow:hidden; }
.rec-waves span { display:block; width:3px; border-radius:2px; background:var(--accent-light); animation: fadeIn .15s ease-out; }
.display-mode-btn { flex-shrink:0; width:42px; height:42px; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; transition: transform .25s var(--ease-spring); position:relative; }
.display-mode-btn:hover { transform: scale(1.12); }
.display-mode-btn::after { content:''; position:absolute; inset:2px; border-radius:50%; border:2px solid var(--accent); opacity:0; transition: opacity .25s; }
.display-mode-btn.channel-mode::after { opacity:1; animation: glowPulse 2s infinite; }
.display-mode-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(135deg,#5288c1,#6b8dd6); background-size:cover; background-position:center; text-transform:uppercase; }
.display-mode-avatar.nexus-avatar { background:linear-gradient(135deg,#5288c1,#8b5cf6); }
.display-mode-menu { position:absolute; bottom:76px; right:120px; min-width:240px; padding:6px; background:var(--bg-panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:var(--shadow-lg); z-index:60; animation: ctxPop .25s var(--ease-spring); }
html[data-theme="light"] .display-mode-menu { border-color:rgba(0,0,0,.08); }
.display-mode-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; transition: background .2s, transform .2s var(--ease-spring); }
.display-mode-item:hover { background:rgba(82,136,193,.15); transform: translateX(3px); }
.display-mode-item.active { background:rgba(82,136,193,.25); }
.display-mode-item-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(135deg,#5288c1,#6b8dd6); background-size:cover; background-position:center; text-transform:uppercase; flex-shrink:0; }
.display-mode-item-avatar.nexus-avatar { background:linear-gradient(135deg,#5288c1,#8b5cf6); }
.display-mode-item-info { flex:1; min-width:0; }
.display-mode-item-title { font-size:14px; font-weight:500; }
.display-mode-item-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* EMOJI */
.emoji-picker { position:absolute; bottom:76px; left:60px; width:340px; max-height:360px; display:flex; flex-direction:column; background:rgba(17,26,38,.97); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; z-index:50; animation: slideUp .3s var(--ease-spring); }
html[data-theme="light"] .emoji-picker { background:#fff; border-color:rgba(0,0,0,.08); }
.emoji-tabs { display:flex; padding:6px 6px 0; gap:2px; border-bottom:1px solid rgba(255,255,255,.06); overflow-x:auto; scrollbar-width:none; }
.emoji-tabs::-webkit-scrollbar { display:none; }
html[data-theme="light"] .emoji-tabs { border-color:rgba(0,0,0,.06); }
.emoji-tab { padding:8px 12px; font-size:12.5px; color:var(--text-secondary); border-bottom:2px solid transparent; white-space:nowrap; transition: color .2s, border-color .2s, transform .15s; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; }
.emoji-tab.active { color:var(--accent-light); border-bottom-color:var(--accent-light); }
.emoji-tab:hover { color:var(--text-primary); transform: translateY(-1px); }
.emoji-grid { flex:none; height:134px; overflow-y:auto; display:grid; grid-template-columns:repeat(8, 1fr); grid-auto-rows:38px; align-content:start; gap:2px; padding:8px; }
.emoji-grid .emoji-cell { aspect-ratio:auto; height:38px; }
.emoji-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:6px; cursor:pointer; transition: background .15s, transform .2s var(--ease-spring); animation: fadeInScale .25s var(--ease-spring) both; }
.emoji-cell:nth-child(2) { animation-delay: .01s; }
.emoji-cell:nth-child(3) { animation-delay: .02s; }
.emoji-cell:nth-child(4) { animation-delay: .03s; }
.emoji-cell:nth-child(5) { animation-delay: .04s; }
.emoji-cell:nth-child(n+6) { animation-delay: .05s; }
.emoji-cell:hover { background:rgba(255,255,255,.1); animation: jelly .55s ease; }
html[data-theme="light"] .emoji-cell:hover { background:rgba(0,0,0,.08); }
.emoji-cell:active { transform: scale(.9); }

/* MENTION */
.mention-popup { position: absolute; bottom: 76px; left: 16px; width: min(360px, calc(100% - 32px)); max-height: 280px; overflow-y: auto; background: var(--bg-panel); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 60; animation: slideUp .3s var(--ease-spring); }
html[data-theme="light"] .mention-popup { border-color: rgba(0,0,0,.08); }
.mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s, transform .15s; animation: fadeInUp .25s var(--ease-out) both; }
.mention-item:hover, .mention-item.active { background: rgba(82,136,193,.2); transform: translateX(2px); }
.mention-item .mention-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; background-size: cover; background-position: center; background-color: #5288c1; flex-shrink: 0; text-transform: uppercase; }
.mention-item .mention-info { min-width: 0; flex: 1; }
.mention-item .mention-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.mention-item .mention-username { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }

/* MODALS */
.modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; animation: fadeIn .25s ease; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); animation: fadeIn .3s ease; }
html[data-theme="light"] .modal-backdrop { background:rgba(0,0,0,.35); }
.modal-card { position:relative; z-index:1; width:100%; max-width:440px; background:rgba(17,26,38,.98); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation: popIn .35s var(--ease-spring); display:flex; flex-direction:column; max-height:90vh; }
html[data-theme="light"] .modal-card { background:#fff; border-color:rgba(0,0,0,.08); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .modal-header { border-color:rgba(0,0,0,.06); }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-body { padding:20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
.modal-footer { display:flex; gap:10px; padding:14px 20px; border-top:1px solid rgba(255,255,255,.06); justify-content:flex-end; flex-wrap:wrap; }
html[data-theme="light"] .modal-footer { border-color:rgba(0,0,0,.06); }

.profile-view-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 8px; }
.profile-view-block .avatar-xl { box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 3px solid rgba(82,136,193,.25); animation: popIn .5s var(--ease-spring); }
.profile-view-name { font-size: 22px; font-weight: 700; text-align: center; margin-top: 4px; word-break: break-word; animation: fadeInUp .5s var(--ease-out) .1s both; }
.profile-view-bio { padding: 14px 18px; background: rgba(255,255,255,.03); border-radius: 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; text-align: center; word-break: break-word; white-space: pre-wrap; animation: fadeInUp .5s var(--ease-out) .15s both; }
html[data-theme="light"] .profile-view-bio { background: rgba(0,0,0,.04); }
.profile-view-block .profile-username { font-size: 13px; color: var(--text-muted); animation: fadeInUp .5s var(--ease-out) .1s both; }
.profile-avatar-block { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:8px; }
.profile-avatar-wrap { position:relative; cursor:pointer; border-radius:50%; overflow:hidden; transition: transform .3s var(--ease-spring); }
.profile-avatar-wrap:hover { transform: scale(1.05); }
.profile-avatar-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .3s; color:#fff; font-size:28px; }
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity:1; }
.profile-username { font-size:13px; color:var(--text-secondary); }
.user-profile-name { font-size:18px; font-weight:600; }
.user-profile-bio { padding:10px 14px; background:rgba(255,255,255,.03); border-radius:10px; font-size:14px; color:var(--text-secondary); }
html[data-theme="light"] .user-profile-bio { background:rgba(0,0,0,.04); }
.user-profile-status { font-size:13px; }
.user-profile-status.online { color:var(--success); }
.user-profile-since { font-size:12.5px; color:var(--text-muted); }
.member-picker { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; padding:4px; background:rgba(0,0,0,.2); border-radius:10px; }
html[data-theme="light"] .member-picker { background:rgba(0,0,0,.04); }
.member-pick { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition: background .2s, transform .2s var(--ease-spring); }
.member-pick:hover { background:rgba(255,255,255,.05); transform: translateX(2px); }
html[data-theme="light"] .member-pick:hover { background:rgba(0,0,0,.04); }
.member-pick.selected { background:rgba(82,136,193,.15); }
.member-pick .avatar { width:32px; height:32px; font-size:13px; }
.member-pick-name { flex:1; font-size:14px; }
.member-pick-check { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition: background .25s, border-color .25s, transform .25s var(--ease-spring); }
html[data-theme="light"] .member-pick-check { border-color:rgba(0,0,0,.2); }
.member-pick.selected .member-pick-check { background:var(--accent); border-color:var(--accent); transform: scale(1.15); animation: bounceIn .4s var(--ease-spring); }
.info-section-title { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; padding-top:8px; }
.info-members { display:flex; flex-direction:column; gap:4px; }
.info-member { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; animation: fadeInUp .3s var(--ease-out) both; transition: background .2s, transform .2s var(--ease-spring); cursor:pointer; }
.info-member:nth-child(2) { animation-delay: .03s; }
.info-member:nth-child(3) { animation-delay: .06s; }
.info-member:nth-child(4) { animation-delay: .09s; }
.info-member:nth-child(n+5) { animation-delay: .12s; }
.info-member:hover { background:rgba(255,255,255,.04); transform: translateX(3px); }
html[data-theme="light"] .info-member:hover { background:rgba(0,0,0,.03); }
.info-member .avatar { width:34px; height:34px; font-size:13px; }
.info-member-info { flex:1; min-width:0; }
.info-member-name { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.info-member-role { font-size:11.5px; color:var(--text-muted); }
.info-member-role.owner { color:var(--warning); }
.info-member-role.deputy { color:#a78bfa; }
.info-member-role.admin { color:var(--accent-light); }
.info-member-role.member, .info-member-role.subscriber { color:var(--text-muted); }
.info-member-status { font-size:11px; }
.info-member-status.online { color: var(--success); }
.info-member-status.offline { color: var(--text-muted); }
.info-member-actions { display:flex; gap:4px; }
.info-name { font-size:18px; font-weight:600; }
.info-name-row { display:flex; align-items:center; gap:8px; }
.info-desc { font-size:13px; color:var(--text-secondary); text-align:center; }
.invite-link-box { display:flex; gap:8px; }
.invite-link-box input { flex:1; font-size:13px; padding:10px 12px; }
.info-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,.25); border-radius: var(--radius-md); margin-bottom: 8px; }
html[data-theme="light"] .info-tabs { background: rgba(0,0,0,.05); }
.info-tab { flex: 1; padding: 8px 12px; font-size: 13.5px; color: var(--text-secondary); border-radius: 7px; transition: background .2s, color .2s, transform .15s; }
.info-tab:hover { transform: translateY(-1px); }
.info-tab.active { background: rgba(82,136,193,.25); color: var(--text-primary); font-weight: 500; }
.info-panel { animation: fadeInUp .3s var(--ease-out); }
.media-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.media-item { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: rgba(0,0,0,.3); transition: transform .3s var(--ease-spring), box-shadow .3s; animation: fadeInScale .4s var(--ease-spring) backwards; }
.media-item:nth-child(1){animation-delay:0ms}.media-item:nth-child(2){animation-delay:40ms}.media-item:nth-child(3){animation-delay:80ms}.media-item:nth-child(4){animation-delay:120ms}.media-item:nth-child(5){animation-delay:160ms}.media-item:nth-child(6){animation-delay:200ms}.media-item:nth-child(n+7){animation-delay:240ms}
.media-item:hover { transform: scale(1.06); box-shadow: 0 10px 25px rgba(0,0,0,.5); }
.media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13.5px; }
.settings-section-title { font-size:12.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-top:8px; }
.settings-note { font-size:12.5px; color:var(--warning); padding:8px 12px; background:rgba(245,166,35,.08); border-radius:8px; border-left:3px solid var(--warning); }
.settings-check { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,.03); border-radius:10px; cursor:pointer; transition: background .2s, transform .15s; }
html[data-theme="light"] .settings-check { background:rgba(0,0,0,.04); }
.settings-check:hover { background:rgba(255,255,255,.06); transform: translateX(2px); }
html[data-theme="light"] .settings-check:hover { background:rgba(0,0,0,.07); }
.settings-check input { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; transition: transform .15s var(--ease-spring); }
.settings-check input:active { transform: scale(1.15); }
.theme-selector { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.theme-opt { display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:10px; background:rgba(255,255,255,.03); border:2px solid transparent; transition: border-color .25s, background .2s, transform .25s var(--ease-spring); font-size:12.5px; text-align:center; }
html[data-theme="light"] .theme-opt { background:rgba(0,0,0,.04); }
.theme-opt:hover { background:rgba(255,255,255,.06); transform: translateY(-2px); }
html[data-theme="light"] .theme-opt:hover { background:rgba(0,0,0,.07); }
.theme-opt.active { border-color:var(--accent); box-shadow: 0 0 0 3px rgba(82,136,193,.15); }
.theme-preview { width:100%; aspect-ratio:16/10; border-radius:8px; border:1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .theme-preview { border-color:rgba(0,0,0,.06); }
.theme-light { background:#f3f4f6; position:relative; }
.theme-light::before { content:''; position:absolute; left:10%; top:20%; width:40%; height:8%; background:#3b82f6; border-radius:3px; }
.theme-light::after { content:''; position:absolute; right:10%; bottom:25%; width:50%; height:12%; background:#d0e7ff; border-radius:3px; }
.theme-dark { background: linear-gradient(135deg, #0e1621 0%, #17212b 100%); position:relative; }
.theme-dark::before { content:''; position:absolute; left:10%; top:20%; width:40%; height:8%; background:#5288c1; border-radius:3px; }
.theme-dark::after { content:''; position:absolute; right:10%; bottom:25%; width:50%; height:12%; background:#2b5278; border-radius:3px; }
.theme-darker { background: #000; position:relative; }
.theme-darker::before { content:''; position:absolute; left:10%; top:20%; width:40%; height:8%; background:#1a4d73; border-radius:3px; }
.theme-darker::after { content:''; position:absolute; right:10%; bottom:25%; width:50%; height:12%; background:#0f1318; border-radius:3px; }

/* ROLES */
.role-card { max-width: 480px; }
.role-user-line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: 10px; font-size: 14px; }
html[data-theme="light"] .role-user-line { background:rgba(0,0,0,.04); }
.role-options { display: flex; flex-direction: column; gap: 6px; }
.role-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; transition: background .2s, border-color .25s, transform .25s var(--ease-spring); }
html[data-theme="light"] .role-option { background: rgba(0,0,0,.03); }
.role-option:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }
html[data-theme="light"] .role-option:hover { background: rgba(0,0,0,.06); }
.role-option input[type="radio"] { display: none; }
.role-option:has(input:checked) { border-color: var(--accent); background: linear-gradient(135deg, rgba(82,136,193,.15), rgba(82,136,193,.08)); box-shadow: 0 6px 16px rgba(82,136,193,.25); }
.role-option-body { flex: 1; }
.role-option-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.role-icon { font-size: 15px; }
.role-option-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.role-perms-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.role-perms-reset { padding: 4px 10px; font-size: 12px; color: var(--accent-light); background: rgba(82,136,193,.15); border-radius: 6px; transition: background .2s, transform .2s var(--ease-spring); }
.role-perms-reset:hover { background: rgba(82,136,193,.3); transform: translateY(-1px); }
.role-perms-hint { font-size: 12.5px; color: var(--text-muted); padding: 8px 12px; background: rgba(82,136,193,.06); border-left: 3px solid var(--accent); border-radius: 6px; margin-bottom: 12px; line-height: 1.45; }
.perm-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.perm-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 600; padding: 4px 4px 2px; }
.perm-check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,.03); border-radius: 8px; cursor: pointer; font-size: 13.5px; transition: background .2s, transform .15s; }
html[data-theme="light"] .perm-check { background: rgba(0,0,0,.03); }
.perm-check:hover { background: rgba(255,255,255,.06); transform: translateX(2px); }
html[data-theme="light"] .perm-check:hover { background: rgba(0,0,0,.06); }
.perm-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.perm-check span { display: flex; flex-direction: column; gap: 2px; }
.perm-check span b { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.perm-check span em { font-size: 12px; font-style: normal; color: var(--text-secondary); line-height: 1.3; }
.star-grant-block { display:flex; flex-direction:column; gap:8px; padding:12px; background:rgba(100,181,239,.08); border:1px solid rgba(100,181,239,.2); border-radius:10px; }
.star-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.star-btn { padding:8px 14px; border-radius:8px; font-size:13.5px; font-weight:500; transition: transform .25s var(--ease-spring), filter .2s, box-shadow .25s; }
.star-btn:hover { transform: translateY(-2px) scale(1.03); filter:brightness(1.15); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.star-btn:active { transform: scale(.95); }
.star-btn-blue { background:rgba(100,181,239,.2); color:#7dd3fc; }
.star-btn-red { background:rgba(224,83,83,.2); color:#ff8a8a; }
.star-hint { font-size:11.5px; color:var(--text-muted); font-style:italic; }

/* CTX MENU */
.ctx-menu { position:fixed; z-index:1500; min-width:200px; padding:6px; background:rgba(17,26,38,.98); border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:var(--shadow-lg); backdrop-filter:blur(12px); animation: ctxPop .3s var(--ease-spring); }
html[data-theme="light"] .ctx-menu { background:#fff; border-color:rgba(0,0,0,.08); }
.ctx-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; font-size:14px; color:var(--text-primary); border-radius:8px; text-align:left; transition: background .2s, transform .15s; }
.ctx-item:hover { background:rgba(82,136,193,.22); transform: translateX(3px); }
.ctx-item:active { transform: scale(.98); }
.ctx-item svg { flex-shrink:0; opacity:.7; transition: opacity .15s; }
.ctx-item:hover svg { opacity: 1; }
.ctx-item.danger { color:#ff8a8a; }
.ctx-item.danger:hover { background:rgba(224,83,83,.18); }
.ctx-call-user { padding:8px 12px 4px; font-size:14px; font-weight:600; color:var(--accent-light); }
.ctx-call-status { padding:0 12px 4px; font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }
.ctx-volume-block { padding:8px 12px; display:flex; flex-direction:column; gap:6px; }
.ctx-volume-block label { font-size:12.5px; color:var(--text-secondary); }
.ctx-volume-block input[type="range"] { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:rgba(255,255,255,.1); border-radius:2px; outline:none; cursor:pointer; }
html[data-theme="light"] .ctx-volume-block input[type="range"] { background:rgba(0,0,0,.1); }
.ctx-volume-block input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent-light); cursor:pointer; box-shadow:0 0 8px rgba(82,136,193,.6); transition: transform .2s var(--ease-spring); }
.ctx-volume-block input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ctx-volume-block input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--accent-light); cursor:pointer; border:none; }
.ctx-divider { height:1px; background:rgba(255,255,255,.06); margin:6px 0; }
html[data-theme="light"] .ctx-divider { background:rgba(0,0,0,.06); }
.call-ctx { z-index: 4000 !important; }
.reaction-picker { position:fixed; z-index:1500; display:flex; gap:2px; padding:6px; background:rgba(17,26,38,.98); border:1px solid rgba(255,255,255,.08); border-radius:999px; box-shadow:var(--shadow-lg); backdrop-filter:blur(12px); animation: ctxPop .3s var(--ease-spring); }
html[data-theme="light"] .reaction-picker { background:#fff; border-color:rgba(0,0,0,.08); }
.reaction-cell { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:50%; transition: transform .25s var(--ease-spring), background .2s; }
.reaction-cell:hover { background:rgba(255,255,255,.1); transform: scale(1.3) rotate(-8deg); }
html[data-theme="light"] .reaction-cell:hover { background:rgba(0,0,0,.08); }
.reaction-cell:active { transform: scale(1.05); animation: jelly .5s ease; }

/* LIGHTBOX */
.lightbox { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.92); cursor:zoom-out; padding:60px 80px; animation: fadeIn .3s ease; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; cursor:default; transition: opacity .4s ease, transform .4s var(--ease-spring); animation: fadeInScale .5s var(--ease-spring); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s, transform .25s var(--ease-spring); backdrop-filter: blur(8px); z-index: 2; }
.lightbox-nav:hover { background: rgba(255,255,255,.25); transform: translateY(-50%) scale(1.12); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: rgba(0,0,0,.7); border-radius: 20px; font-size: 13px; color: #fff; backdrop-filter: blur(8px); animation: slideUp .3s var(--ease-spring); }

/* ============ CALLS ============ */
.call-screen { position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; background:#000; overflow:hidden; animation: fadeIn .35s ease; }
.call-bg { position:absolute; inset:0; background: radial-gradient(ellipse at top, #16273a 0%, transparent 60%), radial-gradient(ellipse at bottom, #1a1a3a 0%, transparent 60%), #06090f; }
.call-topbar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(180deg, rgba(0,0,0,.6), transparent); animation: slideDown .4s var(--ease-spring); }
.call-topbar-info { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#fff; }
.call-topbar-min { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.1); font-size:16px; transition: background .2s, transform .2s var(--ease-spring); }
.call-topbar-min:hover { background:rgba(255,255,255,.2); transform: scale(1.08); }
.call-live-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation: pulse 1.6s infinite; }
.call-quality-badge { font-size:10px; letter-spacing:-1px; padding:3px 8px; border-radius:10px; font-weight:600; animation: fadeInScale .4s var(--ease-spring); }
.call-quality-badge.good { color:#4dd47d; background:rgba(77,212,125,.15); }
.call-quality-badge.medium { color:#f5a623; background:rgba(245,166,35,.15); }
.call-quality-badge.bad { color:#e05353; background:rgba(224,83,83,.15); animation: fadeInScale .4s var(--ease-spring), pulse 1.5s infinite; }
.call-grid { flex:1; position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px; padding:10px; overflow:auto; align-content:start; }
.call-tile { position:relative; background:linear-gradient(135deg,#141a24,#1a212e); border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; aspect-ratio: 16 / 9; width: 100%; animation: callTileIn .5s var(--ease-spring); transition: box-shadow .3s, transform .3s var(--ease-spring); }
.call-tile:hover { box-shadow:0 0 0 2px rgba(82,136,193,.4); transform: translateY(-2px); }
.call-tile video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.call-tile.local video { transform:scaleX(-1); }
.call-tile.local.sharing video { transform:none; }
.call-tile-name { position:absolute; left:10px; bottom:10px; padding:5px 12px; background:rgba(0,0,0,.7); border-radius:8px; font-size:12.5px; color:#fff; backdrop-filter:blur(6px); font-weight:500; z-index:2; }
.call-tile-sharing { position:absolute; left:10px; top:10px; padding:4px 10px; background:rgba(224,83,83,.85); border-radius:8px; font-size:11.5px; color:#fff; font-weight:600; animation: pulse 2s infinite; z-index:2; }
.call-tile-avatar { width:80px; height:80px; border-radius:50%; font-size:32px; box-shadow:0 8px 24px rgba(0,0,0,.5); position:relative; z-index:1; }
.call-tile-mute { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(224, 83, 83, .92); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; line-height: 1; box-shadow: 0 4px 14px rgba(224, 83, 83, .5); animation: muteAppear .4s var(--ease-spring); z-index: 3; overflow: hidden; user-select: none; }
.call-tile-mute::after { content: ''; position: absolute; left: -10%; top: 50%; width: 120%; height: 2.5px; background: #fff; border-radius: 2px; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.call-tile.speaking { box-shadow: 0 0 0 3px #4dd47d, 0 0 26px rgba(77, 212, 125, .55); animation: speakingRingGreen 1.8s ease-in-out infinite; transition: box-shadow .18s ease; }
.call-tile.speaking .call-tile-avatar { animation: speakingAvatarPulse 1.2s ease-in-out infinite; }
.call-tile.screen { background:linear-gradient(135deg,#1e2a3a,#141a24); border:2px solid rgba(82,136,193,.4); cursor:pointer; transition: border-color .25s, transform .25s var(--ease-spring); }
.call-tile.screen:hover { border-color:rgba(82,136,193,.9); transform: translateY(-3px) scale(1.01); }
.call-tile.screen .call-tile-screen-preview { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; }
.call-tile-screen-icon { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#5288c1,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; animation: screenPulse 2s infinite; font-size: 26px; }
.call-tile-screen-label { font-size:14px; font-weight:600; color:#fff; text-align:center; }
.call-tile-screen-btn { padding:8px 18px; background:linear-gradient(135deg,#5288c1,#6b8dd6); color:#fff; font-size:13px; font-weight:600; border-radius:20px; box-shadow:0 4px 14px rgba(82,136,193,.4); transition: transform .25s var(--ease-spring), box-shadow .25s; }
.call-tile-screen-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(82,136,193,.65); }
.call-controls { position:relative; z-index:2; display:flex; justify-content:center; gap:14px; padding:20px 24px 28px; background:linear-gradient(0deg, rgba(0,0,0,.6), transparent); animation: slideUp .4s var(--ease-spring); }
.call-btn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; transition: background .25s, transform .25s var(--ease-spring); backdrop-filter:blur(10px); }
.call-btn:hover { background:rgba(255,255,255,.25); transform: translateY(-3px) scale(1.05); }
.call-btn:active { transform: scale(.92); }
.call-btn.active { background:rgba(82,136,193,.65); }
.call-btn.off { background:rgba(224,83,83,.65); }
.call-btn-end { background:var(--danger); }
.call-btn-end:hover { background:#e86f6f; animation: pulse 1s infinite; }
.call-btn-accept { background:var(--success); }
.call-btn-accept:hover { background:#6be092; animation: glowPulse 1.5s infinite; }
.call-mini { position: fixed; right: 20px; bottom: 20px; z-index: 3001; width: 300px; background: rgba(17,26,38,.98); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; user-select: none; animation: popIn .35s var(--ease-spring); }
html[data-theme="light"] .call-mini { background:#fff; border-color:rgba(0,0,0,.1); }
.call-mini.dragging { cursor: grabbing; box-shadow: 0 20px 60px rgba(0,0,0,.7); transform: scale(1.02); }
.call-mini-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: linear-gradient(180deg, rgba(82,136,193,.18), rgba(82,136,193,.05)); border-bottom: 1px solid rgba(255,255,255,.06); cursor: grab; touch-action: none; }
html[data-theme="light"] .call-mini-header { border-color:rgba(0,0,0,.06); }
.call-mini-info { display:flex; align-items:center; gap:8px; min-width:0; pointer-events: none; }
.call-mini-title { font-size:13.5px; font-weight:600; color:var(--text-primary); }
.call-mini-status { font-size:11px; color:var(--text-secondary); margin-top:1px; }
.call-mini-avatars { display:flex; pointer-events: none; }
.call-mini-avatars .avatar { width:26px; height:26px; font-size:11px; border:2px solid var(--bg-panel); margin-left:-8px; transition: transform .25s var(--ease-spring); }
.call-mini-avatars .avatar:hover { transform: translateY(-3px) scale(1.15); z-index: 5; }
.call-mini-avatars .avatar:first-child { margin-left:0; }
.call-mini-controls { display:flex; justify-content:center; gap:6px; padding:10px; background:rgba(0,0,0,.2); }
html[data-theme="light"] .call-mini-controls { background:rgba(0,0,0,.03); }
.call-mini-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:#fff; font-size:16px; transition: background .2s, transform .25s var(--ease-spring); }
html[data-theme="light"] .call-mini-btn { background:rgba(0,0,0,.1); color:#111827; }
.call-mini-btn:hover { background:rgba(255,255,255,.22); transform: scale(1.12); }
html[data-theme="light"] .call-mini-btn:hover { background:rgba(0,0,0,.18); }
.call-mini-btn.active { background:rgba(82,136,193,.65); color:#fff; }
.call-mini-btn.off { background:rgba(224,83,83,.65); color:#fff; }
.call-mini-btn.call-mini-end { background:var(--danger); color:#fff; }
.incoming-card { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 40px; background:rgba(17,26,38,.98); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); min-width:300px; animation: popIn .4s var(--ease-spring); }
html[data-theme="light"] .incoming-card { background:#fff; border-color:rgba(0,0,0,.08); }
.call-pulse-ring { position:absolute; top:36px; left:50%; transform:translateX(-50%); width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(77,212,125,.4), transparent 70%); animation:pulseRing 2s ease-out infinite; pointer-events:none; }
.incoming-name { font-size:20px; font-weight:600; }
.incoming-type { color:var(--text-secondary); font-size:14px; }
.incoming-actions { display:flex; gap:24px; margin-top:10px; }
.incoming-actions .call-btn-accept { animation: pulse 1.5s infinite; }
.screen-viewer { position:fixed; inset:0; z-index:3500; background:rgba(0,0,0,.97); display:flex; flex-direction:column; animation: fadeIn .35s ease; }
.screen-viewer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(180deg, rgba(0,0,0,.6), transparent); color:#fff; position:relative; z-index:2; gap: 12px; animation: slideDown .35s var(--ease-spring); }
.screen-viewer-title { font-size:15px; font-weight:600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-viewer-btn { width: 40px; height: 40px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; transition: background .2s, transform .25s var(--ease-spring); }
.screen-viewer-btn:hover { background:rgba(255,255,255,.28); transform: scale(1.1); }
.screen-viewer-close { width:40px; height:40px; border-radius:50%; background:rgba(224,83,83,.85); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; transition: background .2s, transform .25s var(--ease-spring); }
.screen-viewer-close:hover { background:#e86f6f; transform: scale(1.1); }
.screen-viewer video { flex:1; width:100%; height:100%; object-fit:contain; background:#000; animation: fadeIn .4s ease; }

/* TOAST */
.toast { position:fixed; bottom:26px; left:50%; transform: translate(-50%, 100px); padding:12px 18px; background:rgba(17,26,38,.96); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); font-size:14px; color:var(--text-primary); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition: transform .45s var(--ease-spring), opacity .3s; z-index:5000; backdrop-filter:blur(12px); max-width:80vw; display: flex; align-items: center; gap: 10px; }
html[data-theme="light"] .toast { background:#fff; border-color:rgba(0,0,0,.08); }
.toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 15px; flex-shrink: 0; }
.toast-icon:empty { display: none; }
.toast-text { text-align: left; line-height: 1.4; }
.toast.show { transform: translate(-50%, 0); opacity:1; animation: bounceIn .55s var(--ease-spring); }
.toast.success { border-color:rgba(77,212,125,.4); }
.toast.success .toast-icon { color: var(--success); animation: bounceIn .5s var(--ease-spring); }
.toast.error { border-color:rgba(224,83,83,.4); animation: shake .5s ease-in-out; }
.toast.error .toast-icon { color: var(--danger); }
.toast.mention { border-color:rgba(100,181,239,.5); }
.toast.mention .toast-icon { color: var(--star-blue); }

/* POLL CREATE */
.poll-options-list { display:flex; flex-direction:column; gap:6px; }
.poll-option-row { display:flex; gap:6px; align-items:center; animation: fadeInUp .3s var(--ease-out) both; }
.poll-option-input { flex:1; }
.poll-option-remove { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(224,83,83,.15); color:#ff8a8a; font-size:14px; transition: background .2s, transform .2s var(--ease-spring); }
.poll-option-remove:hover { background:rgba(224,83,83,.3); transform: scale(1.1) rotate(90deg); }
.poll-add-btn { align-self:flex-start; padding:8px 14px; font-size:13px; }

/* SETTINGS */
.settings-window { position: relative; z-index: 1; display: flex; width: min(66vw, 1100px); height: min(66vh, 700px); background: rgba(17,26,38,.98); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; animation: popIn .4s var(--ease-spring); }
html[data-theme="light"] .settings-window { background: #fff; border-color: rgba(0,0,0,.08); }
html[data-theme="darker"] .settings-window { background: #050709; }
.settings-sidebar { width: 240px; flex-shrink: 0; background: rgba(0,0,0,.2); border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; animation: slideInFromLeft .4s var(--ease-spring); }
html[data-theme="light"] .settings-sidebar { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.settings-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
html[data-theme="light"] .settings-sidebar-header { border-color: rgba(0,0,0,.05); }
.settings-sidebar-header h3 { font-size: 17px; font-weight: 700; }
.settings-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.settings-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-align: left; transition: background .25s, color .25s, transform .25s var(--ease-spring); background: none; border: none; cursor: pointer; width: 100%; animation: fadeInUp .35s var(--ease-out) both; }
.settings-nav-item:nth-child(1) { animation-delay: .05s; }
.settings-nav-item:nth-child(2) { animation-delay: .1s; }
.settings-nav-item:nth-child(3) { animation-delay: .15s; }
.settings-nav-item:nth-child(4) { animation-delay: .2s; }
.settings-nav-item:nth-child(5) { animation-delay: .25s; }
.settings-nav-item:hover { background: rgba(255,255,255,.06); color: var(--text-primary); transform: translateX(3px); }
html[data-theme="light"] .settings-nav-item:hover { background: rgba(0,0,0,.05); }
.settings-nav-item.active { background: rgba(82,136,193,.22); color: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent-light); }
.sni-icon { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; transition: transform .25s var(--ease-spring); }
.settings-nav-item:hover .sni-icon { transform: scale(1.15) rotate(-5deg); }
.settings-nav-item.active .sni-icon { transform: scale(1.2); }
.settings-content { flex: 1; min-width: 0; overflow-y: auto; padding: 32px 40px 40px; }
.settings-section { display: none; }
.settings-section.active { display: block; animation: slideInFromRight .4s var(--ease-spring); }
.settings-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.settings-section .form-group { gap: 10px; margin-bottom: 20px; }
.settings-section .form-input { padding: 14px 16px; font-size: 15px; }
.settings-subtitle { font-size: 16px; font-weight: 600; margin: 4px 0 12px; color: var(--text-primary); }
.settings-divider { height: 1px; background: rgba(255,255,255,.08); margin: 28px 0; }
html[data-theme="light"] .settings-divider { background: rgba(0,0,0,.08); }
.settings-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.settings-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.settings-avatar-row { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: rgba(255,255,255,.03); border-radius: 14px; margin-bottom: 28px; animation: fadeInUp .4s var(--ease-out) both; }
html[data-theme="light"] .settings-avatar-row { background: rgba(0,0,0,.03); }
.settings-avatar-hint { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.settings-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); outline: none; cursor: pointer; margin-top: 8px; transition: background .2s; }
html[data-theme="light"] .settings-range { background: rgba(0,0,0,.12); }
.settings-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #5288c1, #6b8dd6); cursor: pointer; box-shadow: 0 2px 8px rgba(82,136,193,.5); transition: transform .25s var(--ease-spring), box-shadow .2s; }
.settings-range::-webkit-slider-thumb:hover { transform: scale(1.25); box-shadow: 0 4px 14px rgba(82,136,193,.75); }
.settings-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.settings-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #5288c1, #6b8dd6); cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(82,136,193,.5); }
.settings-preview { padding: 18px; background: var(--bg-main); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: var(--preview-gap, 3px); min-height: 150px; font-size: var(--preview-font-size, 15px); margin-top: 8px; transition: gap .25s ease, font-size .25s ease; }
html[data-theme="light"] .settings-preview { border-color: rgba(0,0,0,.06); }
.sp-msg { display: flex; transition: transform .25s var(--ease-spring); }
.sp-msg.sp-own { justify-content: flex-end; }
.sp-bubble { max-width: 70%; padding: 7px 12px; border-radius: 14px; font-size: var(--preview-font-size, 15px); line-height: 1.4; word-wrap: break-word; }
.sp-msg.sp-other .sp-bubble { background: var(--bg-msg-other); color: #eaeef2; border-bottom-left-radius: 4px; }
.sp-msg.sp-own .sp-bubble { background: linear-gradient(135deg,#2b5278,#2d5786); color: #fff; border-bottom-right-radius: 4px; }
html[data-theme="light"] .sp-msg.sp-other .sp-bubble { color: #111827; border: 1px solid rgba(0,0,0,.06); }
html[data-theme="light"] .sp-msg.sp-own .sp-bubble { background: linear-gradient(135deg,#d0e7ff,#c7e0fb); color: #111827; }
.settings-email-block { display: flex; flex-direction: column; gap: 16px; }
.settings-email-status { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13.5px; color: var(--text-secondary); align-self: flex-start; transition: background .25s, color .25s; animation: fadeInUp .35s var(--ease-out) both; }
html[data-theme="light"] .settings-email-status { background: rgba(0,0,0,.04); }
.settings-email-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; transition: background .3s, box-shadow .3s; }
.settings-email-status.attached { background: rgba(77,212,125,.12); color: var(--success); animation: fadeInUp .35s var(--ease-out), glowPulse 2.5s infinite; }
.settings-email-status.attached .settings-email-dot { background: var(--success); box-shadow: 0 0 8px var(--success); animation: breathing 2s ease-in-out infinite; }
.settings-email-row { display: flex; gap: 10px; align-items: stretch; }
.settings-email-row input { flex: 1; }
.settings-email-row .btn-primary { padding: 12px 20px; white-space: nowrap; }
.settings-devices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.device-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; transition: background .25s, border-color .25s, transform .25s var(--ease-spring); animation: fadeInUp .4s var(--ease-out) both; }
.device-item:nth-child(1) { animation-delay: 0ms; }
.device-item:nth-child(2) { animation-delay: 60ms; }
.device-item:nth-child(3) { animation-delay: 120ms; }
.device-item:nth-child(4) { animation-delay: 180ms; }
.device-item:nth-child(5) { animation-delay: 240ms; }
.device-item:nth-child(n+6) { animation-delay: 300ms; }
.device-item:hover { transform: translateX(3px); background: rgba(255,255,255,.05); }
html[data-theme="light"] .device-item { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.06); }
.device-item.current { border-color: rgba(82,136,193,.5); background: rgba(82,136,193,.08); }
html[data-theme="light"] .device-item.current { background: rgba(82,136,193,.06); }
.device-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #5288c1, #6b8dd6); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform .25s var(--ease-spring); }
.device-item:hover .device-icon { transform: scale(1.08) rotate(-3deg); }
.device-icon.mobile { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.device-icon.desktop { background: linear-gradient(135deg, #5288c1, #6b8dd6); }
.device-icon.tablet { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.device-info { flex: 1; min-width: 0; }
.device-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.device-current-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(77,212,125,.2); color: var(--success); text-transform: uppercase; letter-spacing: .4px; animation: pulse 2s infinite; }
.device-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.device-remove { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(224,83,83,.15); color: #ff8a8a; font-size: 16px; transition: background .2s, transform .25s var(--ease-spring); }
.device-remove:hover { background: rgba(224,83,83,.4); transform: scale(1.15) rotate(90deg); }
.device-remove:active { transform: scale(.92); }
.recover-step.hidden { display: none; }
.recover-step { animation: slideInFromRight .4s var(--ease-spring); }
.recover-username-box { padding: 12px 16px; background: rgba(82,136,193,.1); border-radius: 12px; margin-bottom: 16px; animation: fadeInUp .35s var(--ease-out); }
.recover-username { font-size: 17px; font-weight: 600; color: var(--accent-light); margin-top: 4px; font-family: 'SF Mono', Consolas, monospace; }
.username-status { font-size: 12.5px; margin-top: 6px; line-height: 1.4; min-height: 16px; animation: fadeInUp .3s var(--ease-out); }
.username-status.ok { color: var(--success); animation: fadeInUp .3s var(--ease-out), glowPulse 2s infinite; }
.username-status.taken { color: var(--danger); animation: shake .4s ease-in-out; }
.username-status.checking { color: var(--text-muted); }
.username-status.warn { color: var(--warning); }
.password-strength { margin-top: 8px; animation: fadeInUp .3s var(--ease-out); }
.password-strength-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
html[data-theme="light"] .password-strength-bar { background: rgba(0,0,0,.08); }
.password-strength-fill { height: 100%; width: 0%; border-radius: 3px; transition: width .5s var(--ease-spring), background .3s ease; }
.password-strength-fill.weak { width: 33%; background: linear-gradient(90deg, #e05353, #ff7a7a); }
.password-strength-fill.medium { width: 66%; background: linear-gradient(90deg, #f5a623, #ffc95c); }
.password-strength-fill.strong { width: 100%; background: linear-gradient(90deg, #4dd47d, #6be092); animation: glowPulse 2s infinite; }
.password-strength-text { font-size: 12.5px; margin-top: 5px; color: var(--text-secondary); transition: color .3s; }
.password-strength-text.weak { color: var(--danger); }
.password-strength-text.medium { color: var(--warning); }
.password-strength-text.strong { color: var(--success); }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; }
html[data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(0,0,0,.03) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.03) 75%); background-size: 400px 100%; }

/* MOBILE */
.mobile-back { display: none; }
@supports (-webkit-touch-callout: none) { input, textarea, .form-input, .composer-input, .search-input { font-size: 16px !important; } }
@media (hover: hover) and (pointer: fine) { .contact:hover { background: var(--bg-hover); } }
@media (max-width: 720px) {
    html, body { font-size: 14px; height: 100dvh; overflow: hidden; }
    .app-screen { grid-template-columns: 1fr !important; grid-template-rows: 1fr; height: 100dvh; }
    .sidebar { display: flex !important; grid-column: 1; grid-row: 1; width: 100%; border-right: none; }
    .sidebar-resizer { display: none; }
    .chat-area { grid-column: 1; grid-row: 1; display: none; }
    .app-screen.chat-open .sidebar   { display: none !important; }
    .app-screen.chat-open .chat-area { display: flex; }
    .mobile-back { display: flex !important; margin-right: 2px; }
    .chat-header { padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); gap: 4px; }
    .chat-header-user { padding: 2px 6px 2px 2px; gap: 8px; }
    .chat-header-name { font-size: 15px; }
    .chat-header-actions .icon-btn { width: 32px; height: 32px; }
    .messages { padding: 12px 10px 6px; }
    .msg-bubble { max-width: 82%; font-size: 14.5px; padding: 7px 11px; }
    .msg-avatar { width: 28px; height: 28px; font-size: 11px; }
    .msg-read-by .read-avatar { width: 18px; height: 18px; font-size: 9px; }
    .msg.first-unread { margin-top: 26px; }
    .msg.first-unread::before { font-size: 10px; padding: 2px 10px; }
    .pinned-bar, .chat-search-bar { padding: 6px 10px; }
    .scroll-to-bottom { right: 12px; bottom: 12px; width: 40px; height: 40px; }
    .select-toolbar { padding: 8px 12px; }
    .select-toolbar-btn { padding: 6px 10px; font-size: 12.5px; }
    .composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px; gap: 4px; }
    .composer-input { font-size: 16px; padding: 9px 14px; min-height: 40px; border-radius: 20px; }
    .composer-btn, .composer-send, .composer-mic, .display-mode-btn { width: 38px; height: 38px; font-size: 18px; }
    .display-mode-avatar { width: 30px; height: 30px; font-size: 12px; }
    .display-mode-menu { right: 8px; left: 8px; min-width: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .modal { padding: 10px; }
    .modal-card { max-width: 100% !important; max-height: 92dvh; }
    .modal-footer button { flex: 1; min-width: 100px; }
    .auth-card { padding: 26px 22px 20px; margin: 12px; }
    .sidebar-header { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    .incoming-card { padding: 26px 22px; min-width: auto; width: 100%; max-width: 340px; }
    .call-grid { grid-template-columns: 1fr; padding: 6px; gap: 6px; }
    .call-tile { min-height: 140px; }
    .call-controls { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
    .call-btn { width: 48px; height: 48px; }
    .call-topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    .call-mini { width: calc(100% - 20px); left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .ctx-menu { min-width: 180px; max-width: calc(100vw - 16px); }
    .reaction-picker { max-width: calc(100vw - 16px); }
    .emoji-picker { left: 8px !important; right: 8px; width: auto; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); max-height: 55dvh; }
    .emoji-grid { grid-template-columns: repeat(7, 1fr); }
    .toast { left: 10px !important; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(100px); max-width: none; }
    .toast.show { transform: translateY(0); }
    .lightbox { padding: 12px; }
    .lightbox-nav { width: 42px; height: 42px; }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
    .media-gallery { grid-template-columns: repeat(3, 1fr); }
    .role-card { max-width: 100%; }
    .theme-selector { grid-template-columns: 1fr 1fr; }
    .comments-card { max-width: 100%; height: 90dvh; }
    .mention-popup { left: 8px; right: 8px; width: auto; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); max-height: 45dvh; }
    .readby-card { max-width: 100%; }
    .settings-window { width: 100vw; height: 100dvh; max-width: 100%; max-height: 100%; border-radius: 0; flex-direction: column; }
    .settings-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
    .settings-sidebar-header { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
    .settings-nav { flex-direction: row; overflow-x: auto; padding: 10px 12px; gap: 6px; scrollbar-width: none; }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav-item { flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; white-space: nowrap; flex-direction: column; gap: 4px; }
    .settings-nav-item.active { box-shadow: inset 0 -3px 0 var(--accent-light); }
    .sni-icon { font-size: 18px; }
    .settings-content { padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .settings-section h2 { font-size: 20px; margin-bottom: 18px; }
    .settings-section .form-group { margin-bottom: 16px; }
    .settings-avatar-row { flex-direction: column; text-align: center; gap: 14px; padding: 16px; }
    .settings-email-row { flex-direction: column; }
    .settings-email-row .btn-primary { width: 100%; }
    .settings-actions { flex-direction: column; }
    .settings-actions button { width: 100%; }
    .device-item { padding: 12px 14px; gap: 12px; }
    .device-icon { width: 38px; height: 38px; font-size: 18px; }
    .profile-view-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ============ ADMIN PANEL v2 (карточки юзеров/групп/каналов) ============ */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-stat { padding: 16px 14px; background: linear-gradient(135deg, rgba(82,136,193,.10), rgba(139,92,246,.06)); border: 1px solid rgba(82,136,193,.18); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.admin-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #5288c1, #8b5cf6); opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.admin-stat:hover::before { transform: scaleX(1); }
.admin-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(82,136,193,.2); border-color: rgba(82,136,193,.35); }
.admin-stat-value { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -1px; }
.admin-stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.admin-stat.online::before { background: linear-gradient(90deg, #4dd47d, #6be092); opacity: 1; }
.admin-stat.online .admin-stat-value { color: var(--success); }
.admin-stat.admin::before { background: linear-gradient(90deg, #e05353, #ff8a8a); opacity: 1; }
.admin-stat.admin .admin-stat-value { color: #ff8a8a; }
.admin-tabs-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: rgba(0,0,0,.28); border-radius: 14px; margin-bottom: 16px; animation: fadeInUp .35s var(--ease-out) both; }
html[data-theme="light"] .admin-tabs-new { background: rgba(0,0,0,.05); }
.admin-tab-new { padding: 11px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: all .25s var(--ease-spring); display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; }
.admin-tab-new:hover { color: var(--text-primary); background: rgba(255,255,255,.06); transform: translateY(-1px); }
html[data-theme="light"] .admin-tab-new:hover { background: rgba(0,0,0,.05); }
.admin-tab-new.active { background: linear-gradient(135deg, #5288c1, #6b8dd6); color: #fff; box-shadow: 0 4px 14px rgba(82,136,193,.45); transform: none; }
.admin-tab-new.active:hover { transform: none; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-panel); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; transition: transform .25s var(--ease-spring), box-shadow .25s, border-color .25s; animation: fadeInUp .35s var(--ease-out) both; position: relative; overflow: hidden; }
.admin-card:nth-child(1) { animation-delay: 0ms; }
.admin-card:nth-child(2) { animation-delay: 40ms; }
.admin-card:nth-child(3) { animation-delay: 80ms; }
.admin-card:nth-child(4) { animation-delay: 120ms; }
.admin-card:nth-child(5) { animation-delay: 160ms; }
.admin-card:nth-child(6) { animation-delay: 200ms; }
.admin-card:nth-child(n+7) { animation-delay: 240ms; }
html[data-theme="light"] .admin-card { border-color: rgba(0,0,0,.07); }
.admin-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.32); border-color: rgba(82,136,193,.35); }
html[data-theme="light"] .admin-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.09); }
.admin-card.online { border-color: rgba(77,212,125,.35); background: linear-gradient(135deg, rgba(77,212,125,.05), transparent); }
.admin-card.system { border-color: rgba(82,136,193,.4); background: linear-gradient(135deg, rgba(82,136,193,.08), rgba(139,92,246,.04)); }
.admin-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .25s; }
.admin-card.online::before { background: linear-gradient(180deg, #4dd47d, #6be092); }
.admin-card.system::before { background: linear-gradient(180deg, #5288c1, #8b5cf6); }
.admin-card-avatar { position: relative; flex-shrink: 0; }
.admin-card-avatar .avatar { width: 46px; height: 46px; font-size: 16px; border: 2px solid rgba(255,255,255,.08); transition: transform .3s var(--ease-spring); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
html[data-theme="light"] .admin-card-avatar .avatar { border-color: rgba(0,0,0,.08); }
.admin-card:hover .admin-card-avatar .avatar { transform: scale(1.08); }
.admin-card-status { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--bg-panel); background: #4a5563; transition: background .3s, box-shadow .3s; }
.admin-card.online .admin-card-status { background: var(--success); box-shadow: 0 0 10px rgba(77,212,125,.8); animation: onlinePulse 2.2s infinite; }
.admin-card-icon-avatar { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; transition: transform .3s var(--ease-spring); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.admin-card:hover .admin-card-icon-avatar { transform: scale(1.08) rotate(-4deg); }
.admin-card-icon-avatar.group { background: linear-gradient(135deg,#5288c1,#3b7cff); }
.admin-card-icon-avatar.channel { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.admin-card-icon-avatar.system { background: linear-gradient(135deg,#5288c1,#8b5cf6); }
.admin-card-body { flex: 1; min-width: 0; }
.admin-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; margin-bottom: 4px; }
.admin-card-title .username { color: var(--accent-light); font-weight: 500; font-size: 13px; font-family: 'SF Mono', Consolas, monospace; }
.admin-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); line-height: 1.5; align-items: center; }
.admin-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.admin-card-meta .meta-icon { opacity: .75; font-size: 13px; line-height: 1; }
.admin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; line-height: 1; white-space: nowrap; }
.admin-badge.creator { background: linear-gradient(135deg,#f5a623,#ffc95c); color: #000; box-shadow: 0 2px 10px rgba(245,166,35,.4); animation: glowPulse 3s infinite; }
.admin-badge.admin { background: linear-gradient(135deg,#e05353,#ff8a8a); color: #fff; box-shadow: 0 2px 10px rgba(224,83,83,.4); }
.admin-badge.system { background: linear-gradient(135deg,#5288c1,#8b5cf6); color: #fff; box-shadow: 0 2px 10px rgba(82,136,193,.4); }
.admin-badge.star { background: rgba(245,166,35,.18); color: #f5a623; border: 1px solid rgba(245,166,35,.4); }
.admin-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-action-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: var(--text-secondary); font-size: 16px; cursor: pointer; transition: all .2s var(--ease-spring); display: flex; align-items: center; justify-content: center; position: relative; }
html[data-theme="light"] .admin-action-btn { border-color: rgba(0,0,0,.09); background: rgba(0,0,0,.03); }
.admin-action-btn:hover { transform: translateY(-2px) scale(1.08); background: rgba(82,136,193,.18); border-color: rgba(82,136,193,.5); color: var(--accent-light); box-shadow: 0 6px 16px rgba(82,136,193,.25); }
.admin-action-btn:active { transform: translateY(0) scale(.95); }
.admin-action-btn.danger:hover { background: rgba(224,83,83,.18); border-color: rgba(224,83,83,.5); color: #ff8a8a; box-shadow: 0 6px 16px rgba(224,83,83,.25); }
.admin-action-btn[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 11px; background: rgba(0,0,0,.92); color: #fff; font-size: 11.5px; border-radius: 7px; white-space: nowrap; pointer-events: none; z-index: 100; animation: fadeInUp .2s var(--ease-out); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.admin-action-btn[title]:hover::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(0,0,0,.92); z-index: 100; pointer-events: none; }
html[data-theme="light"] .admin-action-btn[title]:hover::after { background: #111; }
.admin-empty { padding: 56px 24px; text-align: center; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; animation: fadeIn .4s; }
.admin-empty-icon { font-size: 52px; margin-bottom: 14px; opacity: .35; display: block; }
.admin-loading { padding: 64px 20px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.admin-loading .spinner { width: 36px; height: 36px; border: 3px solid rgba(82,136,193,.2); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 14px; animation: spin 0.9s linear infinite; }
.admin-search-wrap { position: relative; margin-bottom: 14px; animation: fadeInUp .3s var(--ease-out) both; }
.admin-search-wrap input { width: 100%; padding: 12px 14px 12px 42px; background: var(--bg-input); border: 1.5px solid transparent; border-radius: 12px; color: var(--text-primary); font-size: 13.5px; outline: none; transition: border-color .25s, box-shadow .25s, background .25s; }
.admin-search-wrap input::placeholder { color: var(--text-muted); }
.admin-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(82,136,193,.15); background: rgba(0,0,0,.3); }
html[data-theme="light"] .admin-search-wrap input:focus { background: #fff; }
.admin-search-wrap::before { content: '🔍'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .5; pointer-events: none; transition: opacity .2s; }
.admin-search-wrap:focus-within::before { opacity: .9; }
.admin-panel { animation: fadeInUp .35s var(--ease-out) both; }
.admin-panel.hidden { display: none; }

/* IN-APP NOTIFICATIONS */
.notif-stack { position: fixed; right: 20px; bottom: 20px; z-index: 4500; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 380px; width: calc(100vw - 40px); pointer-events: none; }
.notif-toast { pointer-events: auto; display: flex; gap: 12px; padding: 12px 14px; background: rgba(17,26,38,.97); border: 1px solid rgba(82,136,193,.3); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(82,136,193,.08); cursor: pointer; backdrop-filter: blur(16px) saturate(180%); transition: transform .3s var(--ease-spring), opacity .3s; animation: notifSlideIn .5s var(--ease-spring); position: relative; overflow: hidden; user-select: none; }
html[data-theme="light"] .notif-toast { background: rgba(255,255,255,.98); border-color: rgba(82,136,193,.4); box-shadow: 0 12px 40px rgba(0,0,0,.15); }
.notif-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #5288c1, #8b5cf6); }
.notif-toast.call-notif::before { background: linear-gradient(180deg, #4dd47d, #6be092); }
.notif-toast.mention-notif::before { background: linear-gradient(180deg, #f5a623, #ffc95c); }
.notif-toast.closing { animation: notifSlideOut .3s var(--ease-out) forwards; }
.notif-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; background-size: cover; background-position: center; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; padding-right: 22px; }
.notif-title .notif-badge { font-size: 9.5px; padding: 2px 7px; border-radius: 6px; background: rgba(82,136,193,.3); color: var(--accent-light); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; white-space: nowrap; }
.notif-title .notif-badge.call { background: rgba(77,212,125,.25); color: var(--success); }
.notif-title .notif-badge.mention { background: rgba(245,166,35,.25); color: #ffc95c; }
.notif-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text-secondary); font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .2s, transform .2s; cursor: pointer; border: none; padding: 0; }
.notif-toast:hover .notif-close { opacity: 1; }
.notif-close:hover { background: rgba(224,83,83,.3); color: #fff; transform: scale(1.15); }
.notif-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #5288c1, #8b5cf6); animation-name: notifProgress; animation-timing-function: linear; animation-fill-mode: forwards; }
.notif-toast.call-notif .notif-progress { background: linear-gradient(90deg, #4dd47d, #6be092); }
.notif-toast.mention-notif .notif-progress { background: linear-gradient(90deg, #f5a623, #ffc95c); }

/* ADMIN USER DETAILS v2 */
.admin-user-card { max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; }
.admin-user-card .modal-body { overflow-y: auto; gap: 0; padding: 0; }
.adm-header { position: relative; padding: 24px 24px 16px; display: flex; gap: 18px; align-items: center; background: linear-gradient(135deg, rgba(82,136,193,.12), rgba(139,92,246,.06)); border-bottom: 1px solid rgba(255,255,255,.06); animation: fadeInUp .35s var(--ease-out) both; }
html[data-theme="light"] .adm-header { border-color: rgba(0,0,0,.06); }
.adm-header-avatar { width: 76px; height: 76px; font-size: 28px; flex-shrink: 0; border: 3px solid rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .3s var(--ease-spring); }
.adm-header-avatar:hover { transform: scale(1.05); }
.adm-header-info { flex: 1; min-width: 0; }
.adm-header-name { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-header-username { font-size: 13px; color: var(--accent-light); font-family: 'SF Mono', Consolas, monospace; margin-top: 3px; }
.adm-header-uid { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: monospace; }
.adm-back { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; background: rgba(0,0,0,.35); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 20px; line-height: 1; border: none; transition: background .2s, transform .2s var(--ease-spring); }
.adm-back:hover { background: rgba(82,136,193,.55); transform: translateX(-2px); }
html[data-theme="light"] .adm-back { background: rgba(0,0,0,.2); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .adm-stats { border-color: rgba(0,0,0,.06); }
.adm-stat { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: rgba(255,255,255,.03); border-radius: 10px; text-align: center; transition: transform .25s var(--ease-spring), background .2s; }
.adm-stat:hover { transform: translateY(-2px); background: rgba(82,136,193,.1); }
html[data-theme="light"] .adm-stat { background: rgba(0,0,0,.04); }
.adm-stat.online .adm-stat-value { color: var(--success); }
.adm-stat.warn .adm-stat-value { color: #ff8a8a; }
.adm-stat-value { font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.adm-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.adm-info-line { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 24px 14px; font-size: 12.5px; color: var(--text-secondary); }
.adm-info-line b { color: var(--text-primary); font-weight: 600; }
.adm-section { padding: 12px 24px 16px; border-top: 1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .adm-section { border-color: rgba(0,0,0,.06); }
.adm-section-title { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .55px; margin-bottom: 10px; }
.adm-email-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(82,136,193,.1); border: 1px solid rgba(82,136,193,.25); border-radius: 12px; animation: fadeInUp .3s var(--ease-out); }
.adm-email-row.empty { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.adm-email-row.pending { background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.3); }
html[data-theme="light"] .adm-email-row.empty { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
.adm-email-icon { font-size: 18px; }
.adm-email-value { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.adm-email-unbind { padding: 8px 14px; border-radius: 8px; background: rgba(224,83,83,.18); color: #ff8a8a; font-size: 13px; font-weight: 600; border: 1px solid rgba(224,83,83,.3); cursor: pointer; transition: background .2s, transform .2s var(--ease-spring); }
.adm-email-unbind:hover { background: rgba(224,83,83,.35); color: #fff; transform: translateY(-1px); }
.adm-email-unbind:active { transform: scale(.96); }
.adm-star-block { padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(135deg, rgba(245,166,35,.05), rgba(255,201,92,.02)); }
html[data-theme="light"] .adm-star-block { border-color: rgba(0,0,0,.06); }
.adm-star-title { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .55px; margin-bottom: 10px; }
.adm-star-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-star-btn { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: background .2s, transform .25s var(--ease-spring), border-color .2s, box-shadow .25s; }
.adm-star-btn:hover:not(.disabled) { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.4); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245,166,35,.2); }
.adm-star-btn:active:not(.disabled) { transform: scale(.98); }
.adm-star-btn.on { background: rgba(224,83,83,.15); border-color: rgba(224,83,83,.5); }
.adm-star-btn.on-blue { background: rgba(100,181,239,.15); border-color: rgba(100,181,239,.5); }
.adm-star-btn.disabled { opacity: .5; cursor: not-allowed; }
.adm-star-glyph { font-size: 18px; }
.adm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 24px 10px; background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .adm-tabs { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.adm-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-spring); position: relative; }
.adm-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.05); transform: translateY(-1px); }
html[data-theme="light"] .adm-tab:hover { background: rgba(0,0,0,.05); }
.adm-tab.active { background: linear-gradient(135deg, rgba(82,136,193,.25), rgba(139,92,246,.15)); border-color: rgba(82,136,193,.5); color: var(--text-primary); box-shadow: 0 6px 18px rgba(82,136,193,.25); }
.adm-tab-icon { font-size: 18px; }
.adm-tab-label { text-transform: uppercase; letter-spacing: .4px; }
.adm-tab-count { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255,255,255,.12); color: var(--text-primary); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.adm-tab.active .adm-tab-count { background: rgba(82,136,193,.6); color: #fff; }
.adm-panel-wrap { padding: 14px 24px 16px; }
.adm-search-wrap { position: relative; margin-bottom: 10px; }
.adm-search-input { width: 100%; padding: 10px 14px 10px 38px; background: rgba(0,0,0,.25); border: 1.5px solid transparent; border-radius: 10px; color: var(--text-primary); font-size: 13.5px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
html[data-theme="light"] .adm-search-input { background: #fff; color: #111827; border-color: rgba(0,0,0,.08); }
.adm-search-input::placeholder { color: var(--text-muted); }
.adm-search-input:focus { border-color: var(--accent); background: rgba(0,0,0,.35); box-shadow: 0 0 0 3px rgba(82,136,193,.15); }
html[data-theme="light"] .adm-search-input:focus { background: #fff; }
.adm-search-wrap::before { content: '🔍'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .5; pointer-events: none; }
.adm-panel-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.adm-panel-list::-webkit-scrollbar { width: 6px; }
.adm-panel-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
html[data-theme="light"] .adm-panel-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.adm-group-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; color: var(--text-muted); padding: 10px 4px 4px; margin-top: 4px; }
.adm-group-label:first-child { margin-top: 0; }
.adm-entity-row, .adm-item-row, .adm-friend-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: rgba(255,255,255,.03); border-radius: 10px; cursor: pointer; transition: background .2s, transform .25s var(--ease-spring); animation: fadeInUp .3s var(--ease-out) both; }
.adm-item-row { cursor: default; }
.adm-friend-row:nth-child(2), .adm-entity-row:nth-child(2) { animation-delay: .03s; }
.adm-friend-row:nth-child(3), .adm-entity-row:nth-child(3) { animation-delay: .06s; }
.adm-friend-row:nth-child(4), .adm-entity-row:nth-child(4) { animation-delay: .09s; }
html[data-theme="light"] .adm-entity-row, html[data-theme="light"] .adm-item-row, html[data-theme="light"] .adm-friend-row { background: rgba(0,0,0,.03); }
.adm-entity-row:hover, .adm-friend-row:hover { background: rgba(82,136,193,.15); transform: translateX(3px); }
.adm-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.adm-icon.group { background: linear-gradient(135deg,#5288c1,#3b7cff); }
.adm-icon.channel { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.adm-icon.device { background: linear-gradient(135deg,#14b8a6,#2dd4bf); }
.adm-item-body { flex: 1; min-width: 0; }
.adm-item-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-item-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.adm-mini-badge { font-size: 9.5px; padding: 2px 7px; border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.adm-mini-badge.system { background: rgba(82,136,193,.25); color: #8bb9e8; }
.adm-mini-badge.creator { background: linear-gradient(135deg,#f5a623,#ffc95c); color: #000; }
.adm-role { padding: 3px 9px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; flex-shrink: 0; white-space: nowrap; }
.adm-role.owner { background: rgba(245,166,35,.2); color: #f5a623; }
.adm-role.deputy { background: rgba(167,139,250,.2); color: #a78bfa; }
.adm-role.admin { background: rgba(100,181,239,.2); color: #64b5ef; }
.adm-role.member, .adm-role.subscriber { background: rgba(255,255,255,.08); color: var(--text-secondary); }
.adm-friend-avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.06); }
.adm-online-dot { width: 9px; height: 9px; border-radius: 50%; background: #4a5563; flex-shrink: 0; transition: background .3s, box-shadow .3s; }
.adm-online-dot.on { background: var(--success); box-shadow: 0 0 8px var(--success); animation: breathing 2s ease-in-out infinite; }
.adm-empty { padding: 32px 14px; text-align: center; color: var(--text-muted); font-size: 13px; font-style: italic; }
.adm-footer-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 14px 24px 18px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.15); }
html[data-theme="light"] .adm-footer-actions { border-color: rgba(0,0,0,.06); background: rgba(0,0,0,.02); }
.adm-footer-actions button { font-size: 13.5px; padding: 10px 16px; }

@media (max-width: 720px) {
    .notif-stack { right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
    .notif-toast { padding: 10px 12px; }
    .notif-avatar { width: 38px; height: 38px; font-size: 14px; }
    .notif-title { font-size: 13.5px; }
    .notif-text { font-size: 12.5px; }
    .admin-user-card { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .adm-header { padding: 20px 16px 14px; }
    .adm-header-avatar { width: 60px; height: 60px; font-size: 22px; }
    .adm-header-name { font-size: 17px; }
    .adm-stats { padding: 12px 16px; grid-template-columns: repeat(3, 1fr); }
    .adm-info-line { padding: 8px 16px 12px; font-size: 12px; }
    .adm-section { padding: 10px 16px 14px; }
    .adm-star-block { padding: 12px 16px; }
    .adm-tabs { padding: 8px 16px; }
    .adm-tab { font-size: 10.5px; padding: 8px 4px; }
    .adm-tab-icon { font-size: 16px; }
    .adm-tab-count { font-size: 9px; min-width: 16px; height: 16px; top: 3px; right: 4px; }
    .adm-panel-wrap { padding: 12px 16px; }
    .adm-panel-list { max-height: 45dvh; }
    .adm-footer-actions { padding: 12px 16px 18px; }
    .adm-footer-actions button { flex: 1; min-width: 120px; }
}

/* ============================================================
   ★★★ ФИКСЫ v53.0 (добавлены в конец — перебивают всё выше)
   ============================================================ */

/* ФИКС 1: Универсальная модалка — поверх ВСЕХ модалок, включая admin-user-modal */
#universal-modal { z-index: 2600 !important; }
#universal-modal .modal-backdrop { z-index: 1; }
#universal-modal .modal-card { z-index: 2; }

/* ФИКС 2: Screen viewer — на весь экран без рамок */
.screen-viewer:fullscreen,
.screen-viewer:-webkit-full-screen {
    padding: 0;
    background: #000;
    border: none;
}
.screen-viewer:fullscreen video,
.screen-viewer:-webkit-full-screen video {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    max-width: none;
    max-height: none;
    border-radius: 0;
}
.screen-viewer:fullscreen .screen-viewer-header,
.screen-viewer:-webkit-full-screen .screen-viewer-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,.8), transparent);
    opacity: 0;
    transition: opacity .25s;
    padding: 14px 20px;
}
.screen-viewer:fullscreen:hover .screen-viewer-header,
.screen-viewer:-webkit-full-screen:hover .screen-viewer-header {
    opacity: 1;
}
/* Кнопка fullscreen в шапке viewer'а */
.screen-viewer-fullscreen {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; border: none;
    transition: background .2s, transform .25s var(--ease-spring);
}
.screen-viewer-fullscreen:hover { background: rgba(255,255,255,.28); transform: scale(1.1); }

/* ФИКС 3: Зелёная рамка говорящего — уже есть выше (.call-tile.speaking).
   Этот блок гарантирует что ничего не перебьёт её. */
.call-tile.speaking {
    box-shadow: 0 0 0 3px #4dd47d, 0 0 26px rgba(77, 212, 125, .55) !important;
    animation: speakingRingGreen 1.8s ease-in-out infinite !important;
}


/* ============================================================
   ★★★ v55.5: значки группового звонка в списке чатов и шапке
   ============================================================ */
.contact-call-badge,
.chat-call-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(77, 212, 125, .18);
    color: var(--success);
    border: 1px solid rgba(77, 212, 125, .35);
    animation: breathing 2.4s ease-in-out infinite;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.chat-call-badge {
    font-size: 11px;
    padding: 3px 9px;
    margin-left: 4px;
}
html[data-theme="light"] .contact-call-badge,
html[data-theme="light"] .chat-call-badge {
    background: rgba(34, 160, 90, .14);
    border-color: rgba(34, 160, 90, .35);
    color: #16a34a;
}


/* ============================================================
   v55.5: значки группового звонка (аватарки участников)
   ============================================================ */
.group-call-icons {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    animation: fadeInScale .3s var(--ease-spring);
}
.group-call-icons .call-mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5288c1,#6b8dd6);
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--bg-sidebar);
    margin-left: -7px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    overflow: hidden;
    transition: transform .25s var(--ease-spring);
}
.group-call-icons .call-mini-avatar:first-child { margin-left: 0; }
.group-call-icons .call-mini-avatar:hover { transform: translateY(-2px) scale(1.15); z-index: 3; }
.chat-header-name .group-call-icons .call-mini-avatar {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
    border-color: rgba(17,26,38,.85);
}
html[data-theme="light"] .chat-header-name .group-call-icons .call-mini-avatar {
    border-color: rgba(229,231,235,.9);
}
.group-call-icons .call-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(82,136,193,.35);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    margin-left: -5px;
    border: 2px solid var(--bg-sidebar);
}
html[data-theme="light"] .group-call-icons .call-more {
    background: rgba(59,130,246,.25);
    color: #1d4ed8;
}

/* v55.5: разные значки muted — микрофон красный, наушники янтарные, стакаются */
.call-tile-mute.mic {
    background: rgba(224,83,83,.92);
    box-shadow: 0 4px 14px rgba(224,83,83,.5);
}
.call-tile-mute.headphones {
    top: 52px;
    background: rgba(245,166,35,.92);
    box-shadow: 0 4px 14px rgba(245,166,35,.5);
}
.call-tile-mute.headphones::after {
    background: #fff;
}


/* v55.5: иконки-аватарки участников группового звонка */
.group-call-icons {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    animation: fadeInScale .3s var(--ease-spring);
}
.group-call-icons .call-mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5288c1,#6b8dd6);
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--bg-sidebar);
    margin-left: -7px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    overflow: hidden;
    transition: transform .25s var(--ease-spring);
}
.group-call-icons .call-mini-avatar:first-child { margin-left: 0; }
.group-call-icons .call-mini-avatar:hover { transform: translateY(-2px) scale(1.15); z-index: 3; }
.chat-header-name .group-call-icons .call-mini-avatar {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
    border-color: rgba(17,26,38,.85);
}
html[data-theme="light"] .chat-header-name .group-call-icons .call-mini-avatar {
    border-color: rgba(229,231,235,.9);
}
.group-call-icons .call-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(82,136,193,.35);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    margin-left: -5px;
    border: 2px solid var(--bg-sidebar);
}
html[data-theme="light"] .group-call-icons .call-more {
    background: rgba(59,130,246,.25);
    color: #1d4ed8;
}

/* v55.5: разные значки mute — микрофон красный, наушники янтарные */
.call-tile-mute.mic {
    background: rgba(224,83,83,.92);
    box-shadow: 0 4px 14px rgba(224,83,83,.5);
}
.call-tile-mute.headphones {
    top: 52px;
    background: rgba(245,166,35,.92);
    box-shadow: 0 4px 14px rgba(245,166,35,.5);
}


/* v55.5: иконки-аватарки участников группового звонка */
.group-call-icons {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
    animation: fadeInScale .3s var(--ease-spring);
}
.group-call-icons .call-mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5288c1,#6b8dd6);
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--bg-sidebar);
    margin-left: -7px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    overflow: hidden;
    transition: transform .25s var(--ease-spring);
}
.group-call-icons .call-mini-avatar:first-child { margin-left: 0; }
.group-call-icons .call-mini-avatar:hover { transform: translateY(-2px) scale(1.15); z-index: 3; }
.chat-header-name .group-call-icons .call-mini-avatar {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
    border-color: rgba(17,26,38,.85);
}
html[data-theme="light"] .chat-header-name .group-call-icons .call-mini-avatar {
    border-color: rgba(229,231,235,.9);
}
.group-call-icons .call-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(82,136,193,.35);
    color: var(--accent-light);
    font-size: 10px;
    font-weight: 700;
    margin-left: -5px;
    border: 2px solid var(--bg-sidebar);
}
html[data-theme="light"] .group-call-icons .call-more {
    background: rgba(59,130,246,.25);
    color: #1d4ed8;
}

/* v55.5: разные значки mute — микрофон и наушники */
.call-tile-mute.mic {
    background: rgba(224,83,83,.92);
    box-shadow: 0 4px 14px rgba(224,83,83,.5);
}
.call-tile-mute.headphones {
    top: 52px;
    background: rgba(245,166,35,.92);
    box-shadow: 0 4px 14px rgba(245,166,35,.5);
}

.screen-viewer-vol{display:flex;align-items:center;gap:6px;color:#fff;font-size:12px;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:18px}
.screen-viewer-vol input{width:120px;accent-color:#5288c1}
.screen-viewer-vol b{min-width:38px;font-weight:600}
.screen-viewer .call-ctx{z-index:100000 !important}

/* ===== v57: РЕДИЗАЙН НАСТРОЕК ===== */
@media (min-width: 721px) {
  .settings-window { width: min(92vw, 1080px); height: min(88vh, 760px); border-radius: 20px; }
  .settings-sidebar { width: 252px; }
}
.settings-sidebar-header { padding: 22px 22px 16px; }
.settings-sidebar-header h3 { font-size: 18px; letter-spacing: .2px; }
.settings-nav { padding: 14px 12px; gap: 6px; }
.settings-nav-item { padding: 11px 14px; border-radius: 12px; font-size: 14px; }
.settings-nav-item .sni-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 16px; }
.settings-nav-item.active .sni-icon { background: rgba(82,136,193,.3); }
html[data-theme="light"] .settings-nav-item .sni-icon { background: rgba(0,0,0,.05); }
.settings-content { padding: 30px 38px 44px; scrollbar-width: thin; }
.settings-section h2 { font-size: 26px; letter-spacing: .2px; margin-bottom: 22px; }
.settings-lead { margin: -14px 0 24px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.settings-section .settings-subtitle { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--text-secondary); margin: 26px 0 10px; }
.ss-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(82,136,193,.2); font-size: 13px; }
.settings-section .settings-divider { height: 0; margin: 8px 0; background: transparent; }
.settings-section .settings-list { gap: 0; padding: 0; overflow: hidden; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; margin-bottom: 8px; }
html[data-theme="light"] .settings-section .settings-list { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.settings-window .settings-check { justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 0; background: none !important; transform: none !important; font-size: 14.5px; border-bottom: 1px solid rgba(255,255,255,.05); }
html[data-theme="light"] .settings-window .settings-check { border-color: rgba(0,0,0,.06); }
.settings-window .settings-check:last-child { border-bottom: none; }
.settings-window .settings-check:hover { background: rgba(255,255,255,.04) !important; }
html[data-theme="light"] .settings-window .settings-check:hover { background: rgba(0,0,0,.035) !important; }
.sc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-text b { font-weight: 600; font-size: 14.5px; }
.sc-text small { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.settings-window .settings-check input[type=checkbox] { -webkit-appearance: none; appearance: none; order: 2; flex-shrink: 0; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: rgba(255,255,255,.16); position: relative; cursor: pointer; transition: background .25s; }
html[data-theme="light"] .settings-window .settings-check input[type=checkbox] { background: rgba(0,0,0,.18); }
.settings-window .settings-check input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .28s var(--ease-spring); }
.settings-window .settings-check input[type=checkbox]:checked { background: linear-gradient(135deg,#5288c1,#6b8dd6); }
.settings-window .settings-check input[type=checkbox]:checked::after { transform: translateX(18px); }
.settings-window .settings-check input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed; }
.settings-window .settings-check input[type=checkbox]:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.settings-window .settings-check input[type=checkbox]:active { transform: scale(.94); }
.settings-list .settings-hint { margin: 0; padding: 11px 16px 13px; background: rgba(0,0,0,.14); border-top: 1px solid rgba(255,255,255,.05); }
html[data-theme="light"] .settings-list .settings-hint { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.settings-section .form-group:has(.settings-range) { gap: 6px; padding: 16px 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; }
html[data-theme="light"] .settings-section .form-group:has(.settings-range) { background: #fff; border-color: rgba(0,0,0,.08); }
.settings-section .form-group:has(.settings-range) .form-label { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.settings-section .form-label span { color: var(--accent-light); font-weight: 700; }
.settings-range { background: linear-gradient(90deg, var(--accent-light) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%)); }
html[data-theme="light"] .settings-range { background: linear-gradient(90deg, var(--accent) var(--fill, 50%), rgba(0,0,0,.12) var(--fill, 50%)); }
.settings-section .form-input { padding: 12px 15px; font-size: 14.5px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1.5px solid rgba(255,255,255,.07); }
html[data-theme="light"] .settings-section .form-input { background: #fff; border-color: rgba(0,0,0,.12); color: var(--text-primary); }
.settings-section .form-input:hover { border-color: rgba(255,255,255,.16); }
.settings-section .form-input:focus { border-color: var(--accent); }
.settings-section select.form-input { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 42px; color: var(--text-primary); text-overflow: ellipsis; background: rgba(0,0,0,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8b99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 12px; }
html[data-theme="light"] .settings-section select.form-input { background-color: #fff; }
.settings-section select.form-input option { background: #17212b; color: #fff; }
html[data-theme="light"] .settings-section select.form-input option { background: #fff; color: #111827; }
.settings-device { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; }
html[data-theme="light"] .settings-device { background: #fff; border-color: rgba(0,0,0,.08); }
.sd-ico { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 21px; border-radius: 13px; background: linear-gradient(135deg, rgba(82,136,193,.3), rgba(139,92,246,.22)); }
.sd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-avatar-row { border: 1px solid rgba(255,255,255,.07); background: linear-gradient(135deg, rgba(82,136,193,.13), rgba(139,92,246,.08)); }
.settings-note { padding: 12px 14px; border-radius: 12px; line-height: 1.5; margin-bottom: 16px; }
.theme-selector { gap: 12px; }
.theme-opt { padding: 10px; border-radius: 14px; }
.settings-actions .btn-primary, .settings-actions .btn-secondary, .settings-actions .btn-danger { padding: 11px 22px; font-size: 14px; border-radius: 12px; }
.device-item { padding: 14px 16px; border-radius: 14px; }
@media (max-width: 720px) {
  .settings-content { padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .settings-lead { margin: -10px 0 18px; }
  .settings-device { padding: 12px; gap: 12px; }
  .sd-ico { width: 40px; height: 40px; font-size: 18px; }
  .settings-nav-item .sni-icon { width: 28px; height: 28px; font-size: 15px; }
}

/* v58: без полосы прокрутки в настройках */
.settings-content, .settings-nav { scrollbar-width: none; -ms-overflow-style: none; }
.settings-content::-webkit-scrollbar, .settings-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ===== Nexus v58: визуальная полировка ===== */
::selection { background: rgba(100,181,239,.35); }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.composer-input:focus-visible { outline: none; }
.composer-input:focus { border-color: rgba(100,181,239,.55); box-shadow: 0 0 0 4px rgba(82,136,193,.16); }
.composer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.messages { overscroll-behavior: contain; scroll-padding-bottom: 12px; }
.msg-text { text-wrap: pretty; }
.msg-bubble { border-radius: 18px; }
html:not([data-theme="light"]) .msg.own .msg-bubble { background: linear-gradient(135deg,#2f6aa3 0%,#3a5fb8 55%,#5b53c9 100%); box-shadow: 0 2px 12px rgba(58,95,184,.35); }
html:not([data-theme="light"]) .msg.other .msg-bubble { background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)), var(--bg-msg-other); border: 1px solid rgba(255,255,255,.05); }
.contact.active { background: linear-gradient(90deg,rgba(82,136,193,.30),rgba(82,136,193,.07)); }
.chat-header { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 26px -14px rgba(0,0,0,.55); }
.date-sep { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); }
.notif-toast { backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.08); }
@media (hover: hover) { ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); } }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } }

/* ===== v58 design ===== */
html[data-theme="indigo"]{--bg-deep:#0b0a1f;--bg-main:#0b0a1f;--bg-sidebar:#14123a;--bg-panel:#1a1847;--bg-hover:#221f58;--bg-active:#2b2770;--bg-input:#221f58;--bg-msg-own:#4f46e5;--bg-msg-other:#1a1847;--accent:#818cf8;--accent-light:#a5b4fc}
html[data-theme="aurora"]{--bg-deep:#071a1c;--bg-main:#071a1c;--bg-sidebar:#0a2326;--bg-panel:#0e2d31;--bg-hover:#133a3f;--bg-active:#17484e;--bg-input:#133a3f;--bg-msg-own:#0f766e;--bg-msg-other:#0e2d31;--accent:#2dd4bf;--accent-light:#5eead4}
html[data-theme="sunset"]{--bg-deep:#1c0f14;--bg-main:#1c0f14;--bg-sidebar:#26131a;--bg-panel:#31171f;--bg-hover:#3e1d27;--bg-active:#4b2430;--bg-input:#3e1d27;--bg-msg-own:#c2410c;--bg-msg-other:#31171f;--accent:#fb923c;--accent-light:#fdba74}
html[data-theme="forest"]{--bg-deep:#0d1710;--bg-main:#0d1710;--bg-sidebar:#112015;--bg-panel:#16291b;--bg-hover:#1c3523;--bg-active:#23432c;--bg-input:#1c3523;--bg-msg-own:#2f6b3f;--bg-msg-other:#16291b;--accent:#4ade80;--accent-light:#86efac}
.theme-indigo{background:linear-gradient(135deg,#100f2b,#1a1847);--a:#818cf8;--m:#4f46e5}.theme-aurora{background:linear-gradient(135deg,#071a1c,#0e2d31);--a:#2dd4bf;--m:#0f766e}.theme-sunset{background:linear-gradient(135deg,#1c0f14,#31171f);--a:#fb923c;--m:#c2410c}.theme-forest{background:linear-gradient(135deg,#0d1710,#16291b);--a:#4ade80;--m:#2f6b3f}
.theme-indigo,.theme-aurora,.theme-sunset,.theme-forest{position:relative}
.theme-indigo::before,.theme-aurora::before,.theme-sunset::before,.theme-forest::before{content:'';position:absolute;left:10%;top:20%;width:40%;height:8%;background:var(--a);border-radius:3px}
.theme-indigo::after,.theme-aurora::after,.theme-sunset::after,.theme-forest::after{content:'';position:absolute;right:10%;bottom:25%;width:50%;height:12%;background:var(--m);border-radius:3px}
.theme-opt{transition:transform .25s var(--ease-spring)}.theme-opt:hover{transform:translateY(-3px) scale(1.04)}
.modal-card{animation:popIn .35s var(--ease-spring)}
.btn-primary,.btn-secondary,.btn-danger{transition:transform .2s var(--ease-spring),box-shadow .2s,background .2s}
.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{transform:translateY(-1px)}
.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:scale(.95)}
.avatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -6px 12px rgba(0,0,0,.15)}
.adm-header-avatar{transition:transform .4s var(--ease-spring)}.adm-header-avatar:hover{transform:scale(1.08) rotate(-4deg)}
.adm-stat{transition:transform .25s var(--ease-spring),box-shadow .25s;animation:fadeInUp .5s var(--ease-out) backwards}
.adm-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.adm-stat:nth-child(2){animation-delay:.05s}.adm-stat:nth-child(3){animation-delay:.1s}.adm-stat:nth-child(4){animation-delay:.15s}.adm-stat:nth-child(5){animation-delay:.2s}.adm-stat:nth-child(6){animation-delay:.25s}
.adm-star-btn{transition:transform .25s var(--ease-spring),box-shadow .25s}.adm-star-btn:not(.disabled):hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--shadow-md)}
.adm-star-glyph{display:inline-block;transition:transform .35s var(--ease-spring)}.adm-star-btn:hover .adm-star-glyph{transform:rotate(20deg) scale(1.25)}
.adm-act{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font:600 13.5px var(--font);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden;transition:transform .2s var(--ease-spring),background .2s,border-color .2s,box-shadow .2s}
.adm-act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-spring)}
.adm-act::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.adm-act:hover{transform:translateY(-2px);background:rgba(82,136,193,.18);border-color:var(--accent);box-shadow:0 6px 18px rgba(82,136,193,.25)}
.adm-act:hover::after{transform:translateX(120%)}.adm-act:hover svg{transform:rotate(-12deg) scale(1.15)}.adm-act:active{transform:scale(.95)}
.adm-act-danger{color:#ff8a8a;border-color:rgba(224,83,83,.35);background:rgba(224,83,83,.1)}
.adm-act-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 6px 18px rgba(224,83,83,.4)}
.adm-email-unbind{transition:transform .2s var(--ease-spring),background .2s}.adm-email-unbind:hover{transform:scale(1.06)}

.msg-failed{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-weight:800;font-size:11px;animation:bounceIn .5s var(--ease-spring),failPulse 2s .5s infinite}
@keyframes failPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,83,83,.6)}50%{box-shadow:0 0 0 6px rgba(224,83,83,0)}}
.msg:has(.msg-failed){filter:saturate(.7)}
.failed-menu{position:fixed;z-index:3000;min-width:170px;padding:6px;border-radius:14px;background:var(--bg-panel);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg);animation:popIn .22s var(--ease-spring);display:flex;flex-direction:column}
.failed-menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:9px;background:none;color:var(--text-primary);font:500 14px var(--font);cursor:pointer;transition:background .15s,transform .15s}
.failed-menu button:hover{background:var(--bg-hover);transform:translateX(2px)}.failed-menu .danger{color:var(--danger)}
.failed-menu svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notif-banner{position:fixed;top:14px;left:50%;transform:translate(-50%,-140%);z-index:2000;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 24px));padding:12px 14px;border-radius:16px;background:var(--bg-panel);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg);opacity:0;transition:transform .5s var(--ease-spring),opacity .3s}
.notif-banner.in{transform:translate(-50%,0);opacity:1}
.nb-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;flex:none}
.nb-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 10%;animation:nbRing 2.4s ease-in-out infinite}
@keyframes nbRing{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-6deg)}}
.nb-txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}.nb-txt span{color:var(--text-secondary);font-size:12px}
.nb-go{padding:8px 14px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;transition:transform .2s var(--ease-spring)}.nb-go:hover{transform:scale(1.06)}.nb-go:active{transform:scale(.94)}
.nb-x{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:6px;font-size:14px}.nb-x:hover{color:var(--text-primary)}
.notif-help{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}.notif-help.in{opacity:1}
.nh-card{max-width:420px;padding:22px;border-radius:20px;background:var(--bg-panel);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);transform:scale(.94);transition:transform .35s var(--ease-spring)}.notif-help.in .nh-card{transform:scale(1)}
.nh-card h3{margin:0 0 10px}.nh-card ol{margin:0 0 10px 18px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}.nh-card p{color:var(--text-secondary);font-size:12.5px;margin:0 0 14px}.nh-btns{display:flex;gap:10px;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.adm-stat,.nb-ico svg,.msg-failed{animation:none}}

.push-diag{margin:8px 0 14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;animation:fadeInUp .4s var(--ease-out)}
.pd-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}.pd-row span{color:var(--text-secondary)}.pd-row b{font-weight:600;word-break:break-all;text-align:right}
.pd-err b{color:var(--danger)}.pd-hint{margin:8px 0;padding:8px 10px;border-radius:10px;background:rgba(245,166,35,.12);color:var(--warning);font-size:12.5px}
.pd-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}

.notif-tips{margin:8px 0;font-size:12.5px;color:var(--text-secondary)}
.notif-tips summary{cursor:pointer;font-weight:600}
.notif-tips ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}



/* v61: иконки зрителей демонстрации */
.screen-viewers{display:flex;align-items:center;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);color:#fff;font-size:12px;z-index:5;pointer-events:auto}
.screen-viewers.hidden{display:none}
.screen-viewers .sv-eye{margin-right:6px;font-size:13px}
.screen-viewers .sv-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background-size:cover;background-position:center;margin-left:-6px;border:2px solid #1a212e;animation:svIn .3s var(--ease-spring)}
.screen-viewers .sv-avatar:first-of-type{margin-left:0}
.screen-viewers .sv-more{margin-left:6px;font-size:11px;opacity:.85}
.call-tile.screen>.screen-viewers{position:absolute;right:10px;top:10px}
#sv-own{position:absolute;top:12px;right:12px}
#sv-overlay{flex:none;margin:0 12px}
@keyframes svIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* v62: статус «отошёл» */
.contact.online.away .contact-dot{background:#f0b232;animation:none}
.contact.online.away .contact-status{color:#f0b232}
.chat-header-status.online.away{color:#f0b232}

/* v63: полировка */
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28)}
button:focus-visible,.icon-btn:focus-visible,.info-tab:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}
::selection{background:rgba(82,136,193,.35)}
.info-card .settings-check{justify-content:space-between;gap:14px}
.info-card .settings-check input[type=checkbox]{-webkit-appearance:none;appearance:none;order:2;flex-shrink:0;width:44px;height:26px;margin:0;border-radius:13px;background:rgba(255,255,255,.16);position:relative;cursor:pointer;transition:background .25s}
html[data-theme="light"] .info-card .settings-check input[type=checkbox]{background:rgba(0,0,0,.18)}
.info-card .settings-check input[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.35);transition:transform .28s var(--ease-spring)}
.info-card .settings-check input[type=checkbox]:checked{background:linear-gradient(135deg,#5288c1,#6b8dd6)}
.info-card .settings-check input[type=checkbox]:checked::after{transform:translateX(18px)}
.info-card .settings-check input[type=checkbox]:disabled{opacity:.4;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.info-card .settings-check input[type=checkbox],.info-card .settings-check input[type=checkbox]::after{transition:none}}


/* v64: ручной статус */
.dot-away { background:#f0b232; box-shadow:0 0 8px rgba(240,178,50,.6); animation:none; }
.avatar-me { cursor:pointer; }
.status-menu { position:fixed; z-index:9999; min-width:180px; padding:6px; border-radius:12px; background:#17212b; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:2px; }
.status-menu button { display:flex; align-items:center; gap:10px; padding:9px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-primary,#fff); font-size:14px; cursor:pointer; text-align:left; }
.status-menu button:hover { background:rgba(255,255,255,.07); }
.status-menu button.active { background:rgba(82,136,193,.22); font-weight:600; }
html[data-theme="light"] .status-menu { background:#fff; border-color:rgba(0,0,0,.1); }
html[data-theme="light"] .status-menu button:hover { background:rgba(0,0,0,.05); }


/* v65: статусы */
.dot-away { background:#f0b232; box-shadow:0 0 8px rgba(240,178,50,.6); animation:none; }
.dot-dnd { background:#e5484d; box-shadow:0 0 8px rgba(229,72,77,.6); animation:none; }
.dot-invisible { background:transparent; box-shadow:inset 0 0 0 2px #8a96a3; animation:none; }
.avatar-me { cursor:pointer; }
.info-member-status.away { color:#f0b232; }
.status-menu { position:fixed; z-index:9999; min-width:230px; padding:6px; border-radius:12px; background:#17212b; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:2px; }
.status-menu button { display:flex; align-items:center; gap:10px; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-primary,#fff); font-size:14px; cursor:pointer; text-align:left; }
.status-menu button:hover { background:rgba(255,255,255,.07); }
.status-menu button.active { background:rgba(82,136,193,.22); font-weight:600; }
.status-menu .sm-text small { display:block; font-size:11px; font-weight:400; opacity:.6; margin-top:1px; }
html[data-theme="light"] .status-menu { background:#fff; border-color:rgba(0,0,0,.1); }
html[data-theme="light"] .status-menu button:hover { background:rgba(0,0,0,.05); }


/* v66: мобильная версия + красный «не беспокоить» */
.contact.online.dnd .contact-dot { background:#e5484d; animation:none; }
.contact.online.dnd .contact-status { color:#e5484d; }
.chat-header-status.online.dnd { color:#e5484d; }
.info-member-status.dnd { color:#e5484d; }
html { -webkit-text-size-adjust:100%; }
button, .contact, .msg, .icon-btn, .composer-btn, .call-btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (pointer: coarse) {
  .msg-bubble { -webkit-touch-callout:none; }
  .icon-btn:hover, .avatar:hover, .me-card:hover { transform:none; }
}
@media (max-width: 720px) {
  html, body { overscroll-behavior:none; }
  html, body, .app-screen { height: var(--vvh, 100dvh); }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select { font-size:16px !important; }
  .chat-header-actions .icon-btn { width:40px; height:40px; }
  .composer-btn, .composer-send, .composer-mic { width:42px; height:42px; }
  .rec-cancel, .rec-stop { width:46px; height:46px; }
  .call-controls { flex-wrap:wrap; }
  .call-btn { width:54px; height:54px; }
  .contact { min-height:60px; }
  html.kb-open .composer { padding-bottom:8px; }
}
.attach-sheet-bg { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; }
.attach-sheet { width:100%; max-width:480px; padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:6px; }
.attach-sheet button { padding:15px; border-radius:14px; border:0; background:#17212b; color:#fff; font-size:16px; text-align:center; }
.attach-sheet button.cancel { background:#243447; font-weight:600; }
html[data-theme="light"] .attach-sheet button { background:#fff; color:#111; }
html[data-theme="light"] .attach-sheet button.cancel { background:#e8eaed; }


/* v67: статусы */
.dot-away { background:#f0b232; box-shadow:0 0 8px rgba(240,178,50,.6); animation:none; }
.dot-dnd { background:#e5484d; box-shadow:0 0 8px rgba(229,72,77,.6); animation:none; }
.dot-invisible { background:transparent; box-shadow:inset 0 0 0 2px #8a96a3; animation:none; }
.avatar-me { cursor:pointer; }
.contact.online.dnd .contact-dot { background:#e5484d; animation:none; }
.contact.online.dnd .contact-status { color:#e5484d; }
.chat-header-status.online.dnd { color:#e5484d; }
.info-member-status.away { color:#f0b232; }
.info-member-status.dnd { color:#e5484d; }
.status-menu { position:fixed; z-index:9999; min-width:230px; padding:6px; border-radius:12px; background:#17212b; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:2px; }
.status-menu button { display:flex; align-items:center; gap:10px; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-primary,#fff); font-size:14px; cursor:pointer; text-align:left; }
.status-menu button:hover { background:rgba(255,255,255,.07); }
.status-menu button.active { background:rgba(82,136,193,.22); font-weight:600; }
.status-menu .sm-text small { display:block; font-size:11px; font-weight:400; opacity:.6; margin-top:1px; }
html[data-theme="light"] .status-menu { background:#fff; border-color:rgba(0,0,0,.1); }
html[data-theme="light"] .status-menu button:hover { background:rgba(0,0,0,.05); }

/* v68: зрители моей демки — на моей плитке */
.call-tile.local>.screen-viewers{position:absolute;right:10px;top:10px;z-index:5}

/* ===== v77: серверы (Discord-стиль) ===== */
.srv-root { position:fixed; inset:0; z-index:1200; display:flex; background:var(--bg-main); color:var(--text-primary); font-family:var(--font); }
.srv-rail { width:68px; flex:none; background:var(--bg-deep); display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0; overflow-y:auto; }
.srv-ico { position:relative; width:46px; height:46px; border:0; border-radius:50%; background:var(--bg-panel); color:var(--text-primary); font-weight:700; cursor:pointer; transition:border-radius .2s, background .2s; }
.srv-ico:hover, .srv-ico.active { border-radius:14px; background:var(--accent); }
.srv-ico.add { color:var(--success); font-size:22px; } .srv-ico.close { margin-top:auto; color:var(--text-secondary); }
.srv-ud { position:absolute; right:2px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--danger); display:inline-block; }
.srv-chs { width:240px; flex:none; background:var(--bg-sidebar); display:flex; flex-direction:column; overflow-y:auto; }
.srv-sh { padding:14px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); position:sticky; top:0; background:var(--bg-sidebar); z-index:1; }
.srv-sh:hover { background:var(--bg-hover); }
.srv-cat { display:flex; align-items:center; gap:4px; padding:14px 10px 4px 12px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-secondary); }
.srv-cat span { flex:1; } .srv-cat button, .srv-gear { background:none; border:0; color:var(--text-secondary); cursor:pointer; font-size:14px; }
.srv-ch { display:flex; align-items:center; gap:6px; margin:1px 8px; padding:6px 8px; border-radius:6px; color:var(--text-secondary); cursor:pointer; }
.srv-ch:hover { background:var(--bg-hover); color:var(--text-primary); } .srv-ch.active { background:var(--bg-active); color:var(--text-primary); } .srv-ch.incall { color:var(--success); }
.srv-chn { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .srv-gear { opacity:0; } .srv-ch:hover .srv-gear { opacity:1; }
.srv-ch .srv-ud { position:static; }
.srv-vu { display:flex; align-items:center; gap:8px; padding:3px 10px 3px 34px; font-size:13px; color:var(--text-secondary); }
.srv-av { display:inline-flex; width:24px; height:24px; flex:none; border-radius:50%; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; }
.srv-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.srv-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.srv-back { display:none; background:none; border:0; color:var(--text-primary); font-size:18px; cursor:pointer; }
.srv-topic { color:var(--text-secondary); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srv-msgs { flex:1; overflow-y:auto; padding:10px 0; }
.srv-msg { position:relative; display:flex; gap:12px; padding:6px 16px; } .srv-msg:hover { background:rgba(255,255,255,.03); }
.srv-msg .srv-av { width:38px; height:38px; font-size:13px; } .srv-mb { min-width:0; flex:1; }
.srv-mt { display:flex; gap:8px; align-items:baseline; } .srv-mt small { color:var(--text-muted); }
.srv-tx { word-break:break-word; line-height:1.4; }
.srv-acts { position:absolute; right:16px; top:-12px; display:none; gap:2px; background:var(--bg-panel); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:2px; }
.srv-msg:hover .srv-acts { display:flex; } .srv-acts button { background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:6px; color:var(--text-primary); } .srv-acts button:hover { background:var(--bg-hover); }
.srv-rxs { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.srv-rx { background:var(--bg-panel); border:1px solid transparent; border-radius:10px; padding:1px 8px; color:var(--text-primary); cursor:pointer; } .srv-rx.me { border-color:var(--accent); }
.srv-more { display:block; margin:6px auto; background:none; border:0; color:var(--accent-light); cursor:pointer; }
.srv-input { display:flex; gap:8px; padding:12px 16px; } .srv-input textarea { flex:1; resize:none; background:var(--bg-input); color:var(--text-primary); border:0; border-radius:10px; padding:10px 12px; font:inherit; max-height:160px; }
.srv-input button, .srv-btn { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 14px; cursor:pointer; font:inherit; }
.srv-btn.wide { display:block; width:100%; margin-top:8px; } .srv-btn.danger { background:var(--danger); }
.srv-mem { width:220px; flex:none; background:var(--bg-sidebar); overflow-y:auto; padding:8px; }
.srv-mh { padding:12px 8px 4px; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-secondary); }
.srv-m { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; } .srv-m:hover { background:var(--bg-hover); } .srv-m.off { opacity:.45; }
.srv-empty { padding:30px 16px; text-align:center; color:var(--text-secondary); }
.srv-voicebox { padding:40px 20px; text-align:center; }
.srv-modal-bg { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:12px; }
.srv-modal { width:420px; max-width:100%; max-height:90vh; display:flex; flex-direction:column; background:var(--bg-panel); border-radius:14px; box-shadow:var(--shadow-lg); } .srv-modal.wide { width:720px; }
.srv-modal-h { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.srv-x { background:none; border:0; color:var(--text-secondary); font-size:22px; cursor:pointer; }
.srv-modal-b { padding:14px 16px; overflow-y:auto; }
.srv-modal-b label { display:block; margin:12px 0 4px; font-size:12px; color:var(--text-secondary); }
.srv-modal-b input[type=text], .srv-modal-b input:not([type]), .srv-modal-b select { width:100%; padding:9px 10px; border-radius:8px; border:0; background:var(--bg-input); color:var(--text-primary); font:inherit; }
.srv-modal-b label.srv-chk { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; color:var(--text-primary); }
.srv-row { display:flex; gap:8px; margin-top:12px; } .srv-row input { flex:1; }
.srv-code { font:700 24px/1 monospace; letter-spacing:2px; text-align:center; padding:16px; margin-top:12px; background:var(--bg-input); border-radius:10px; user-select:all; }
.srv-roles { display:flex; gap:16px; } .srv-roles-l { width:220px; flex:none; } .srv-roles-r { flex:1; min-width:0; }
.srv-role { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; } .srv-role:hover { background:var(--bg-hover); } .srv-role.active { background:var(--bg-active); }
.srv-rdot { width:12px; height:12px; border-radius:50%; flex:none; } .srv-rname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srv-role button { background:none; border:0; color:var(--text-secondary); cursor:pointer; font-size:11px; }
@media (max-width:900px) { .srv-mem { display:none; } }
@media (max-width:640px) { .srv-rail { width:54px; } .srv-ico { width:40px; height:40px; } .srv-chs { width:170px; } .srv-roles { flex-direction:column; } .srv-roles-l { width:auto; } }

.nexus-fb { padding:12px 18px 16px; display:flex; flex-direction:column; gap:8px; }
.nexus-fb-btns { display:flex; gap:10px; }
.nexus-fb-btns button { flex:1; padding:12px 14px; border-radius:22px; background:var(--bg-input); color:var(--text-primary); font-weight:600; font-size:14px; transition:background .2s, transform .2s; }
.nexus-fb-btns button:hover { background:var(--bg-hover); transform:translateY(-1px); }
.nexus-fb-form textarea { width:100%; resize:none; padding:10px 14px; border-radius:16px; background:var(--bg-input); color:var(--text-primary); border:1.5px solid transparent; outline:none; font-size:14.5px; }
.nexus-fb-form textarea:focus { border-color:rgba(82,136,193,.5); }
.nexus-fb-row { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.nexus-fb-row button { padding:8px 18px; border-radius:18px; background:var(--bg-input); }
.nexus-fb-row .nexus-fb-send { background:linear-gradient(135deg,#5288c1,#6b8dd6); color:#fff; font-weight:600; }
.msg-text.call-msg { font-weight:500; }

.msg-bubble.call-bubble { border-left:3px solid #5288c1; background-image:linear-gradient(135deg,rgba(82,136,193,.22),rgba(82,136,193,0)); }
.msg-bubble.call-bubble .msg-text.call-msg { letter-spacing:.2px; }

/* ── v80: фото в форме обращений (feedback) ── */
.nexus-fb-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.nexus-fb-thumbs:empty { display:none; }
.nexus-fb-th { position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; }
.nexus-fb-th img { width:100%; height:100%; object-fit:cover; display:block; }
.nexus-fb-th button { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:14px; line-height:20px; padding:0; border:none; cursor:pointer; }
.nexus-fb-spacer { flex:1; }
.nexus-fb-row .nexus-fb-attach { padding:8px 14px; }

/* v80: профили игроков, групп и каналов */
#user-modal .modal-card, #info-modal .modal-card, #profile-modal .modal-card { max-width: 420px; border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.55); background-image: radial-gradient(120% 230px at 50% 0, rgba(82,136,193,.30), transparent); }
html[data-theme="light"] #user-modal .modal-card, html[data-theme="light"] #info-modal .modal-card, html[data-theme="light"] #profile-modal .modal-card { background-image: radial-gradient(120% 230px at 50% 0, rgba(59,130,246,.16), transparent); }
#user-modal .modal-header, #info-modal .modal-header, #profile-modal .modal-header { border-bottom: 0; padding: 14px 16px 0 20px; }
#user-modal .modal-header h3, #info-modal .modal-header h3, #profile-modal .modal-header h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); }
#user-modal .modal-body, #info-modal .modal-body, #profile-modal .modal-body { padding: 6px 20px 18px; gap: 14px; }
#user-modal .profile-avatar-block, #info-modal .profile-avatar-block, #profile-modal .profile-view-block { gap: 6px; padding: 10px 0 4px; margin: 0; }
#user-modal .avatar-lg, #info-modal .avatar-lg { width: 96px; height: 96px; font-size: 36px; }
#profile-modal .avatar-xl { width: 104px; height: 104px; font-size: 38px; }
#user-avatar, #info-avatar, #profile-view-avatar { box-shadow: 0 0 0 4px rgba(82,136,193,.30), 0 12px 30px rgba(0,0,0,.40); border: 0; }
#info-modal .profile-avatar-wrap { overflow: visible; }
#user-modal .user-profile-name, #info-modal .info-name, #profile-modal .profile-view-name { font-size: 21px; font-weight: 700; text-align: center; margin-top: 6px; }
#user-modal .profile-username, #profile-modal .profile-username { color: var(--accent-light); font-weight: 500; font-size: 13.5px; }
#user-modal .user-profile-status { display: inline-flex; align-self: center; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; }
#user-modal .user-profile-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#user-modal .user-profile-status.online { background: rgba(46,204,113,.14); }
#user-modal .user-profile-since { text-align: center; font-size: 12px; margin-top: -6px; }
#user-modal .user-profile-bio, #profile-modal .profile-view-bio, #info-modal .info-desc { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: 14px; line-height: 1.55; text-align: center; color: var(--text-secondary); word-break: break-word; }
html[data-theme="light"] #user-modal .user-profile-bio, html[data-theme="light"] #profile-modal .profile-view-bio, html[data-theme="light"] #info-modal .info-desc, html[data-theme="light"] #user-modal .user-profile-status { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
#info-modal .info-tabs { padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); gap: 4px; margin-bottom: 4px; }
html[data-theme="light"] #info-modal .info-tabs { background: rgba(0,0,0,.05); }
#info-modal .info-tab { padding: 9px 12px; border-radius: 11px; font-weight: 600; }
#info-modal .info-tab.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(82,136,193,.40); }
#info-modal .info-section-title { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
#info-modal .info-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
#info-modal .info-members { gap: 6px; }
#info-modal .info-member { padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04); }
#info-modal .info-member:hover { background: rgba(255,255,255,.07); }
html[data-theme="light"] #info-modal .info-member { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.04); }
#user-modal .star-grant-block, #info-modal .star-grant-block { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(100,181,239,.10), rgba(224,83,83,.08)); border: 1px solid rgba(255,255,255,.08); }
#user-modal .star-buttons, #info-modal .star-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#user-modal .star-btn, #info-modal .star-btn { padding: 10px; border-radius: 12px; font-weight: 600; }
#user-modal .modal-footer, #info-modal .modal-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 6px 20px 20px; border-top: 0; justify-content: stretch; }
#user-modal .modal-footer button, #info-modal .modal-footer button { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 13px; font-size: 14px; font-weight: 600; }
#user-modal .modal-footer .btn-secondary, #info-modal .modal-footer .btn-secondary { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
html[data-theme="light"] #user-modal .modal-footer .btn-secondary, html[data-theme="light"] #info-modal .modal-footer .btn-secondary { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
#user-modal .modal-footer .btn-danger, #info-modal .modal-footer .btn-danger { border: 1px solid rgba(224,83,83,.25); }
#user-action-accept, #user-action-decline { order: -2; }
#user-action-write, #info-save { grid-column: 1 / -1; order: -1; }

/* v81: настройки и действия группы/канала */
.gs-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 12px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
html[data-theme="light"] .gs-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.gs-title { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); }
.gs-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.gs-field .form-input { font-size: 14.5px; font-weight: 400; padding: 11px 13px; border-radius: 12px; }
.gs-field textarea.form-input { resize: none; min-height: 84px; line-height: 1.45; }
.gs-note { font-size: 11.5px; color: var(--text-muted); }
.gs-card .settings-check { padding: 4px 0; background: transparent; border-radius: 0; transform: none; }
.gs-card .settings-check:hover { background: transparent; transform: none; }
.gs-card .sc-text b { display: block; font-size: 14.5px; font-weight: 600; }
.gs-card .sc-text small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.gs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.gs-action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 15px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); color: var(--text-primary); text-align: left; cursor: pointer; transition: background .2s, transform .2s var(--ease-spring); }
.gs-action:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.gs-action:active { transform: scale(.98); }
html[data-theme="light"] .gs-action { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.07); color: #111827; }
html[data-theme="light"] .gs-action:hover { background: rgba(0,0,0,.08); }
.gs-ico { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(82,136,193,.18); color: var(--accent-light); }
.gs-ico svg { width: 18px; height: 18px; }
.gs-txt { flex: 1; min-width: 0; }
.gs-txt b { display: block; font-size: 14px; font-weight: 600; }
.gs-txt small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.gs-chev { font-size: 22px; line-height: 1; color: var(--text-muted); }
.gs-action-danger .gs-ico { background: rgba(224,83,83,.15); color: #ff8a8a; }
.gs-action-danger .gs-txt b { color: #ff8a8a; }
.gs-action-danger:hover { background: rgba(224,83,83,.12); border-color: rgba(224,83,83,.25); }
.gs-danger { background: rgba(224,83,83,.04); border-color: rgba(224,83,83,.18); }
.gs-danger .gs-title { color: #ff8a8a; }

/* v82: карточка приглашения в чате */
.inv-card { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; padding: 10px 12px; min-width: 250px; max-width: 360px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--accent-light); white-space: normal; text-align: left; cursor: default; }
html[data-theme="light"] .inv-card { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); border-left-color: var(--accent); }
.inv-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; }
.inv-row { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.inv-row i { font-style: normal; color: var(--text-muted); margin-right: 5px; }
.inv-row b { font-weight: 700; }
.inv-btn { flex-shrink: 0; padding: 10px 14px; border: 0; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5288c1, #6b8dd6); box-shadow: 0 4px 14px rgba(82,136,193,.35); cursor: pointer; transition: filter .2s, transform .2s var(--ease-spring); }
.inv-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.inv-btn:disabled { opacity: .6; cursor: default; }
.inv-btn.joined { background: rgba(255,255,255,.14); box-shadow: none; }
html[data-theme="light"] .inv-btn.joined { background: rgba(0,0,0,.1); color: #111827; }
.inv-loading { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 520px) { .inv-card { flex-direction: column; align-items: stretch; min-width: 0; } .inv-btn { width: 100%; } }

/* v83: фиксированный размер окна информации */
#info-modal .modal-card { height: min(680px, 88vh); height: min(680px, 88dvh); }
#info-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
#info-modal .info-panel { min-height: 0; }
#info-modal .media-empty { padding: 40px 0; text-align: center; }

/* v84: системные события, карточка и окно приглашения, копируемый ник */
.msg-system.msg-system-evt { font-style: normal; font-size: 12.5px; color: var(--text-secondary); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.05); padding: 6px 14px; max-width: 90%; text-align: center; }
.msg-system-evt b { color: var(--text-primary); font-weight: 600; }
.msg-system-evt.sys-kick { background: rgba(224,83,83,.10); border-color: rgba(224,83,83,.18); }
html[data-theme="light"] .msg-system.msg-system-evt { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.06); }
.copyable { cursor: pointer; border-radius: 8px; padding: 2px 8px; transition: background .2s; }
.copyable:hover { background: rgba(82,136,193,.18); }
.inv-card { gap: 14px; min-width: 280px; max-width: 380px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(82,136,193,.24), rgba(0,0,0,.18)); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.inv-ava { width: 52px; height: 52px; font-size: 20px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(82,136,193,.28); }
.inv-title b { font-size: 14.5px; }
.inv-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inv-btn { padding: 11px 16px; border-radius: 13px; }
@media (max-width: 520px) { .inv-card { flex-direction: row; flex-wrap: wrap; min-width: 0; } .inv-left { flex-basis: calc(100% - 70px); } .inv-btn { width: 100%; } }
#invite-accept-modal .modal-card { max-width: 400px; border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.55); background-image: radial-gradient(120% 230px at 50% 0, rgba(82,136,193,.30), transparent); }
#invite-accept-modal .modal-header { border-bottom: 0; justify-content: center; padding: 18px 20px 0; }
#invite-accept-modal .modal-header h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); }
#invite-accept-avatar { width: 104px; height: 104px; font-size: 40px; box-shadow: 0 0 0 4px rgba(82,136,193,.30), 0 12px 30px rgba(0,0,0,.40); }
#invite-accept-modal .user-profile-name { font-size: 22px; font-weight: 700; text-align: center; margin-top: 6px; word-break: break-word; }
#invite-accept-desc { max-width: 100%; padding: 0 8px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-secondary); word-break: break-word; }
#invite-accept-status { align-self: center; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 13px !important; font-weight: 500; }
#invite-accept-modal .modal-footer { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 6px 20px 20px; border-top: 0; }
#invite-accept-modal .modal-footer button { width: 100%; min-height: 46px; border-radius: 13px; font-weight: 600; }

/* v79: демка в карточке */
.call-tile.screen .screen-tile-video,.call-tile.screen .screen-tile-wait,.call-tile.screen .screen-tile-win,.call-tile.screen .screen-tile-name,.call-tile.screen .screen-tile-btn{display:none}
.call-tile-screen-hint{font-size:11px;color:rgba(255,255,255,.55);text-align:center}
.call-tile.screen.watching{cursor:default;background:#000;border-color:rgba(82,136,193,.9)}
.call-tile.screen.watching:hover{transform:none}
.call-tile.screen.watching .call-tile-screen-preview{display:none}
.call-tile.screen.watching .screen-tile-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.screen-tile-wait,.screen-tile-win{position:absolute;inset:0;align-items:center;justify-content:center;color:#fff;font-size:13px;text-align:center}
.screen-tile-wait{background:rgba(0,0,0,.55);z-index:1}
.screen-tile-win{flex-direction:column;gap:10px;background:#10151d;z-index:3}
.call-tile.screen.watching:not(.has-frame):not(.in-window) .screen-tile-wait{display:flex}
.call-tile.screen.in-window .screen-tile-win{display:flex}
.call-tile.screen.watching .screen-tile-name{display:block;position:absolute;left:10px;bottom:10px;padding:5px 12px;background:rgba(0,0,0,.7);border-radius:8px;font-size:12.5px;color:#fff;z-index:2;opacity:0;transition:opacity .2s}
.call-tile.screen.watching .screen-tile-btn{display:flex;position:absolute;z-index:4;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;align-items:center;justify-content:center;font-size:15px;opacity:0;pointer-events:none;backdrop-filter:blur(6px);transition:opacity .2s,background .2s,transform .2s}
.screen-tile-open{right:10px;bottom:10px}
.screen-tile-stop{left:10px;top:10px}
.call-tile.screen.watching.ctl-on .screen-tile-btn,.call-tile.screen.watching.ctl-on .screen-tile-name{opacity:1;pointer-events:auto}
.call-tile.screen.watching .screen-tile-btn:hover{background:#5288c1;transform:scale(1.1)}

.nx-verified{display:inline-flex;flex:none;vertical-align:middle;margin-left:2px}
.nx-verified svg{display:block}

.ns-meter{height:6px;border-radius:3px;background:rgba(128,128,128,.25);overflow:hidden;margin:10px 0}
.ns-meter>div{height:100%;width:0;background:#5288c1;transition:width .06s linear}
.ns-hint{display:block;opacity:.65;font-size:12px;margin-top:4px}

/* v82: выбор модели шумоподавления */
.ns-pick{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.ns-pick button{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 14px;border-radius:12px;border:1px solid rgba(128,128,128,.28);background:transparent;color:inherit;font:inherit;cursor:pointer}
.ns-pick button:hover{background:rgba(128,128,128,.12)}
.ns-pick button.active{border-color:#5288c1;background:rgba(82,136,193,.16)}
.ns-pick .ns-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(128,128,128,.6);flex:none;box-sizing:border-box}
.ns-pick button.active .ns-dot{border:5px solid #5288c1}
.ns-sub{color:#8a97a8;font-weight:400;margin-left:6px}
/* v82: экономия GPU — когда окно не в фокусе, скрыто или свёрнуто, выключаем бесконечные анимации и размытие */
html.nx-idle .blob{display:none!important}
html.nx-idle *,html.nx-idle *::before,html.nx-idle *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.nx-idle .blob,
html.nx-idle .form-input:focus,
html.nx-idle .btn-primary:hover,
html.nx-idle .search-input:focus,
html.nx-idle .contact.online .contact-dot,
html.nx-idle .dot-online,
html.nx-idle .user-star,
html.nx-idle .voice-wave.playing span,
html.nx-idle .msg-text .mention-me,
html.nx-idle .typing-dots i,
html.nx-idle .attach-progress-bar,
html.nx-idle .composer-send:hover,
html.nx-idle .rec-dot,
html.nx-idle .display-mode-btn.channel-mode::after,
html.nx-idle .call-live-dot,
html.nx-idle .call-quality-badge.bad,
html.nx-idle .call-tile-sharing,
html.nx-idle .call-tile.speaking,
html.nx-idle .call-tile.speaking .call-tile-avatar,
html.nx-idle .call-tile-screen-icon,
html.nx-idle .call-btn-end:hover,
html.nx-idle .call-btn-accept:hover,
html.nx-idle .call-pulse-ring,
html.nx-idle .incoming-actions .call-btn-accept,
html.nx-idle .settings-email-status.attached,
html.nx-idle .settings-email-status.attached .settings-email-dot,
html.nx-idle .device-current-badge,
html.nx-idle .username-status.ok,
html.nx-idle .password-strength-fill.strong,
html.nx-idle .skeleton,
html.nx-idle .admin-card.online .admin-card-status,
html.nx-idle .admin-badge.creator,
html.nx-idle .admin-loading .spinner,
html.nx-idle .adm-online-dot.on,
html.nx-idle .contact-call-badge,
html.nx-idle .chat-call-badge,
html.nx-idle .msg-failed,
html.nx-idle .nb-ico svg{animation:none!important}

/* v94: профиль человека — медиатека и действия */
#user-avatar,#profile-view-avatar,#info-avatar{cursor:zoom-in}
.pf-tools{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.pf-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.pf-tab{flex:none;padding:7px 13px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;transition:all .2s}
.pf-tab small{opacity:.7;margin-left:3px}
.pf-tab:hover{background:var(--bg-hover);color:var(--text-primary)}
.pf-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pf-body{min-height:60px;max-height:260px;overflow:auto}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pf-cell{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-input);cursor:pointer}
.pf-cell img,.pf-cell video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.pf-cell:hover img,.pf-cell:hover video{transform:scale(1.06)}
.pf-row{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;background:var(--bg-input);margin-bottom:6px;color:var(--text-primary);text-decoration:none;font-size:13px}
.pf-row:hover{background:var(--bg-hover)}
.pf-row audio{flex:1;min-width:0;height:34px}
.pf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-row small{color:var(--text-muted)}
.pf-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:18px}
.pf-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-act{padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--bg-input);color:var(--text-primary);font:inherit;font-size:13px;cursor:pointer;transition:background .2s}
.pf-act:hover{background:var(--bg-hover)}
.pf-act.danger{color:var(--danger)}

/* v94: админка */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.adm-stat{background:var(--bg-panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.adm-stat b{font-size:22px;line-height:1.1}
.adm-stat span{font-size:12px;color:var(--text-secondary)}
.adm-stat.on b{color:var(--success)}
.adm-filters{display:flex;gap:6px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.adm-pill{padding:7px 14px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;transition:all .2s}
.adm-pill:hover{background:var(--bg-hover);color:var(--text-primary)}
.adm-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.adm-count{margin-left:auto;font-size:12px;color:var(--text-muted)}
.adm-row{display:flex;align-items:center;gap:14px;padding:12px 14px;margin-bottom:8px;border-radius:var(--radius-lg);background:var(--bg-panel);border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.adm-row:hover{background:var(--bg-hover);border-color:rgba(100,181,239,.25);transform:translateY(-1px)}
.adm-row.online{border-left:3px solid var(--success)}
.adm-ava{position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.adm-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--text-muted);border:2px solid var(--bg-panel)}
.adm-dot.on{background:var(--success)}
.adm-main{flex:1;min-width:0}
.adm-name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.4px}
.adm-badge.cr{background:rgba(245,166,35,.2);color:var(--warning)}
.adm-badge.ad{background:rgba(224,83,83,.2);color:#ff8a8a}
.adm-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.adm-on{color:var(--success)}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.adm-chip{font-size:11.5px;padding:3px 9px;border-radius:var(--radius-full);background:rgba(255,255,255,.06);color:var(--text-secondary)}
.adm-chip.ok{background:rgba(77,212,125,.14);color:var(--success)}
.adm-chip.warn{background:rgba(245,166,35,.15);color:var(--warning)}
.adm-btns{display:flex;gap:6px;flex-shrink:0}
.adm-btn{width:34px;height:34px;border-radius:10px;font-size:15px}
.adm-btn.view{background:rgba(82,136,193,.2);color:#8bb9e8}
@media(max-width:640px){.adm-stats{grid-template-columns:repeat(2,1fr)}.adm-row{flex-wrap:wrap}.adm-btns{width:100%;justify-content:flex-end}}

/* v95: настройки только для приложения — на сайте серые */
.nx-locked{opacity:.5;filter:grayscale(1);pointer-events:none;user-select:none}
.nx-app-note{color:var(--text-secondary);font-size:12.5px;line-height:1.45;margin:6px 2px 12px}
.ng-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ng-add .form-input{flex:1 1 180px;min-width:0}

/* v97: масштаб интерфейса и переключатели */
html.nx-zoomed body{zoom:var(--ui-zoom)}
html.nx-zoomed .app-screen{width:calc(100vw / var(--ui-zoom));height:calc(var(--vvh,100dvh) / var(--ui-zoom))}
.nx-seg{display:flex;flex-wrap:wrap;gap:8px}
.nx-seg button{padding:8px 14px;border-radius:10px;background:var(--bg-input);border:1px solid rgba(128,128,128,.28);color:var(--text-primary);font-size:14px;transition:border-color .15s,box-shadow .15s,color .15s}
.nx-seg button:hover{border-color:var(--accent)}
.nx-seg button.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;color:var(--accent-light)}

/* v98: строка «Язык:» и перевод сообщений */
.nx-lang-row{display:flex;flex-direction:row;align-items:center;gap:12px}
.nx-lang-row .form-label{margin:0}
.settings-section .nx-lang-row select.form-input{width:auto;min-width:200px;padding:10px 14px;color:var(--text-primary);background:var(--bg-input)}
.nx-tr{margin-top:4px}
.nx-tr button{font-size:12px;color:var(--accent-light);padding:2px 0;background:none;opacity:.9}
.nx-tr button:hover{text-decoration:underline}
.nx-tr-res{display:none;margin-top:4px;padding:6px 8px;border-left:2px solid var(--accent);font-size:13.5px;opacity:.95;white-space:pre-wrap}

/* v95: индикатор качества связи (5 точек) на плитке */
#call-quality-badge { display: none !important; }
.call-tile-quality { position: absolute; left: 10px; top: 10px; display: flex; gap: 2px; padding: 4px 5px; border-radius: 8px; background: rgba(0,0,0,.35); z-index: 3; }
.call-tile-quality i { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); }
.call-tile-quality.q5 i, .call-tile-quality.q4 i:nth-child(-n+4), .call-tile-quality.q3 i:nth-child(-n+3) { background: #4dd47d; }
.call-tile-quality.q2 i:nth-child(-n+2) { background: #f5a623; }
.call-tile-quality.q1 i:nth-child(1) { background: #e05353; }
.call-tile.sharing .call-tile-quality { top: 44px; z-index: 5; }

/* v95: окно выбора качества демки */
.sq-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.sq-box { background: var(--bg-panel); color: var(--text-primary); border-radius: var(--radius-lg); padding: 20px; width: min(360px, 92vw); box-shadow: var(--shadow-lg); }
.sq-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.sq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sq-opt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-md); background: var(--bg-input); cursor: pointer; }
.sq-opt.dis { opacity: .4; cursor: not-allowed; }
.sq-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sq-btns button { padding: 8px 14px; border: 0; border-radius: var(--radius-md); cursor: pointer; color: #fff; background: var(--bg-hover); }
.sq-btns .sq-go { background: var(--accent); }


/* v96: обводка говорящего без перезапуска анимации плитки */
.call-tile.speaking { animation: callTileIn .5s var(--ease-spring) !important; box-shadow: none !important; }
html.nx-idle .call-tile.speaking { animation: callTileIn .5s var(--ease-spring) !important; }
.call-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; box-shadow: inset 0 0 0 3px #4dd47d, inset 0 0 24px rgba(77, 212, 125, .35); transition: opacity .3s ease; }
.call-tile.speaking::after { opacity: 1; }
.call-tile-avatar { transition: transform .3s ease; }
.call-tile.speaking .call-tile-avatar, html.nx-idle .call-tile.speaking .call-tile-avatar { animation: none !important; transform: scale(1.05); }

/* одиночный эмодзи-стикер нельзя выделить мышкой */
.msg-text.emoji-1, .msg-text.emoji-1 * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }


/* v91: скорость голосовых и выбор устройств в звонке */
.voice-speed { flex-shrink:0; min-width:34px; height:24px; padding:0 6px; border:0; border-radius:12px; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:700; cursor:pointer; }
.voice-speed:hover { background:rgba(255,255,255,.28); }
.msg.other .voice-speed { background:rgba(0,0,0,.25); }
.call-btn-wrap { position:relative; display:inline-flex; }
.call-dev-arrow { position:absolute; top:-2px; right:-2px; width:20px; height:20px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-panel); color:var(--text-primary); border:1px solid rgba(255,255,255,.18); cursor:pointer; z-index:3; box-shadow:var(--shadow-sm); }
.call-dev-arrow:hover { background:var(--bg-hover); }
.call-dev-menu { position:fixed; z-index:4000; min-width:220px; max-width:min(340px,92vw); max-height:50vh; overflow:auto; padding:6px; border-radius:12px; background:var(--bg-panel); border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); }
.call-dev-title { padding:6px 10px 4px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.call-dev-menu button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--text-primary); font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-dev-menu button:hover { background:var(--bg-hover); }
.call-dev-menu button.active { color:var(--accent-light); }

/* ===== стикеры ===== */
@keyframes nxPop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
#stk-panel{width:360px;height:380px;max-height:62vh;left:100px;transform-origin:bottom left;animation:nxPop .22s cubic-bezier(.2,.9,.3,1.2)}
.stk-tabs{display:flex;gap:4px;padding:8px 8px 0;overflow-x:auto;scrollbar-width:none;flex:none;border-bottom:1px solid rgba(255,255,255,.07)}
.stk-tabs::-webkit-scrollbar{display:none}
.stk-tab{flex:none;width:42px;height:42px;border-radius:10px 10px 0 0;border:0;background:none;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-primary);cursor:pointer;position:relative;transition:background .2s,transform .2s}
.stk-tab img{width:32px;height:32px;object-fit:contain}
.stk-tab:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.stk-tab.active{background:rgba(82,136,193,.25)}
.stk-tab.active::after{content:'';position:absolute;left:6px;right:6px;bottom:0;height:2px;border-radius:2px;background:var(--accent-light,#6aa6e8);animation:nxPop .25s}
.stk-body{flex:1;overflow-y:auto;padding:8px}
.stk-head{display:flex;align-items:center;gap:8px;padding:2px 2px 8px;font-size:14px}
.stk-head b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-act{border:0;border-radius:14px;padding:6px 12px;font-size:12.5px;background:rgba(82,136,193,.35);color:#fff;cursor:pointer;transition:transform .15s,background .2s}
.stk-act:hover{transform:scale(1.06);background:rgba(82,136,193,.6)}
.stk-act.on{background:rgba(61,220,132,.3)}
.stk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stk-grid h4{grid-column:1/-1;margin:6px 2px 0;font-size:12px;color:var(--text-muted)}
.stk-cell{aspect-ratio:1;padding:3px;border:0;border-radius:12px;background:none;cursor:pointer;animation:nxPop .28s both;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s}
.stk-cell img{width:100%;height:100%;object-fit:contain;display:block}
.stk-cell:hover{background:rgba(255,255,255,.08);transform:scale(1.1)}
.stk-cell:active{transform:scale(.92)}
.stk-empty{padding:40px 16px;text-align:center;color:var(--text-muted);font-size:13px}
.nx-sticker{display:block;width:160px;max-width:100%;height:auto;border-radius:16px;animation:nxPop .3s}
@media(max-width:700px){#stk-panel{left:8px!important;right:8px;width:auto}}
/* ===== стрелки выбора устройств ===== */
.call-dev-arrow{transition:background .2s,transform .25s}
.call-dev-arrow svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.call-dev-arrow.open{background:var(--accent,#5288c1);color:#fff;transform:scale(1.12)}
.call-dev-arrow.open svg{transform:rotate(180deg)}
.call-dev-menu{transform-origin:bottom center;animation:nxMenuIn .22s cubic-bezier(.2,.9,.3,1.2)}
.call-dev-menu.out{animation:nxMenuOut .16s ease forwards;pointer-events:none}
.call-dev-menu button{animation:nxMenuIn .26s both}
.call-dev-menu button:nth-child(2){animation-delay:.03s}.call-dev-menu button:nth-child(3){animation-delay:.06s}.call-dev-menu button:nth-child(4){animation-delay:.09s}.call-dev-menu button:nth-child(n+5){animation-delay:.12s}
@keyframes nxMenuIn{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
@keyframes nxMenuOut{to{opacity:0;transform:translateY(6px) scale(.95)}}
/* ===== просмотр демки: видно целиком + панель по движению мыши ===== */
.screen-viewer video{position:absolute;inset:0;width:100%;height:100%;flex:none;object-fit:contain}
.screen-viewer .screen-viewer-header{position:absolute;top:0;left:0;right:0;z-index:5;transition:opacity .3s,transform .3s}
.screen-viewer:not(.sv-on) .screen-viewer-header{opacity:0!important;pointer-events:none;transform:translateY(-12px)}
.screen-viewer.sv-on .screen-viewer-header{opacity:1!important;pointer-events:auto;transform:none}
.screen-viewer:not(.sv-on){cursor:none}
.sv-bar{position:absolute;left:50%;bottom:24px;z-index:5;display:flex;gap:14px;padding:10px 18px;border-radius:999px;background:rgba(14,22,33,.72);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.screen-viewer.sv-on .sv-bar{opacity:1;pointer-events:auto;transform:translateX(-50%)}

/* ===== правая панель: эмодзи / стикеры ===== */
.app-screen.sp-open{grid-template-columns:var(--sidebar-width) 4px 1fr 340px}
.sp-panel{display:none;grid-column:4;flex-direction:column;min-width:0;height:100%;overflow:hidden;background:var(--bg-secondary,#0e1621);color:var(--text-primary);border-left:1px solid rgba(255,255,255,.07)}
.sp-open .sp-panel{display:flex;animation:nxPop .2s}
html[data-theme='light'] .sp-panel{background:#fff;border-color:rgba(0,0,0,.08)}
.sp-top{display:flex;align-items:center;gap:6px;padding:10px;border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.sp-tab{flex:1;border:0;border-radius:10px;padding:9px 6px;background:none;color:var(--text-muted);font-size:14px;cursor:pointer;transition:background .2s}
.sp-tab.on{background:rgba(82,136,193,.28);color:var(--text-primary)}
.sp-x{border:0;background:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:6px 8px}
.sp-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.sp-stk{flex:1;padding:4px 10px}
.sp-stk h4,.sp-ph{margin:12px 2px 6px;font-size:13px;color:var(--text-muted)}
.sp-ph{display:flex;align-items:center;gap:6px}
.sp-ph b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sp-grid.e{grid-template-columns:repeat(8,1fr);padding:8px}
.sp-grid.v{grid-template-columns:repeat(4,1fr);max-height:50vh;overflow-y:auto}
.sp-s,.sp-e{aspect-ratio:1;padding:3px;border:0;border-radius:10px;background:none;cursor:pointer;transition:transform .15s,background .2s}
.sp-e{padding:0;font-size:22px}
.sp-s:hover,.sp-e:hover{background:rgba(255,255,255,.08);transform:scale(1.1)}
.sp-s img,.sp-grid.v img,.sp-prev img{width:100%;height:100%;aspect-ratio:1;object-fit:contain;display:block}
.sp-cats{display:flex;gap:2px;padding:6px 8px;overflow-x:auto;flex:none;scrollbar-width:none}
.sp-cat{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:none;font-size:18px;cursor:pointer}
.sp-cat.on{background:rgba(82,136,193,.28)}
.sp-foot{position:sticky;bottom:0;padding:10px;background:var(--bg-secondary,#0e1621)}
html[data-theme='light'] .sp-foot{background:#fff}
.sp-new{width:100%;padding:10px;font-size:13.5px}
.sp-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sp-box{width:380px;max-width:100%;max-height:85vh;overflow-y:auto;background:#17212b;color:var(--text-primary);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:nxPop .2s}
html[data-theme='light'] .sp-box{background:#fff}
.sp-box h3{margin:0 0 10px;font-size:16px}
.sp-in{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;margin:4px 0 10px;font-size:14px}
.sp-prev{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:180px;overflow-y:auto}
.sp-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.sp-hint{font-size:12px;color:var(--text-muted);margin-top:10px}
.nx-sticker{cursor:pointer}
@media(max-width:700px){.app-screen.sp-open{grid-template-columns:1fr!important}.sp-open .sp-panel{position:fixed;inset:0;z-index:60;grid-column:auto}}

/* ===== стикеры v3: кнопки, навигация, редактор ===== */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;padding:10px 16px;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(135deg,#5288c1,#8b5cf6);box-shadow:0 4px 14px rgba(82,136,193,.35);transition:transform .15s,box-shadow .2s,filter .2s,opacity .2s}
.sp-btn:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 6px 18px rgba(82,136,193,.5)}
.sp-btn:active{transform:scale(.96)}
.sp-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.sp-btn.ghost{background:rgba(255,255,255,.07);box-shadow:none;color:var(--text-primary)}
.sp-btn.ghost:hover{background:rgba(255,255,255,.13)}
.sp-btn.ok{background:rgba(61,220,132,.18);color:#3ddc84;box-shadow:none}
.sp-btn.big{width:100%;padding:13px}
html[data-theme='light'] .sp-btn.ghost{background:rgba(0,0,0,.06)}
.sp-ico{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:rgba(255,255,255,.07);color:var(--text-muted);cursor:pointer;transition:background .18s,color .18s,transform .15s}
.sp-ico:hover{background:rgba(82,136,193,.32);color:#fff;transform:scale(1.08)}
.sp-ico.danger:hover{background:rgba(255,90,90,.3);color:#ff8a8a}
.sp-pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:0;border-radius:15px;background:rgba(255,255,255,.07);color:var(--text-muted);font-size:12.5px;cursor:pointer;transition:background .18s,color .18s}
.sp-pill:hover{background:rgba(255,90,90,.25);color:#ff9a9a}
.sp-tag{font-style:normal;font-size:11px;padding:2px 7px;border-radius:8px;background:rgba(82,136,193,.25);color:var(--accent-light,#6aa6e8)}
.sp-nav{position:sticky;top:0;z-index:2;display:flex;gap:2px;padding:6px 8px;overflow-x:auto;flex:none;scrollbar-width:none;background:var(--bg-secondary,#0e1621);border-bottom:1px solid rgba(255,255,255,.06)}
html[data-theme='light'] .sp-nav{background:#fff}
.sp-nav::-webkit-scrollbar{display:none}
.sp-nb{flex:none;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--text-muted);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.sp-nb img{width:26px;height:26px;object-fit:contain}
.sp-nb:hover{background:rgba(255,255,255,.08)}
.sp-nb.on{background:rgba(82,136,193,.3);color:#fff}
.sp-sec{margin:0 0 6px;scroll-margin-top:52px}
.sp-sec .sp-ph{margin:12px 2px 6px;color:var(--text-primary)}
.sp-grid.e{grid-template-columns:repeat(8,1fr);padding:0}
.sp-none{padding:10px 4px;font-size:12.5px;color:var(--text-muted)}
.sp-drop{text-align:center;border:2px dashed rgba(255,255,255,.18);border-radius:14px;padding:18px 10px;cursor:pointer;transition:border-color .2s,background .2s;color:var(--text-muted);font-size:12.5px;margin-bottom:10px}
.sp-drop svg{width:26px;height:26px}
.sp-drop b{display:block;color:var(--text-primary);font-size:14px;margin:6px 0 2px}
.sp-drop:hover,.sp-drop.on{border-color:#5288c1;background:rgba(82,136,193,.12)}
.sp-pi{position:relative;aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.05);overflow:hidden}
.sp-pi img{padding:3px;box-sizing:border-box}
.sp-pr{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:11px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.sp-pi:hover .sp-pr{opacity:1}
@media(hover:none){.sp-pr{opacity:1}}
.sp-by{font-size:12.5px;color:var(--text-muted);margin:-6px 0 10px}
.sp-box .sp-row .sp-btn{flex:1}

/* ===== админка: стикеры пользователя ===== */
.adm-tabs{grid-template-columns:repeat(5,1fr)}
.adm-stk-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer;transition:background .18s,transform .15s}
.adm-stk-row:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}
.adm-stk-th{width:44px;height:44px;flex:none;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.adm-stk-th img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.adm-stk-i{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-stk-i b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.adm-stk-i small{color:var(--text-muted);font-size:12px}
.adm-stk-go{color:var(--text-muted);font-size:20px}

.sp-pill.del{color:#ff9a9a;background:rgba(255,90,90,.14)}
.sp-pill.del:hover{background:rgba(255,90,90,.32);color:#fff}
.sp-btn.danger{background:rgba(255,90,90,.18);color:#ff8a8a;box-shadow:none}
.sp-btn.danger:hover{background:rgba(255,90,90,.34);color:#fff;box-shadow:none}
.nx-sticker-gone{display:inline-block;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--text-muted);font-size:13px}

.sp-grid.e{contain:layout style}
.sp-e{transition:background .12s}
.sp-e:hover{transform:none}

/* v97: панель эмодзи без лагов */
.emoji-grid { contain: layout paint style; overscroll-behavior: contain; }
.emoji-grid .emoji-cell { animation: none !important; transition: none; content-visibility: auto; contain-intrinsic-size: auto 38px; }
.emoji-grid .emoji-cell:hover { animation: none !important; background: rgba(255,255,255,.1); }
html[data-theme="light"] .emoji-grid .emoji-cell:hover { background: rgba(0,0,0,.08); }

/* v99: emoji grid */
.emoji-grid { overflow-anchor: none; overscroll-behavior: contain; contain: layout paint; }
.emoji-grid .emoji-cell { animation: none !important; transition: none; }
.emoji-grid .emoji-cell:hover { animation: none !important; background: rgba(255,255,255,.1); }
html[data-theme="light"] .emoji-grid .emoji-cell:hover { background: rgba(0,0,0,.08); }

/* v100: Apple-эмодзи в панели без подмены */
.emoji-grid .nx-e { display: inline-block; line-height: 1.15; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: -.18em; }
.emoji-grid .nx-e.ok { color: transparent; text-shadow: none; }

/* v101: panel scroll perf */
.emoji-picker { overflow: visible; }
.emoji-tabs { border-radius: 13px 13px 0 0; }
.emoji-grid { background: #111a26; border-radius: 0 0 13px 13px; will-change: scroll-position; }
html[data-theme="light"] .emoji-grid { background: #fff; }
.emoji-grid .emoji-cell { position: static; overflow: visible; }
.emoji-grid.nx-scr .emoji-cell { pointer-events: none; }
.emoji-grid .nx-e { vertical-align: middle; }
.emoji-grid .nx-e.ok { width: 1.2em; height: 1.2em; }

.nx-mirror{position:absolute;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;box-sizing:border-box;border-style:solid;border-color:transparent;color:var(--text-primary);z-index:2}
.nx-mirror .nx-e{line-height:inherit}
.composer-input.nx-mtxt{color:transparent!important;caret-color:var(--text-primary,#fff)}
.composer-input.nx-mtxt::placeholder{color:var(--text-muted)}