/* ============ ЗВОНКИ / УВЕДОМЛЕНИЯ / LIGHTBOX / TOAST ============ */
#callOverlay{position:fixed;inset:0;z-index:60;display:none;background:#0c0e12}
#callOverlay.show{display:block}
#callOverlay .remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.call-bg{position:absolute;inset:0;background:radial-gradient(600px 400px at 50% 20%,#2a3a4a,#0c0e12 75%)}
.call-top{position:absolute;top:8vh;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff}
.call-top h2{font-size:22px;font-weight:600}
.call-state{font-size:13px;color:rgba(255,255,255,.65)}
.call-controls{position:absolute;bottom:52px;left:0;right:0;display:flex;gap:16px;justify-content:center}
.cbtn{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;transition:.15s}
.cbtn:hover{background:rgba(255,255,255,.28)}
.cbtn.off{background:rgba(255,255,255,.5);color:#111}
.cbtn.end{background:#e5484d}
.cbtn.end svg{transform:rotate(135deg)}
.pip{position:absolute;right:26px;bottom:130px;width:140px;height:190px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 40px rgba(0,0,0,.5);background:linear-gradient(135deg,#334,#223);display:grid;place-items:center;color:#fff;font-weight:700}
.pip.camoff::after{content:'Камера выкл.';position:absolute;font-size:11px;color:rgba(255,255,255,.7)}
.cbtn.ans{background:var(--accent);color:var(--accent-ink)}
.pip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;border-radius:18px}
.pip video:not([style*="display:none"]){display:block}
.notif-stack{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:10px;width:min(430px,92vw)}
.notif{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:20px;cursor:pointer;
  background:color-mix(in srgb,var(--side-base) 74%,transparent);backdrop-filter:blur(24px);
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.35);animation:nin .35s ease}
.notif.hide{opacity:0;transform:translateY(-12px);transition:.3s}
@keyframes nin{from{opacity:0;transform:translateY(-16px)scale(.96)}}
.notif .avatar{width:40px;height:40px;font-size:14px}
.notif b{font-size:13.5px;display:block}
.notif p{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:270px}
.notif .ibtn{margin-left:auto}
.notif .ibtn{border-radius:50%;width:30px;height:30px}
.notif .ibtn:hover{background:var(--hover)}
#lb{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:rgba(5,7,10,.7);backdrop-filter:blur(10px);cursor:zoom-out}
#lb.show{display:grid}
#lb img{max-width:90vw;max-height:86vh;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);z-index:90;padding:11px 20px;border-radius:999px;background:color-mix(in srgb,var(--side-base) 80%,transparent);backdrop-filter:blur(20px);border:1px solid var(--line);font-size:13px;opacity:0;transition:.3s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* ============ ТРЕД / ПЕРЕСЫЛКА / ПОИСК / ЛЕНТА / УЧАСТНИКИ ============ */
.thread-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.thread-root{opacity:.55;margin-bottom:4px}
.lenta-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.lenta-post{background:color-mix(in srgb,var(--side-base) 55%,transparent);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px}
.lenta-post h3{font-size:14.5px}
.lenta-post .cap{font-size:13px;color:var(--text);white-space:pre-wrap}
.lenta-post .meta{font-size:11.5px;color:var(--dim)}
.lenta-post img,.lenta-post video{max-width:100%;border-radius:12px;max-height:340px}.lenta-post audio{width:100%}
.lenta-more{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lenta-more button{padding:6px 12px;border-radius:999px;background:var(--hover);font-size:12px}
.g-res-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:13px;cursor:pointer}
.g-res-item:hover{background:var(--hover)}
.g-res-item .t{font-weight:600;flex:none}
.g-res-item .s{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.g-res-sep{font-size:11px;color:var(--dim);padding:8px 4px 2px}
.member-row{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:12px;font-size:13px}
.member-row:hover{background:var(--hover)}
.member-row .role{margin-left:auto;font-size:11px;color:var(--dim)}
.fwd-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;font-size:13px;cursor:pointer}
.fwd-item:hover{background:var(--hover)}
.topic.menu{outline:1.5px dashed var(--dim)}

/* Contacts directory */
.contacts-modal{width:min(560px,94vw);max-height:min(720px,88dvh);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.contacts-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.contacts-heading h2{margin:0}
.contacts-tabs{display:flex;gap:6px;padding:4px;border-radius:13px;background:var(--hover)}
.contacts-tabs button{flex:1;padding:9px 12px;border-radius:10px;color:var(--dim);font-size:12px}
.contacts-tabs button.on{background:var(--active);color:var(--text);font-weight:650}
.contacts-status{min-height:16px;font-size:11px;color:var(--dim)}
.contacts-list{min-height:100px;overflow:auto;display:flex;flex-direction:column;gap:5px;overscroll-behavior:contain}
.contact-row{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid transparent;border-radius:14px;min-width:0}
.contact-row:hover{background:var(--hover)}
.contact-avatar{width:42px;height:42px;font-size:13px}
.contact-meta{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.contact-meta strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-meta span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-actions{display:flex;align-items:center;gap:5px;flex:none}
.contact-actions .btn-ghost{font-size:11px;padding:8px 10px}
.contact-actions button:disabled{opacity:.6;cursor:default}
.contact-remove{font-size:22px;color:var(--dim)}
.contacts-empty{padding:30px 18px;text-align:center;color:var(--dim);font-size:12px;line-height:1.55}