@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{--bg:#080a0f;--panel:#10131a;--panel2:#151923;--border:#252a36;--text:#f5f7fb;--muted:#9299a8;--accent:#7c5cff;--accent2:#a78bfa;--bubble:#171b25}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;border:0}.app{height:100vh;display:flex;overflow:hidden}.sidebar{width:350px;min-width:350px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:20px}.main{flex:1;position:relative;display:flex;flex-direction:column;background:radial-gradient(circle at 60% 25%,#17132b 0,#090b10 38%,#080a0f 100%)}.brand{display:flex;align-items:center;gap:11px}.brand-icon,.empty-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#4f46e5);box-shadow:0 10px 30px #5b42d733;font-weight:800;font-size:22px}.brand b{display:block;font-size:17px}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:1px;direction:ltr}.side-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.me{display:flex;align-items:center;gap:11px;padding:12px;background:var(--panel2);border:1px solid var(--border);border-radius:16px}.avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:grid;place-items:center;font-weight:800}.avatar.small{width:42px;height:42px;font-size:14px;border-radius:12px}.me-text{flex:1}.me-text b,.chat-info b{display:block;font-size:14px}.me-text span,.chat-info span,.chat-head span{font-size:11px;color:#65d69a}.logout{color:var(--muted);text-decoration:none;font-size:21px}.search{height:45px;display:flex;align-items:center;gap:8px;background:#0b0e14;border:1px solid var(--border);border-radius:13px;margin:16px 0}.search span{padding-right:12px;color:var(--muted);font-size:22px}.search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:13px}.section-title{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin:4px 3px 9px}.section-title button{background:transparent;color:var(--accent2);font-size:23px}.chat-list{overflow:auto}.chat-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 8px;background:transparent;color:var(--text);border-radius:13px;text-align:right;margin-bottom:3px}.chat-item:hover,.chat-item.active{background:#191d28}.chat-info{flex:1;min-width:0}.chat-info span{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.chat-item time{font-size:9px;color:#626978}.side-bottom{margin-top:auto}.profile-btn{width:100%;padding:12px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:12px}.topbar{height:76px;display:flex;align-items:center;gap:12px;padding:0 28px;border-bottom:1px solid #1c2029;background:#0b0d12cc;backdrop-filter:blur(15px)}.topbar>div:first-of-type{flex:1}.topbar b{display:block;font-size:14px}.topbar span{color:var(--muted);font-size:11px}.icon-btn{width:38px;height:38px;background:transparent;color:var(--muted);font-size:20px;border-radius:10px}.icon-btn:hover{background:var(--panel2);color:#fff}.chat-head{display:flex;align-items:center;gap:10px;flex:1}.empty{margin:auto;text-align:center;max-width:470px}.empty-logo{width:74px;height:74px;margin:0 auto 20px;font-size:34px;border-radius:23px}.empty h2{margin:0 0 8px;font-size:25px}.empty p{color:var(--muted);font-size:13px;margin:0 0 22px}.primary{background:linear-gradient(135deg,var(--accent),#6548e9);color:white;padding:12px 20px;border-radius:12px;font-weight:700;box-shadow:0 12px 30px #6548e933}.full{width:100%}.messages{flex:1;overflow:auto;padding:28px 8%;display:flex;flex-direction:column;gap:8px}.bubble{max-width:min(65%,600px);padding:10px 14px;border-radius:17px;background:var(--bubble);border:1px solid var(--border);font-size:13px;line-height:1.7;white-space:pre-wrap}.bubble.mine{align-self:flex-start;background:linear-gradient(135deg,#684be8,#5436d0);border-color:#745be7;border-bottom-left-radius:5px}.bubble.theirs{align-self:flex-end;border-bottom-right-radius:5px}.bubble time{display:block;font-size:8px;opacity:.55;margin-top:3px}.composer{display:flex;flex-direction:row;direction:ltr;position:relative;margin:0 7% 20px;height:58px;padding:7px;background:#12151d;border:1px solid var(--border);border-radius:18px;align-items:center;gap:8px;z-index:4}.composer input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:13px;direction:rtl;text-align:right;padding:0 6px}.round,.send{width:42px;height:42px;border-radius:13px;background:#1c202a;color:var(--muted)}.send{background:var(--accent);color:white}.hidden{display:none!important}.search-results{overflow:auto}.result{display:flex;width:100%;align-items:center;gap:10px;background:transparent;color:#fff;padding:10px;border-radius:12px;text-align:right}.result:hover{background:#191d28}.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#1a1235,#080a0f 48%)}.auth-card{width:min(430px,100%);background:#10131a;border:1px solid #292d39;border-radius:25px;padding:30px;box-shadow:0 25px 80px #0008}.auth-heading{margin:28px 0 18px}.auth-heading h1{margin:0 0 6px;font-size:24px}.auth-heading p,.switch,.hint{color:var(--muted);font-size:12px}.auth-card label{display:block;font-size:12px;margin:13px 0 7px;color:#c6c9d2}.auth-card input,.auth-card textarea{width:100%;padding:13px;border-radius:12px;border:1px solid var(--border);background:#0b0e14;color:#fff;outline:0}.auth-card input:focus,.auth-card textarea:focus{border-color:var(--accent)}.auth-card .primary{margin-top:17px}.switch{text-align:center;margin-top:18px}.switch a{color:var(--accent2);text-decoration:none}.alert{padding:10px;border-radius:10px;font-size:11px;margin:8px 0;background:#351a22;color:#ffb7c1}.alert.ok{background:#163123;color:#9ff0bd}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:10}.modal-card{width:min(400px,calc(100% - 30px));background:#12151c;border:1px solid var(--border);padding:25px;border-radius:20px;position:relative}.modal-card h3{margin-top:0}.modal-card textarea{min-height:110px;resize:vertical}.close{position:absolute;left:15px;top:12px;background:transparent;color:var(--muted);font-size:25px}.mobile-only{display:none}.side-bottom{padding-top:12px}
@media(max-width:800px){.sidebar{position:fixed;z-index:5;right:0;top:0;bottom:0;width:min(340px,90vw);transform:translateX(100%);transition:.25s;box-shadow:-20px 0 60px #0008}.sidebar.open{transform:translateX(0)}.mobile-only{display:block}.main{width:100%}.topbar{padding:0 14px}.messages{padding:20px 14px}.bubble{max-width:82%}.composer{margin:0 12px 12px}.empty{padding:20px}.brand.compact b{font-size:15px}}
body.light{--bg:#f3f5f9;--panel:#fff;--panel2:#f3f4f8;--border:#e2e5ec;--text:#161922;--muted:#6d7482;--bubble:#eef0f5}.light .main{background:radial-gradient(circle at 60% 25%,#ede9fe,#f8f9fb 45%,#f3f5f9)}.light .topbar{background:#ffffffdd}.light .search,.light .auth-card input,.light .auth-card textarea,.light .composer{background:#f6f7fa}.light .chat-item:hover,.light .chat-item.active,.light .result:hover{background:#eef0f5}


/* User ID / search polish */
.profile-id-box{margin:8px 0 16px;padding:13px 14px;border:1px solid rgba(124,92,255,.28);background:rgba(124,92,255,.08);border-radius:14px}.profile-id-box div{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-id-box span{font-size:12px;color:#a7a7b5}.profile-id-box strong{font-size:15px;color:#9d86ff;direction:ltr}.profile-id-box small{display:block;margin-top:6px;color:#777;font-size:11px}.result-info{min-width:0;text-align:right}.result-info b{display:block}.result-info small{display:block;margin-top:4px;color:#858593;font-size:11px;direction:ltr;text-align:right}.search-results .result{direction:rtl}

.profile-divider{height:1px;margin:14px 0;background:rgba(255,255,255,.08)}
/* Messaging composer, emoji, reply, edit and read receipts */
.composer{position:relative;z-index:4}.composer .round{font-size:20px;display:grid;place-items:center}.reply-bar{margin:0 7% -2px;padding:9px 13px;background:#171b25;border:1px solid var(--border);border-radius:14px 14px 0 0;display:flex;align-items:center;gap:10px}.reply-bar>div{min-width:0;flex:1;border-right:3px solid var(--accent);padding-right:10px}.reply-bar b{display:block;color:var(--accent2);font-size:11px}.reply-bar span{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.reply-bar button{background:transparent;color:var(--muted);font-size:21px}.emoji-picker{position:absolute;bottom:82px;right:7%;width:min(390px,calc(100% - 30px));max-height:280px;overflow:auto;padding:12px;background:#11141c;border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px #0009;z-index:8;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;direction:ltr}.emoji-picker button{background:transparent;border-radius:9px;font-size:23px;padding:6px}.emoji-picker button:hover{background:#222735}.bubble{position:relative;cursor:pointer}.bubble:hover{filter:brightness(1.04)}.bubble .bubble-text{word-break:break-word}.reply-preview{border-right:3px solid var(--accent2);background:#ffffff10;padding:5px 8px;margin:-2px 0 7px;border-radius:7px;direction:rtl}.reply-preview b{display:block;color:var(--accent2);font-size:10px}.reply-preview span{display:block;color:#bfc3cf;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bubble time{display:flex;justify-content:flex-end;align-items:center;gap:4px}.bubble time em{font-style:normal;font-size:8px;color:#bdb4ff}.ticks{font-size:10px;letter-spacing:-3px;margin-right:3px;color:#cfd3dc;direction:ltr}.ticks.read{color:#78a7ff}.send{transition:.15s}.send:hover{transform:translateY(-1px)}
@media(max-width:800px){.composer{display:flex;flex-direction:row}.reply-bar{margin:0 12px -2px}.emoji-picker{right:12px;bottom:75px;width:calc(100% - 24px);grid-template-columns:repeat(8,1fr);max-height:260px}.emoji-picker button{font-size:22px;padding:5px}.bubble{user-select:none;-webkit-user-select:none}.composer{position:relative}}

/* Message actions + real presence */
.chat-head span.offline{color:#777f8e}
.message-menu{position:fixed;min-width:150px;padding:6px;background:#12151d;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px #000b;z-index:30;display:flex;flex-direction:column;gap:3px;direction:rtl}
.message-menu button{padding:10px 12px;border-radius:9px;background:transparent;color:var(--text);text-align:right;font-size:12px}
.message-menu button:hover{background:#1e2330;color:#fff}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:40;padding:10px 16px;background:#171b25;border:1px solid var(--border);border-radius:12px;color:#fff;font-size:11px;box-shadow:0 15px 40px #0008}
@media(max-width:800px){.message-menu{min-width:165px}.toast{bottom:82px;max-width:calc(100% - 30px);text-align:center}.bubble{touch-action:manipulation}}
/* Profile polish + unread notifications */
.profile-click{border:0;color:inherit;font:inherit;text-align:inherit}.me.profile-click{width:100%;cursor:pointer}.me.profile-click:hover{background:#191d28}.profile-chevron{color:var(--muted);font-size:18px;margin-left:2px}.chat-head.profile-click{padding:7px 10px;margin:-7px 0;cursor:pointer;border-radius:13px;background:transparent}.chat-head.profile-click:hover{background:var(--panel2)}.chat-head.profile-click>div:nth-child(2){text-align:right}.chat-head.profile-click b{font-size:16px}.chat-head.profile-click span{display:block;margin-top:2px}.profile-settings-card{padding:24px!important}.profile-settings-title{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--border)}.profile-settings-title h3{margin:0 0 4px!important;font-size:19px}.profile-settings-title span{font-size:10px;color:var(--muted)}.profile-large{width:54px;height:54px;border-radius:17px}.modal-card label{display:block;font-size:11px;color:#bfc3ce;margin:13px 0 7px}.modal-card input,.modal-card textarea{width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--border);background:#0b0e14;color:#fff;outline:0}.modal-card input:focus,.modal-card textarea:focus{border-color:var(--accent)}.modal-card textarea{min-height:95px;resize:vertical}.id-input-wrap{display:flex;direction:ltr;align-items:center;background:#0b0e14;border:1px solid var(--border);border-radius:11px;overflow:hidden}.id-input-wrap:focus-within{border-color:var(--accent)}.id-input-wrap span{padding-left:13px;color:var(--accent2);font-weight:700}.id-input-wrap input{border:0!important;border-radius:0!important;background:transparent!important;direction:ltr;text-align:left}.field-help{display:block;color:#72798a;font-size:10px;margin-top:6px;direction:rtl}.profile-settings-card .primary{margin-top:16px}.public-profile-card{padding:28px!important}.public-profile-head{text-align:center;padding:8px 0 22px}.profile-xl{width:88px;height:88px;border-radius:28px;font-size:30px;margin:0 auto 13px}.public-profile-head h2{margin:0;font-size:22px}.public-id{color:var(--accent2);font-size:12px;direction:ltr;margin-top:4px}.public-profile-section{border:1px solid var(--border);background:var(--panel2);border-radius:14px;padding:13px;text-align:right}.public-profile-section span{font-size:10px;color:var(--accent2)}.public-profile-section p{font-size:12px;color:var(--muted);line-height:1.8;margin:6px 0 0;white-space:pre-wrap}.unread-badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:grid;place-items:center;background:#35c979;color:#06150d;font-size:10px;font-weight:800;box-shadow:0 0 14px #35c97955}.chat-item{position:relative}.chat-item .chat-avatar{flex:0 0 auto}

.unread-separator{width:min(92%,520px);margin:18px auto 12px;display:flex;align-items:center;gap:10px;color:#8fa0b8;font-size:10px;font-weight:700;white-space:nowrap}.unread-separator::before,.unread-separator::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#35c97955)}.unread-separator::after{background:linear-gradient(90deg,#35c97955,transparent)}.unread-separator span{padding:5px 10px;border:1px solid #35c97944;background:#35c97912;color:#45d886;border-radius:999px}
/* Profile photo */
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;display:block;object-fit:cover}.profile-upload-avatar{position:relative;cursor:pointer}.profile-photo-actions{margin-right:auto;display:flex;align-items:center}.photo-btn{padding:9px 12px;border-radius:11px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-size:11px}.photo-btn:hover{border-color:var(--accent);color:var(--accent2)}
@media(max-width:800px){.profile-settings-title{align-items:flex-start}.profile-photo-actions{margin-top:4px}.photo-btn{white-space:nowrap}}

/* PWA install */
.pwa-install{padding:8px 11px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:10px;white-space:nowrap;cursor:pointer}.pwa-install:hover{border-color:var(--accent);color:var(--accent2)}
@media(max-width:800px){.pwa-install{font-size:9px;padding:7px 9px}}