@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazir.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
/* وزن‌های دیگه‌ی همین فونت (که فایل‌هاشون از قبل تو fonts/ بودن ولی هیچ‌جا رجیستر نشده بودن) رو به‌عنوان
   family های جدا (نه صرفاً font-weight) ثبت می‌کنیم تا مستقیم تو انتخاب‌گر فونتِ استوری قابل‌انتخاب باشن —
   کاملاً self-hosted، بدون هیچ وابستگی به CDN (که برای کاربرای ایرانی معمولاً غیرقابل‌اعتماده) */
@font-face { font-family: 'VazirThin'; src: url('fonts/Vazir-Thin.woff2') format('woff2'), url('fonts/Vazir-Thin.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'VazirLight'; src: url('fonts/Vazir-Light.woff2') format('woff2'), url('fonts/Vazir-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'VazirMedium'; src: url('fonts/Vazir-Medium.woff2') format('woff2'), url('fonts/Vazir-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'VazirBold'; src: url('fonts/Vazir-Bold.woff2') format('woff2'), url('fonts/Vazir-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
/* سه فونتِ فارسیِ دیگه (خوش‌نویسی/ظاهرِ کاملاً متفاوت با Vazir)، دانلود و self-host شده برای گزینه‌های
   بیشترِ فونتِ استوری — هر سه با لایسنسِ SIL Open Font License (رایگان و آزاد برای هر استفاده‌ای) */
@font-face { font-family: 'Sahel'; src: url('fonts/Sahel.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'SahelBold'; src: url('fonts/Sahel-Bold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Shabnam'; src: url('fonts/Shabnam.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'ShabnamBold'; src: url('fonts/Shabnam-Bold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Samim'; src: url('fonts/Samim.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'SamimBold'; src: url('fonts/Samim-Bold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
* { box-sizing: border-box; font-family: 'Vazirmatn', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root { 
    --bg: #f3f4f6; --sidebar: #ffffff; --chat-bg: #e5e7eb; 
    --text: #1f2937; --subtext: #6b7280;
    --my-msg: #3b82f6; --my-text: #ffffff;
    --other-msg: #ffffff; --other-text: #1f2937;
    --accent: #2563eb; --border: #e5e7eb; --accent-rgb: 37, 99, 235; 
}
[data-theme="dark"] { 
    --bg: #0f172a; --sidebar: #1e293b; --chat-bg: #0f172a; 
    --text: #f8fafc; --subtext: #94a3b8;
    --my-msg: #2563eb; --my-text: #ffffff;
    --other-msg: #334155; --other-text: #f8fafc;
    --accent: #3b82f6; --border: #334155; --accent-rgb: 59, 130, 246; 
    color-scheme: dark; 
}
/* اسکرول‌بار مدرن و یکپارچه برای تمام بخش‌ها */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

body { margin: 0; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; display: flex; overflow: hidden; width: 100vw; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, #msg-input, .msg-content-text, .code-block, .code-inline { -webkit-user-select: text !important; user-select: text !important; }

#splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.3s ease; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* اسپینرِ کوچیکِ inline که رنگش از متنِ اطرافش می‌گیره (currentColor) — جایگزینِ ایموجیِ ⏳ توی متنِ دکمه‌ها/برچسب‌های وضعیتِ بارگذاری */
.inline-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; vertical-align: -2px; animation: spin 0.8s linear infinite; opacity: 0.85; }

.sidebar { width: 320px; background: var(--sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; transition: 0.3s; height: 100%; overflow-x: hidden !important; position: relative; }
/* padding عمودی طوری حساب شده که ارتفاع کل این هدر (وقتی ردیف استوریِ فشرده جمع‌شده، یعنی حالت
   استراحت) دقیقاً ۶۰px بشه — همون ارتفاع ثابت .chat-header — تا خط پایینیِ این دو هدر رو چیدمان
   عریض/دسکتاپ (که سایدبار و چت‌اریا کنار هم دیده می‌شن) دقیقاً هم‌تراز باشن: ۶px + ۴۸px (ارتفاع ردیف
   دکمه‌ها) + ۶px = ۶۰px */
/* padding: چون این عنصر (برخلاف .chat-header که height:60px صریح داره و بردرش داخل همون ۶۰px حساب
   می‌شه) ارتفاعش رو خودش از پدینگ+محتوا می‌سازه، border-bottom روی همه‌ی این مجموع اضافه می‌شه، نه داخلش؛
   پس باید ۱px کمتر پدینگ بدیم: ۶ + ۴۸(ردیف دکمه‌ها) + ۵ + ۱(بردر) = ۶۰px، دقیقاً برابر .chat-header */
.sidebar-header { padding: 6px 15px 5px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--border); background: var(--sidebar); flex-shrink: 0; gap: 10px; transition: margin-top 0.35s cubic-bezier(0.1, 0.9, 0.2, 1); }
.group-list { flex: 1; overflow-y: auto; }
/* لایه‌ی پیش‌نمایشِ زنده‌ی تب مجاور حین سواپ — با مختصات واقعی صفحه (getBoundingClientRect) کنار
   #group-list جاگذاری می‌شه تا وابسته به ساختار DOM فعلیش (که کدهای دیگه‌ای مثل نوار خطای اتصال به
   parentNode ثابتش تکیه دارن) نباشه؛ حین درگ دقیقاً هم‌زمان با لیست فعلی جابه‌جا می‌شه */
.group-list-peek { position: fixed; z-index: 15; background: var(--sidebar); overflow-y: auto; }
.group-item { padding: 15px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; font-size: 15px; font-weight: 500;}
.group-item:hover { background: rgba(0,0,0,0.03); }
.group-item.active { background: var(--accent); color: #fff; }
.group-item.active .chat-preview, .group-item.active span { color: #fff !important; }

.chat-preview { font-size: 12px; color: var(--subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top:4px; display:block; width: 100%; }
.unread-badge { background: var(--accent); color: white; border-radius: 12px; padding: 2px 7px; font-size: 11px; margin-inline-start: auto; font-weight: bold; }
.group-item.active .unread-badge { background: #fff; color: var(--accent); }
.chat-avatar { border-radius: 50%; object-fit: cover; background: #cbd5e1; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; flex-shrink:0;}

/* تنظیمات پس‌زمینه یکپارچه برای چت */
.chat-area { 
    flex: 1; display: flex; flex-direction: column; position: relative; transition: background-image 0.3s ease-in-out, 0.3s; height: 100%; min-width: 0; 
    background-size: cover !important; 
    background-position: center center !important; 
    background-attachment: fixed !important; 
    background-repeat: no-repeat !important; 
    background-image: url('bg/pcday.webp') !important;
}
[data-theme="dark"] .chat-area { background-image: url('bg/pcdark.webp') !important; }
.chat-bg { display: none !important; }

.chat-header { height: 60px !important; padding: 0 20px !important; box-sizing: border-box !important; background: var(--sidebar); border-bottom: 1px solid var(--border); font-weight: bold; z-index: 100; display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 16px; transition: margin-top 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);}
.back-btn { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text); padding: 5px; align-items: center; justify-content: center; }
.back-btn .story-icon { width: 22px; height: 22px; }

#pinned-bar { background: var(--sidebar); padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 13px; z-index: 1; border-right: 4px solid var(--accent); display: none; color: var(--text); flex-shrink: 0; cursor: pointer; transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 45px; line-height: 1.5;}

.messages { position: relative; flex: 1; overflow-y: auto; padding: 0 20px 85px 20px; display: flex; flex-direction: column; gap: 12px; z-index: 1; box-sizing: border-box; }
/* توجه: این خط جداکننده دیگه sticky نیست و به هدر نمی‌چسبه — فقط یک‌بار سرجاش
   (بالای اولین پیام نخونده) گذاشته می‌شه و ثابت می‌مونه، مثل یه پیام معمولی تو لیست */
.unread-divider {
    position: relative;
    z-index: 20;
    align-self: stretch;
    width: calc(100% + 30px);
    margin: 0 -10px 8px -20px;
    box-sizing: border-box;
    text-align: center;
    padding: 9px 14px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    opacity: 1;
    animation: unread-divider-pop 0.22s ease-out both;
}
[data-theme="dark"] .unread-divider {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
.unread-divider::before {
    content: '⏳';
    display: inline-block;
    margin-right: 6px;
    opacity: 0.8;
    transform: scale(0.95);
}
@keyframes unread-divider-pop {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
body.has-custom-bg .unread-divider {
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-theme="dark"] body.has-custom-bg .unread-divider {
    background: rgba(15,23,42,0.36);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}
.message { max-width: 80%; min-width: 120px; padding: 10px 14px 6px 14px; border-radius: 16px; position: relative; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 14px; transition: background-color 0.5s ease; border: none; }
.msg-me { background: var(--my-msg); color: var(--my-text); align-self: flex-start; border-bottom-right-radius: 2px; }
.msg-other { background: var(--other-msg); color: var(--other-text); align-self: flex-end; border-bottom-left-radius: 2px; }

.message.has-media { padding: 6px; padding-bottom: 8px; }
.message.has-media img, .message.has-media video { border-radius: 12px; width: 100%; display: block; margin: 0 auto 4px auto; }
.message.has-media .msg-header { margin-bottom: 4px; padding: 0 4px; }

.custom-voice-player { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.05); padding: 5px 10px; border-radius: 25px; margin: 5px 0; direction: ltr; min-width: 220px;}
.msg-me .custom-voice-player { background: rgba(255,255,255,0.2); }
.voice-play-btn { background: var(--accent); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: 0.2s; flex-shrink: 0;}
.msg-me .voice-play-btn { background: #fff; color: var(--accent); }
.voice-play-btn:hover { transform: scale(1.05); }
.voice-track { flex: 1; height: 6px; background: rgba(0,0,0,0.15); border-radius: 3px; position: relative; cursor: pointer; display: flex; align-items: center;}
.msg-me .voice-track { background: rgba(255,255,255,0.3); }
.voice-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 3px; width: 0%; pointer-events: none; transition: width 0.1s linear;}
.msg-me .voice-fill { background: #fff; }
.voice-time { font-size: 11px; font-family: monospace; font-weight: bold; opacity: 0.8; min-width: 35px; text-align: center;}
.voice-speed-btn { background: rgba(0,0,0,0.1); border: none; border-radius: 10px; padding: 2px 6px; font-size: 11px; font-weight: bold; cursor: pointer; color: inherit; transition: 0.2s;}
.msg-me .voice-speed-btn { background: rgba(255,255,255,0.25); }

.msg-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.msg-name { font-size: 13px; color: var(--accent); font-weight: 700; cursor: pointer; opacity: 0.9; display:flex; align-items:center; gap:5px;}
.msg-me .msg-name { color: #e0f2fe; }

.msg-content-text { display: block; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.msg-content-text a { text-decoration: underline; font-weight: 600; cursor: pointer; word-break: break-word; }
.msg-me .msg-content-text a { color: #ffffff !important; }
.msg-other .msg-content-text a { color: var(--accent) !important; }

/* استایل‌های ادغام شده برای نقل قول، کد و اسپویلر */
.blockquote, div#msg-input .blockquote {
    display: block !important;
    border-right: 3px solid var(--accent) !important;
    background: rgba(var(--accent-rgb), 0.1) !important;
    margin: 8px 0 !important;
    padding: 12px 10px 8px 10px !important;
    border-radius: 8px !important;
    position: relative !important;
    font-style: italic;
    line-height: 1.6;
    word-break: break-word;
    color: inherit;
}
.blockquote::before, div#msg-input .blockquote::before {
    content: '❞ نقل قول';
    position: absolute;
    top: 2px;
    right: 10px;
    font-size: 9px;
    font-weight: bold;
    opacity: 0.5;
    font-style: normal;
    color: var(--text);
    letter-spacing: 0.5px;
}
[data-theme="dark"] .blockquote, [data-theme="dark"] div#msg-input .blockquote { background: rgba(255,255,255,0.05) !important; }

.code-inline { padding:2px 5px; border-radius:4px; font-family:monospace; cursor:pointer; transition:0.2s; font-size:13px; direction: ltr; display: inline-block; word-break: break-word; white-space: pre-wrap; max-width: 100%; vertical-align: middle;}
.msg-me .code-inline { background: rgba(255,255,255,0.25) !important; color: #ffffff !important; }
.msg-other .code-inline { background: rgba(0,0,0,0.05) !important; color: #ef4444 !important; }

.code-block, div#msg-input .code-block {
    display: block !important;
    background: rgba(0,0,0,0.1) !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-family: monospace !important;
    font-size: 13px !important;
    margin: 5px 0 !important;
    text-align: left !important;
    direction: ltr !important;
    cursor: pointer;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: inherit;
}
[data-theme="dark"] .code-block, [data-theme="dark"] div#msg-input .code-block { background: rgba(255,255,255,0.1) !important; }
.msg-other .code-block { background:#1e293b !important; color:#38bdf8 !important; }

.spoiler, div#msg-input .spoiler {
    background: #4b5563 !important;
    color: transparent !important;
    border-radius: 4px !important;
    padding: 0 6px !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    user-select: none;
}
.spoiler.revealed, div#msg-input .spoiler.revealed { background: rgba(0,0,0,0.1) !important; color: inherit !important; }
[data-theme="dark"] .spoiler, [data-theme="dark"] div#msg-input .spoiler { background: rgba(255,255,255,0.5) !important; color: rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .spoiler.revealed, [data-theme="dark"] div#msg-input .spoiler.revealed { background: rgba(255,255,255,0.1) !important; color: inherit !important; }

.more-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: inherit; opacity: 0; visibility: hidden; transition: 0.2s; padding: 0 5px; line-height: 0.8; font-weight: bold; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; }
.message:hover .more-btn { opacity: 0.8; visibility: visible; }

.reply-box { font-size: 12px; padding: 6px 10px; margin-bottom: 8px; border-radius: 6px; cursor: pointer; transition: 0.2s; border-right: 3px solid currentColor; background: rgba(0,0,0,0.05); }
.msg-me .reply-box { background: rgba(255,255,255,0.2); border-color: #ffffff; color: #ffffff; }
.msg-other .reply-box { border-color: var(--accent); color: var(--text); }

.edited-tag { font-size: 11px; opacity: 0.6; font-style: italic; margin-inline-start: 5px; }
.msg-meta { font-size: 11px; opacity: 0.7; text-align: left; margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.msg-me .msg-meta { color: #e0f2fe; }
.msg-other .msg-meta { color: var(--subtext); }
.msg-ticks { font-size: 13px; margin-inline-start: 2px; letter-spacing: -2px; }
.tick-read { color: #38bdf8; text-shadow: 0 0 1px rgba(0,0,0,0.2); }

#menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); z-index: 9999; animation: fadeIn 0.2s; }
#context-menu, #editor-menu { display: none; position: fixed; background: var(--sidebar); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 10001; flex-direction: column; min-width: 180px; overflow: hidden; animation: popInMenu 0.2s ease-out forwards; padding: 5px 0;}
#context-menu button, #editor-menu button { padding: 12px 15px; text-align: start; background: none; border: none; color: var(--text); cursor: pointer; font-family: inherit; font-size: 14px; transition: 0.2s; display:flex; align-items:center; gap:8px; outline:none; -webkit-tap-highlight-color: transparent;}
#context-menu button:hover, #editor-menu button:hover { background: var(--chat-bg); color: var(--accent); padding-inline-end: 20px; font-weight: bold; }

@keyframes pulseRec { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
.recording-pulse { animation: pulseRec 1.2s infinite ease-in-out; }

.input-container { background: var(--sidebar); padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; z-index: 100; border-top: 1px solid var(--border); flex-shrink: 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.02); transition: 0.3s; position:relative;}
#reply-indicator { display: none; font-size: 13px; margin-bottom: 10px; padding: 8px 12px; background: var(--chat-bg); border-radius: 8px; cursor: pointer; border-right: 4px solid var(--accent); overflow:hidden;}
.input-row { display: flex; gap: 10px; align-items: flex-end; width:100%;}

#msg-input { flex: 1; border-radius: 20px; padding: 12px 20px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; font-size: 15px; transition: border-color 0.2s; resize: none; overflow-y: auto; max-height: 120px; min-height: 48px; line-height: 1.5; font-family: inherit; -webkit-touch-callout: none; cursor: text; word-break: break-word; }
#msg-input:focus { border-color: var(--accent); }
#msg-input:empty:before { content: attr(data-placeholder); color: var(--subtext); pointer-events: none; display: block; }
#msg-input b, #msg-input strong { font-weight: bold; color: var(--accent); }
#msg-input u { text-decoration: underline; text-underline-offset: 4px; }
#msg-input code { background: rgba(0,0,0,0.1); padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 13px; }
[data-theme="dark"] #msg-input code { background: rgba(255,255,255,0.1); }

.btn { background: var(--accent); color: white; border: none; padding: 12px 20px; border-radius: 25px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); height: 48px;}
.btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none;}
.btn-red { background: #ef4444 !important; color: white !important; }

/* line-height:1 عمداً اضافه شده: بدون این، باکس خطِ ایموجی (که معمولاً ارتفاعش حدود 1.2 برابر فونته و
   descent فونت رنگی ایموجی معمولاً نامتقارنه) با باکس خطِ آیکون‌های خالص CSS (مثل نقطه‌های دکمه‌ی منو)
   فرق می‌کنه؛ حتی با align-items:center یکسان، همین نامتقارنی باعث می‌شد ایموجی‌ها چند پیکسل پایین‌تر
   از آیکون‌های CSS به‌نظر برسن با اینکه از نظر ساختاری هر دو وسط‌چین بودن */
.icon-btn { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--subtext); padding: 5px; transition: 0.2s; height: 48px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color: transparent;}
.icon-btn .story-icon { width: 23px; height: 23px; }
.icon-btn:hover { color: var(--accent); transform: scale(1.1);}

.channel-disabled-msg { text-align: center; color: var(--subtext); font-size: 13px; padding: 10px; font-weight: bold;}
#load-older-indicator { text-align: center; padding: 10px 12px; font-size: 13px; color: var(--subtext); display: none; border-radius: 14px; background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); transition: opacity 0.2s ease, transform 0.2s ease; margin: 8px 12px; flex-direction: column; gap: 8px; }
#load-older-indicator.visible { display: inline-flex; opacity: 1; transform: translateY(-3px); align-items: center; justify-content: center; gap: 8px; }
#load-older-indicator.visible::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; }
#load-older-indicator.error { display: flex; opacity: 1; color: #ef4444; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); transform: none; }
#load-older-indicator.error::before { display: none; }
#load-older-indicator .load-error-retry { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
#load-older-indicator .load-error-details { font-size: 11px; color: var(--subtext); text-align: start; width: 100%; }
#load-older-indicator .load-error-details pre { white-space: pre-wrap; word-break: break-word; background: var(--chat-bg); padding: 8px; border-radius: 8px; margin-top: 6px; max-height: 120px; overflow-y: auto; direction: ltr; text-align: left; font-size: 10px; }
.message.msg-broken { opacity: 0.85; border: 1px dashed rgba(239,68,68,0.35); border-radius: 12px; padding: 4px; }

.jump-loading-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: var(--sidebar); padding: 24px 36px; border-radius: 22px; box-shadow: 0 20px 45px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06); z-index: 1000; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--text); font-weight: bold; font-size: 14px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; animation: jumpLoadingIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.jump-loading-overlay.jump-loading-exit { animation: jumpLoadingOut 0.2s ease forwards !important; }
.jump-loading-spinner { width: 34px; height: 34px; border: 4px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes jumpLoadingIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes jumpLoadingOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }

#scroll-to-bottom-btn { position: fixed; bottom: 85px; left: 20px; background: var(--accent); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 20px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 100; transition: bottom 0.2s ease, transform 0.2s ease; }
#scroll-to-bottom-btn:hover { transform: scale(1.1); }

#lightbox { display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.95); z-index:999999; flex-direction:column; justify-content:center; align-items:center; }
#lightbox .lightbox-wrapper { width:100%; height:100%; display:flex; justify-content:center; align-items:center; overflow:auto; }
#lightbox img, #lightbox video { max-width:100%; max-height:100%; object-fit:contain; transition: transform 0.2s ease; }

#drag-overlay { display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(37,99,235,0.85); z-index:9999999; justify-content:center; align-items:center; color:#fff; font-size:28px; font-weight:bold; border: 8px dashed rgba(255,255,255,0.6); box-sizing:border-box; pointer-events:none; }

#toast-container { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); z-index: 999999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; align-items: center; width:100%;}
.toast-msg { background: rgba(0,0,0,0.85); color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.2); animation: popUp 0.3s ease-out; transition: opacity 0.3s; max-width:90%; text-align:center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.toast-msg .story-icon-sm { flex-shrink: 0; }
.toast-msg.toast-error { background: rgba(185,28,28,0.95); }

#in-app-toast { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: rgba(30, 41, 59, 0.95); color: #fff; backdrop-filter: blur(10px); padding: 12px 15px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 12px; z-index: 9999999; transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 90%; max-width: 400px; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); max-height: 70px; overflow: hidden; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal { 
    display: none; position: fixed; top:0; left:0; width:100%; height:100%; 
    background: rgba(0,0,0,0.6); 
    -webkit-backdrop-filter: blur(4px); 
    backdrop-filter: blur(4px); 
    z-index: 9999; justify-content: center; align-items: center; animation: fadeIn 0.2s ease-out; 
}
.modal-content, #auth-box { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; background: var(--bg); padding: 30px; border-radius: 20px; width: 90%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2);}
.modal input[type="text"], .modal textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--sidebar); color: var(--text); outline: none; transition: 0.2s;}
.close-x { position: absolute; top: 15px; left: 15px; font-size: 28px; color: var(--subtext); background: none; border: none; cursor: pointer; line-height: 1; transition: 0.2s; }

.report-reason-item { padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; text-align: right; cursor: pointer; font-size: 13px; color: var(--text); background: var(--sidebar); transition: 0.2s; }
.report-reason-item:hover { border-color: var(--accent); }
.report-reason-item.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-weight: bold; }

@media (max-width: 768px) {
    .sidebar { width: 100%; } .chat-area { display: none; width: 100%; }
    body.chat-active .sidebar { display: none; } body.chat-active .chat-area { display: flex; }
    .back-btn { display: flex; } .message { max-width: 90%; }
    .more-btn { opacity: 0.4; visibility: visible; font-size: 26px; padding: 5px 10px; }
    #emoji-btn { display: none !important; }
    #global-audio-bar { top: 0; }
    .chat-header { flex-direction: row-reverse !important; }
    #chat-header-avatar { margin-right: 10px !important; margin-left: 0 !important; }
    #chat-title { margin-right: auto !important; margin-left: 0 !important; text-align: left !important; }
}

@keyframes slideInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.multi-bar-anim { animation: slideInDown 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
@keyframes slideOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.multi-bar-exit { animation: slideOutUp 0.2s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }

body.selection-mode-active .message * { pointer-events: none !important; user-select: none !important; }
body.selection-mode-active .message { pointer-events: auto !important; cursor: pointer !important; }
body.selection-mode-active .custom-voice-player button, body.selection-mode-active video { opacity: 0.5; }

.audio-bubble { border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s; }
.audio-bubble:hover { transform: translateY(-2px); }

.playing-eq { display: flex; gap: 3px; align-items: flex-end; height: 16px; margin-left: auto; }
.playing-eq span { width: 3px; background: #fff; border-radius: 2px; animation: eqAnim 0.5s infinite alternate ease-in-out; }
.playing-eq span:nth-child(2) { animation-delay: 0.2s; }
.playing-eq span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eqAnim { 0% { height: 4px; } 100% { height: 16px; } }

.track-info-container { overflow: hidden; max-width: 150px; line-height: 1.3; }
.track-title { font-size: 13px; font-weight: bold; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loader-spinner { border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }

#global-audio-bar { opacity: 0; transition: transform 0.35s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.3s ease; }
.global-audio-btn { display: flex; align-items: center; justify-content: center; }
.global-audio-btn .story-icon { width: 18px; height: 18px; }
#global-audio-bar.player-visible { transform: translateY(0) !important; opacity: 1; }

@media (min-width: 769px) {
    #global-audio-bar { position: absolute; bottom: 0; top: auto; right: 0; left: auto; width: 320px; z-index: 100; border-top: 1px solid var(--border); border-bottom: none; background: rgba(255,255,255,0.85); backdrop-filter: blur(15px); cursor: pointer; display: none; align-items: center; padding: 10px 15px; height: 60px; direction: ltr; transform: translateY(100%); }
    [data-theme="dark"] #global-audio-bar { background: rgba(30, 41, 59, 0.85); }
    .sidebar { position: relative; padding-bottom: 0; transition: padding-bottom 0.35s; overflow: hidden; } 
    .sidebar.has-player { padding-bottom: 60px; }
}

@media (max-width: 768px) {
    #global-audio-bar { position: fixed; top: 0; bottom: auto; left: 0; width: 100%; z-index: 10000; background: rgba(255,255,255,0.95); backdrop-filter: blur(15px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-bottom: 1px solid var(--border); border-top: none; cursor: pointer; display: none; align-items: center; padding: 10px 15px; height: 60px; direction: ltr; transform: translateY(-100%); }
    [data-theme="dark"] #global-audio-bar { background: rgba(30, 41, 59, 0.95); }
    body.chat-active .chat-area.has-player .chat-header { margin-top: 60px; }
    .sidebar.has-player .sidebar-header { margin-top: 60px; }
}

#fs-player-modal { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 999999; flex-direction: column; background: var(--bg); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    will-change: transform; overflow: hidden; 
}
#fs-player-modal.active { transform: translateY(0) !important; }
.fs-minimize-btn { width: 42px; height: 42px; background: rgba(0,0,0,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; color: white; cursor: pointer; transition: 0.2s; backdrop-filter: blur(5px); }
.fs-minimize-btn:hover { background: rgba(0,0,0,0.5); }
.fs-minimize-btn svg { transition: transform 0.3s; width: 24px; height: 24px; }

@media (max-width: 768px) { #fs-player-modal { transform: translateY(-100%); } .fs-minimize-btn svg { transform: rotate(180deg); } }
@media (min-width: 769px) { #fs-player-modal { transform: translateY(100%); } .fs-minimize-btn svg { transform: rotate(0deg); } }

.fs-bg-blur { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; filter: blur(60px) brightness(0.6); z-index: 0; background-size: cover; background-position: center; transition: background 0.5s; background-color: #3b82f6;}
.fs-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 20px; align-items: center; justify-content: center; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.fs-cover { width: 80vw; max-width: 320px; height: 80vw; max-height: 320px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); object-fit: cover; margin-bottom: 40px; transition: transform 0.3s; }
.fs-cover.playing { animation: pulseCover 3s infinite alternate ease-in-out; }
@keyframes pulseCover { 0% { transform: scale(1); box-shadow: 0 20px 50px rgba(0,0,0,0.4); } 100% { transform: scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.6); } }

.fs-controls { display: flex; align-items: center; gap: 25px; margin-top: 30px; direction: ltr;}
.fs-btn { background: none; border: none; color: white; font-size: 28px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; }
.fs-btn .story-icon { width: 26px; height: 26px; }
.fs-btn:hover { background: rgba(255,255,255,0.1); }
.fs-play-btn { background: white; color: black; width: 70px; height: 70px; font-size: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.fs-play-btn .story-icon { width: 32px; height: 32px; }
.fs-play-btn:hover { background: white; transform: scale(1.05); }
.fs-play-btn .loader-spinner { border: 3px solid rgba(0,0,0,0.2); border-top: 3px solid #000; width: 30px; height: 30px; }

.modern-spinner { width: 35px; height: 35px; border: 3px solid rgba(59, 130, 246, 0.2); border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 15px auto; }
.chat-loading-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: var(--subtext); font-size: 13px; font-weight: bold; }

#attachment-menu { position: absolute !important; bottom: calc(100% + 10px) !important; left: 20px !important; right: auto !important; transform-origin: bottom left; animation: popUpAttachment 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; display:none; background:var(--sidebar); border:1px solid var(--border); border-radius:12px; padding:5px; box-shadow:0 5px 20px rgba(0,0,0,0.15); z-index:10002; flex-direction:column; gap:5px; width:160px;}
#attachment-menu button { background:none; border:none; padding:10px; text-align:start; font-family:inherit; color:var(--text); cursor:pointer; border-radius:8px; display:flex; align-items:center; gap:10px; font-size:14px; transition:0.2s;}
#attachment-menu button:hover { background:var(--chat-bg); color:var(--accent);}
#attachment-menu button .story-icon { width: 17px; height: 17px; }

@keyframes popUpAttachment { 0% { opacity: 0; transform: scale(0.8) translateY(15px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
/* بستنِ انیمیشنی‌ِ منوهای پاپ‌آپ؛ specificity باید از خودِ #id بیشتر باشه چون هر دو !important هستن */
#attachment-menu.menu-exiting, #emoji-picker.menu-exiting { animation: popOutMenu 0.2s ease-in forwards !important; }

.modal.is-exiting .modal-content, .modal.is-exiting #auth-box { animation: popOut 0.2s ease-in forwards !important; }
.modal.is-exiting { animation: fadeOutBg 0.2s ease-in forwards !important; }
.menu-exiting { animation: popOutMenu 0.2s ease-in forwards !important; }

@keyframes popIn { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes popOut { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.8) translateY(20px); } }
@keyframes popInMenu { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes popOutMenu { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }
@keyframes fadeOutBg { 0% { background: rgba(0,0,0,0.5); } 100% { background: rgba(0,0,0,0); } }

#emoji-picker, .emoji-picker, .emoji-mart { left: 10px !important; right: auto !important; transform-origin: bottom left !important; animation: popInEmoji 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; z-index: 10002; }
@keyframes popInEmoji { 0% { opacity: 0; transform: scale(0.5) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

#folder-tabs { position: relative !important; display: flex; overflow-x: auto; white-space: nowrap; padding: 8px 5px; gap: 4px; scrollbar-width: none; z-index: 1; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }
[data-theme="dark"] #folder-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(15, 23, 42, 0.55) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
#folder-tabs::-webkit-scrollbar { display: none; }
.folder-tab { position: relative; z-index: 2; background: transparent !important; border: none; color: var(--subtext); font-size: 13px; font-weight: bold; cursor: pointer; padding: 6px 12px; border-radius: 18px; transition: color 0.3s ease; flex-shrink: 0; }
.folder-tab.active { color: #fff !important; background: transparent !important; }
#tab-indicator { position: absolute; height: 30px; background: var(--accent); border-radius: 15px; top: 9px; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease; z-index: 1; pointer-events: none; }

.forward-modal-content { max-width: 380px; padding: 22px; text-align: initial; }
.fwd-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fwd-modal-header h3 { margin: 0; font-size: 16px; flex: 1; text-align: center; }
.fwd-icon-btn { background: none; border: none; font-size: 20px; color: var(--subtext); cursor: pointer; padding: 0; line-height: 1; border-radius: 50%; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.fwd-icon-btn .story-icon { width: 18px; height: 18px; }
.fwd-icon-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.fwd-icon-btn:focus { outline: none; }
.forward-search-input { width: 100%; padding: 8px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--chat-bg); color: var(--text); outline: none; font-family: inherit; font-size: 13px; margin-bottom: 10px; box-sizing: border-box; }
.fwd-folder-tabs { display: flex; overflow-x: auto; white-space: nowrap; gap: 6px; margin-bottom: 12px; scrollbar-width: none; }
.fwd-folder-tabs::-webkit-scrollbar { display: none; }
.fwd-folder-tab { background: var(--chat-bg); border: 1px solid var(--border); color: var(--subtext); font-size: 12px; font-weight: bold; cursor: pointer; padding: 6px 14px; border-radius: 16px; transition: 0.2s; flex-shrink: 0; }
.fwd-folder-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.forward-list-scroll { max-height: 300px; overflow-y: auto; text-align: start; }
#forward-list .group-item, .forward-item { border-radius: 10px; padding: 10px 8px; font-size: 14px; gap: 10px; }
#forward-list .group-item:hover, .forward-item:hover { background: rgba(0,0,0,0.05); }

body.has-custom-bg { background-size: cover !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; image-rendering: -webkit-optimize-contrast; }
#crop-container { width: 100%; height: 400px; background: #000; overflow: hidden; position: relative; border-radius: 10px; cursor: move; touch-action: none; }

/* backdrop-filter یک stacking context جدید می‌سازه؛ بدون z-index بالاتر از #folder-tabs،
   نتیجه‌ی سرچ (که داخل sidebar-header‌ه) پشت تب‌های فولدر گم می‌شد */
body.has-custom-bg .sidebar-header { background: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; position: relative; z-index: 5; }
[data-theme="dark"] body.has-custom-bg .sidebar-header { background: rgba(15, 23, 42, 0.4) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }

body.has-custom-bg .chat-area { background: transparent !important; position: relative; }
body.has-custom-bg .chat-area .chat-header { position: absolute !important; top: 0; left: 0; right: 0; height: 60px; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); }
body.has-custom-bg .chat-area .input-container { position: absolute !important; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; z-index: 100; border-top: 1px solid rgba(0,0,0,0.05); }
body.has-custom-bg .chat-area .messages { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; padding-top: 75px !important; padding-bottom: 85px !important; overflow-y: auto !important; display: flex; flex-direction: column; z-index: 1; box-sizing: border-box; }
[data-theme="dark"] body.has-custom-bg .chat-area .chat-header, [data-theme="dark"] body.has-custom-bg .chat-area .input-container { background: rgba(15, 23, 42, 0.45) !important; border-color: rgba(255,255,255,0.05); }

body.has-custom-bg .message { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
body.has-custom-bg .msg-other { background: #ffffff !important; color: #111 !important; }
body.has-custom-bg .msg-me { background: #007aff !important; color: #ffffff !important; }
body.has-custom-bg .msg-me a { color: #ffffff !important; text-decoration: underline; }

body.has-custom-bg .msg-other .reply-box, body.has-custom-bg .msg-other .reply-box div, body.has-custom-bg .msg-other .reply-box span { color: #1f2937 !important; }
body.has-custom-bg .msg-other .reply-box { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--accent) !important; }

body.has-custom-bg .sidebar { background: rgba(255, 255, 255, 0.90) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; }
[data-theme="dark"] body.has-custom-bg .sidebar { background: rgba(15, 23, 42, 0.90) !important; }

[data-theme="dark"] body.has-custom-bg .msg-other { background: #334155 !important; color: #f8fafc !important; }
[data-theme="dark"] body.has-custom-bg .msg-me { background: #2563eb !important; color: #ffffff !important; }
[data-theme="dark"] body.has-custom-bg .msg-other .reply-box, [data-theme="dark"] body.has-custom-bg .msg-other .reply-box div, [data-theme="dark"] body.has-custom-bg .msg-other .reply-box span { color: #cbd5e1 !important; }
[data-theme="dark"] body.has-custom-bg .msg-other .reply-box { background: rgba(255, 255, 255, 0.1) !important; }

@keyframes popInFloat { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes popOutFloat { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.3); opacity: 0; } }

#global-search-container { display: none; animation: slideDownSearch 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: top; z-index: 999999; }
@keyframes slideDownSearch { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
#global-search-results div { animation: fadeInResult 0.3s ease forwards; opacity: 0; }
@keyframes fadeInResult { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@property --light-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes messageScaleZoom { 0% { transform: scale(1); } 10% { transform: scale(1.02); } 85% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes traceBorderLight { 0% { --light-angle: 0deg; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { --light-angle: 720deg; opacity: 0; } }

.msg-highlight-modern { position: relative !important; z-index: 100 !important; animation: messageScaleZoom 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }
.msg-highlight-modern::after { content: ''; position: absolute; inset: -2px; border-radius: 18px; padding: 2px; background: conic-gradient(from var(--light-angle), transparent 0%, transparent 65%, var(--accent) 90%, #ffffff 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: traceBorderLight 2.5s linear forwards; }

/* ========================================= */
/* استایل‌های اختصاصی پروفایل و مخاطبین */
/* ========================================= */

/* کادر ورودی بایو در تنظیمات */
.bio-textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--sidebar);
    color: var(--text);
    font-family: inherit;
    resize: none;
    height: 65px;
    outline: none;
    transition: 0.2s;
}
.bio-textarea:focus { border-color: var(--accent); }

/* مودال پروفایل تلگرامی */
.tg-modal-overlay { z-index: 9999999; display: none; }
.tg-profile-card { padding: 0 !important; overflow: hidden; max-width: 380px; width: min(92vw, 380px); border-radius: 30px; background: transparent; box-shadow: 0 30px 80px rgba(15,23,42,0.16); }
.tg-profile-cover { position: relative; height: 150px; background: linear-gradient(135deg, #4f46e5, #2563eb); overflow: visible; }
.tg-profile-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 25%, rgba(255,255,255,0.28), transparent 18%), radial-gradient(circle at 85% 20%, rgba(255,255,255,0.14), transparent 18%); pointer-events: none; }
.tg-profile-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%); opacity: 0.6; pointer-events: none; }
.tg-profile-cover.tg-cover-animate::before { animation: coverWave 0.6s ease-out forwards; }
.tg-profile-cover.tg-cover-animate::after { animation: coverGlow 0.6s ease-out forwards; }
.tg-profile-cover::before, .tg-profile-cover::after { transition: opacity 0.25s ease; }
.tg-cover-wave-lines { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.18) 0, transparent 28%), radial-gradient(circle at 80% 35%, rgba(255,255,255,0.12) 0, transparent 30%); opacity: 0.55; pointer-events: none; transform: translateY(4px); }
.tg-cover-animate .tg-cover-wave-lines { animation: waveSettle 0.8s ease-out forwards; }
.tg-close-btn { color: #fff !important; top: 16px !important; left: 16px !important; right: auto !important; z-index: 2; }
.tg-avatar-wrapper { position: absolute; left: 50%; bottom: -52px; transform: translateX(-50%); width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.tg-avatar-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(59,130,246,0.08) 40%, transparent 60%); filter: blur(14px); animation: glowRotate 8s linear infinite; }
.tg-profile-avatar, .tg-profile-avatar-fallback { width: 96px; height: 96px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.95); position: relative; z-index: 1; box-shadow: 0 18px 40px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 32px; color: #fff; text-transform: uppercase; }
.tg-profile-avatar { object-fit: cover; background: #111; }
.tg-profile-avatar-fallback { background: linear-gradient(135deg, #2563eb, #4f46e5); display: none; }
.tg-profile-info { text-align: center; padding: 60px 18px 18px; background: var(--sidebar); }
.tg-profile-topline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; cursor: pointer; touch-action: manipulation; user-select: none; }
.tg-profile-topline:hover .tg-profile-name, .tg-profile-topline:hover .tg-profile-username { text-decoration: underline; }
.tg-profile-name { margin: 0; font-size: 20px; font-weight: 900; color: var(--text); line-height: 1.1; }
.tg-profile-username { font-size: 11px; color: var(--accent); direction: ltr; margin-top: 2px; }
.tg-profile-bio { font-size: 13px; color: var(--text); margin-top: 14px; line-height: 1.55; background: rgba(255,255,255,0.88); padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(37,99,235,0.12); word-break: break-word; min-height: 60px; text-align: start; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
.tg-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; justify-content: center; margin-top: 16px; }
.tg-action-btn { padding: 11px 14px; border-radius: 16px; font-weight: 700; font-size: 13px; min-height: 44px; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; box-shadow: 0 14px 28px rgba(0,0,0,0.1); will-change: transform, background-color; touch-action: manipulation; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tg-action-btn:hover { transform: translateY(-1px); }
.tg-action-btn:active { transform: translateY(1px); }
.tg-action-btn--primary { background: #2563eb; color: #fff; border: none; }
.tg-action-btn--accent { background: var(--accent); color: #fff; border: none; }
.tg-action-btn--secondary { background: rgba(255,255,255,0.12); color: var(--text); border: 1px solid rgba(255,255,255,0.16); }
.tg-action-btn--danger { background: #ef4444; color: #fff; border: none; }
@keyframes coverPulse { 0% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0.85; transform: scale(1); } }
@keyframes coverWave { 0% { opacity: 0; transform: translateY(18px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes coverGlow { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 0.55; transform: scale(1); } }
@keyframes waveSettle { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 0.7; transform: translateY(0); } }
@keyframes glowRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* استایل پایه نوار خطای اتصال */
.conn-error-bar {
    background: #ef4444;
    color: #fff;
    text-align: center;
    font-size: 11px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.4s ease;
}

/* حالت «در حال به‌روزرسانی» (اتصال دوباره وصل شده): آبی به‌جای قرمز، با انیمیشن نرم رنگ */
.conn-error-bar.conn-updating {
    background: var(--accent);
}

/* کلاس انیمیشن ورود */
.conn-error-in {
    animation: slideDownError 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* کلاس انیمیشن خروج */
.conn-error-out {
    animation: slideUpError 0.25s ease-out forwards;
}

@keyframes slideDownError {
    from { opacity: 0; max-height: 0; padding: 0; }
    to { opacity: 1; max-height: 40px; padding: 6px; }
}

@keyframes slideUpError {
    from { opacity: 1; max-height: 40px; padding: 6px; }
    to { opacity: 0; max-height: 0; padding: 0; }
}

/* ==========================================
   استایل‌های مدرن مخاطبین و بخش جستجو
   ========================================== */
@keyframes instantFade { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* کادر سرچ مخاطبین و دکمه ➕ */
.contacts-search-box { 
    display: flex !important; 
    gap: 8px !important; 
    margin-bottom: 15px !important; 
    align-items: center !important; 
}
#contact-search-input { 
    flex: 1 !important; 
    height: 42px !important; 
    border-radius: 12px !important; 
    margin: 0 !important; 
    border: 1px solid var(--border); 
    padding: 0 15px; 
    outline: none; 
    background: var(--chat-bg); 
    color: var(--text); 
}

.contacts-add-btn { 
    background: var(--accent) !important; 
    color: #fff !important; 
    border: none !important; 
    border-radius: 12px !important; 
    width: 42px !important; 
    height: 42px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    cursor: pointer !important; 
    transition: 0.2s !important; 
    padding: 0 !important; 
    font-size: 22px !important; 
    flex-shrink: 0 !important; 
    margin: 0 !important; 
}
.contacts-add-btn:hover { transform: scale(1.05) !important; opacity: 0.9 !important; }

/* آیتم‌های لیست */
.modern-contact-item { 
    display: flex; 
    align-items: center; 
    padding: 10px 12px; 
    border-bottom: 1px solid var(--border); 
    cursor: pointer; 
    transition: background 0.2s; 
    border-radius: 8px; 
    animation: instantFade 0.2s ease forwards; 
}
.modern-contact-item:hover { background: var(--chat-bg); }

/* دکمه ارسال پیام */
.modern-msg-btn { 
    background: var(--chat-bg); 
    color: var(--text); 
    border: none; 
    border-radius: 50%; 
    width: 38px; 
    height: 38px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.modern-msg-btn:hover { background: var(--accent); color: #fff; transform: scale(1.1); }

/* ⭐️ بخش سرچ گلوبال آکاردئونی (ثابت در صفحه بدون افتادن روی لیست) ⭐️ */
#global-add-area {
    display: none; 
    background: var(--chat-bg) !important; 
    padding: 12px !important; 
    border-radius: 12px !important; 
    margin-bottom: 15px !important; 
    border: 1px solid var(--border) !important;
}
#g-search-input {
    width: 100% !important; 
    height: 42px !important; 
    border-radius: 10px !important; 
    margin-bottom: 8px !important; 
    border: 1px solid var(--border) !important; 
    padding: 0 15px !important; 
    background: var(--sidebar) !important; 
    color: var(--text) !important; 
    outline: none !important; 
    font-family: inherit;
}
#g-search-input:focus { border-color: var(--accent) !important; }

/* باکس نمایش نتایج سرچ گلوبال */
#g-search-results {
    max-height: 200px; 
    overflow-y: auto; 
    border-radius: 8px;
}

/* ========================================= */
/* مودال تاییدیه اختصاصی (حذف پیام و مخاطب) */
/* ========================================= */
.custom-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 99999999;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s;
}
.custom-confirm-overlay.closing { animation: fadeOutBg 0.2s forwards; }

.custom-confirm-box {
    background: var(--sidebar);
    padding: 25px 20px;
    border-radius: 24px;
    width: 85%; max-width: 320px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.custom-confirm-overlay.closing .custom-confirm-box { animation: popOut 0.2s forwards; }

.custom-confirm-title { margin: 0 0 10px 0; color: var(--text); font-size: 18px; font-weight: 900; }
.custom-confirm-text { font-size: 13px; color: var(--subtext); margin: 0 0 25px 0; line-height: 1.6; }

.custom-confirm-actions { display: flex; gap: 12px; justify-content: center; flex-direction: row-reverse; }
.custom-confirm-btn {
    flex: 1; height: 46px; border: none; border-radius: 23px;
    font-weight: bold; font-size: 14px; cursor: pointer; transition: 0.2s; outline: none;
}
.custom-confirm-btn.yes { background: #ef4444; color: #fff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.custom-confirm-btn.yes:hover { transform: scale(1.05); opacity: 0.9; }
.custom-confirm-btn.no { background: var(--chat-bg); color: var(--text); }
.custom-confirm-btn.no:hover { background: var(--border); transform: scale(1.05); }


/* ========================================= */
/* انیمیشن آکاردئونی کادر افزودن مخاطب */
/* ========================================= */
#global-add-area {
    display: none; 
    background: var(--chat-bg) !important; 
    border-radius: 12px !important; 
    overflow: hidden;
    animation: accordionOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#global-add-area.closing {
    animation: accordionClose 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes accordionOpen {
    from { max-height: 0; padding: 0 12px; margin-bottom: 0; opacity: 0; border: 0 solid transparent; }
    to { max-height: 250px; padding: 12px; margin-bottom: 15px; opacity: 1; border: 1px solid var(--border); }
}
@keyframes accordionClose {
    from { max-height: 250px; padding: 12px; margin-bottom: 15px; opacity: 1; border: 1px solid var(--border); }
    to { max-height: 0; padding: 0 12px; margin-bottom: 0; opacity: 0; border: 0 solid transparent; }
}

/* =========================================================================
   حالت چپ‌به‌راست (زبان انگلیسی). این بخش کل چیدمان رو با فرض RTL دوباره
   آینه می‌کنه. حباب پیام‌ها عمداً همیشه سمت راست می‌مونن (مثل تلگرام/واتساپ،
   صرف‌نظر از جهت متن) تا رفتار برنامه با انتظار کاربر یکی بمونه.
   ========================================================================= */
[dir="ltr"] .sidebar { border-left: none; border-right: 1px solid var(--border); }

[dir="ltr"] .msg-me { align-self: flex-end; }
[dir="ltr"] .msg-other { align-self: flex-start; }
[dir="ltr"] .msg-meta { justify-content: flex-start; }

[dir="ltr"] #pinned-bar { border-right: none; border-left: 4px solid var(--accent); }
[dir="ltr"] .blockquote, [dir="ltr"] div#msg-input .blockquote { border-right: none !important; border-left: 3px solid var(--accent) !important; }
[dir="ltr"] .blockquote::before, [dir="ltr"] div#msg-input .blockquote::before { right: auto; left: 10px; }
[dir="ltr"] .reply-box { border-right: none; border-left: 3px solid currentColor; }

[dir="ltr"] .close-x { left: auto; right: 15px; }
[dir="ltr"] .tg-close-btn { left: auto !important; right: 16px !important; }
[dir="ltr"] #lightbox-download-btn { left: 20px; right: auto; }

[dir="ltr"] #scroll-to-bottom-btn { left: auto; right: 20px; }
[dir="ltr"] #drag-overlay { direction: ltr; }

/* توجه: attachment-menu و emoji-picker عمداً override نمی‌شن — چون دکمه‌های پیوست/ایموجی
   تو ردیف ورودی پیام (چه RTL چه LTR) سمت چپ می‌مونن، پس پاپ‌آپشون هم باید همون‌جا لنگر بندازه */

[dir="ltr"] .custom-confirm-actions { flex-direction: row; }

[dir="ltr"] #standard-inputs { flex-direction: row !important; }
[dir="ltr"] #recording-ui { flex-direction: row !important; }
[dir="ltr"] #contacts-search-row { flex-direction: row !important; }

@media (max-width: 768px) {
    /* حالت طبیعی (بدون reverse) توی LTR: دکمه‌ی بازگشت، عکس، عنوان همه سمت چپ می‌مونن؛
       مارجین‌های avatar/title دیگه اینجا override نمی‌شن چون خودِ استایل inline شون
       (margin-inline-*) از قبل جهت‌مستقله و درست کار می‌کنه */
    [dir="ltr"] .chat-header { flex-direction: row !important; }
}

/* ==========================================================
   استوری (Stories)
   ========================================================== */

.forward-tag, .story-reply-tag { margin-bottom: 4px; }

/* --- حلقه‌ی گرادیانی دور آواتار (مشترک بین ردیف استوری و پروفایل) --- */
.story-avatar-ring, .tg-profile-story-ring { position: relative; border-radius: 50%; padding: 2.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s linear; }
/* اسپینر چرخان و کاملاً واضح دور دایره‌ی «استوری من» حین آپلود — برخلاف پالس قبلی، مستقل از پس‌زمینه‌ی
   conic-gradient درصد واقعی روی یه لایه‌ی جدا (::after) رسم می‌شه، پس هیچ‌وقت زیرش گم نمی‌شه */
.story-avatar-ring.story-uploading::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
    animation: storyUploadSpin 0.8s linear infinite;
}
@keyframes storyUploadSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.story-avatar-ring-inner { background: var(--sidebar); border-radius: 50%; padding: 2px; display: flex; }
.story-ring-unseen { background: conic-gradient(from 45deg, #f59e0b, #ef4444, #a855f7, #3b82f6, #f59e0b); }
.story-ring-seen { background: #9ca3af; }
[data-theme="dark"] .story-ring-seen { background: #4b5563; }

/* --- دو نسخه‌ی ردیف استوری: نسخه‌ی کامل/اصلی (بالای لیست چت، وقتی لیست تا بالا اسکرول شده)
   و نسخه‌ی فشرده‌ی داخل هدر (وقتی لیست رو اسکرول کردی و از بالا فاصله گرفتی) — سوییچ بین این دو
   با fade+shrink نرم انجام می‌شه، نه با display:none خشک */
.story-rail { max-height: 0; opacity: 0; overflow: hidden; display: flex; white-space: nowrap; gap: 10px; padding: 0 12px; scrollbar-width: none; transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease; }
.story-rail.story-rail-visible { max-height: 100px; opacity: 1; padding: 10px 12px; }
.story-rail::-webkit-scrollbar { display: none; }

.story-rail-compact { max-height: 0; opacity: 0; overflow: hidden; display: flex; justify-content: center; white-space: nowrap; gap: 6px; scrollbar-width: none; max-width: 100%; transition: max-height 0.2s ease, opacity 0.18s ease; }
.story-rail-compact.story-rail-visible { max-height: 44px; opacity: 1; margin-top: 4px; }
.story-rail-compact::-webkit-scrollbar { display: none; }
.story-rail-compact .story-circle-item { width: auto; }
/* لوگو وقتی دایره‌های استوریِ فشرده کنارش باز می‌شن (یعنی لیست چت‌ها دیگه بالای بالا نیست) کوچیک‌تر
   می‌شه تا جا باز کنه، و وقتی می‌ری بالا و ردیف فشرده جمع می‌شه، دوباره به اندازه‌ی استاندارد برمی‌گرده */
.header-logo { height: 28px; max-width: 110px; object-fit: contain; transition: height 0.25s ease; }
#header-center-col:has(> #story-rail.story-rail-visible) .header-logo { height: 20px; }

.story-circle-item { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
.story-circle-label { font-size: 11px; color: var(--subtext); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-add-badge { position: absolute; bottom: -2px; left: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; border: 2px solid var(--sidebar); line-height: 1; }
[dir="ltr"] .story-add-badge { left: auto; right: -2px; }

/* --- دکمه‌ی منو (چهار مربع کوچیک) و پاپ‌آور «اپ دراور» --- */
/* عمداً display خودِ .icon-btn (flex) رو override نمی‌کنیم — قبلاً با display:inline-grid این تضاد
   باعث می‌شد این دکمه با دکمه‌ی سرچ (که فقط .icon-btn ساده‌ست) هم‌ارتفاع/هم‌راستا نشه؛ به‌جاش فقط با
   flex-wrap روی همون flex پایه، ۴ تا نقطه رو ۲x۲ می‌چینیم */
/* نکته: چون justify-content:space-between لبه‌ی بیرونیِ دکمه رو مستقل از padding داخلیش به لبه‌ی
   ردیف می‌چسبونه، خودِ padding داخلی روی فاصله‌ی واقعی از گوشه‌ی صفحه اثر نداره؛ چیزی که «نزدیک‌تر به
   گوشه» به‌نظر می‌رسوندش، تراکم بصریِ نقطه‌ها بود که تقریباً کل عرض محتوا رو پر می‌کردن (بدون فضای خالیِ
   اطراف مثل ایموجی سرچ که فاصله‌ی طبیعی داخل فونتش داره). برای اینکه فضای داخلیِ چیدمان ۲×۲ نقطه‌ها
   (۱۶px، لازم برای ۲ نقطه‌ی ۶px کنار هم + یه gap) ثابت بمونه ولی دورش بازتر/شبیه‌ فضای بصریِ دکمه‌ی
   سرچ باشه، عرض کلی رو به ۳۴px (به‌جای عرض قبلی که فقط اندازه‌ی محتوا رو داشت) و padding رو به ۹px
   افزایش دادیم */
.grid-menu-btn { flex-wrap: wrap; align-content: center; gap: 4px; width: 34px; height: 48px; padding: 9px; flex-shrink: 0; }
.grid-menu-dot { width: 6px; height: 6px; border-radius: 1.5px; background: currentColor; flex-shrink: 0; }
#app-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 10000; }
.app-drawer { position: fixed; top: 66px; inset-inline-start: 12px; width: 320px; max-width: calc(100vw - 24px); background: var(--sidebar); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 20px 45px rgba(0,0,0,0.25); z-index: 10001; padding: 14px; opacity: 0; transform: scale(0.92) translateY(-8px); transform-origin: top; pointer-events: none; transition: 0.18s ease; }
.app-drawer.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.app-drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app-drawer-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: 14px; cursor: pointer; font-size: 12px; color: var(--text); text-align: center; transition: background 0.15s; }
.app-drawer-item:hover { background: rgba(0,0,0,0.06); }
/* ارتفاعِ ثابت (نه شرینک‌به‌محتوا) لازمه چون یکی از آیتم‌ها (کاربرانِ آنلاین) به‌جای SVGِ ۲۴px فقط یه
   دایره‌ی ۱۲px داره — بدون ارتفاعِ ثابت، اون آیتم کوتاه‌تر می‌شد و باعث می‌شد برچسبِ زیرش (نسبت به بقیه‌ی
   آیتم‌ها تو همون ردیف) بالاتر بشینه */
.app-drawer-icon { height: 26px; display: flex; align-items: center; justify-content: center; }
.app-drawer-icon .story-icon { width: 24px; height: 24px; }
.status-dot-online { display: block; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.app-drawer-item--danger { color: #ef4444; }

/* --- پروفایل: نشانگر استوری --- */
.tg-profile-story { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; padding: 6px 14px 6px 6px; border-radius: 20px; background: rgba(37,99,235,0.08); width: fit-content; cursor: pointer; transition: 0.2s; }
[dir="ltr"] .tg-profile-story { padding: 6px 6px 6px 14px; }
.tg-profile-story:hover { background: rgba(37,99,235,0.15); }
.tg-story-label { font-size: 12px; color: var(--accent); font-weight: bold; }
.tg-profile-story-ring { width: 34px; height: 34px; }

/* --- مودال آپلود استوری --- */
.story-composer-overlay { z-index: 999999; }
.story-composer-box { background: #000; width: 100%; max-width: 420px; height: 100%; max-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; border-radius: 0; position: relative; }
@media (min-width: 500px) { .story-composer-box { max-height: 90dvh; margin-top: 5dvh; border-radius: 16px; overflow: hidden; } }
.story-composer-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px; }
.story-composer-topbar .fwd-icon-btn { color: #fff; transition: transform 0.12s ease; }
.story-composer-topbar .fwd-icon-btn:active { transform: scale(0.85); }
@keyframes storyPopIn { from { opacity: 0; transform: scale(0.85) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes storyPopOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.85) translateY(-4px); } }
/* !important عمداً: چون خودِ عنصرها (با انتخاب‌گرِ #id، اولویتِ بالاتر از این کلاس) از قبل یه
   animation:storyPopIn دارن که وگرنه رو این جایگزین نمی‌شد — این کلاس موقتاً از showStoryPanel/hideStoryPanel
   اضافه/حذف می‌شه تا واقعاً یه انیمیشنِ خروج (نه فقط display:none فوری) موقعِ بسته‌شدن اجرا بشه */
.story-panel-closing { animation: storyPopOut 0.16s ease forwards !important; pointer-events: none; }
@keyframes storySlideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }
.story-slidedown-closing { animation: storySlideDown 0.16s ease forwards !important; pointer-events: none; }
.story-privacy-quick-menu { position: absolute; top: calc(100% + 6px); right: 0; background: rgba(20,20,20,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); z-index: 10; min-width: 150px; padding: 6px; transform-origin: top right; animation: storyPopIn 0.16s cubic-bezier(0.16, 1, 0.3, 1); }
[dir="ltr"] .story-privacy-quick-menu { right: auto; left: 0; transform-origin: top left; }
/* رنگِ متن عمداً ثابته (نه var(--text) که وابسته به تمِ روشن/تیرهِ کلِ برنامه‌ست) — چون کامپوزرِ استوری
   همیشه تیره‌ست (background:#000 رو story-composer-box)، مستقل از تمِ روشن/تیرهِ کاربر */
.story-privacy-quick-item { padding: 9px 12px; border-radius: 8px; font-size: 13px; color: #fff; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; }
.story-privacy-quick-item:hover { background: rgba(255,255,255,0.1); }
.story-privacy-quick-item:active { transform: scale(0.97); }
.story-composer-tabs { display: flex; gap: 6px; background: rgba(255,255,255,0.1); border-radius: 16px; padding: 3px; }
.story-composer-tab { background: transparent; border: none; color: rgba(255,255,255,0.7); font-size: 12px; font-weight: bold; padding: 6px 14px; border-radius: 14px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease; }
.story-composer-tab.active { background: #fff; color: #000; }
.story-composer-tab:active { transform: scale(0.93); }
.story-post-btn { background: var(--accent); color: #fff; border: none; padding: 8px 16px; border-radius: 16px; font-weight: bold; font-size: 13px; cursor: pointer; transition: transform 0.12s ease, opacity 0.15s ease; }
.story-post-btn:active { transform: scale(0.94); opacity: 0.85; }
.story-composer-stage { flex: 1; position: relative; overflow: hidden; background: #111; }
.story-media-mode, .story-text-mode { position: absolute; inset: 0; }
.story-media-picker { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 13px; }
.story-media-preview-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
/* بدون این، این دیو (چون فرزندهاش position:absolute هستن و تو چیدمانِ نرمال حساب نمی‌شن) به ارتفاعِ صفر
   جمع می‌شد — و چون makeStoryTextDraggable برای محاسبه‌ی درصدِ موقعیتِ متن از getBoundingClientRect()
   همین عنصر استفاده می‌کنه، ارتفاعِ صفر یعنی تقسیم بر صفر: متن با اولین درگ می‌پرید گوشه‌ی پایین و
   دیگه هیچ‌جوره جابه‌جا نمی‌شد. inset:0 دقیقاً هم‌اندازه‌ی والدِ خودش (که درست سایز شده) نگهش می‌داره */
/* pointer-events:none روش عمداً: چون این دیو کل کادر رو می‌پوشونه (حتی جاهایی که هیچ متنی نیست)، بدون
   این، جلوی رسیدنِ لمس به چیزی که زیرش (مثل canvasِ نقاشی) رو می‌گرفت؛ خودِ متن‌ها (.story-text-overlay)
   pointer-events:auto رو دوباره روشن می‌کنن، پس درگ/تپ‌کردنِ متن هیچ تغییری نمی‌کنه */
#story-text-layers, #story-text-only-layers { position: absolute; inset: 0; pointer-events: none; }
/* عمداً width/height:100% به‌جای max-width/max-height: چون transform:translate با درصد نسبت به
   باکسِ خودِ عنصره (نه والدش)، وقتی باکسِ خودِ img/video دقیقاً هم‌اندازه‌ی wrap باشه، درصدهای پن/زوم
   دقیقاً معادل درصدی از اندازه‌ی کانتینر می‌شن — بدون نیاز به محاسبه‌ی پیکسلی جداگانه با JS. فضای خالیِ
   اطراف تصویر (وقتی object-fit:contain کوچیک‌ترش می‌کنه یا زوم‌اوت شده) پس‌زمینه‌ی خودِ wrap رو نشون می‌ده */
.story-media-preview-wrap img, .story-media-preview-wrap video { width: 100%; height: 100%; object-fit: contain; transform-origin: center center; }
/* بینِ خودِ عکس/ویدیو و لایه‌های متن — نقاشی همیشه رو عکس دیده می‌شه، متن همیشه رو نقاشی. فقط تو حالتِ
   ادیتِ نقاشی pointer-events روشنه (وگرنه لمس‌های عادیِ پن/زوم/تپ روی متن رو قورت می‌داد) */
/* عمداً z-index نداره: چون #story-text-layers (که تو DOM بعد از این میاد) هم position:absolute
   با z-index:auto ست، ترتیبِ DOM (نه یه z-index دستی) تعیین می‌کنه کی رو کیه — این یعنی متن همیشه
   رو نقاشی می‌مونه، بدون نیاز به هماهنگ‌نگه‌داشتنِ عددهای z-index دستی بینِ چندتا لایه */
.story-draw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.story-draw-size-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; }
.story-draw-size-btn span { display: block; border-radius: 50%; background: #fff; }
.story-draw-size-btn:active { transform: scale(0.88); }
.story-draw-size-btn.active { background: rgba(255,255,255,0.25); border-color: var(--accent); }
/* قبلاً white-space:nowrap بود چون این عنصر position:absolute با فقط left (نه right) تعریف شده و بدون
   max-widthِ صریح، مرورگر برای شکستنِ خودکار از «عرضِ containing block منهای left» استفاده می‌کنه —
   یعنی نزدیکِ لبه‌ها زودتر از موقع می‌شکست، صرف‌نظر از طولِ واقعیِ متن. راه‌حلِ درست، دادنِ یه max-width
   صریح (نسبی به همون containerِ عکس/canvas، دقیقاً مثل بقیه‌ی مختصات posX/posY این فیچر) بود، نه نوشتنِ
   nowrap؛ الان چون budget عرض مستقل از left ثابته، شکستنِ خط فقط وقتی واقعاً لازمه اتفاق می‌افته */
@keyframes storyTextPopIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.story-text-overlay { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); font-size: 22px; font-weight: bold; text-align: center; white-space: pre-wrap; overflow-wrap: break-word; max-width: 85%; cursor: move; touch-action: none; padding: 4px 10px; min-width: 80px; outline: none; user-select: text; text-shadow: 0 1px 4px rgba(0,0,0,0.5); border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; animation: storyTextPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* بدون این، وقتی متنی نوشته نشده، این باکس عملاً نامرئیه و کاربر اصلاً نمی‌فهمه اینجا می‌تونه تایپ کنه */
.story-text-overlay:empty::before { content: attr(data-placeholder); opacity: 0.8; font-weight: normal; font-size: 15px; text-shadow: none; }
.story-text-overlay:empty { background: rgba(0,0,0,0.32); border: 1.5px dashed rgba(255,255,255,0.6); border-radius: 10px; }
/* یه وینیت ملایم (تیره‌تر شدن گوشه‌ها) روی پس‌زمینه‌ی تخت رنگی/گرادیانی عمق بصری می‌ده — دقیقاً همون
   جلوه‌ای که باعث می‌شه پس‌زمینه‌های ساده‌ی استوری اینستاگرام «گران‌تر» به‌نظر برسن تا یه رنگ صاف خام */
/* بدون padding: چون الان لایه‌های متن با درصدِ left/top خودشون (نسبی به کل این باکس) جابه‌جا می‌شن،
   باید دقیقاً هم‌اندازه‌ی نسخه‌ی نمایشگر (.story-fullbg-text-canvas، بدون padding) باشه، وگرنه موقعیتی
   که تو کامپوزر انتخاب می‌شه با چیزی که نهایتاً نمایش داده می‌شه یکی نیست */
.story-text-only-bg { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0,0,0,0.25); touch-action: none; }
/* نوار شناورِ کم‌حجم روی خودِ عکس/ویدیو — دقیقاً مثل اینستاگرام، فقط وقتی رسانه انتخاب شده و رو حالت
   ادیت متن نیستیم دیده می‌شه؛ کنار بالای صفحه، رو خودِ رسانه شناوره نه پایین کادر */
.story-media-idle-tools { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; display: flex; flex-direction: column; gap: 8px; animation: storyPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.story-media-tool-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background 0.15s ease, transform 0.12s ease; }
.story-media-tool-btn:hover { background: rgba(0,0,0,0.65); }
.story-media-tool-btn:active { transform: scale(0.88); }
/* چیدمانِ گرید (نه یه ستونِ باریکِ بلند): با ۱۳ رنگِ فعلی تقریباً همه‌شون بدون هیچ اسکرولی دیده می‌شن؛
   قبلاً چیدمانِ تک‌ستونی + اسکرول‌بارِ مخفی (ارثِ .story-swatch-row) باعث می‌شد کاربر فکر کنه فقط همون
   ۴-۵ تای اول کل گزینه‌هاست. اگه باز هم لازم شد اسکرول بشه، الان اسکرول‌بار *دیده می‌شه* (نه مخفی) */
/* عرض دقیقاً برای ۳ ستونِ سواچِ ۳۴px (بدون فضای خالیِ اضافه) محاسبه شده: 3×34 + 2×gap(10) + 2×padding(8) = 138px؛
   ارتفاع هم برای جاشدنِ کاملِ ۱۳ رنگِ فعلی (۵ ردیف) بدونِ نیاز به اسکرول — پس اسکرول‌بار عملاً هیچ‌وقت لازم
   نمی‌شه، ولی برای اطمینان (اگه یه‌روز رنگ بیشتر اضافه شد) overflow:auto با اسکرول‌بارِ مخفی نگه داشته شده */
#story-media-bg-swatches, #story-text-only-bg-swatches { position: absolute; top: 56px; inset-inline-end: 12px; z-index: 4; flex-direction: row; flex-wrap: wrap; width: 148px; background: rgba(20,20,20,0.55); padding: 10px; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-height: 240px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transform-origin: top center; animation: storyPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
#story-media-bg-swatches::-webkit-scrollbar, #story-text-only-bg-swatches::-webkit-scrollbar { display: none; }
/* موقع درگ‌کردنِ یه لایه‌ی متن ظاهر می‌شه (پایین وسط صفحه، دقیقاً مثل اینستاگرام)؛ رها کردن روش حذفش می‌کنه */
.story-text-trash-zone { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%) scale(1); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease; backdrop-filter: blur(4px); animation: storyPopIn 0.15s ease; }
.story-text-trash-zone.story-text-trash-active { background: #ef4444; transform: translateX(-50%) scale(1.25); }
/* نوار ابزار ادیتِ متنِ روی عکس — دقیقاً مثل نوار پایین/بالای اینستاگرام موقع نوشتن متن، جدا از نوار
   استوریِ تمام‌متنی و جدا از نوار شناورِ idle؛ فقط تو حالت ادیت متن دیده می‌شه */
/* هم story-text-edit-toolbar هم story-draw-toolbar از این کلاس استفاده می‌کنن؛ هر دو الان *بیرون* از
   story-composer-stage، فرزندِ عادیِ flex-column تو story-composer-box‌ن (نه یکی داخلِ stage یکی بیرونش،
   که قبلاً باعث می‌شد دکمه‌ی ✓شون دو ارتفاعِ متفاوت داشته باشه) — همین خودش هر دو رو دقیقاً ته کادر می‌شونه.
   position:relative لازمه چون story-text-more-options (پنلِ شناور) نسبت به همین عنصر جای‌گذاری می‌شه */
.story-text-edit-toolbar { position: relative; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; background: #000; animation: storySlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes storySlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.story-text-edit-toolbar-row { display: flex; align-items: center; gap: 10px; }
/* اسلایدرِ عمودیِ اندازه‌ی متن — بالا = بزرگ‌ترین اندازه (پهن‌ترینِ قیف)، پایین = کوچیک‌ترین (باریک‌ترین) —
   دقیقاً هم‌راستا با رفتارِ استانداردِ اسلایدرهای عمودی (مثل صدا/نور: بالا یعنی بیشتر). چون input[type=range]
   بومی عمودی نیست، یه ورژنِ افقیِ ۲۰۰px رو داخلِ یه ظرفِ ۴۰×۲۰۰ می‌چرخونیم؛ برای اینکه max (سمتِ راستِ
   خودِ input) بره بالا، باید rotate(-90deg) باشه (نه 90deg — با ریاضیِ چرخشِ CSS: rotate(-90deg) نقطه‌ی
   راست/max رو دقیقاً به بالا می‌بره). خودِ شکلِ قیفی صرفاً یه لایه‌ی تزئینیِ زیرِ اسلایدره (clip-path) */
.story-text-size-vertical { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); width: 40px; height: 200px; z-index: 5; animation: storyPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.story-text-size-track { position: absolute; inset: 4px; clip-path: polygon(8% 0%, 92% 0%, 58% 100%, 42% 100%); background: linear-gradient(to top, rgba(255,255,255,0.2), rgba(255,255,255,0.4)); pointer-events: none; }
.story-text-size-vertical input[type=range].story-text-size-slider {
    position: absolute; top: 50%; left: 50%; width: 200px; height: 40px;
    transform: translate(-50%, -50%) rotate(-90deg);
    direction: ltr; margin: 0; background: transparent;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.story-text-size-slider::-webkit-slider-runnable-track { background: transparent; height: 40px; }
.story-text-size-slider::-moz-range-track { background: transparent; height: 40px; }
.story-text-size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; margin-top: 7px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.story-text-size-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
/* آیکونِ SVGِ یک‌دست (به‌جای ایموجیِ رنگیِ سیستم‌عامل) که تو همه‌جای رابطِ استوری استفاده می‌شه —
   currentColor یعنی خودش رنگِ متنِ دکمه‌ی والدش رو می‌گیره، پس با هر پس‌زمینه/تمی هماهنگه */
.story-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.story-icon-lg { width: 34px; height: 34px; }
/* برای آیکون‌های خیلی کوچیکِ داخلِ متن (مثلاً پیش‌وندِ سنجاق‌شده/میوت/نوعِ چت تو لیستِ چت‌ها) که باید
   تو یه خطِ متنیِ عادی هم‌راستا بمونن، نه یه بلاکِ جدا */
.story-icon-sm { width: 13px; height: 13px; display: inline-flex; vertical-align: -2px; }
.story-tool-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, background 0.15s ease; }
.story-tool-btn:active { transform: scale(0.88); }
.story-text-done-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 17px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease; }
.story-text-done-btn:active { transform: scale(0.85); }
/* پنلِ «⋯»: رنگ/پس‌زمینه/لایه‌بندی که قبلاً همه با هم تو یه ردیفِ شلوغ بودن، الان پشتِ همین دکمه جمع
   شدن؛ با کلیک بیرون هم بسته می‌شن (لیسنرِ document, capture-phase). به‌جای اینکه فقط یه ردیفِ اضافه‌ی
   دیگه تو همون نوارِ سیاه باشه، حالا واقعاً *شناور روی خودِ عکسه* (position:absolute, bottom:100% نسبت
   به story-text-edit-toolbar) با پس‌زمینه‌ی بلورشده‌ی شیشه‌ای — دقیقاً هم‌سبک با بقیه‌ی کادرهای شناورِ
   استوری (کادر انتخاب رنگِ پس‌زمینه، منوی حریم‌خصوصی، پنلِ بازدیدکننده‌ها) */
.story-text-more-options {
    position: absolute; left: 12px; right: 12px; bottom: calc(100% + 10px);
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    background: rgba(20,20,20,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    animation: storySlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* قبلاً این ردیف بدونِ justify-content بود، پس فقط ۳تا دکمه‌ی کوچیک یه گوشه (شروعِ flex) جمع می‌شدن و
   نه زیرِ ردیفِ رنگ‌ها بودن نه وسط‌چین — الان با justify-content:center یه گروهِ واحدِ مرتب وسطِ کادر می‌شینه */
.story-text-more-options-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.story-swatch-row { display: flex; gap: 12px; flex-wrap: wrap; }
.story-swatch { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.35); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.15s ease; animation: storySwatchIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.story-swatch-row .story-swatch:nth-child(1) { animation-delay: 0.01s; }
.story-swatch-row .story-swatch:nth-child(2) { animation-delay: 0.03s; }
.story-swatch-row .story-swatch:nth-child(3) { animation-delay: 0.05s; }
.story-swatch-row .story-swatch:nth-child(4) { animation-delay: 0.07s; }
.story-swatch-row .story-swatch:nth-child(5) { animation-delay: 0.09s; }
.story-swatch-row .story-swatch:nth-child(6) { animation-delay: 0.11s; }
.story-swatch-row .story-swatch:nth-child(7) { animation-delay: 0.13s; }
.story-swatch-row .story-swatch:nth-child(n+8) { animation-delay: 0.15s; }
@keyframes storySwatchIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.story-color-swatch, .story-bg-swatch { border: 2px solid rgba(255,255,255,0.25); }
.story-font-swatch { background: rgba(255,255,255,0.1); color: #fff; }
.story-swatch:active { transform: scale(0.85); }
.story-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 2px 5px rgba(0,0,0,0.35); transform: scale(1.08); }

/* --- نمایشگر استوری (فول‌اسکرین) --- */
.story-viewer-overlay { position: fixed; inset: 0; background: #000; z-index: 9999999; display: flex; flex-direction: column; }
/* رو صفحه‌ی عریض دسکتاپ، خودِ کارت استوری (نه backdrop) به عرض یه گوشی محدود و وسط‌چین می‌شه — دقیقاً
   همون الگویی که مودال آپلود استوری از قبل داشت. ارتفاع همیشه ۱۰۰٪ می‌مونه (نه شناور با margin-top)
   چون محاسبه‌ی موقعیت کادر ریپلای بالای صفحه‌کلید (positionStoryFooterAboveKeyboard) فرض می‌کنه لبه‌ی
   پایینِ این کارت دقیقاً با window.innerHeight یکیه */
.story-viewer-card { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; margin: 0 auto; }
@media (min-width: 500px) { .story-viewer-card { max-width: 420px; } }
/* فلش‌های ناوبریِ فضای خالیِ سیاهِ کنارِ کارت رو دسکتاپ (عرض>۵۰۰px، جایی که کارت به عرض گوشی محدود
   می‌شه)؛ پیش‌فرض مخفی، فقط با هاورِ ماوس روی همون فضای خالی (نه رو خودِ کارت) با کلاسِ visible ظاهر
   می‌شن — منطقش تو app-stories.js با یه mousemove روی خودِ overlay هست */
.story-nav-arrow { display: none; position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; z-index: 10000000; }
.story-nav-arrow .story-icon { width: 24px; height: 24px; }
.story-nav-arrow:hover { background: rgba(255,255,255,0.22); }
.story-nav-arrow.visible { opacity: 1; }
.story-nav-arrow-left { left: 20px; }
.story-nav-arrow-right { right: 20px; }
@media (min-width: 500px) { .story-nav-arrow { display: flex; } }
/* نکته‌ی مهم (رفع باگ سواپ): تپ‌زون‌های چپ/راست باید *داخل* همون container ای باشن که رویدادهای
   pointerdown/move/up روش گوش داده می‌شه؛ قبلاً این دو تا sibling بودن (نه فرزندِ محتوا)، پس وقتی
   انگشت روی تپ‌زون (که ۶۶٪ عرض صفحه رو می‌پوشونه) شروع می‌شد، اصلاً به لیسنرهای درگ نمی‌رسید و فقط
   وقتی از نوار باریک وسط شروع می‌شد کار می‌کرد — الان همه‌چیز زیر یه container مشترکه */
.story-cube-viewport { flex: 1; position: relative; overflow: hidden; perspective: 1300px; touch-action: none; }
/* واقعاً مثل چرخش یه مکعب: سه وجه (فعلی/بعدی/قبلی) — که هر کدوم شامل نوار پیشرفت + هدر (آواتار/اسم/
   تایمر) + خودِ رسانه با هم هستن، نه فقط عکس — دور یه محور عمودی مشترک قرار می‌گیرن، و چرخوندنِ خودِ
   rotator با دقیقاً همون زاویه‌ای که انگشت کاربر جابه‌جا می‌شه (نه یه انیمیشن ثابت) پیش می‌ره */
.story-cube-rotator { position: absolute; inset: 0; transform-style: preserve-3d; }
.story-cube-rotator.story-cube-animated { transition: transform 0.28s ease; }
.story-cube-face { position: absolute; inset: 0; backface-visibility: hidden; background: #000; overflow: hidden; }
.story-face-current { transform: rotateY(0deg) translateZ(var(--cube-z, 0px)); }
.story-face-next { transform: rotateY(90deg) translateZ(var(--cube-z, 0px)); }
.story-face-prev { transform: rotateY(-90deg) translateZ(var(--cube-z, 0px)); }
/* رسانه حالا کل وجه رو پر می‌کنه (تمام‌صفحه‌ی واقعی)، و نوار پیشرفت + هدر به‌جای اینکه با ارتفاع خودشون
   محتوا رو پایین هل بدن، به‌عنوان یه overlay شناور روی بالای رسانه می‌شینن — دقیقاً مثل اینستاگرام؛
   قبلاً این‌ها ردیف‌های جدا با پس‌زمینه‌ی مشکیِ خودِ story-cube-face بودن و یه نوار خالیِ مشکی بالای
   استوری می‌موند چون رسانه فقط فضای باقی‌مونده (flex:1) رو می‌گرفت، نه کل صفحه رو */
.story-face-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; }
.story-face-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-top: env(safe-area-inset-top); background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%); }
.story-face-progress { display: flex; gap: 4px; padding: 10px 10px 0; }
.story-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.story-seg-fill { height: 100%; width: 0%; background: #fff; }
.story-face-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #fff; }
.story-face-header .story-viewer-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.story-face-header .story-viewer-meta span:first-child { font-weight: bold; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-face-header .story-viewer-meta span:last-child { font-size: 11px; opacity: 0.75; }
.story-viewer-header-btn { color: #fff; }
.story-viewer-count-wrap { align-items: center; gap: 3px; cursor: pointer; }
.story-viewer-count-wrap .story-viewer-header-btn { pointer-events: none; }
.story-viewer-count { color: #fff; font-size: 12px; font-weight: bold; }
/* -webkit-touch-callout:none خودِ منوی نگه‌داشتن-انگشت «ذخیره‌ی عکس» رو تو سافاری/iOS غیرفعال می‌کنه —
   oncontextmenu="return false" (تو HTML خودِ عکس/ویدیو) فقط راست‌کلیک دسکتاپ رو می‌گیره، این جداگانه لازمه */
/* width/height:100% (نه max-width/max-height) دقیقاً به همون دلیلی که تو wrap کامپوزره: تا درصدهای
   ذخیره‌شده‌ی media_offset_x/y (نسبت به باکسِ خودِ عنصر) درست معادل همون پن/زوم انتخاب‌شده تو کامپوزر باشن */
.story-face-media img, .story-face-media video { width: 100%; height: 100%; object-fit: contain; transform-origin: center center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* رو کلِ کادر overlay می‌شه (نه فقط باکسِ عکس)، دقیقاً هم‌راستا با اینکه تو کامپوزر هم canvasِ نقاشی
   رو کل story-media-preview-wrap بود، نه رو خودِ عکس؛ برای همین اینجا width/height:100% ساده‌ست، بدون
   object-fit یا mediaTransform (پن/زوم عکس) */
.story-drawing-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-touch-callout: none; user-select: none; }
/* هم‌راستا با .story-text-overlay تو کامپوزر: همون max-width/wrap، تا فرمتِ شکستنِ خط دقیقاً همونی
   باشه که کاربر موقع نوشتن دید، نه چیز دیگه‌ای تو نمایشگر نهایی */
.story-overlay-text { position: absolute; transform: translate(-50%, -50%); font-size: 22px; font-weight: bold; text-align: center; white-space: pre-wrap; overflow-wrap: break-word; max-width: 85%; padding: 4px 10px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); border-radius: 8px; }
/* دکمه‌ی چرخوندن حالت پس‌زمینه‌ی متن (بدون پس‌زمینه / توپر / نیمه‌شفاف) تو نوارابزار کامپوزر */
.story-text-bg-toggle-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; }
.story-text-bg-toggle-btn:active { transform: scale(0.88); }
.story-text-bg-toggle-btn.active { background: #fff; color: #000; border-color: var(--accent); }
.story-fullbg-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; font-size: clamp(22px, 7vw, 42px); font-weight: 800; line-height: 1.35; letter-spacing: 0.2px; text-align: center; word-break: break-word; text-shadow: 0 2px 10px rgba(0,0,0,0.25); box-shadow: inset 0 0 120px rgba(0,0,0,0.25); }
/* نسخه‌ی چندلایه‌ی canvasِ تمام‌متنی (بعد از یکی‌شدن با سیستم لایه‌های قابل‌درگ عکس/ویدیو) — خودِ این
   دیو فقط پس‌زمینه رو نگه می‌داره، موقعیت هر لایه‌ی متن با درصدِ left/top خودش (روی .story-overlay-text) تعیین می‌شه */
.story-fullbg-text-canvas { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0,0,0,0.25); }
.story-viewers-panel { position: absolute; bottom: 70px; left: 10px; right: 10px; max-height: 40%; overflow-y: auto; background: rgba(20,20,20,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 12px 32px rgba(0,0,0,0.45); border-radius: 16px; padding: 10px; z-index: 3; animation: storySlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.story-viewer-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: #fff; font-size: 13px; }
.story-viewers-empty { color: rgba(255,255,255,0.6); font-size: 12px; text-align: center; padding: 10px; }
/* نوار پایین (ری‌اکشن/ریپلای) حالا *داخل* خودِ وجه مکعب (story-cube-face) قرار داره، به‌عنوان یه
   overlay مطلق روی پایین رسانه — نه یه عنصر جدای بیرون از rotator — تا با همون افکت مکعبی بچرخه و از
   بقیه‌ی UI (آواتار/اسم/تایمر) جدا نمونه. حالت پیش‌فرض فقط دکمه‌ی قلب قابل‌دیدنه؛ ری‌اکشن‌های بیشتر
   (story-reaction-extras) فقط وقتی اینپوت ریپلای فوکوس بشه (story-footer-expanded) بالای ردیف باز می‌شن */
.story-face-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); transition: background 0.2s ease, padding-top 0.2s ease; }
/* موقع فوکوس روی اینپوت، این کادر با JS به position:fixed تبدیل و دقیقاً بالای صفحه‌کلید چسبونده
   می‌شه (positionStoryFooterAboveKeyboard تو app-stories.js) — اینجا فقط ظاهرِ حالت باز‌شده‌ست:
   پس‌زمینه‌ی گرادیانی برای خوانا موندن روی تصویر، و ری‌اکشن‌های بزرگ‌تر با انیمیشن ورود پلکانی */
.story-footer-expanded { background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%); padding-top: 24px; }
.story-reaction-extras { display: flex; gap: 14px; justify-content: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.22s ease, opacity 0.18s ease; }
.story-footer-expanded .story-reaction-extras { max-height: 60px; opacity: 1; gap: 18px; }
.story-reaction-extras .story-reaction-emoji, .story-reaction-heart { font-size: 20px; cursor: pointer; transition: transform 0.15s, font-size 0.22s ease; }
.story-reaction-extras .story-reaction-emoji:hover, .story-reaction-heart:hover { transform: scale(1.2); }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji { font-size: 34px; animation: storyReactionPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji:nth-child(1) { animation-delay: 0.02s; }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji:nth-child(2) { animation-delay: 0.06s; }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji:nth-child(3) { animation-delay: 0.10s; }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji:nth-child(4) { animation-delay: 0.14s; }
.story-footer-expanded .story-reaction-extras .story-reaction-emoji:nth-child(5) { animation-delay: 0.18s; }
@keyframes storyReactionPopIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.story-reaction-pop { animation: storyReactionPop 0.4s ease; }
@keyframes storyReactionPop { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }
.story-reply-row { display: flex; align-items: center; gap: 8px; }
.story-reaction-heart { flex-shrink: 0; }
.story-footer-expanded .story-reaction-heart { font-size: 26px; }
.story-reply-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 20px; padding: 8px 14px; font-size: 13px; outline: none; transition: min-height 0.2s ease, font-size 0.2s ease, padding 0.2s ease, background 0.2s ease, color 0.2s ease; }
.story-reply-input::placeholder { color: rgba(255,255,255,0.6); }
.story-footer-expanded .story-reply-input { min-height: 46px; font-size: 15px; padding: 12px 16px; background: rgba(255,255,255,0.16); }
.story-reply-send-btn { flex-shrink: 0; color: #fff; }
/* رو استوری‌های متنیِ روشن (STORY_BG_IS_LIGHT)، ترکیب سفید-روی-سفیدِ نیمه‌شفاف عملاً ناخوانا بود؛ اینجا
   کادر ریپلای رو (فقط تو حالت جمع‌شده — حالت باز‌شده خودش پس‌زمینه‌ی تیره‌ی گرادیانی داره و مشکلی نداره)
   به یه نسخه‌ی تیره‌روی‌روشن برعکس می‌کنیم */
.story-footer-on-light:not(.story-footer-expanded) .story-reply-input { background: rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.18); color: #111; }
.story-footer-on-light:not(.story-footer-expanded) .story-reply-input::placeholder { color: rgba(0,0,0,0.55); }
.story-footer-on-light:not(.story-footer-expanded) .story-reply-send-btn { color: #111; }
.story-reaction-msg { display: inline-flex; align-items: center; gap: 6px; }