/* Zohal visual identity — respects existing layout and navigation. */
:root{--bg:#f6f4fa;--surface:#fff;--border:#e9e3f2;--pinned-bg:#f3effa;--chat-item-bg-active:#eee7fa;--online:#26a889}
body.dark-mode{--primary:#b69aff;--primary-soft:rgba(182,154,255,.16);--bg:#100e18;--surface:#1b1728;--surface-elevated:rgba(27,23,40,.97);--other-msg:#252033;--border:#332a45;--pinned-bg:#211a30;--chat-item-bg-active:#302540;--sec-text:#b0a6c3}
.auth-screen{background:radial-gradient(ellipse at 15% 15%,rgba(143,103,231,.17),transparent 52%),radial-gradient(ellipse at 90% 85%,rgba(95,125,231,.12),transparent 50%),var(--bg);overflow-y:auto;padding:28px 20px;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.auth-box{max-width:400px;padding:32px 28px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 24px 80px rgba(59,32,103,.08);margin:auto}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:32px;letter-spacing:1px;color:var(--text);margin-bottom:10px}
.auth-logo img{border-radius:24px;object-fit:cover;box-shadow:0 10px 26px rgba(121,85,219,.22)}
.auth-tagline{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:12px}
.auth-sub{line-height:1.9;font-size:13px;margin-bottom:22px}
.auth-input{border-radius:14px;text-align:start;padding:14px 16px}
#reg-display{direction:rtl}
.auth-input:focus{box-shadow:0 0 0 4px var(--primary-soft)}
.auth-btn{border-radius:14px;background:linear-gradient(120deg,#8860e8,#6443bd);box-shadow:0 6px 18px rgba(121,85,219,.18)}
.auth-link{padding:12px 4px}
button:focus-visible,a:focus-visible,.auth-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
#chat-container,#dm-chat-container,#desktop-empty-chat{background-color:var(--chat-bg-base);background-image:radial-gradient(circle at 10% 15%,rgba(121,85,219,.07),transparent 50%),radial-gradient(circle at 90% 80%,rgba(121,85,219,.05),transparent 45%)}
body.dark-mode #chat-container,body.dark-mode #dm-chat-container,body.dark-mode #desktop-empty-chat{background-color:#13101e;background-image:radial-gradient(circle at 10% 15%,rgba(143,103,231,.09),transparent 55%)}
.top-header{border-bottom:1px solid var(--border)}
.search-input-wrap{border:1px solid var(--border)}
.chat-item{transition:background-color .16s ease}
.avatar-img{object-fit:cover}
@media(max-width:420px){.auth-box{padding:26px 22px;border-radius:24px}.auth-logo img{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}