/* ============================================================
   style.css — Nexus v18
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-deep:#0a0e17; --bg-main:#0e1621; --bg-sidebar:#111a26;
    --bg-panel:#17212b; --bg-hover:#1c2936; --bg-active:#1e2f42;
    --bg-input:#1e2b3a; --bg-msg-own:#2b5278; --bg-msg-other:#182533;
    --text-primary:#fff; --text-secondary:#7d8b99; --text-muted:#5a6a7a;
    --accent:#5288c1; --accent-light:#64b5ef;
    --success:#4dd47d; --warning:#f5a623; --danger:#e05353;
    --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;
}
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, body { height:100%; width:100%; overflow:hidden; background:var(--bg-deep); color:var(--text-primary); font-family:var(--font); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; }
body { user-select:none; }
input, textarea { user-select:text; font-family:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.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; }

/* АВТОРИЗАЦИЯ */
.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%); }
.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;}
@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);} }
.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 cubic-bezier(.22,1,.36,1); }
@keyframes cardAppear { from{opacity:0;transform:translateY(20px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.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); }
.auth-logo-text { font-size:24px;font-weight:800;letter-spacing:-.5px; background:linear-gradient(135deg,#fff,#a8c8e8); -webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.auth-tagline { color:var(--text-secondary); font-size:13.5px; margin-bottom:28px; line-height:1.55; }
.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; }
.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 .32s cubic-bezier(.22,1,.36,1); }
.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; }
.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 .2s, background .2s, box-shadow .2s; }
.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); }
.auth-error { min-height:18px; color:#ff7a7a; font-size:13px; opacity:0; transition:opacity .2s; }
.auth-error.visible { opacity:1; }
.btn-primary { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; background:linear-gradient(135deg,#5288c1,#6b8dd6); color:#fff; font-size:15px; font-weight:600; border-radius:var(--radius-md); transition:transform .15s, box-shadow .2s, filter .2s; box-shadow:0 8px 24px rgba(82,136,193,.32); }
.btn-primary:hover { filter:brightness(1.08); box-shadow:0 10px 30px rgba(82,136,193,.45); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-secondary { padding:12px 20px; background:rgba(255,255,255,.06); color:#fff; border-radius:var(--radius-md); font-size:15px; font-weight:500; }
.btn-secondary:hover { background:rgba(255,255,255,.1); }
.btn-danger { padding:12px 20px; background:rgba(224,83,83,.15); color:#ff8a8a; border-radius:var(--radius-md); font-size:15px; font-weight:500; }
.btn-danger:hover { background:rgba(224,83,83,.25); }
.auth-footer { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); color:var(--text-muted); font-size:12px; }
.auth-footer-dot { width:6px;height:6px;border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ОСНОВНОЙ ЭКРАН */
.app-screen { display:grid; grid-template-columns: var(--sidebar-width) 4px 1fr; height:100vh; width:100vw; animation:appAppear .5s ease; }
@keyframes appAppear { from{opacity:0;} to{opacity:1;} }
.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; }
.sidebar-resizer { grid-column:2; background:rgba(255,255,255,.03); cursor:ew-resize; transition:background .15s; position:relative; }
.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); }
.sidebar-resizer:hover::after { background:var(--accent-light); }
.chat-area { grid-column:3; }
.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); }
.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(-1px); }
.me-card { display:flex; align-items:center; gap:11px; flex:1; min-width:0; padding:6px; border-radius:var(--radius-md); cursor:pointer; }
.me-card:hover { background:rgba(255,255,255,.03); }
.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:#fff; }
.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; }
.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 .15s, border-color .2s; }
.icon-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.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:#fff; font-size:14px; outline:none; }
.search-input::placeholder { color:var(--text-muted); }
.search-input:focus { border-color:var(--accent); }
.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; }
.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 .15s, color .15s; display:flex; align-items:center; gap:6px; }
.sidebar-tab:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar-tab.active { background:rgba(82,136,193,.18); color:var(--accent-light); }
.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; }
.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 .15s; }
.contact:hover { background:var(--bg-hover); }
.contact.active { background:var(--bg-active); }

/* ===== ФИКС 5: закреплённый — только серая скрепка ===== */
.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;
}

.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; }
.contact.online .contact-dot { background:var(--success); box-shadow:0 0 0 0 rgba(77,212,125,.6); animation:onlinePulse 2.2s infinite; }
@keyframes onlinePulse { 0%{box-shadow:0 0 0 0 rgba(77,212,125,.55);} 70%{box-shadow:0 0 0 8px rgba(77,212,125,0);} 100%{box-shadow:0 0 0 0 rgba(77,212,125,0);} }
.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); }
.contact-kind-badge.channel { background:#8b5cf6; }
.contact-body { flex:1; min-width:0; }
.contact-name { font-size:14.5px; font-weight:500; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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; }
.empty-contacts { padding:30px 20px; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.6; }
.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); }

/* ЧАТ */
.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:#fff; }
.chat-empty p { max-width:380px; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.chat-wrapper { display:flex; flex-direction:column; flex:1; min-height:0; position:relative; }
.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; }
.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 .15s; }
.chat-header-user:hover { background:rgba(255,255,255,.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; }
.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 { flex:1; overflow-y:auto; padding:18px 26px 8px; display:flex; flex-direction:column; gap:var(--msg-gap); scroll-behavior:smooth; }
.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); }

/* СООБЩЕНИЯ */
.msg { display:flex; margin:1px 0; animation:msgAppear .22s cubic-bezier(.22,1,.36,1); position:relative; align-items:flex-end; gap:8px; }
@keyframes msgAppear { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

/* ===== ФИКС 1: свои сообщения справа, аватарка справа ===== */
.msg.own {
    justify-content: flex-end;
    /* НЕ используем flex-direction: row-reverse!
       В HTML у своих порядок: [bubble][avatar].
       При 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 .15s, box-shadow .2s;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.msg-avatar:hover { transform:scale(1.1); box-shadow:0 4px 14px rgba(82,136,193,.4); }
.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;
}
.msg-system svg { opacity:.7; }

.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; }
.msg.own .msg-bubble { background:linear-gradient(135deg,#2b5278,#2d5786); color:#fff; border-bottom-right-radius:4px; }
.msg.other .msg-bubble { background:var(--bg-msg-other); color:#eaeef2; border-bottom-left-radius:4px; }
.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; }
.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); }
.msg-check { color:rgba(255,255,255,.55); }
.msg-check.read { color:#7dd3fc; }
.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; }
.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; }
.msg-attachment img { display:block; width:100%; max-height:420px; object-fit:cover; }
.msg-attachment video { display:block; width:100%; max-height:420px; background:#000; border-radius:10px; }
.msg-audio { margin:-2px -4px 4px; }
.msg-audio audio { max-width:260px; height:34px; }
.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 .15s; }
.voice-play:hover { background:rgba(255,255,255,.25); }
.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); }
.voice-wave.playing span { background:rgba(125,211,252,1); }
.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; }
.msg-file:hover { background:rgba(0,0,0,.28); }
.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; }
.reaction-badge.mine { background:rgba(82,136,193,.5); }
.reaction-badge:hover { background:rgba(82,136,193,.4); }
.typing-indicator { display:flex; align-items:center; gap:10px; padding:2px 28px 6px; font-size:12.5px; color:var(--text-secondary); }
.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:typingBounce 1.3s infinite; }
.typing-dots i:nth-child(2) { animation-delay:.18s; }
.typing-dots i:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:.5;} 30%{transform:translateY(-5px);opacity:1;} }
.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); }
.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; }
.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; }
.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 { 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; }
.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 .2s, color .2s; }
.composer-btn:hover { background:var(--bg-hover); color:#fff; }
.composer-input { flex:1; min-height:42px; max-height:140px; padding:11px 16px; background:var(--bg-input); border:1.5px solid transparent; border-radius:22px; color:#fff; font-size:14.5px; line-height:1.4; outline:none; resize:none; overflow-y:auto; }
.composer-input::placeholder { color:var(--text-muted); }
.composer-input:focus { border-color:rgba(82,136,193,.5); }
.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); color:#fff; font-size:18px; box-shadow:0 4px 14px rgba(82,136,193,.35); }
.composer-send:hover { filter:brightness(1.12); }
.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 .15s, color .15s, transform .15s; }
.composer-mic:hover { background:var(--bg-hover); color:#fff; }
.composer-mic:active { transform:scale(.94); }
.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 .15s, transform .15s; }
.rec-cancel { background:rgba(224,83,83,.25); }
.rec-cancel:hover { background:rgba(224,83,83,.4); }
.rec-stop { background:linear-gradient(135deg,#5288c1,#6b8dd6); box-shadow:0 4px 14px rgba(82,136,193,.35); }
.rec-stop:hover { filter:brightness(1.12); }
.rec-dot { flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--danger); animation:recPulse 1s infinite; }
@keyframes recPulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(.85);} }
.rec-timer { font-size:15px; font-weight:600; color:#fff; 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); }
.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; }
.emoji-tabs { display:flex; padding:6px 6px 0; gap:2px; border-bottom:1px solid rgba(255,255,255,.06); overflow-x:auto; }
.emoji-tab { padding:8px 12px; font-size:12.5px; color:var(--text-secondary); border-bottom:2px solid transparent; white-space:nowrap; }
.emoji-tab.active { color:var(--accent-light); border-bottom-color:var(--accent-light); }
.emoji-grid { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; padding:8px; }
.emoji-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:6px; cursor:pointer; }
.emoji-cell:hover { background:rgba(255,255,255,.08); }

/* МОДАЛКИ */
.modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.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 .25s ease; display:flex; flex-direction:column; max-height:90vh; }
@keyframes popIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.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; }
.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; }
.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 .2s; 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); }
.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; }
.member-pick { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.member-pick:hover { background:rgba(255,255,255,.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 .15s, border-color .15s; }
.member-pick.selected .member-pick-check { background:var(--accent); border-color:var(--accent); }
.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; }
.info-member:hover { background:rgba(255,255,255,.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; }
.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.moderator{ color:var(--success); }
.info-member-role.member   { color:var(--text-muted); }
.info-member-actions { display:flex; gap:4px; }
.info-name { font-size:18px; font-weight:600; }
.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; }

/* ===== МОДАЛКА РОЛЕЙ ===== */
.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;
}
.role-options { display: flex; flex-direction: column; gap: 6px; }
.role-option {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.role-option:hover { background: rgba(255,255,255,.06); }
.role-option input[type="radio"] { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }
.role-option:has(input:checked) { border-color: var(--accent); background: rgba(82,136,193,.1); }
.role-option-title { font-size: 14px; font-weight: 600; }
.role-option-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }

.perm-list { display: flex; flex-direction: column; gap: 4px; }
.perm-check {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .15s;
}
.perm-check:hover { background: rgba(255,255,255,.06); }
.perm-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.perm-check.disabled { opacity: 0.4; pointer-events: none; }

/* НАСТРОЙКИ */
.settings-tabs { display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.3); border-radius:var(--radius-md); margin-bottom:8px; }
.settings-tab { flex:1; padding:9px 12px; font-size:13.5px; color:var(--text-secondary); border-radius:7px; transition:background .15s, color .15s; }
.settings-tab:hover { color:#fff; }
.settings-tab.active { background:linear-gradient(135deg,#5288c1,#6b8dd6); color:#fff; font-weight:600; }
.settings-panel { display:flex; flex-direction:column; gap:12px; }
.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; }
.settings-check input { width:18px; height:18px; accent-color:var(--accent); }
.theme-selector { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-opt { display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:10px; background:rgba(255,255,255,.03); border:2px solid transparent; transition:border-color .15s; font-size:13.5px; }
.theme-opt:hover { background:rgba(255,255,255,.06); }
.theme-opt.active { border-color:var(--accent); }
.theme-preview { width:100%; aspect-ratio:16/10; border-radius:8px; border:1px solid rgba(255,255,255,.06); }
.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; }

/* ПКМ-МЕНЮ */
.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 .15s ease-out; }
@keyframes ctxPop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
.ctx-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; font-size:14px; color:#fff; border-radius:8px; text-align:left; transition:background .12s; }
.ctx-item:hover { background:rgba(82,136,193,.2); }
.ctx-item svg { flex-shrink:0; opacity:.7; }
.ctx-item.danger { color:#ff8a8a; }
.ctx-item.danger:hover { background:rgba(224,83,83,.15); }
.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; }
.ctx-volume-block input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent-light); cursor:pointer; box-shadow:0 0 8px rgba(82,136,193,.6); }
.ctx-volume-block input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--accent-light); cursor:pointer; border:none; }
.ctx-divider { height:1px; background:rgba(255,255,255,.06); margin:6px 0; }

/* ===== ФИКС 3: call-ctx должен быть выше call-screen (z-index 3000) ===== */
.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 .15s ease-out; }
.reaction-cell { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:50%; transition:transform .15s, background .15s; }
.reaction-cell:hover { background:rgba(255,255,255,.1); transform:scale(1.2); }
.lightbox { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.9); cursor:zoom-out; padding:40px; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }

/* ЗВОНКИ */
.call-screen { position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; background:#000; overflow:hidden; }
.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); }
.call-topbar-info { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; }
.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; }
.call-topbar-min:hover { background:rgba(255,255,255,.2); }
.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-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 .35s cubic-bezier(.22,1,.36,1); transition:box-shadow .2s; }
@keyframes callTileIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
.call-tile:hover { box-shadow:0 0 0 2px rgba(82,136,193,.3); }
.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; box-shadow:0 4px 14px rgba(224,83,83,.5);
    animation:muteAppear .3s cubic-bezier(.22,1,.36,1);
    z-index:3;
}
@keyframes muteAppear { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }

/* Индикатор наушников (отдельная иконка) */
.call-tile-headphones {
    position:absolute; right:52px; 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; box-shadow:0 4px 14px rgba(224,83,83,.5);
    animation:muteAppear .3s cubic-bezier(.22,1,.36,1);
    z-index:3;
}

.call-tile.screen { background:linear-gradient(135deg,#1e2a3a,#141a24); border:2px solid rgba(82,136,193,.4); cursor:pointer; transition:border-color .2s; }
.call-tile.screen:hover { border-color:rgba(82,136,193,.9); }
.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; }
@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); } }
.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 .15s, box-shadow .2s; }
.call-tile-screen-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(82,136,193,.6); }
.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); }
.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 .2s, transform .15s; backdrop-filter:blur(10px); }
.call-btn:hover { background:rgba(255,255,255,.22); }
.call-btn:active { transform:scale(.94); }
.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; }
.call-btn-accept { background:var(--success); }
.call-btn-accept:hover { background:#6be092; }
.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; }
.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; }
.call-mini-info { display:flex; align-items:center; gap:8px; min-width:0; }
.call-mini-title { font-size:13.5px; font-weight:600; color:#fff; }
.call-mini-status { font-size:11px; color:var(--text-secondary); margin-top:1px; }
.call-mini-avatars { display:flex; }
.call-mini-avatars .avatar { width:26px; height:26px; font-size:11px; border:2px solid rgba(17,26,38,.98); margin-left:-8px; }
.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); }
.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 .15s; }
.call-mini-btn:hover { background:rgba(255,255,255,.2); }
.call-mini-btn.active { background:rgba(82,136,193,.65); }
.call-mini-btn.off { background:rgba(224,83,83,.65); }
.call-mini-btn.call-mini-end { background:var(--danger); }
.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 .3s ease; }
.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; }
@keyframes pulseRing { 0% { transform:translateX(-50%) scale(.7); opacity:1; } 100% { transform:translateX(-50%) scale(2); opacity:0; } }
.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; }
.screen-viewer { position:fixed; inset:0; z-index:3500; background:rgba(0,0,0,.97); display:flex; flex-direction:column; animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.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; }
.screen-viewer-title { font-size:15px; font-weight:600; }
.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 .15s; }
.screen-viewer-close:hover { background:#e86f6f; transform:scale(1.05); }
.screen-viewer video { flex:1; width:100%; height:100%; object-fit:contain; background:#000; }
.toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%, 100px); padding:12px 22px; background:rgba(17,26,38,.96); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); font-size:14px; color:#fff; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s; z-index:5000; backdrop-filter:blur(12px); max-width:80vw; text-align:center; }
.toast.show { transform:translate(-50%, 0); opacity:1; }
.toast.success { border-color:rgba(77,212,125,.4); }
.toast.error { border-color:rgba(224,83,83,.4); }

/* 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; }
    .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; }
    .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 { width: 38px; height: 38px; font-size: 18px; }
    .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; }
}