@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;pointer-events:auto;padding:6px;background:#12151d;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px #000b;z-index:9999;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}}

/* Media messages */
.message-media{display:block;margin-top:5px;max-width:min(330px,72vw);overflow:hidden;border-radius:12px}.message-media img{display:block;max-width:100%;max-height:360px;object-fit:cover}.message-media video{display:block;width:100%;max-height:360px;background:#000}.audio-media audio{max-width:100%;display:block}.file-attachment{display:flex;align-items:center;gap:10px;margin-top:5px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#ffffff08;color:var(--text);text-decoration:none;min-width:210px;max-width:330px}.file-icon{font-size:24px}.file-attachment span:last-child{min-width:0}.file-attachment b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-attachment small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.upload-progress{position:fixed;z-index:1200;left:50%;bottom:calc(84px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);width:min(560px,calc(100vw - 28px));margin:0;padding:10px 14px;background:rgba(17,21,32,.97);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px #0008}.upload-progress-head{font-size:10px;color:var(--muted);margin-bottom:6px}.upload-progress-track{height:5px;background:#252b38;border-radius:99px;overflow:hidden}.upload-progress-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .1s}.media-send:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:800px){.message-media{max-width:78vw}.file-attachment{max-width:78vw}.upload-progress{bottom:calc(76px + env(safe-area-inset-bottom, 0px));width:calc(100vw - 24px);padding:9px 12px}.upload-progress-head{font-size:11px}}

/* Media picker + preview */
.media-picker,.media-preview{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:20;padding:18px;backdrop-filter:blur(5px)}
.media-picker-card,.media-preview-card{width:min(470px,100%);background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 25px 90px #0009}
.media-picker-head,.media-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.media-picker-head b,.media-preview-head b{font-size:15px}.media-picker-head button,.media-preview-head button{background:transparent;color:var(--muted);font-size:25px}
.media-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.media-picker-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:130px;padding:15px;background:var(--panel2);border:1px solid var(--border);border-radius:17px;color:var(--text);transition:.15s}.media-picker-grid button:hover{border-color:var(--accent);transform:translateY(-2px)}.media-picker-grid span{font-size:34px}.media-picker-grid b{font-size:13px}.media-picker-grid small{font-size:9px;color:var(--muted);text-align:center}
.media-preview-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:10px}.media-preview-item{display:flex;align-items:center;gap:10px;padding:9px;background:var(--panel2);border:1px solid var(--border);border-radius:13px}.media-preview-thumb{width:72px;height:58px;border-radius:9px;object-fit:cover;background:#080a0f;flex:0 0 auto}.media-preview-item audio{width:220px;max-width:55vw}.media-preview-name{min-width:0;flex:1}.media-preview-name b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-preview-name small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.media-preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.secondary-btn,.send-media-confirm{padding:10px 17px;border-radius:12px;font-weight:700}.secondary-btn{background:var(--panel2);border:1px solid var(--border);color:var(--text)}.send-media-confirm{background:var(--accent);color:#fff}.send-media-confirm:disabled{opacity:.55}
@media(max-width:800px){.media-picker,.media-preview{padding:12px}.media-picker-card,.media-preview-card{border-radius:18px;padding:14px}.media-picker-grid button{min-height:115px}.media-preview-list{max-height:52vh}.media-preview-item audio{width:180px}}

/* In-app image viewer: never opens a new browser tab */
.image-media{border:0;padding:0;background:transparent;cursor:zoom-in;text-align:initial;width:100%}.image-media:focus{outline:2px solid var(--accent);outline-offset:2px}.media-viewer{position:fixed;inset:0;background:#000d;z-index:80;display:grid;place-items:center;padding:24px;backdrop-filter:blur(10px)}.media-viewer-card{width:min(1100px,96vw);height:min(92vh,900px);background:#0d1017;border:1px solid var(--border);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 100px #000c}.media-viewer-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--border);direction:rtl}.media-viewer-head b{font-size:12px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-viewer-head button{background:transparent;color:var(--muted);font-size:28px}.media-viewer-image{width:100%;height:calc(100% - 52px);object-fit:contain;background:#050609}.media-viewer.hidden{display:none!important}
@media(max-width:800px){.media-viewer{padding:8px}.media-viewer-card{width:100%;height:92vh;border-radius:14px}}

/* Update 4 — Voice messages */
.voice-btn{transition:.15s}.voice-btn.recording{background:#e34d6f!important;color:#fff;box-shadow:0 0 0 5px #e34d6f22;animation:voicePulse 1s infinite}.voice-preview{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:25;padding:18px;backdrop-filter:blur(6px)}.voice-preview-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 25px 90px #0009}.voice-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.voice-preview-head b{font-size:15px}.voice-preview-head button{background:transparent;color:var(--muted);font-size:25px}.voice-preview-body{display:flex;align-items:center;gap:12px;padding:14px;background:var(--panel2);border:1px solid var(--border);border-radius:15px}.voice-record-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:var(--accent);font-size:21px}.voice-duration{font-variant-numeric:tabular-nums;font-size:12px;min-width:42px}.voice-preview-body audio{width:100%;min-width:0}.voice-preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.send-voice-confirm{padding:10px 17px;border-radius:12px;font-weight:700}.send-voice-confirm:disabled{opacity:.55}@keyframes voicePulse{50%{transform:scale(1.06)}}
@media(max-width:800px){.voice-preview{padding:12px}.voice-preview-card{border-radius:18px;padding:14px}.voice-preview-body{flex-wrap:wrap}.voice-preview-body audio{width:100%}}

.e2e-status{display:inline-block;margin-inline-start:8px;font-size:10px;color:#8ee7b2;opacity:.9}

/* Message reactions */
.message-menu{min-width:190px}
.reaction-quick{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:3px 2px 7px;border-bottom:1px solid var(--border);direction:ltr}
.reaction-quick button,.message-reaction-picker button{border:0;background:transparent;color:var(--text);border-radius:8px;cursor:pointer;font-size:20px;padding:5px;line-height:1}
.reaction-quick button:hover,.message-reaction-picker button:hover{background:#252b39}
.reaction-quick .more-reactions{font-size:19px}
.message-reaction-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px 2px;max-height:170px;overflow:auto;border-bottom:1px solid var(--border);direction:ltr}
.reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;direction:ltr;align-items:center}
.reaction-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #ffffff18;background:#171b25;color:var(--text);border-radius:999px;padding:4px 8px;font-size:13px;line-height:1.1;cursor:pointer;box-shadow:0 2px 8px #0004;transition:.14s}
.reaction-chip:hover{background:#252b39;transform:translateY(-1px)}
.reaction-chip.mine{border-color:#9b86ff;background:#2c2452;box-shadow:0 0 0 1px #7c5cff55,0 4px 14px #0005}
.reaction-emoji{font-size:15px;line-height:1}
.reaction-count{font-size:10px;font-weight:800;min-width:8px;text-align:center;color:#d9d2ff}
.reaction-check{font-size:10px;color:#b9aaff;font-weight:900;margin-left:1px}
@media(max-width:800px){.message-menu{min-width:205px}.reaction-quick button{font-size:21px}.message-reaction-picker{grid-template-columns:repeat(7,1fr);max-height:190px}}

/* Update 7 — Pinned message quick access */
.pinned-bar{margin:0 7% 8px;padding:9px 12px;display:flex;align-items:center;gap:10px;background:#171b25;border:1px solid #8b78ff55;border-right:3px solid var(--accent);border-radius:13px;cursor:pointer;box-shadow:0 8px 25px #0004;direction:rtl;transition:.15s;position:relative;z-index:3}.pinned-bar:hover{background:#1d2230;transform:translateY(-1px)}.pinned-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#2b2450;flex:0 0 auto}.pinned-copy{min-width:0;flex:1}.pinned-who{display:block;color:#b9aaff;font-size:10px}.pinned-preview{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.pinned-arrow{color:var(--muted);font-size:18px;transform:rotate(180deg)}.pinned-highlight{animation:pinnedFlash 1.4s ease;outline:2px solid #a18bff;outline-offset:3px}@keyframes pinnedFlash{0%,100%{box-shadow:0 0 0 transparent}25%{box-shadow:0 0 0 6px #8b78ff33,0 0 35px #8b78ff66}}
@media(max-width:800px){.pinned-bar{margin:0 12px 7px;padding:8px 10px}.pinned-preview{font-size:10px}}

/* Update 8 — professional unified search */
.search{position:relative}
.search input{padding-left:34px}
.search-clear{position:absolute;left:7px;width:28px;height:28px;border-radius:9px;background:#1d2230;color:var(--muted);font-size:18px;display:grid;place-items:center}
.search-tabs{display:flex;gap:5px;padding:5px;background:#0c0f15;border:1px solid var(--border);border-radius:12px;margin:0 0 7px;direction:rtl}
.search-tabs button{flex:1;padding:8px 6px;border-radius:9px;background:transparent;color:var(--muted);font-size:11px}
.search-tabs button.active{background:#27203f;color:#fff;box-shadow:0 4px 14px #0003}
.search-tabs button span{font-size:9px;opacity:.7;margin-right:3px}
.search-results-list{display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 270px);overflow:auto}
.search-results .result{position:relative}
.search-user-result,.search-message-result{direction:rtl}
.search-message-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#1b1f2b;display:grid;place-items:center;font-size:18px}
.search-message-result .result-info{flex:1;min-width:0}
.search-message-result .result-info b{font-size:12px}
.search-message-result .result-info small{direction:rtl;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-message-result .result-info p{margin:4px 0 0;color:#c3c7d1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:225px}
.search-message-result mark{background:#6d4ff566;color:#fff;border-radius:3px;padding:0 2px}
.search-result-arrow{color:#777f90;font-size:20px;line-height:1}
.search-loading,.search-empty,.search-hint{padding:18px 10px;text-align:center;color:var(--muted);font-size:11px;background:#0d1016;border:1px solid var(--border);border-radius:12px}
.search-loading{animation:searchPulse 1s ease-in-out infinite alternate}
@keyframes searchPulse{from{opacity:.55}to{opacity:1}}
.search-highlight{animation:searchFlash 1.8s ease;outline:2px solid #a78bfa;outline-offset:4px;border-radius:18px}
@keyframes searchFlash{0%,100%{box-shadow:0 0 0 transparent}25%{box-shadow:0 0 0 7px #8b78ff33,0 0 38px #8b78ff66}}
@media(max-width:800px){.search-results-list{max-height:42vh}.search-message-result .result-info p{max-width:180px}.search-tabs button{font-size:10px}}

/* Update 8.1: explicit tools menu and pinned controls */
.sidebar-tools{position:relative;display:flex;justify-content:flex-start;margin:2px 0 4px;z-index:8}.sidebar-menu-btn{border:1px solid var(--border);background:#151923;color:#c9c4ff}.sidebar-tools-menu{position:absolute;top:42px;right:0;min-width:210px;padding:7px;background:#151923;border:1px solid #39324f;border-radius:12px;box-shadow:0 15px 35px #0009;z-index:30}.sidebar-tools-menu button{width:100%;padding:12px;text-align:right;background:transparent;color:var(--text);border-radius:8px;font-size:12px}.sidebar-tools-menu button:hover{background:#29233e}.search:not(.hidden){display:flex}.pinned-unpin{flex:0 0 auto;background:#2a2032;border:1px solid #7658a5;color:#e7d8ff;border-radius:9px;padding:6px 8px;font-size:12px}.pinned-unpin:hover{background:#49305d}.pinned-arrow{flex:0 0 auto}
/* Update 8.2: scoped chat search and cleaner pinned bar */
.chat-search-toggle{flex:0 0 auto;border:1px solid var(--border);background:#151923;color:#c9c4ff;font-size:20px}
.chat-search-bar{display:flex;align-items:center;gap:8px;margin:8px 7%;padding:8px 10px;border:1px solid #39324f;background:#11141c;border-radius:12px;z-index:4}
.chat-search-bar input{flex:1;min-width:0;background:transparent;color:var(--text);border:0;outline:0;font-size:12px}
.chat-search-bar b{white-space:nowrap;color:var(--accent2);font-size:10px}
.chat-search-bar button{background:#202431;color:var(--text);border-radius:8px;width:30px;height:30px}
.chat-search-match{outline:1px solid #8b78ff55}
.search-user-count{font-size:11px;color:var(--muted);padding:9px 5px}
.pinned-bar{gap:10px}.pinned-arrow{margin-inline-start:auto}
@media(max-width:800px){.chat-search-bar{margin:7px 12px}.chat-search-bar b{font-size:9px}.chat-search-toggle{width:34px;height:34px}}

/* Update 8.3: hamburger opens an explicit message-search option; pinned bar keeps unpin, drops chevron */
.topbar{position:relative}
.chat-search-menu{position:relative;z-index:80;width:max-content;min-width:165px;max-width:calc(100% - 24px);margin:0 7% 8px auto;padding:6px;background:var(--panel,#171b25);border:1px solid var(--border,#303545);border-radius:11px;box-shadow:0 12px 30px #0008;direction:rtl}
.chat-search-menu button{width:100%;text-align:right;background:transparent;color:var(--text,#fff);padding:10px 12px;border-radius:8px;font-size:13px;cursor:pointer}
.chat-search-menu button:hover{background:#29233e}
.pinned-bar{cursor:pointer}
.pinned-unpin{position:relative;z-index:2;flex:0 0 auto;background:#2a2032;border:1px solid #7658a5;color:#e7d8ff;border-radius:9px;padding:6px 9px;font-size:12px;cursor:pointer}
.pinned-unpin:hover{background:#49305d}
.pinned-arrow{display:none!important}

@media(max-width:800px){.chat-search-menu{margin:0 12px 8px auto}}

.message-delete-choices{display:flex;flex-direction:column;gap:3px;margin-top:5px;padding-top:5px;border-top:1px solid var(--border)}.message-delete-choices button{width:100%;text-align:right}.message-delete-choices button:last-child:not(.hidden){color:#ff737d}.message-delete-choices button.hidden{display:none!important}


/* Update 9 bug fix: delete actions use a dedicated centered panel, never overflow the message menu */
.delete-message-panel{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:18px;background:#000b;backdrop-filter:blur(7px)}
.delete-message-panel.hidden{display:none!important}
.delete-message-card{width:min(430px,100%);padding:18px;background:var(--panel,#11141c);border:1px solid var(--border,#303543);border-radius:20px;box-shadow:0 28px 100px #000c;direction:rtl}
.delete-message-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;margin-bottom:12px;border-bottom:1px solid var(--border,#303543)}
.delete-message-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#44212b;font-size:22px;flex:0 0 auto}
.delete-message-head>div:nth-child(2){flex:1;min-width:0}.delete-message-head b{display:block;font-size:15px}.delete-message-head small{display:block;margin-top:4px;color:var(--muted,#858b9b);font-size:10px;line-height:1.7}.delete-message-head>button{background:transparent;color:var(--muted,#858b9b);font-size:26px;padding:0 5px}
.delete-message-options{display:flex;flex-direction:column;gap:8px}.delete-option{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:var(--panel2,#191d28);border:1px solid var(--border,#303543);border-radius:13px;color:var(--text,#fff);text-align:right;cursor:pointer}.delete-option>span:first-child{width:38px;height:38px;display:grid;place-items:center;background:#242938;border-radius:11px;font-size:18px;flex:0 0 auto}.delete-option>span:last-child{min-width:0}.delete-option b{display:block;font-size:12px}.delete-option small{display:block;margin-top:4px;color:var(--muted,#858b9b);font-size:10px}.delete-option:hover{border-color:#8370e8;background:#242039}.delete-everyone-option>span:first-child{background:#45232d}.delete-everyone-option:hover{border-color:#d75c70;background:#321d26}.delete-option.hidden{display:none!important}
@media(max-width:800px){.delete-message-panel{padding:13px}.delete-message-card{padding:15px;border-radius:18px}.delete-option{padding:11px}}

/* Update 10: peer typing/activity status */
#head-status.typing-status{color:#8bffbd!important;font-weight:700;animation:typingPulse 1.1s ease-in-out infinite alternate}
@keyframes typingPulse{from{opacity:.65}to{opacity:1}}

/* Update 12-13: presence and profile sharing */
.public-profile-status{margin:14px auto 8px;text-align:center;font-size:13px;color:var(--muted)}.profile-share-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}.profile-share-actions button{width:100%;min-height:42px}.profile-qr-wrap{margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:16px;background:#fff;color:#111827;display:flex;align-items:center;flex-direction:column;gap:10px}.profile-qr-wrap #profile-qr{min-width:192px;min-height:192px;display:flex;align-items:center;justify-content:center}.profile-qr-wrap #profile-qr img,.profile-qr-wrap #profile-qr canvas{max-width:100%;height:auto}.profile-qr-wrap small{color:#4b5563}.profile-qr-wrap .secondary-btn{color:#111827;border-color:#d1d5db;background:#f9fafb}.public-profile-status.online{color:#22c55e}@media(max-width:520px){.public-profile-card{max-height:88dvh;overflow:auto}.profile-share-actions{gap:8px}}

/* Profile QR compact layout fix */
.public-profile-card{width:min(370px,calc(100% - 24px))!important;padding:16px!important;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain}
.public-profile-head{padding:2px 0 10px}
.profile-xl{width:66px;height:66px;border-radius:22px;font-size:24px;margin:0 auto 8px}
.public-profile-head h2{font-size:19px}
.public-id{margin-top:2px}
.public-profile-status{margin:8px auto}
.public-profile-section{padding:9px 11px}
.public-profile-section p{margin-top:3px;line-height:1.55}
.profile-share-actions{margin-top:10px;gap:7px}
.profile-share-actions button{min-height:36px;padding:8px 10px}
.profile-qr-wrap{margin-top:9px;padding:7px;gap:5px;border-radius:10px;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.profile-qr-wrap #profile-qr{width:144px;height:144px;min-width:0;min-height:0}
.profile-qr-wrap #profile-qr img,.profile-qr-wrap #profile-qr canvas{display:block;width:144px!important;height:144px!important;max-width:100%}
.profile-qr-wrap small{font-size:10px}
.profile-qr-wrap .secondary-btn{min-height:30px;padding:5px 10px}
@media(max-width:520px){.public-profile-card{max-height:84dvh;padding:13px!important}.profile-xl{width:60px;height:60px}.profile-qr-wrap #profile-qr,.profile-qr-wrap #profile-qr img,.profile-qr-wrap #profile-qr canvas{width:128px!important;height:128px!important}}


/* Update 14: ephemeral peer-to-peer 1:1 voice calls */
.voice-call-modal{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:18px;background:rgba(3,5,10,.78);backdrop-filter:blur(12px)}
.voice-call-modal.hidden{display:none!important}
.voice-call-card{position:relative;width:min(390px,100%);padding:26px 22px 20px;border-radius:26px;border:1px solid #39334f;background:linear-gradient(160deg,#171724,#0e1119 70%);box-shadow:0 30px 100px #000b;text-align:center;color:var(--text,#fff)}
.voice-call-close{position:absolute;top:10px;left:13px;background:transparent;color:var(--muted,#8e94a5);font-size:27px}
.voice-call-avatar{width:82px;height:82px;display:grid;place-items:center;margin:5px auto 15px;border-radius:27px;background:linear-gradient(135deg,#8959ff,#d944a4);font-size:29px;font-weight:800;color:white;box-shadow:0 12px 35px #7953f444}
.voice-call-card h3{margin:0;font-size:20px}.voice-call-card p{margin:9px 0 14px;color:var(--muted,#9da3b3);font-size:13px;min-height:20px}.voice-call-timer{font-variant-numeric:tabular-nums;font-size:24px;font-weight:750;letter-spacing:1px;margin:12px 0 20px;color:#c9b9ff}
.voice-call-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.voice-call-actions button{border:1px solid var(--border,#303543);border-radius:13px;padding:11px 14px;font-size:12px;font-weight:750;background:#222432;color:#fff}.voice-call-actions .voice-call-accept{background:#1f9b65;border-color:#37c78a}.voice-call-actions .voice-call-end,.voice-call-actions .voice-call-reject{background:#a9324d;border-color:#d74b68}.voice-call-card>small{display:block;margin-top:18px;color:#858b9c;font-size:10px;line-height:1.7}
@media(max-width:520px){.voice-call-card{padding:24px 16px 18px;border-radius:23px}.voice-call-avatar{width:72px;height:72px;border-radius:24px}.voice-call-actions button{flex:1;min-width:115px}}

/* Video-call UI */
.video-call-modal{position:fixed;inset:0;z-index:10050;background:rgba(4,8,15,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}
.video-call-modal.hidden{display:none}
.video-call-card{position:relative;width:min(760px,100%);max-height:94vh;overflow:auto;background:var(--panel,#151b27);color:var(--text,#f5f7fb);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.45);text-align:center}
.video-call-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;font-size:26px;background:rgba(255,255,255,.1);color:inherit;cursor:pointer}
.video-call-card h3{margin:8px 38px 4px}.video-call-card p{margin:5px 0 12px;color:var(--muted,#aab3c4)}
.video-call-stage{position:relative;aspect-ratio:16/9;background:#080b11;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#video-call-remote-video{width:100%;height:100%;object-fit:contain;background:#080b11}
#video-call-local-video{position:absolute;right:12px;bottom:12px;width:clamp(90px,22%,170px);aspect-ratio:4/3;object-fit:cover;border:2px solid rgba(255,255,255,.8);border-radius:12px;background:#202633;transform:scaleX(-1)}
#video-call-placeholder{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.5);padding:7px 10px;border-radius:10px;font-size:12px;pointer-events:none}
.video-call-timer{font-variant-numeric:tabular-nums;font-size:17px;margin:12px}
.video-call-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:12px 0}
.video-call-actions button{border:0;border-radius:12px;padding:10px 14px;cursor:pointer;font:inherit}
.video-call-card small{display:block;color:var(--muted,#aab3c4);line-height:1.6;margin-top:8px}
@media(max-width:560px){.video-call-modal{padding:8px}.video-call-card{padding:15px 10px;border-radius:17px}.video-call-stage{aspect-ratio:3/4;max-height:55vh}.video-call-stage #video-call-remote-video{object-fit:cover}.video-call-actions button{flex:1 1 42%;font-size:13px;padding:10px 8px}#video-call-local-video{width:32%;right:8px;bottom:8px}}


/* Update 17 — keep media preview inside narrow mobile screens */
.media-picker-card,.media-preview-card{box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px)}
.media-preview-list,.media-preview-item,.media-preview-name{min-width:0;max-width:100%}
.media-preview-item{flex-wrap:wrap;overflow:hidden}
.media-preview-item audio{display:block;width:100%;max-width:100%;min-width:0;flex:1 1 100%}
.media-preview-name{flex:1 1 120px;overflow:hidden}
@media(max-width:800px){
  .media-picker,.media-preview{padding:12px;overflow-y:auto;place-items:center}
  .media-picker-card,.media-preview-card{width:100%;max-width:calc(100vw - 24px);padding:14px;border-radius:18px}
  .media-preview-list{width:100%;max-height:55vh;overflow-x:hidden;overflow-y:auto}
  .media-preview-item{width:100%;gap:8px}
  .media-preview-item audio{width:100%;max-width:100%;min-width:0}
  .media-preview-actions{position:sticky;bottom:0;background:var(--panel);padding-top:8px}
}


/* Update 18 — polished interaction, motion and responsive settings */
:root{scroll-behavior:smooth}
button,.chat-item,.me,.reaction-chip,.settings-action,.language-option{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .22s,border-color .22s,box-shadow .22s,color .2s,filter .2s}
button:hover,.chat-item:hover,.settings-action:hover,.language-option:hover{filter:brightness(1.12);transform:translateY(-1px)}
button:active,.chat-item:active,.settings-action:active,.language-option:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
button:disabled{opacity:.55;cursor:not-allowed;transform:none!important;filter:none!important}
.ui-ripple{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.34);transform:translate(-50%,-50%) scale(0);animation:uiRipple .58s ease-out forwards;z-index:5}
@keyframes uiRipple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes emojiPop{0%{transform:scale(.72) rotate(-8deg)}65%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.emoji-picker button,.message-reaction-picker button,.reaction-quick button{transition:transform .18s ease,filter .18s ease;transform-origin:center}
.emoji-picker button:hover,.message-reaction-picker button:hover,.reaction-quick button:hover{transform:translateY(-3px) scale(1.2);filter:drop-shadow(0 4px 8px #8b5cf655)}
.reaction-chip{animation:emojiPop .28s ease both}.reaction-emoji{display:inline-block}.reaction-chip:hover .reaction-emoji{animation:softFloat .6s ease infinite}
.modal:not(.hidden),.settings-modal:not(.hidden){animation:modalIn .22s ease-out}
.app-settings-card{width:min(540px,calc(100vw - 28px));max-height:min(88vh,800px);overflow:auto;padding:24px;border:1px solid #3c355d;background:linear-gradient(155deg,#171827f7,#0c1019f7);box-shadow:0 28px 100px #0009,0 0 45px #7c5cff18;border-radius:25px}
.settings-hero{display:flex;align-items:center;gap:14px;padding:3px 36px 18px 0}.settings-hero-icon{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#7c5cff,#16c9e8);box-shadow:0 8px 30px #7c5cff3b;font-size:25px}.settings-hero h2{margin:0;font-size:23px}.settings-hero p,.settings-section>p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
.settings-user-row{display:flex;align-items:center;gap:12px;padding:13px;margin-bottom:15px;background:#ffffff07;border:1px solid var(--border);border-radius:16px}.settings-user-row>div:nth-child(2){display:flex;flex-direction:column;gap:5px}.settings-user-row small{font-size:11px;color:var(--muted)}
.settings-section{padding:15px 0;border-top:1px solid #ffffff12}.settings-section h3{margin:0;font-size:15px}.settings-section>p{margin-bottom:12px}.language-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.language-option{display:flex;align-items:center;gap:9px;padding:12px;border-radius:13px;border:1px solid var(--border);background:#0c1019;color:var(--text);text-align:start}.language-option>span:first-child{font-size:20px}.language-check{margin-inline-start:auto;opacity:0;color:#5de4d5}.language-option.selected{border-color:var(--accent);background:linear-gradient(110deg,#7c5cff25,#16c9e814);box-shadow:0 0 0 1px #7c5cff22}.language-option.selected .language-check{opacity:1}
.settings-action{width:100%;display:flex;align-items:center;gap:12px;text-align:start;padding:12px;margin-top:8px;border:1px solid var(--border);border-radius:14px;background:#ffffff05;color:var(--text)}.settings-action>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#7c5cff1b;font-size:19px}.settings-action>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px}.settings-action b,.settings-toggle-row b{font-size:13px}.settings-action small,.settings-toggle-row small{font-size:11px;color:var(--muted);font-weight:400}.settings-arrow{font-size:25px;color:var(--accent2)}.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:9px;padding:12px;border-radius:14px;background:#ffffff05;border:1px solid var(--border)}.settings-toggle-row>span{display:flex;flex-direction:column;gap:4px}.settings-toggle-row input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px;border-top:1px solid #ffffff12;color:var(--muted);font-size:12px}.settings-footer>span{direction:ltr}
html[dir="ltr"] .sidebar{border-left:0;border-right:1px solid var(--border)}html[dir="ltr"] .profile-chevron{margin-left:auto;margin-right:0}html[dir="ltr"] .logout{margin-left:0;margin-right:2px}
.reduced-motion-ui *, .reduced-motion-ui *::before,.reduced-motion-ui *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
@media(max-width:700px){.app-settings-card{width:calc(100vw - 18px);max-height:calc(100dvh - 22px);padding:18px 15px;border-radius:21px}.settings-hero{padding-right:32px}.settings-hero h2{font-size:20px}.settings-hero-icon{width:46px;height:46px;flex-basis:46px;border-radius:15px}.language-options{grid-template-columns:1fr}.settings-action{padding:10px}.settings-section{padding:12px 0}.settings-user-row{padding:10px}}
@media(hover:none){button:hover,.chat-item:hover,.settings-action:hover,.language-option:hover{transform:none;filter:none}.emoji-picker button:active,.message-reaction-picker button:active{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* UI Redesign 27 — cohesive motion, polished controls and expressive emoji */
:root{--accent:#7857ff;--accent2:#a99aff;--glow:rgba(120,87,255,.28);--surface-glass:rgba(18,21,33,.88)}
body{background:radial-gradient(ellipse at 15% 0%,#211447 0,transparent 36%),radial-gradient(ellipse at 90% 90%,#101d43 0,transparent 32%),var(--bg);background-attachment:fixed;transition:background-color .3s,color .3s}
.sidebar,.topbar,.composer,.modal-card,.media-picker-card,.media-preview-card,.voice-call-card,.video-call-card{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.sidebar{background:linear-gradient(180deg,rgba(17,20,32,.97),rgba(12,14,22,.96));border-color:#8b75ff20;box-shadow:8px 0 35px #0002}
.chat-item,.result,.settings-action,.language-option,.profile-btn,.round,.send,.primary,.secondary-btn,.photo-btn,.voice-call-actions button,.video-call-actions button,.message-menu button,.reaction-chip,.emoji-picker button{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .22s,border-color .22s,box-shadow .22s,filter .22s}
button:hover{filter:brightness(1.09)}button:active{transform:scale(.965)}
.primary,.send{box-shadow:0 8px 24px var(--glow);background-image:linear-gradient(135deg,#8b6bff,#5938df 60%,#7356ff)}
.primary:hover,.send:hover{box-shadow:0 10px 30px #7757ff66;transform:translateY(-2px)}
.chat-item:hover,.result:hover,.settings-action:hover,.language-option:hover{transform:translateX(-3px);border-color:#8c73ff55}
.chat-item.active{background:linear-gradient(110deg,#4e35a72b,#25203b);box-shadow:inset 3px 0 #967dff}
.topbar{background:rgba(10,12,20,.84);border-bottom-color:#8170ff24}
.composer{border-color:#7770a444;box-shadow:0 12px 38px #0003,inset 0 1px #ffffff08;transition:border-color .2s,box-shadow .2s}
.composer:focus-within{border-color:#8e75ff;box-shadow:0 0 0 3px #8b5cf622,0 12px 40px #0004}
.bubble{animation:bubbleEnter .24s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 6px 22px #00012;transition:transform .2s,box-shadow .2s,filter .2s}
.bubble:hover{box-shadow:0 9px 27px #0003;filter:brightness(1.06)}
@keyframes bubbleEnter{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal:not(.hidden){animation:modalFade .18s ease both}.modal:not(.hidden) .modal-card{animation:modalRise .28s cubic-bezier(.2,.85,.25,1) both}
@keyframes modalFade{from{opacity:0}to{opacity:1}}@keyframes modalRise{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.ui-ripple{position:absolute;z-index:0;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.32);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:uiRipple .55s ease-out forwards}
.emoji-picker button:hover,.message-reaction-picker button:hover,.reaction-quick button:hover{animation:emojiPickerPop .28s ease-out;transform:scale(1.2);background:#7c5cff22}
@keyframes emojiPickerPop{50%{transform:scale(1.32) rotate(-7deg)}}
.emoji-only-bubble{padding:9px 13px;min-width:74px;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.emoji-only-bubble time{opacity:.45;font-size:8px}.emoji-only-text{display:flex;flex-wrap:wrap;align-items:center;gap:2px;line-height:1.2;white-space:normal}
.animated-emoji{display:inline-block;font-size:clamp(35px,4.5vw,51px);line-height:1.25;transform-origin:50% 75%;filter:drop-shadow(0 5px 8px #0003);will-change:transform}
.emoji-laugh{animation:emojiLaugh 1.05s ease-in-out infinite}.emoji-heart{animation:emojiHeart 1.05s ease-in-out infinite}.emoji-cry{animation:emojiCry 1.35s ease-in-out infinite}.emoji-fire{animation:emojiFire .8s ease-in-out infinite}.emoji-wow{animation:emojiWow 1.15s ease-in-out infinite}.emoji-pop{animation:emojiPop 1s cubic-bezier(.2,.8,.2,1) infinite}.emoji-float{animation:emojiFloat 2.1s ease-in-out infinite}
@keyframes emojiLaugh{0%,100%{transform:rotate(0) translateY(0) scale(1)}20%{transform:rotate(-9deg) translateY(-3px) scale(1.08)}40%{transform:rotate(8deg) translateY(1px) scale(1.12)}60%{transform:rotate(-6deg) translateY(-2px) scale(1.08)}80%{transform:rotate(5deg) translateY(0) scale(1.02)}}
@keyframes emojiHeart{0%,100%{transform:scale(1)}18%{transform:scale(1.18)}32%{transform:scale(.98)}48%{transform:scale(1.14)}65%{transform:scale(1)}}
@keyframes emojiCry{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(2px) rotate(-5deg)}50%{transform:translateY(-2px) rotate(4deg)}75%{transform:translateY(2px) rotate(-3deg)}}
@keyframes emojiFire{0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 4px #ff7b2b55)}50%{transform:scale(1.12) rotate(3deg);filter:drop-shadow(0 0 13px #ff5c2b99)}}
@keyframes emojiWow{0%,100%{transform:scale(1)}45%{transform:scale(1.18) translateY(-4px)}60%{transform:scale(.96)}}
@keyframes emojiPop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.12)}60%{transform:translateY(0) scale(.98)}}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.reaction-emoji{display:inline-block;transform-origin:center;transition:transform .2s}.reaction-chip:hover .reaction-emoji{animation:emojiPop .65s ease-in-out}.reaction-chip.mine .reaction-emoji{animation:emojiHeart .85s ease-in-out}
.settings-modal .app-settings-card{width:min(560px,calc(100vw - 28px));max-height:min(88dvh,820px);overflow:auto;border-color:#8c74ff55;background:linear-gradient(145deg,rgba(21,23,38,.98),rgba(12,15,24,.98));box-shadow:0 28px 100px #0009,0 0 45px #7554ff12}
.settings-section{border:1px solid #ffffff0b;border-radius:17px;padding:14px;margin-top:12px;background:linear-gradient(145deg,#ffffff04,#00000008)}
.settings-action{border:1px solid #ffffff0b!important;border-radius:13px!important;margin-top:7px}.settings-action:hover{background:#6d50ff16!important;box-shadow:0 8px 25px #0002}
.language-option.selected{border-color:#8e76ff!important;background:linear-gradient(110deg,#6c4df52c,#4f39a51c)!important;box-shadow:inset 0 0 0 1px #8b73ff25,0 6px 20px #6b4cff15}
.language-check{transition:transform .22s,opacity .22s}.language-option.selected .language-check{transform:scale(1.1);opacity:1}
:root[dir="ltr"] body{font-family:Inter,Vazirmatn,Arial,sans-serif}:root[dir="ltr"] .sidebar{border-left:0;border-right:1px solid var(--border)}:root[dir="ltr"] .chat-item,:root[dir="ltr"] .result,:root[dir="ltr"] .sidebar-tools-menu button,:root[dir="ltr"] .message-menu button{text-align:left}:root[dir="ltr"] .search span{padding-right:0;padding-left:12px}:root[dir="ltr"] .reply-bar>div{border-right:0;border-left:3px solid var(--accent);padding-right:0;padding-left:10px}:root[dir="ltr"] .reply-preview{border-right:0;border-left:3px solid var(--accent2);direction:ltr}:root[dir="ltr"] .reply-preview b,:root[dir="ltr"] .reply-preview span{text-align:left}:root[dir="ltr"] .field-help{text-align:left;direction:ltr}:root[dir="ltr"] .public-profile-section{text-align:left}:root[dir="ltr"] .close{left:auto;right:15px}
@media(max-width:800px){.sidebar{padding:14px}.topbar{padding:0 14px;height:66px}.messages{padding:16px 12px;gap:7px}.bubble{max-width:88%;font-size:13px}.composer{margin:0 10px max(10px,env(safe-area-inset-bottom));gap:6px;padding:6px;height:56px}.round,.send{width:39px;height:39px;flex:0 0 39px}.animated-emoji{font-size:42px}.settings-modal{padding:10px}.settings-modal .app-settings-card{width:100%;max-height:90dvh;padding:18px 14px;border-radius:22px}.settings-section{padding:11px}.settings-action{padding:11px!important}.chat-item:active,.settings-action:active,.primary:active,.send:active{transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
:root.reduced-motion-ui .animated-emoji,:root.reduced-motion-ui .bubble,:root.reduced-motion-ui .modal:not(.hidden),:root.reduced-motion-ui .modal:not(.hidden) .modal-card{animation:none!important}

/* UI Redesign 28: full interface polish (CSS only; no mockup/image assets) */
:root{--bg:#080b14;--panel:#101522;--panel2:#171e30;--border:#26314a;--text:#f4f7ff;--muted:#94a3bd;--accent:#6d5dfc;--accent2:#4dd7f2;--bubble:#172238;--telegram-blue:#3987ff}
body{background:var(--bg);letter-spacing:.005em}
.app{background:linear-gradient(135deg,#080b14 0%,#0b1020 58%,#0a0d17 100%)}
.sidebar{width:330px;min-width:300px;padding:16px 13px;background:rgba(13,18,31,.96);border-left:1px solid #29334b;backdrop-filter:blur(22px)}
.brand-icon,.empty-logo{background:linear-gradient(145deg,#4b9cff,#6555f5 65%,#9c5cff);box-shadow:0 7px 26px #4f67ff45;border-radius:16px}
.me{background:linear-gradient(125deg,#18243b,#131a2a);border-color:#2a3855;border-radius:18px;transition:transform .2s,border-color .2s,box-shadow .2s}
.me:hover{border-color:#647dff;box-shadow:0 9px 26px #435dff15;transform:translateY(-1px)}
.avatar{border-radius:50%;box-shadow:0 0 0 2px #6d7cff22;background:linear-gradient(135deg,#4a9eff,#7758f7 62%,#df58c8)}
.avatar.small{border-radius:50%}
.search{background:#0b1120;border-color:#2b3650;border-radius:22px;height:44px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:#6479ff;box-shadow:0 0 0 3px #5e70ff1c}
.chat-list{padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:#364364 transparent}
.chat-item{position:relative;padding:10px 9px;border:1px solid transparent;border-radius:16px;gap:10px;transition:background .18s,border-color .18s,transform .18s;min-height:68px}
.chat-item:hover{background:#1a2540;border-color:#283a61;transform:translateX(-2px)}
.chat-item.active{background:linear-gradient(110deg,#293f78,#242451 72%,#241c42);border-color:#596cff66;box-shadow:inset -3px 0 #6e7dff}
.chat-info b{font-size:13px;font-weight:700}.chat-info span{font-size:11px;line-height:1.55;color:#a5b2cc;max-width:100%}
.chat-item time{font-size:10px;color:#8493b3}
.section-title{font-size:12px;color:#a9b8d5;margin:10px 4px 7px}.section-title button{width:32px;height:32px;border-radius:50%;transition:transform .2s,background .2s}.section-title button:hover{transform:rotate(90deg);background:#27365b}
.side-bottom{padding-top:10px}.profile-btn{background:#171e31;color:#c9d4f0;border-color:#2a3755;border-radius:14px;transition:all .2s}.profile-btn:hover{background:#222d49;border-color:#6576ff;color:white;transform:translateY(-1px)}
.main{background:radial-gradient(ellipse at 50% 0%,#151a37 0%,#0a0e19 42%,#080b13 100%)}
.topbar{height:70px;flex-shrink:0;padding:0 24px;background:#0d1220e8;border-bottom:1px solid #26314a;backdrop-filter:blur(20px)}
.chat-head{border-radius:14px;padding:5px 8px;transition:background .2s}.chat-head:hover{background:#ffffff08}
.messages{padding:24px clamp(16px,6vw,90px);gap:10px;scrollbar-width:thin;scrollbar-color:#344263 transparent;overscroll-behavior:contain}
.bubble{max-width:min(68%,650px);padding:10px 14px 8px;border-radius:18px;background:linear-gradient(145deg,#19243a,#151e31);border:1px solid #293651;font-size:14px;line-height:1.75;box-shadow:0 3px 10px #0000000d;transition:transform .18s,filter .18s,box-shadow .18s}
.bubble:hover{filter:brightness(1.08);box-shadow:0 5px 20px #0002}
.bubble.mine{background:linear-gradient(135deg,#4d61d9 0%,#6448d7 55%,#713fd0 100%);border-color:#8975f3;border-bottom-left-radius:6px}
.bubble.theirs{border-bottom-right-radius:6px}
.bubble time{font-size:9px;opacity:.72;gap:5px;margin-top:4px}
.composer{margin:0 clamp(12px,5vw,70px) 16px;height:62px;border-radius:24px;background:#121a2a;border-color:#2c3a57;box-shadow:0 9px 35px #0002;transition:border-color .2s,box-shadow .2s;gap:7px}
.composer:focus-within{border-color:#6579ff;box-shadow:0 0 0 3px #6475ff19,0 10px 30px #0002}
.round,.send{border-radius:50%;transition:transform .18s,background .18s,box-shadow .18s;color:#d1dbf3}
.round:hover{background:#273653;color:#fff;transform:translateY(-2px)}
.send{background:linear-gradient(145deg,#5c8dff,#6652f7);box-shadow:0 5px 15px #6652f74d;color:white}
.send:hover{transform:scale(1.07) rotate(-5deg);box-shadow:0 8px 24px #6652f777}
button,.chat-item,.settings-action,.language-option{-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.96)}
.primary,.settings-action,.language-option,.reaction-chip,.message-menu button{transition:transform .17s,background .17s,border-color .17s,box-shadow .17s}
.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px #6548e955}
.emoji-picker{background:#111a2b;border-color:#2e3d5d;box-shadow:0 18px 55px #0008;backdrop-filter:blur(18px);border-radius:20px}
.emoji-picker button{min-width:32px;min-height:34px;transition:transform .18s,background .18s;transform-origin:center}
.emoji-picker button:hover{background:#263654;transform:scale(1.25)}
.emoji-picker button.emoji-selected{animation:emojiPickPop .48s cubic-bezier(.16,1.5,.4,1);background:#2a3b60}
.reactions{gap:5px}.reaction-chip{background:#182641;border:1px solid #344b73;border-radius:18px;padding:4px 9px;box-shadow:0 3px 10px #0002}.reaction-chip:hover{transform:translateY(-2px) scale(1.04)}.reaction-chip.mine{background:#293d78;border-color:#6b83ff}
.reaction-emoji{display:inline-block;transform-origin:center;animation:reactionIdle 2.6s ease-in-out infinite}
.reaction-chip:active .reaction-emoji{animation:emojiPickPop .45s ease-out}
.animated-emoji{font-size:clamp(38px,4.6vw,54px);filter:drop-shadow(0 5px 7px #0003)}
.emoji-laugh{animation:emojiLaughNew .95s ease-in-out infinite}.emoji-heart{animation:emojiHeartNew 1.05s ease-in-out infinite}.emoji-cry{animation:emojiCryNew 1.25s ease-in-out infinite}.emoji-fire{animation:emojiFireNew .8s ease-in-out infinite}.emoji-wow{animation:emojiWowNew 1.1s ease-in-out infinite}.emoji-pop{animation:emojiPopNew .9s cubic-bezier(.2,.8,.2,1) infinite}.emoji-float{animation:emojiFloatNew 2s ease-in-out infinite}
@keyframes emojiPickPop{0%{transform:scale(.65) rotate(-12deg)}55%{transform:scale(1.4) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes reactionIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1px) rotate(-4deg)}}
@keyframes emojiLaughNew{0%,100%{transform:rotate(0) scale(1)}18%{transform:rotate(-9deg) scale(1.08)}38%{transform:rotate(8deg) scale(1.12)}58%{transform:rotate(-7deg) scale(1.07)}78%{transform:rotate(5deg) scale(1.02)}}
@keyframes emojiHeartNew{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.18) rotate(-8deg)}45%{transform:scale(1.03) rotate(6deg)}65%{transform:scale(1.22) rotate(-4deg)}}
@keyframes emojiCryNew{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(2px) rotate(-4deg)}50%{transform:translateY(-1px) rotate(4deg)}75%{transform:translateY(2px) rotate(-2deg)}}
@keyframes emojiFireNew{0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 2px #ff8a25)}50%{transform:scale(1.12) rotate(3deg);filter:drop-shadow(0 0 9px #ff8a25)}}
@keyframes emojiWowNew{0%,100%{transform:scale(1)}35%{transform:scale(1.18) translateY(-3px)}65%{transform:scale(.97) translateY(1px)}}
@keyframes emojiPopNew{0%,100%{transform:scale(1)}35%{transform:scale(1.25)}65%{transform:scale(.92)}}
@keyframes emojiFloatNew{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.modal{backdrop-filter:blur(9px)}.modal-card,.app-settings-card,.media-preview-card,.voice-preview-card{box-shadow:0 28px 100px #0008;border-color:#2c3a58}
.settings-hero-icon{background:linear-gradient(145deg,#4b9cff,#6555f5);box-shadow:0 7px 25px #4f67ff38}
.toast{backdrop-filter:blur(14px);border:1px solid #35476b;box-shadow:0 12px 35px #0005}
@media(min-width:1200px){.sidebar{width:350px;min-width:330px}.messages{padding-left:clamp(70px,8vw,140px);padding-right:clamp(70px,8vw,140px)}}
@media(max-width:800px){.sidebar{width:min(350px,92vw);min-width:0;padding:13px;background:#0e1422f7}.topbar{height:62px;padding:0 10px}.messages{padding:14px 11px 18px;gap:8px}.bubble{max-width:88%;padding:9px 12px;font-size:13px}.composer{margin:0 9px max(9px,env(safe-area-inset-bottom));height:56px;border-radius:22px;padding:5px;gap:5px}.round,.send{width:40px;height:40px;flex:0 0 40px}.emoji-picker{right:9px;bottom:calc(68px + env(safe-area-inset-bottom));width:calc(100% - 18px);grid-template-columns:repeat(8,minmax(0,1fr));max-height:min(42dvh,310px)}.emoji-picker button{font-size:22px;min-width:0;padding:4px}.animated-emoji{font-size:42px}.chat-item{min-height:64px}.modal-card{max-height:calc(100dvh - 20px);overflow:auto}}
@media(prefers-reduced-motion:reduce){.animated-emoji,.reaction-emoji,.emoji-picker button.emoji-selected{animation:none!important}}
:root.reduced-motion-ui .animated-emoji,:root.reduced-motion-ui .reaction-emoji,:root.reduced-motion-ui .emoji-picker button.emoji-selected{animation:none!important}