/* ===== bundled from legacy-v24.css ===== */
:root {
  --sidebar-w: 400px;
  --header-h: 58px;
  --composer-h: 66px;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
html { color-scheme: light dark; }
body {
  direction: rtl;
  font-family: var(--font);
  color: var(--text);
  background: var(--stage);
  font-size: 14px;
  letter-spacing: -0.12px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; }
button { touch-action: manipulation; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }
.ico { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-light {
  --stage: #d8e6f1;
  --wall: #e7eff6;
  --panel: #ffffff;
  --panel-soft: #f5f8fb;
  --panel-strong: #edf3f8;
  --bar: rgba(255,255,255,.96);
  --text: #1b2a3a;
  --title: #0e1724;
  --muted: #657789;
  --muted-2: #91a0ae;
  --border: rgba(15, 35, 55, .105);
  --border-strong: rgba(15, 35, 55, .18);
  --hover: rgba(12, 24, 38, .055);
  --active: color-mix(in srgb, var(--accent) 13%, transparent);
  --input: #eef4f8;
  --input-focus: #ffffff;
  --bubble-in: #ffffff;
  --bubble-out: #d7f2c4;
  --bubble-out-text: #14202d;
  --chip: rgba(82, 98, 114, .70);
  --shadow: 0 20px 55px rgba(18, 35, 54, .16);
  --bubble-shadow: 0 1px 1px rgba(16,32,46,.06), 0 4px 12px rgba(16,32,46,.045);
  --ok: #21c35e;
  --danger: #ef4444;
}
.theme-dark {
  --stage: #0a1017;
  --wall: #0d1721;
  --panel: #121c27;
  --panel-soft: #172333;
  --panel-strong: #1d2a39;
  --bar: rgba(18,28,39,.98);
  --text: #e7eef6;
  --title: #f8fbff;
  --muted: #91a5b8;
  --muted-2: #708498;
  --border: rgba(232,242,250,.078);
  --border-strong: rgba(232,242,250,.13);
  --hover: rgba(255,255,255,.055);
  --active: color-mix(in srgb, var(--accent) 18%, transparent);
  --input: #1a2937;
  --input-focus: #223342;
  --bubble-in: #1e2b39;
  --bubble-out: #2d638c;
  --bubble-out-text: #ffffff;
  --chip: rgba(88,105,122,.82);
  --shadow: 0 24px 70px rgba(0,0,0,.48);
  --bubble-shadow: 0 1px 1px rgba(0,0,0,.20), 0 4px 13px rgba(0,0,0,.14);
  --ok: #4ade80;
  --danger: #fb7185;
}
.wallpaper-plain { background: var(--stage); }
.wallpaper-gradient { background: radial-gradient(circle at 12% 10%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 34%), radial-gradient(circle at 88% 92%, rgba(34,197,94,.11), transparent 30%), var(--stage); }
.wallpaper-pattern { background-color: var(--stage); background-image: radial-gradient(rgba(80,98,118,.13) 1px, transparent 1px); background-size: 24px 24px; }
.wallpaper-night { background: #07111b; }

/* Auth */
.auth-screen { height: 100dvh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 72% 12%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 34%), var(--stage); }
.auth-card { width: min(430px,100%); padding: 28px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--border-strong); box-shadow: var(--shadow); text-align: center; }
.auth-logo { width: 70px; height: 70px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),#68c3ff); color: #fff; font-weight: 900; font-size: 23px; box-shadow: 0 12px 30px color-mix(in srgb,var(--accent) 25%,transparent); }
.auth-card h1 { margin: 0; font-size: 30px; letter-spacing: -.7px; }
.auth-card p { margin: 8px 0 18px; color: var(--muted); line-height: 1.8; }
.auth-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 5px; margin-bottom: 16px; background: var(--panel-soft); border-radius: 12px; }
.auth-tab { border: 0; background: transparent; color: var(--muted); border-radius: 9px; padding: 10px; cursor: pointer; font-weight: 800; }
.auth-tab.active { background: var(--accent); color: #fff; }
.auth-form { display: none; flex-direction: column; gap: 10px; }
.auth-form.active { display: flex; }
.auth-form input, .field, .auth-form textarea { width: 100%; min-height: 46px; border: 1px solid var(--border-strong); background: var(--input); color: var(--text); border-radius: 11px; padding: 11px 13px; outline: 0; }
.auth-form input:focus, .field:focus { border-color: color-mix(in srgb,var(--accent) 55%,transparent); background: var(--input-focus); }
.demo-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.demo-row code { font-size: 12px; color: var(--muted); background: var(--panel-soft); border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; }
.btn { min-height: 42px; border: 0; border-radius: 11px; background: var(--panel-strong); color: var(--text); padding: 0 14px; font-weight: 850; cursor: pointer; }
.btn:hover { filter: brightness(1.04); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.full { width: 100%; }

/* Desktop app shell - rewritten as flex, not grid */
.app:not(.hidden) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex !important;
  flex-direction: row;
  direction: ltr;
  background: var(--stage);
  overflow: hidden;
}
.dialogs {
  order: 2;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  height: 100dvh;
  direction: rtl;
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  display: flex !important;
  flex-direction: column;
  position: relative;
  z-index: 4;
  box-shadow: -1px 0 0 var(--border);
}
.chat {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 100dvh;
  direction: rtl;
  display: flex !important;
  flex-direction: column !important;
  background: var(--wall);
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
}
.chat > .chat-topbar { display: flex !important; }
.chat > .messages { display: flex !important; }
.chat > .composer { display: grid !important; }

.topbar { height: var(--header-h); min-height: var(--header-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bar); border-bottom: 1px solid var(--border); z-index: 8; backdrop-filter: blur(14px); }
.topbar h1 { margin: 0; flex: 1; color: var(--title); font-size: 20px; font-weight: 900; letter-spacing: -.45px; }
.icon-btn, .round-btn { width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: 9px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover, .round-btn:hover { color: var(--text); background: var(--hover); }
.search-wrap { padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.searchbox { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--input); color: var(--muted); border: 1px solid transparent; transition: border .14s, background .14s; }
.searchbox:focus-within { border-color: color-mix(in srgb,var(--accent) 42%,transparent); background: var(--input-focus); }
.searchbox input { min-width: 0; flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 14px; }
.tabs { min-height: 40px; display: flex; gap: 6px; align-items: center; padding: 0 12px 7px; background: var(--panel); border-bottom: 1px solid var(--border); overflow: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 0 13px; cursor: pointer; font-size: 12.5px; font-weight: 850; white-space: nowrap; }
.tabs button.active { background: var(--active); color: var(--accent); }

/* Dialog list */
.dialog-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 0 96px; background: var(--panel); scrollbar-gutter: stable; }
.dialog-list::-webkit-scrollbar, .messages::-webkit-scrollbar, .side-content::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 7px; height: 7px; }
.dialog-list::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb, .side-content::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: rgba(128,145,165,.32); border-radius: 10px; }
.dialog-row { min-height: 72px; display: grid; grid-template-columns: 54px minmax(0,1fr) 52px; gap: 10px; align-items: center; padding: 7px 12px; cursor: pointer; position: relative; transition: background .14s; }
.dialog-row:hover { background: var(--hover); }
.dialog-row.active { background: var(--active); }
.dialog-row.active::before { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); }
.dialog-main { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(128,145,165,.1); }
.dialog-title { min-width: 0; display: flex; align-items: center; gap: 6px; }
.dialog-title b { min-width: 0; max-width: 100%; color: var(--title); font-size: 15px; line-height: 1.35; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-sub { margin-top: 4px; color: var(--muted); font-size: 12.7px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-meta { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; border-bottom: 1px solid rgba(128,145,165,.1); }
.dialog-time { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.badge { min-width: 21px; height: 21px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 900; }
.mini-flag { display: inline-grid; place-items: center; width: 15px; height: 15px; color: var(--accent); }
.mini-flag:empty { display: none; }
.mini-flag .ico { width: 14px; height: 14px; }

/* Avatars */
.avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; position: relative; display: grid; place-items: center; overflow: visible; background: linear-gradient(135deg,var(--av1,#6478ff),var(--av2,#9c27b0)); color: #fff; font-weight: 900; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.avatar.sm { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; font-size: 10px; box-shadow: none; }
.avatar.big { width: 88px; height: 88px; min-width: 88px; font-size: 26px; border-radius: 24px; }
.avatar-spacer { width: 32px; min-width: 32px; }
.avatar::after { content: ""; display: none; position: absolute; left: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--panel); z-index: 2; }
.avatar.online::after { display: block; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted-2); margin-inline-start: 4px; box-shadow: 0 0 0 2px var(--bar); }
.presence-dot.online { background: var(--ok); }
.fab { position: absolute; left: 20px; bottom: 22px; width: 54px; height: 54px; border: 0; border-radius: 15px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 12px 30px color-mix(in srgb,var(--accent) 30%,transparent); cursor: pointer; }

/* Chat */
.chat-topbar { padding-inline: 12px; background: var(--bar); box-shadow: 0 1px 0 var(--border); }
#chatAvatar { width: 42px; height: 42px; min-width: 42px; font-size: 12px; }
.chat-title-btn { min-width: 0; flex: 1; height: 48px; border: 0; background: transparent; color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; text-align: right; cursor: pointer; padding: 0 4px; border-radius: 9px; }
.chat-title-btn:hover { background: var(--hover); }
.chat-title-btn strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); font-size: 15.8px; font-weight: 900; }
.chat-title-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.8px; font-weight: 650; display: flex; align-items: center; gap: 4px; }
.pinned-bar { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 max(24px,calc((100% - 880px)/2)); background: var(--bar); color: var(--text); border-bottom: 1px solid var(--border); }
.pinned-bar b { color: var(--accent); font-size: 12px; white-space: nowrap; }
.pinned-bar span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pinned-bar button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
.messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto;
  display: flex !important;
  flex-direction: column;
  direction: ltr;
  gap: 2px;
  padding: 16px max(24px,calc((100% - 880px)/2)) 12px;
  background-color: var(--wall);
  background-image: radial-gradient(rgba(75,91,109,.085) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.08), transparent 140px);
  background-size: 26px 26px, 100% 100%;
  scrollbar-gutter: stable;
}
.theme-dark .messages { background-image: radial-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.016), transparent 140px); }
.messages.bottom-stack { justify-content: flex-end; }
.messages.empty-mode { justify-content: center; align-items: center; }
.empty-chat { direction: rtl; width: min(360px,calc(100% - 48px)); margin: auto; text-align: center; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb,var(--panel) 68%, transparent); color: var(--muted); box-shadow: var(--bubble-shadow); }
.empty-chat div { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 18px; background: linear-gradient(135deg,var(--accent),#67c8ff); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.empty-chat h2 { margin: 0 0 8px; color: var(--title); font-size: 19px; }
.empty-chat p { margin: 0; line-height: 1.8; }
.date-chip { direction: rtl; align-self: center; margin: 8px auto; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }
.msg { direction: rtl; width: fit-content; max-width: min(78%,720px); display: flex; align-items: flex-end; gap: 7px; margin-block: 1.5px; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.theirs { align-self: flex-start; flex-direction: row; }
.msg.mine .avatar, .msg.mine .avatar-spacer { display: none; }
.msg.system { direction: rtl; align-self: center; max-width: min(70%,520px); padding: 7px 12px; border-radius: 999px; background: var(--chip); color: #fff; font-size: 12px; font-weight: 750; }
.msg.same-prev { margin-top: 0; }
.msg:not(.same-prev) { margin-top: 8px; }
.bubble { position: relative; background: var(--bubble-in); color: var(--text); border-radius: 13px 13px 13px 5px; padding: 8px 10px 5px; box-shadow: var(--bubble-shadow); min-width: 54px; overflow-wrap: anywhere; text-align: right; }
.msg.mine .bubble { background: var(--bubble-out); color: var(--bubble-out-text); border-radius: 13px 13px 5px 13px; }
.sender-name { color: var(--accent); font-weight: 900; font-size: 12px; margin-bottom: 3px; }
.reply-box { border-right: 3px solid var(--accent); background: color-mix(in srgb,var(--accent) 10%,transparent); border-radius: 9px; padding: 6px 8px; margin-bottom: 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.msg-text { white-space: pre-wrap; font-size: 14.3px; line-height: 1.65; }
.deleted-text { color: var(--muted); font-style: italic; }
.meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: color-mix(in srgb,currentColor 55%,transparent); font-size: 10px; margin-top: 2px; min-height: 14px; }
.read-icon { font-weight: 900; letter-spacing: -3px; color: currentColor; opacity: .82; }
.read-icon.read { color: #60a5fa; opacity: 1; }
.bubble-actions { position: absolute; top: -18px; inset-inline-end: 6px; display: none; gap: 3px; padding: 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 3; }
.bubble:hover .bubble-actions { display: flex; }
.bubble-actions button { width: 25px; height: 25px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.bubble-actions button:hover { background: var(--hover); color: var(--text); }
.bubble-actions .ico { width: 15px; height: 15px; }
.reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; justify-content: flex-end; }
.reaction-pill { border: 0; min-height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb,var(--accent) 14%,transparent); color: var(--text); cursor: pointer; font-size: 11px; }
.attachment { margin-top: 7px; }
.attachment img { max-width: min(52vw,360px); max-height: 360px; border-radius: 12px; display: block; }
.file-card { min-width: 210px; display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; background: color-mix(in srgb,var(--accent) 9%,transparent); border-radius: 11px; padding: 10px; }
.file-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.typing { min-height: 22px; padding: 0 max(24px,calc((100% - 880px)/2)) 4px; color: var(--accent); font-size: 12px; font-weight: 800; background: var(--wall); }
.composer-state { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 7px max(24px,calc((100% - 880px)/2)); border-top: 1px solid var(--border); background: var(--bar); color: var(--muted); font-size: 12px; }
.composer-state span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-state button { border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.composer { grid-template-columns: 42px minmax(0,1fr) 42px 48px; align-items: end; gap: 8px; min-height: var(--composer-h); padding: 9px max(20px,calc((100% - 880px)/2)) 10px; background: var(--bar); border-top: 1px solid var(--border); z-index: 9; direction: rtl; }
.composer textarea { width: 100%; min-height: 42px; height: 42px; max-height: 132px; resize: none; border: 1px solid transparent; border-radius: 11px; background: var(--input); color: var(--text); outline: 0; padding: 9px 14px; line-height: 1.55; overflow: auto; transition: border .14s, box-shadow .14s, background .14s; }
.composer textarea:focus { background: var(--input-focus); border-color: color-mix(in srgb,var(--accent) 36%,transparent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.send-btn { width: 48px; height: 48px; min-width: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent); }
.emoji-panel { position: absolute; bottom: 72px; left: max(20px,calc((100% - 880px)/2)); width: 320px; max-height: 260px; overflow: auto; display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 50; }
.emoji-panel button { height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer; }
.emoji-panel button:hover { background: var(--hover); }

/* Side, modal, menus */
.side { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.side.open { pointer-events: auto; }
.side-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .18s; }
.side.open .side-backdrop { opacity: 1; }
.side-sheet { position: absolute; top: 0; right: 0; width: min(392px,100vw); height: 100dvh; background: var(--panel); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .2s ease; display: flex; flex-direction: column; }
.side.open .side-sheet { transform: translateX(0); }
.side-head { height: 58px; min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--bar); }
.side-head h2 { margin: 0; font-size: 18px; }
.side-content { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.profile-cover { margin: -14px -14px 14px; padding: 24px 16px 18px; background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 20%,transparent), transparent); text-align: center; }
.profile-cover .avatar { margin: auto; }
.profile-cover h3 { margin: 12px 0 4px; font-size: 19px; }
.profile-cover p { margin: 0; color: var(--muted); }
.side-menu { display: flex; flex-direction: column; gap: 6px; }
.side-menu button, .settings-row, .contact-row, .member-row, .user-result { min-height: 58px; width: 100%; border: 0; border-radius: 12px; background: transparent; color: var(--text); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; text-align: right; padding: 9px 10px; cursor: pointer; }
.side-menu button:hover, .settings-row:hover, .contact-row:hover, .member-row:hover, .user-result:hover { background: var(--hover); }
.menu-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--active); color: var(--accent); }
.row-title { font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-btn { border: 0; border-radius: 9px; background: var(--panel-strong); color: var(--text); min-height: 32px; padding: 0 10px; cursor: pointer; font-weight: 800; }
.mini-btn.danger { color: var(--danger); background: rgba(239,68,68,.1); }
.form-grid { display: grid; gap: 10px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-card { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 13px; padding: 12px; }
.info-card h4 { margin: 0 0 10px; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; }
.color-dot.active { border-color: var(--text); }
.modal { position: fixed; inset: 0; z-index: 100; display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.modal-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(520px,calc(100vw - 24px)); max-height: min(86dvh,720px); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.modal-card header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--border); }
.modal-card h3 { margin: 0; font-size: 18px; }
.modal-body { padding: 14px; overflow: auto; }
.toast-host { position: fixed; left: 16px; bottom: 16px; z-index: 120; display: grid; gap: 8px; }
.toast { max-width: 340px; padding: 11px 14px; border-radius: 11px; background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); }
.toast.error { border-color: rgba(239,68,68,.45); color: var(--danger); }
.skeleton { height: 58px; margin: 10px 14px; border-radius: 13px; background: linear-gradient(90deg,var(--panel-soft),var(--panel-strong),var(--panel-soft)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.context-menu { position: fixed; z-index: 130; min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.context-menu button { width: 100%; border: 0; background: transparent; color: var(--text); border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.context-menu button:hover { background: var(--hover); }
.context-menu .menu-ico { width: 28px; height: 28px; }

/* Desktop guard */
@media (min-width: 861px) {
  body { position: static !important; overflow: hidden !important; }
  .app:not(.hidden) { display: flex !important; flex-direction: row !important; direction: ltr !important; }
  .dialogs { position: relative !important; inset: auto !important; order: 2 !important; width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; max-width: var(--sidebar-w) !important; display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }
  .chat { position: relative !important; inset: auto !important; order: 1 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }
  .chat > .chat-topbar { display: flex !important; min-height: var(--header-h) !important; }
  .chat > .messages { display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; }
  .chat > .composer { display: grid !important; min-height: var(--composer-h) !important; }
  .mobile-only { display: none !important; }
}

/* Mobile */
@media (max-width: 860px) {
  html, body, .app { width: 100vw; height: 100dvh; min-height: 100dvh; max-height: 100dvh; }
  body { position: fixed; inset: 0; overflow: hidden; background: var(--panel); }
  .app:not(.hidden) { display: block !important; position: fixed; inset: 0; background: var(--panel); direction: rtl; }
  .dialogs, .chat { position: fixed !important; inset: 0; width: 100vw; height: 100dvh; min-height: 100dvh; max-height: 100dvh; border: 0; }
  .dialogs { z-index: 10; display: flex; flex-direction: column; opacity: 1; visibility: visible; pointer-events: auto; background: var(--panel); transition: opacity .16s ease, visibility .16s ease; }
  .chat { z-index: 20; display: flex !important; flex-direction: column; background: var(--wall); transform: translateX(-100%) !important; transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: none; }
  .app.chat-open .chat { transform: translateX(0) !important; }
  .app.chat-open .dialogs { opacity: 0; visibility: hidden; pointer-events: none; }
  .mobile-only { display: grid !important; }
  .topbar { height: 54px; min-height: 54px; padding: 0 7px; gap: 4px; }
  .dialogs-topbar h1 { font-size: 20px; }
  .icon-btn, .round-btn { width: 38px; height: 38px; min-width: 38px; border-radius: 9px; }
  .search-wrap { padding: 6px 10px 8px; border-bottom: 0; }
  .searchbox { min-height: 38px; border-radius: 10px; }
  .tabs { min-height: 38px; padding: 0 10px 6px; }
  .tabs button { height: 29px; padding: 0 11px; }
  .tabs button[data-folder="channel"] { display: none; }
  .dialog-list { padding-bottom: calc(82px + env(safe-area-inset-bottom)); scrollbar-width: none; }
  .dialog-list::-webkit-scrollbar, .messages::-webkit-scrollbar { display: none; }
  .dialog-row { min-height: 70px; grid-template-columns: 55px minmax(0,1fr) 46px; gap: 8px; padding: 7px 10px; }
  .dialog-row.active::before { display: none; }
  .dialog-row .avatar { width: 50px; height: 50px; min-width: 50px; }
  .dialog-title b { font-size: 14.8px; }
  .dialog-sub { font-size: 12.6px; }
  .dialog-meta { align-items: flex-start; }
  .fab { width: 54px; height: 54px; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 15px; }
  .chat-topbar { padding: 0 2px 0 6px; gap: 3px; }
  .chat-topbar .icon-btn { width: 38px; height: 38px; min-width: 38px; }
  #backBtn { margin-inline-end: -2px; }
  #chatAvatar { width: 40px; height: 40px; min-width: 40px; }
  .chat-title-btn { height: 44px; padding-inline: 3px; align-items: flex-start; }
  .chat-title-btn strong { font-size: 15px; }
  .chat-title-btn span { font-size: 11.2px; }
  #chatSearchBtn { display: none; }
  .pinned-bar { padding-inline: 10px; min-height: 38px; }
  .messages { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; padding: 8px 7px 7px; gap: 2px; background-color: var(--wall); background-image: radial-gradient(rgba(75,91,109,.1) 1px,transparent 1px), linear-gradient(180deg,rgba(255,255,255,.12),transparent 120px); background-size: 26px 26px, 100% 100%; scrollbar-width: none; direction: ltr; }
  .theme-dark .messages { background-image: radial-gradient(rgba(255,255,255,.026) 1px,transparent 1px), linear-gradient(180deg,rgba(255,255,255,.018),transparent 120px); }
  .empty-chat { max-width: 310px; width: calc(100% - 36px); padding: 16px; border-radius: 15px; }
  .empty-chat div { width: 64px; height: 64px; border-radius: 16px; }
  .msg { max-width: 91%; gap: 5px; margin-block: 1px; }
  .avatar.sm, .avatar-spacer { width: 26px; height: 26px; min-width: 26px; font-size: 9.5px; }
  .bubble { border-radius: 12px 12px 4px 12px; padding: 7px 9px 4px; }
  .msg.mine .bubble { border-radius: 12px 12px 12px 4px; }
  .msg-text { font-size: 14.2px; line-height: 1.58; }
  .meta { font-size: 9.8px; }
  .bubble-actions { display: none !important; }
  .date-chip { font-size: 10.8px; padding: 4px 9px; margin: 6px auto; }
  .attachment img { max-width: min(74vw,300px); max-height: 285px; }
  .typing { min-height: 19px; padding: 0 10px 2px; font-size: 11px; }
  .composer-state { min-height: 39px; padding: 6px 9px; font-size: 12px; }
  .composer { min-height: calc(58px + env(safe-area-inset-bottom)); grid-template-columns: 39px minmax(0,1fr) 39px 44px; gap: 4px; padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .composer .round-btn { width: 39px; height: 39px; min-width: 39px; }
  .composer textarea { min-height: 40px; height: 40px; max-height: 120px; border-radius: 12px; padding: 8px 13px; font-size: 14.2px; }
  .send-btn { width: 44px; height: 44px; min-width: 44px; border-radius: 13px; }
  .emoji-panel { position: fixed; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; max-height: 235px; grid-template-columns: repeat(7,minmax(0,1fr)); border-radius: 16px; }
  .side-backdrop { display: none; }
  .side-sheet { width: 100vw; max-width: 100vw; height: 100dvh; transform: translateX(100%); box-shadow: none; }
  .side.open .side-sheet { transform: translateX(0); }
  .side-head { height: 54px; min-height: 54px; }
  .side-content { padding: 12px; }
  .profile-cover { margin: -12px -12px 12px; }
  .modal-card { inset: auto 0 0 0; top: auto; left: auto; transform: none; width: 100%; max-height: min(88dvh,720px); border-radius: 18px 18px 0 0; border-inline: 0; border-bottom: 0; }
  .modal-card header { height: 56px; }
  .modal-body { padding: 12px; }
  .toast-host { left: 10px; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}
@media (max-width: 380px) {
  .dialog-row { grid-template-columns: 52px minmax(0,1fr) 42px; }
  .dialog-row .avatar { width: 47px; height: 47px; min-width: 47px; }
  .msg { max-width: 93%; }
  .avatar.sm, .avatar-spacer { width: 24px; height: 24px; min-width: 24px; }
  .composer { grid-template-columns: 36px minmax(0,1fr) 36px 42px; }
  .composer .round-btn { width: 36px; min-width: 36px; }
  .send-btn { width: 42px; min-width: 42px; }
  .tabs button { padding: 0 9px; }
}

/* v17 chat states, mobile width, and richer info panel */
.dialog-row.unread .dialog-title b { font-weight: 950; color: var(--title); }
.dialog-row.unread .dialog-sub { color: var(--text); font-weight: 750; }
.dialog-sub { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dialog-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-label { color: var(--muted-2); font-weight: 800; flex: 0 0 auto; }
.pending-badge { min-width: 21px; height: 21px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--muted); background: var(--panel-soft); font-size: 10.5px; font-weight: 900; }
.dialog-row .read-icon { letter-spacing: -2px; margin-inline-end: 1px; font-size: 12px; line-height: 1; flex: 0 0 auto; }
.read-icon.sent { color: currentColor; opacity: .58; }
.read-icon.delivered { color: color-mix(in srgb, var(--muted) 80%, var(--text)); opacity: .9; }
.read-icon.read { color: #38a7ff !important; opacity: 1; }
.meta .read-icon { min-width: 18px; text-align: left; }
.detail-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: 0; }
.detail-row .menu-ico { width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb,var(--accent) 12%,transparent); color: var(--accent); }
.detail-row div:last-child { min-width: 0; display: grid; gap: 3px; }
.detail-row b { color: var(--title); font-size: 12px; }
.detail-row span { color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.info-profile .avatar.big { margin-inline: auto; }
.shared-section h4 { display: flex; align-items: center; justify-content: space-between; }
.shared-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.shared-photo { aspect-ratio: 1; display: block; border-radius: 12px; overflow: hidden; background: var(--panel-strong); border: 1px solid var(--border); }
.shared-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-list { display: grid; gap: 8px; }
.shared-file, .shared-link { text-decoration: none; color: var(--text); min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb,var(--panel) 64%,var(--panel-soft)); }
.shared-file:hover, .shared-link:hover { background: var(--hover); }
.shared-file .menu-ico, .shared-link .menu-ico { width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--accent); flex: 0 0 auto; }
.shared-file div:last-child, .shared-link div:last-child { min-width: 0; display: grid; gap: 3px; }
.shared-file b, .shared-link b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); font-size: 13px; }
.shared-file span, .shared-link span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-shared { margin: 0; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); text-align: center; line-height: 1.7; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .dialogs, .chat { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; right: 0 !important; left: 0 !important; }
  .app:not(.hidden), .dialogs.view-active { width: 100vw !important; max-width: 100vw !important; }
  .dialog-list { width: 100vw !important; max-width: 100vw !important; }
  .dialog-row { width: 100%; }
  .shared-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .profile-details .detail-row { padding-block: 11px; }
}

/* v18 message UI, read receipts, avatars and media upload polish */
.msg { direction: ltr !important; align-items: flex-end; }
.msg.mine { align-self: flex-end !important; flex-direction: row !important; }
.msg.theirs { align-self: flex-start !important; flex-direction: row !important; }
.msg .bubble { direction: rtl; }
.msg.mine .avatar, .msg.mine .avatar-spacer { display: grid !important; order: 2; }
.msg.mine .bubble { order: 1; }
.msg.theirs .avatar, .msg.theirs .avatar-spacer { order: 1; }
.msg.theirs .bubble { order: 2; }
.msg.same-next .avatar { opacity: 0; box-shadow: none; pointer-events: none; }
.avatar-spacer { display: block !important; opacity: 0; }
.msg.mine .avatar::after, .msg.theirs .avatar::after { border-color: var(--wall); }
.msg.mine .bubble { border-radius: 13px 13px 5px 13px; }
.msg.theirs .bubble { border-radius: 13px 13px 13px 5px; }

.badge { box-shadow: 0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent); }
.dialog-row.unread .badge { transform: scale(1.02); }
.pending-badge { position: relative; }
.pending-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); margin-inline-end: 2px; }
.read-icon { font-family: Arial, sans-serif; }
.read-icon.sent { letter-spacing: 0; }
.read-icon.delivered { color: #9aa9b9 !important; }
.read-icon.read { color: #30a4ff !important; text-shadow: 0 0 12px rgba(48,164,255,.25); }

.attachment.media-attachment { margin-top: 7px; }
.image-card { position: relative; display: block; padding: 0; border: 0; background: transparent; border-radius: 12px; overflow: hidden; cursor: pointer; color: inherit; }
.image-card img { display: block; max-width: min(52vw, 360px); max-height: 360px; width: auto; height: auto; object-fit: cover; border-radius: 12px; }
.image-card::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.media-chip { position: absolute; left: 8px; bottom: 8px; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.44); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(10px); }
.file-card { min-width: 260px; max-width: min(70vw,420px); display: grid !important; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; text-decoration: none; color: inherit; background: color-mix(in srgb,var(--accent) 9%,transparent); border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius: 12px; padding: 10px; cursor: pointer; }
.file-card:hover { background: color-mix(in srgb,var(--accent) 13%,transparent); }
.file-info { min-width: 0; display: grid; gap: 3px; }
.file-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); font-size: 13px; }
.file-info small { color: var(--muted); font-size: 11.5px; }
.file-actions { display: flex; gap: 6px; }
.file-actions a { min-height: 28px; display: grid; place-items: center; padding: 0 8px; border-radius: 8px; background: var(--panel); color: var(--accent); text-decoration: none; font-size: 11.5px; font-weight: 850; border: 1px solid var(--border); }
.file-actions a:hover { background: var(--hover); }

.upload-msg { opacity: .98; }
.upload-bubble { min-width: 260px; }
.upload-preview { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 10px; }
.upload-preview img, .upload-file-ico { width: 54px; height: 54px; border-radius: 11px; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb,var(--accent) 18%,transparent); color: var(--accent); overflow: hidden; }
.upload-preview b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 13px; }
.upload-preview small { color: color-mix(in srgb,currentColor 65%,transparent); font-size: 11px; }
.upload-track { height: 5px; margin-top: 9px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; }
.upload-track span { display: block; height: 100%; width: 0%; border-radius: inherit; background: #fff; transition: width .16s ease; }
.theme-light .upload-track { background: rgba(30,50,70,.12); }
.theme-light .upload-track span { background: var(--accent); }
.upload-label { font-weight: 850; }

.profile-avatar-btn { border: 0; background: transparent; color: inherit; padding: 0; margin: 0 auto 8px; display: grid; place-items: center; gap: 7px; cursor: pointer; }
.profile-avatar-btn .avatar.big { margin: 0; transition: transform .15s ease, box-shadow .15s ease; }
.profile-avatar-btn:hover .avatar.big { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,0,0,.18); }
.profile-avatar-btn span { color: var(--accent); font-size: 12px; font-weight: 850; }
.shared-photo { border: 0; padding: 0; cursor: pointer; }
.media-viewer { display: grid; gap: 12px; justify-items: center; }
.media-viewer img { max-width: min(84vw, 860px); max-height: 70dvh; display: block; object-fit: contain; border-radius: 14px; background: #000; box-shadow: var(--shadow); }
.media-viewer-bar { width: min(84vw, 860px); display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--panel-soft); border: 1px solid var(--border); }
.media-viewer-bar b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); }
.media-viewer-bar span { color: var(--muted); font-size: 12px; }
.file-view { text-align: center; padding: 16px; }
.file-hero { width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--accent),#7dd3fc); }
.file-hero .ico { width: 42px; height: 42px; }
.split a.btn { display: grid; place-items: center; text-decoration: none; }

@media (max-width: 860px) {
  .msg { max-width: 96%; gap: 5px; }
  .msg.mine .avatar, .msg.theirs .avatar, .avatar-spacer { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 9px !important; font-size: 9px !important; }
  .image-card img { max-width: min(72vw,300px); max-height: 290px; }
  .file-card { min-width: 230px; max-width: 78vw; grid-template-columns: 38px minmax(0,1fr); }
  .file-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .upload-bubble { min-width: 230px; }
  .media-viewer img { max-width: 92vw; max-height: 64dvh; }
  .media-viewer-bar { width: 92vw; flex-wrap: wrap; }
}

/* v19 Telegram/WhatsApp-like media download state */
.media-card, .file-download-card { -webkit-tap-highlight-color: transparent; }
.image-card.media-card { position: relative; width: fit-content; max-width: 100%; min-width: 180px; min-height: 136px; background: #111827; overflow: hidden; isolation: isolate; }
.image-card.media-card .media-img { width: auto; min-width: 180px; min-height: 136px; max-width: min(52vw, 360px); max-height: 360px; object-fit: cover; transform: translateZ(0); transition: filter .22s ease, transform .22s ease, opacity .22s ease; }
.image-card.needs-download .media-img { filter: blur(14px) saturate(.75) brightness(.78); transform: scale(1.045); opacity: .9; }
.image-card.downloading .media-img { filter: blur(9px) saturate(.85) brightness(.82); }
.image-card.downloaded .media-img { filter: none; transform: none; opacity: 1; }
.media-fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42)); z-index: 2; pointer-events: none; }
.media-download-center { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 6px; color: #fff; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.media-download-center b { font-size: 12px; line-height: 1; font-weight: 900; }
.media-download-center small { font-size: 11px; font-weight: 800; opacity: .9; }
.download-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.34) 0); box-shadow: 0 12px 30px rgba(0,0,0,.26); color: #fff; }
.download-ring::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: rgba(15,23,42,.74); backdrop-filter: blur(10px); }
.download-icon { position: relative; z-index: 1; display: grid; place-items: center; }
.download-icon .ico { width: 22px; height: 22px; stroke-width: 2.35; }
.download-percent { position: absolute; z-index: 2; inset: auto 0 8px; text-align: center; font-size: 9px; line-height: 1; font-weight: 950; opacity: 0; transform: translateY(3px); transition: opacity .15s ease, transform .15s ease; }
.downloading .download-percent, .upload-msg .download-percent { opacity: 1; transform: translateY(0); }
.downloading .download-ring { box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 12px 34px rgba(0,0,0,.34); }
.downloading .download-icon .ico { animation: mediaSpin 1.05s linear infinite; }
.download-ring.done { background: conic-gradient(#22c55e 100%, #22c55e 0); }
.download-ring.done .download-icon .ico { animation: none; }
@keyframes mediaSpin { to { transform: rotate(360deg); } }
.downloaded-chip { background: rgba(0,0,0,.38); }

.file-download-card { grid-template-columns: 56px minmax(0,1fr) auto !important; min-height: 66px; }
.file-download-card.needs-download { background: color-mix(in srgb,var(--accent) 7%,var(--panel)); }
.file-download-card.downloading { background: color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.file-download-ico { width: 52px; height: 52px; display: grid; place-items: center; }
.file-download-card .download-ring { width: 46px; height: 46px; }
.file-download-card .download-ring::before { inset: 4px; background: color-mix(in srgb,var(--panel) 76%,#0f172a); }
.file-download-card .download-icon .ico { width: 18px; height: 18px; color: var(--accent); }
.file-download-card .download-percent { font-size: 8px; bottom: 7px; color: var(--title); }
.inline-download { border: 1px solid var(--border); background: var(--panel); color: var(--accent); min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 900; cursor: pointer; }
.inline-download:hover { background: var(--hover); }
.download-done { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb,#22c55e 16%,transparent); color: #22c55e; }
.download-done .ico { width: 22px; height: 22px; }

.upload-media-thumb { width: 64px; height: 64px; border-radius: 13px; display: grid; place-items: center; position: relative; overflow: hidden; background: color-mix(in srgb,var(--accent) 16%,transparent); }
.upload-media-thumb img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(.86); transform: scale(1.04); }
.upload-media-thumb .upload-ring, .upload-file-ico .upload-ring { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; }
.upload-file-ico { position: relative; width: 64px !important; height: 64px !important; border-radius: 13px !important; }
.upload-msg .download-ring::before { inset: 4px; }
.upload-msg .download-icon .ico { width: 17px; height: 17px; }
.upload-msg .upload-ring .download-icon .ico { animation: mediaSpin 1.05s linear infinite; }
.upload-msg .upload-ring .download-percent { font-size: 8px; bottom: 6px; opacity: 1; }
.upload-bubble { box-shadow: 0 10px 28px color-mix(in srgb,var(--accent) 12%,transparent); }

@media (max-width: 860px) {
  .image-card.media-card { min-width: 172px; min-height: 128px; }
  .image-card.media-card .media-img { min-width: 172px; min-height: 128px; max-width: min(73vw, 310px); max-height: 300px; }
  .download-ring { width: 52px; height: 52px; }
  .file-download-card { grid-template-columns: 48px minmax(0,1fr) !important; }
  .file-download-card .file-actions { grid-column: 2; justify-content: flex-start; }
  .file-download-ico { width: 46px; height: 46px; }
  .file-download-card .download-ring { width: 42px; height: 42px; }
}

/* v20 stability/account isolation and cleaner media placeholders */
.image-card.media-card .placeholder-thumb {
  display: block;
  width: auto;
  min-width: 180px;
  min-height: 136px;
  max-width: min(52vw, 360px);
  max-height: 360px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 34%),
    radial-gradient(circle at 80% 82%, rgba(34,197,94,.24), transparent 32%),
    linear-gradient(135deg, rgba(148,163,184,.28), rgba(15,23,42,.64));
  filter: blur(10px) saturate(.88) brightness(.82);
  transform: scale(1.04);
}
.theme-light .image-card.media-card .placeholder-thumb {
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb,var(--accent) 28%,transparent), transparent 34%),
    radial-gradient(circle at 80% 82%, rgba(34,197,94,.18), transparent 32%),
    linear-gradient(135deg, #cbd5e1, #94a3b8);
}
.file-card.needs-download .file-actions button,
.file-card.downloading .file-actions button { pointer-events: none; opacity: .72; }
.dialog-row { contain: layout paint; }
.messages { contain: layout; }
.chat-title-btn { cursor: pointer; }
@media (max-width: 860px) {
  .image-card.media-card .placeholder-thumb { min-width: 172px; min-height: 128px; max-width: min(73vw, 310px); max-height: 300px; }
}

/* v21 full-stack stability: media players, voice recording, tighter receipts */
.composer { grid-template-columns: 42px minmax(0,1fr) 42px 42px 48px !important; }
.voice-btn.recording { background: rgba(239,68,68,.14) !important; color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239,68,68,.08); animation: voicePulse 1s infinite; }
@keyframes voicePulse { 50% { transform: scale(.96); box-shadow: 0 0 0 8px rgba(239,68,68,.08); } }

.video-card.media-card { position: relative; width: fit-content; max-width: 100%; min-width: 230px; min-height: 150px; background: #0f172a; border: 0; overflow: hidden; border-radius: 12px; color: #fff; isolation: isolate; }
.video-placeholder { display: grid; place-items: center; width: min(52vw, 390px); height: min(34vw, 230px); min-width: 230px; min-height: 150px; background:
  radial-gradient(circle at 20% 18%, color-mix(in srgb,var(--accent) 35%,transparent), transparent 30%),
  linear-gradient(135deg, #0f172a, #334155); filter: blur(4px) brightness(.82); transform: scale(1.015); }
.play-shape { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); font-size: 25px; text-indent: -4px; }
.media-video { width: min(52vw, 420px); max-height: 360px; min-width: 230px; display: block; background: #000; border-radius: 12px; }
.viewer-video { width: min(86vw, 920px); max-height: 72dvh; display: block; background: #000; border-radius: 14px; box-shadow: var(--shadow); }
.viewer-audio { width: min(84vw, 520px); margin: 10px auto; display: block; }

.audio-card.file-download-card { min-width: 270px; max-width: min(520px, 64vw); }
.audio-card .file-info { display: grid; gap: 5px; min-width: 0; }
.audio-player { width: min(360px, 44vw); max-width: 100%; height: 34px; display: block; }
.voice-card { border-inline-start: 3px solid var(--accent); }
.audio-upload .ico { width: 25px; height: 25px; }
.upload-media-thumb video { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.8); transform: scale(1.04); }

.dialog-meta .badge { align-self: flex-start; }
.dialog-row.unread .badge { box-shadow: 0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent); }
.read-icon.sent { letter-spacing: 0; }
.read-icon.delivered, .read-icon.read { letter-spacing: -3px; }
.meta .read-icon.sent { min-width: 10px; }
.meta .read-icon.delivered, .meta .read-icon.read { min-width: 18px; }

@media (max-width: 860px) {
  .composer { grid-template-columns: 38px minmax(0,1fr) 38px 38px 43px !important; gap: 4px; }
  .composer .round-btn { width: 38px; height: 38px; min-width: 38px; }
  .send-btn { width: 43px; height: 43px; min-width: 43px; }
  .video-card.media-card, .video-placeholder { min-width: 182px; min-height: 128px; }
  .video-placeholder { width: min(73vw, 320px); height: min(54vw, 210px); }
  .media-video { width: min(73vw, 320px); min-width: 182px; max-height: 300px; }
  .audio-card.file-download-card { min-width: 236px; max-width: 78vw; }
  .audio-player { width: min(58vw, 260px); }
}
@media (max-width: 380px) {
  .composer { grid-template-columns: 35px minmax(0,1fr) 35px 35px 40px !important; }
  .composer .round-btn { width: 35px; min-width: 35px; }
  .send-btn { width: 40px; min-width: 40px; }
}

/* v22 architecture / messenger polish */
.read-icon.sent{color:#8b97a7}
.read-icon.delivered{color:#8b97a7;letter-spacing:-3px}
.read-icon.read{color:#229ed9;letter-spacing:-3px;font-weight:800}
.dialog-row .badge{min-width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;box-shadow:0 6px 14px rgba(34,158,217,.22)}
.pending-badge{min-width:22px;height:22px;border-radius:999px;background:rgba(137,151,167,.2);color:var(--muted);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.msg.mine{justify-content:flex-start;direction:ltr}.msg.theirs{justify-content:flex-start;direction:ltr}.msg.mine .bubble{direction:rtl}.msg.theirs .bubble{direction:rtl}
.msg.mine .avatar{order:2;margin-inline-start:6px;margin-inline-end:0}.msg.mine .bubble{order:1;background:linear-gradient(180deg,rgba(34,158,217,.18),rgba(34,158,217,.09));border-color:rgba(34,158,217,.18)}
.msg.theirs .avatar{order:0;margin-inline-end:6px}.msg.theirs .bubble{order:1}
.msg.same-next .avatar-spacer{width:34px;min-width:34px}
.media-card{overflow:hidden;border-radius:14px;border:1px solid var(--border);background:rgba(127,127,127,.08);position:relative;min-height:150px;display:block}
.media-card .blur-preview,.shared-photo .blur-preview{display:block;width:100%;height:100%;min-height:150px;background:linear-gradient(135deg,rgba(34,158,217,.25),rgba(139,92,246,.22)),radial-gradient(circle at 70% 20%,rgba(255,255,255,.22),transparent 35%);filter:blur(2px);transform:scale(1.02)}
.media-download-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.38);background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34))}
.media-download-center.tiny{font-size:11px}
.download-ring{--p:0; width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;position:relative;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.28) 0);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.download-ring:before{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(0,0,0,.48);backdrop-filter:blur(8px)}
.download-ring .download-icon,.download-ring .download-percent{position:relative;z-index:2}.download-ring .download-percent{font-size:11px;font-weight:900}.downloading .download-icon{animation:tcspin 1s linear infinite}@keyframes tcspin{to{transform:rotate(360deg)}}
.audio-card .audio-player{width:100%;margin-top:8px}.voice-card{border-radius:18px;background:rgba(34,158,217,.07)}
.voice-rec-ui{display:flex;align-items:center;gap:10px;width:100%;direction:ltr}.voice-rec-ui b{font-variant-numeric:tabular-nums;color:var(--danger,#ef4444)}.rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.5);animation:pulseRec 1.1s infinite}@keyframes pulseRec{70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.voice-wave{flex:1;display:flex;align-items:center;gap:2px;height:24px;overflow:hidden}.voice-wave i{display:block;width:3px;border-radius:3px;background:var(--accent);height:8px;animation:wave 1s ease-in-out infinite}.voice-wave i:nth-child(2n){height:15px;animation-delay:.1s}.voice-wave i:nth-child(3n){height:22px;animation-delay:.2s}.voice-wave i:nth-child(5n){height:12px;animation-delay:.35s}@keyframes wave{50%{transform:scaleY(.45);opacity:.55}}
.voice-cancel,.voice-send{border:0;border-radius:10px;padding:7px 11px;font-weight:800;cursor:pointer}.voice-cancel{background:rgba(239,68,68,.12);color:#ef4444}.voice-send{background:var(--accent);color:#fff}
.composer-state{min-height:44px}.composer-state #composerStateText{width:100%}
.shared-photo{height:86px;border-radius:12px;overflow:hidden;position:relative;background:rgba(127,127,127,.08)}
.shared-photo img{width:100%;height:100%;object-fit:cover}.shared-photo .download-ring{width:36px;height:36px}.shared-photo .download-percent{font-size:9px}
.file-download-card.downloading{pointer-events:none;opacity:.92}
@media (max-width:860px){.dialogs{width:100%;max-width:none}.app:not(.chat-open) .dialogs{display:flex;flex:1}.app.chat-open .dialogs{display:none}.chat{inset:0;width:100%;max-width:none}.msg .bubble{max-width:min(76vw,420px)}.composer{border-radius:0;padding-inline:8px}.messages{padding-bottom:8px}}

/* ===== bundled from v25-system.css ===== */
/* v25 production stabilization overrides: a small design system and hard layout guards */
:root{
  --radius-sm:8px;--radius-md:10px;--radius-lg:14px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --font-ui:Tahoma,"Vazirmatn","IRANSans",Arial,sans-serif;
  --chat-bg:#eef2f6;--panel-bg:#fff;--panel-2:#f7f9fc;--line:#d9e0ea;--text:#17212b;--muted:#72808f;
  --accent:#229ED9;--bubble-me:#d9fdd3;--bubble-other:#fff;
}
body.theme-dark{--chat-bg:#0f1720;--panel-bg:#17212b;--panel-2:#202c37;--line:#2c3a46;--text:#eef3f7;--muted:#9ba8b4;--bubble-me:#1f6f56;--bubble-other:#202c37;}
html,body{height:100%;overflow:hidden;font-family:var(--font-ui);background:var(--chat-bg);color:var(--text);}
.app{height:100dvh;min-height:100dvh;display:flex;direction:rtl;background:var(--chat-bg);}
.dialogs{flex:0 0 380px;max-width:420px;min-width:320px;background:var(--panel-bg);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;z-index:3;}
.chat{flex:1 1 auto;min-width:0;height:100dvh;display:flex!important;flex-direction:column!important;background:linear-gradient(180deg,var(--chat-bg),color-mix(in srgb,var(--chat-bg) 86%,#fff 14%));visibility:visible!important;opacity:1!important;transform:none!important;}
.chat-topbar{height:64px;min-height:64px;display:flex!important;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel-bg) 94%,transparent);backdrop-filter:blur(12px);z-index:2;}
.messages{flex:1 1 auto;min-height:0;overflow:auto;padding:18px clamp(16px,3vw,42px) 10px!important;display:flex!important;flex-direction:column!important;gap:3px;background:transparent;}
.messages.bottom-stack{justify-content:flex-end;}
.composer{display:grid!important;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:end;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel-bg) 96%,transparent);backdrop-filter:blur(14px);min-height:62px;z-index:2;}
.composer.hidden{display:none!important;}
.composer textarea{min-height:42px;max-height:130px;resize:none;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-2);color:var(--text);padding:11px 14px;font:14px/1.7 var(--font-ui);outline:none;}
.composer textarea:focus{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.icon-btn,.send-btn{border:0;border-radius:var(--radius-md);width:42px;height:42px;display:inline-grid;place-items:center;background:var(--panel-2);color:var(--muted);cursor:pointer;transition:.15s ease;}
.icon-btn:hover,.send-btn:hover{background:color-mix(in srgb,var(--accent) 15%,var(--panel-2));color:var(--accent);}
.send-btn{background:var(--accent);color:#fff;border-radius:50%;}
.dialog-list{overflow:auto;min-height:0;}
.dialog-row{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:10px 12px;margin:2px 8px;border-radius:var(--radius-md);cursor:pointer;min-height:70px;border:1px solid transparent;}
.dialog-row:hover{background:var(--panel-2);}
.dialog-row.active{background:color-mix(in srgb,var(--accent) 15%,var(--panel-bg));border-color:color-mix(in srgb,var(--accent) 23%,transparent);}
.dialog-title b{font-size:14px;font-weight:700;}
.dialog-sub{font-size:12px;color:var(--muted);display:flex;gap:5px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.dialog-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;font-size:11px;color:var(--muted);}
.badge,.pending-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:var(--accent);}
.pending-badge{background:var(--muted);}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;background:linear-gradient(135deg,var(--av1),var(--av2));color:#fff;font-weight:800;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.08);}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar.sm{width:34px;height:34px;font-size:12px;}
.avatar.online::after{content:"";position:absolute;inset:auto 2px 2px auto;width:11px;height:11px;border-radius:50%;background:#27c96b;border:2px solid var(--panel-bg);}
.msg{display:flex;gap:7px;align-items:flex-end;max-width:76%;margin:2px 0;}
.msg.mine{align-self:flex-end;flex-direction:row-reverse;}
.msg.theirs{align-self:flex-start;}
.msg.same-prev{margin-top:0;}.msg:not(.same-prev){margin-top:8px;}
.avatar-spacer{width:34px;flex:0 0 34px;}
.bubble{position:relative;border-radius:14px;padding:7px 10px 5px;min-width:58px;background:var(--bubble-other);box-shadow:0 1px 2px rgba(0,0,0,.08);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);}
.mine .bubble{background:var(--bubble-me);}
.msg-text{font-size:14px;line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:10.5px;margin-top:2px;}
.read-icon{font-weight:800;letter-spacing:-3px;color:#8c99a7;padding-inline-start:3px;}
.read-icon.read{color:#2aabee;}.read-icon.delivered{color:#8c99a7;}.read-icon.sent{color:#8c99a7;letter-spacing:0;}
.attachment{margin-top:6px;}.media-card,.file-download-card{border-radius:var(--radius-md)!important;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);}
.image-card,.video-card{position:relative;display:block;width:min(310px,64vw);min-height:180px;background:#111;border:0;padding:0;cursor:pointer;}
.media-img,.media-video,.video-placeholder{width:100%;height:100%;max-height:360px;object-fit:cover;display:block;}
.blur-preview{filter:blur(14px);transform:scale(1.04);opacity:.72;background:linear-gradient(135deg,#8595a8,#303c4a);}
.media-fog{position:absolute;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(1px);}
.media-download-center{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.download-ring{--p:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.32) 0);position:relative;}
.download-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(0,0,0,.42);}
.download-icon,.download-percent{position:relative;z-index:1;font-size:10px}.downloading .download-icon{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.file-card,.audio-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-bg);min-width:min(320px,70vw);}
.file-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.file-info b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-info small{font-size:11px;color:var(--muted)}
.file-actions{display:flex;gap:6px}.file-actions a,.inline-download{font-size:12px;border:0;border-radius:var(--radius-sm);padding:7px 9px;background:color-mix(in srgb,var(--accent) 14%,var(--panel-2));color:var(--accent);text-decoration:none;cursor:pointer;}
.audio-player{width:240px;max-width:100%;height:34px;margin-top:4px;}
.empty-chat{margin:auto;text-align:center;color:var(--muted);max-width:360px;}.empty-chat h2{color:var(--text);font-size:20px;margin:10px 0 6px}.empty-chat .ico{width:48px;height:48px;opacity:.5}
@media (max-width:860px){
  .app{display:block;height:100dvh;overflow:hidden;}
  .dialogs{position:absolute;inset:0;width:100%!important;max-width:none!important;min-width:0!important;border:0;transform:translateX(0);transition:.18s ease;}
  .chat{position:absolute;inset:0;width:100%;height:100dvh;transform:translateX(-100%)!important;transition:.2s ease;z-index:5;}
  .app.chat-open .chat{transform:translateX(0)!important;}
  .app.chat-open .dialogs{transform:translateX(100%);}
  .chat-topbar{height:58px;min-height:58px;padding:0 10px;}
  .messages{padding:12px 10px 8px!important;}
  .composer{grid-template-columns:auto auto 1fr auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
  .composer textarea{min-height:40px;border-radius:18px;padding:9px 12px;}
  .icon-btn,.send-btn{width:39px;height:39px;}
  .msg{max-width:93%;}.avatar.sm{width:30px;height:30px}.avatar-spacer{width:30px;flex-basis:30px}.bubble{border-radius:13px;padding:7px 9px 5px}.msg-text{font-size:14px}.image-card,.video-card{width:min(315px,74vw);min-height:160px}
  .dialog-row{grid-template-columns:50px 1fr auto;margin:1px 6px;padding:10px 8px;}
}

/* ===== bundled from v26-media.css ===== */
/* v26 professional media and voice UI layer */
:root{
  --media-radius:12px;
  --media-shadow:0 8px 24px rgba(15,23,42,.12);
  --voice-bg:color-mix(in srgb,var(--panel-bg) 92%,var(--accent) 8%);
  --voice-line:color-mix(in srgb,var(--accent) 18%,var(--line));
}
.msg.mine{align-self:flex-end!important;flex-direction:row-reverse!important}.msg.theirs{align-self:flex-start!important;flex-direction:row!important}
.msg.mine .bubble{border-bottom-right-radius:6px!important}.msg.theirs .bubble{border-bottom-left-radius:6px!important}
.attachment{max-width:100%}.media-wrap{margin-top:7px}.media-card{border:0!important;border-radius:var(--media-radius)!important;box-shadow:var(--media-shadow);overflow:hidden;isolation:isolate;background:#101827}.image-card,.video-card{width:min(344px,58vw)!important;min-height:194px!important;max-height:420px!important}.image-card .media-img,.video-card .media-img,.media-video,.video-placeholder{width:100%!important;height:100%!important;min-height:194px!important;max-height:420px!important;object-fit:cover!important}.media-img.blur-preview{filter:blur(16px) saturate(.85) brightness(.72)!important;transform:scale(1.055)!important;opacity:.92}.media-fog{background:linear-gradient(180deg,rgba(5,10,18,.08),rgba(5,10,18,.54))!important;backdrop-filter:blur(1px);z-index:2}.media-download-center{z-index:3!important;text-align:center;gap:7px!important}.media-download-center b{font-size:12px;font-weight:900}.media-download-center small{font-size:11px;font-weight:800;opacity:.92}.download-ring{width:58px!important;height:58px!important;box-shadow:0 6px 18px rgba(0,0,0,.22);background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.34) 0)!important}.download-ring::before{background:rgba(0,0,0,.48)!important}.download-ring.done{background:rgba(34,158,217,.95)!important}.downloading .download-icon .ico,.downloading .download-icon{animation:mediaSpin .85s linear infinite}.media-chip{border-radius:9px!important;background:rgba(0,0,0,.50)!important;font-weight:800!important;padding:4px 8px!important}
.video-placeholder{display:grid!important;place-items:center;background:linear-gradient(135deg,#111827,#233044)!important;color:#fff}.play-shape{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:22px;text-indent:-2px}
.voice-attachment,.audio-attachment,.file-attachment{margin-top:7px}.voice-message-card{width:min(372px,62vw);display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:13px;background:var(--voice-bg);border:1px solid var(--voice-line);box-shadow:0 2px 10px rgba(0,0,0,.05);cursor:pointer}.mine .voice-message-card{background:color-mix(in srgb,var(--bubble-me) 78%,var(--accent) 8%)}.voice-message-card.needs-download{cursor:pointer}.voice-play-btn{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;cursor:pointer;position:relative;overflow:hidden}.voice-play-btn.disabled{background:transparent;color:#fff;cursor:pointer}.voice-play-btn .ico{width:20px;height:20px}.voice-play-btn .download-ring{width:42px!important;height:42px!important;box-shadow:none}.voice-play-btn .download-ring::before{inset:4px}.voice-main{min-width:0;display:grid;gap:4px}.voice-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.voice-head b{font-size:13px;font-weight:900;white-space:nowrap}.voice-head small{font-size:11px;color:var(--muted);white-space:nowrap}.voice-waveform{height:28px;display:flex;align-items:center;gap:2px;direction:ltr}.voice-waveform i{display:block;width:3px;height:var(--h,45%);border-radius:999px;background:color-mix(in srgb,var(--accent) 33%,var(--muted));opacity:.58;transition:.12s}.voice-waveform i.active,.voice-message-card.playing .voice-waveform i.active{background:var(--accent);opacity:1}.voice-time{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);direction:ltr}.voice-download-link{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);text-decoration:none}.voice-download-hint{font-size:10px;color:var(--muted);white-space:nowrap}.voice-audio{display:none!important}
.music-card,.file-card.file-download-card{width:min(388px,64vw);display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px!important;background:var(--panel-bg);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.05)}.music-cover,.file-download-ico{width:46px!important;height:46px!important;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 6%,transparent));color:var(--accent);flex:0 0 auto}.music-cover .download-ring,.file-download-ico .download-ring{width:46px!important;height:46px!important}.audio-player{width:100%!important;max-width:290px;height:32px;margin-top:6px}.file-actions a,.inline-download{border-radius:9px!important;font-weight:800}.file-info b{font-weight:900!important}.file-info small{opacity:.85}.upload-bubble{min-width:270px!important;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))!important}.upload-voice-bubble{min-width:min(360px,62vw)!important}.upload-voice-card{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:10px}.upload-voice-mic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#ef4444;color:#fff;position:relative}.upload-voice-mic>.ico{width:20px;height:20px}.upload-voice-mic .upload-ring{position:absolute!important;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:46px!important;height:46px!important;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0)!important}.upload-voice-mic .upload-ring::before{background:rgba(239,68,68,.82)!important}.upload-media-thumb{width:68px!important;height:68px!important;border-radius:12px!important}.upload-media-thumb img,.upload-media-thumb video{filter:blur(3px) brightness(.82);transform:scale(1.04)}.upload-track{height:4px!important;margin-top:8px!important}.upload-label,.upload-percent{font-weight:800}.media-viewer{direction:rtl}.media-viewer video.viewer-video{max-width:min(88vw,900px);max-height:72dvh;border-radius:14px;background:#000}.file-view .file-hero{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);margin:auto}.file-view .file-hero .ico{width:34px;height:34px}
@media(max-width:860px){.image-card,.video-card{width:min(318px,76vw)!important;min-height:172px!important}.image-card .media-img,.video-card .media-img,.media-video,.video-placeholder{min-height:172px!important;max-height:320px!important}.voice-message-card{width:min(326px,78vw);grid-template-columns:42px minmax(0,1fr) auto;padding:8px 9px}.voice-play-btn{width:39px;height:39px}.voice-waveform{height:25px}.voice-download-hint{display:none}.music-card,.file-card.file-download-card{width:min(330px,78vw)}.audio-player{max-width:220px}.upload-voice-bubble{min-width:min(318px,78vw)!important}.upload-bubble{min-width:min(306px,76vw)!important}.media-download-center b{font-size:11.5px}}

/* ===== bundled from v27-media-app.css ===== */
/* v27 Qoqnoos Chat / pro app-like media and PWA polish */
:root{
  --q-radius: 11px;
  --q-radius-sm: 8px;
  --q-soft-shadow: 0 6px 18px rgba(0,0,0,.14);
  --q-media-bg: #0d1622;
  --q-media-border: color-mix(in srgb,var(--line) 80%,transparent);
}
.auth-logo,.empty-chat>div{background:linear-gradient(135deg,#ff7a1a,#d9235f,#7048ff)!important;color:#fff!important;box-shadow:0 12px 30px rgba(217,35,95,.26)}
.auth-card h1,.empty-chat h2{letter-spacing:-.02em}.dialogs-topbar h1::after{content:' ققنوس';font-weight:600;color:var(--muted);font-size:12px;margin-inline-start:8px}.chat-title-btn strong{font-weight:850}.bubble{border-radius:11px!important}.msg.mine .bubble{border-bottom-right-radius:5px!important}.msg.theirs .bubble{border-bottom-left-radius:5px!important}.avatar{box-shadow:0 7px 18px rgba(0,0,0,.18)}
.q-attachment{margin-top:6px;max-width:100%}.q-media,.q-file,.q-audio,.q-voice{font-family:inherit}.q-media{position:relative;display:block;width:min(350px,58vw);height:auto;min-height:190px;max-height:430px;overflow:hidden;border:0;border-radius:13px;background:var(--q-media-bg);box-shadow:var(--q-soft-shadow);padding:0;cursor:pointer;isolation:isolate}.q-media:focus-visible,.q-file:focus-visible,.q-audio:focus-visible,.q-voice:focus-visible,.q-save-media:focus-visible,.q-inline-download:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.q-photo img,.q-video-player,.q-blur,.q-video-thumb{display:block;width:100%;height:100%;min-height:190px;max-height:430px;object-fit:cover}.q-photo.ready img{filter:none;transform:none}.q-video.ready{height:auto;background:#000}.q-video-player{height:auto;min-height:198px;background:#000;border-radius:13px}.q-blur{filter:blur(16px) saturate(.88) brightness(.68);transform:scale(1.06);opacity:.95}.q-empty-thumb,.q-video-thumb{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.16),transparent 32%),linear-gradient(135deg,#0f1724,#1b2a3c)}.q-video-thumb .ico{width:44px;height:44px;opacity:.6;color:#fff}.q-media-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(5,10,18,.10),rgba(5,10,18,.46));backdrop-filter:blur(1.2px)}.q-download-face{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:7px;color:#fff}.q-download-face small{font-size:11px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.55);direction:ltr}.q-download-ring{--p:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.34) 0);box-shadow:0 10px 24px rgba(0,0,0,.26);color:#fff}.q-download-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(7,15,25,.68);backdrop-filter:blur(8px)}.q-ring-icon,.q-ring-percent{position:relative;z-index:1;display:grid;place-items:center}.q-ring-icon .ico{width:22px;height:22px}.q-ring-percent{display:none;font-size:12px;font-weight:900;direction:ltr}.downloading .q-ring-icon{display:none}.downloading .q-ring-percent{display:grid}.downloading .q-download-ring{animation:qSpin 1s linear infinite}.q-media-chip{position:absolute;z-index:4;inset:auto auto 8px 8px;display:inline-flex;max-width:calc(100% - 16px);padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.54);color:#fff;font-size:11px;font-weight:800;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px);direction:ltr}.q-open-media{position:absolute;z-index:4;inset:8px 8px auto auto;border:0;border-radius:8px;background:rgba(0,0,0,.48);color:#fff;font-size:11px;font-weight:800;padding:5px 8px;cursor:pointer;backdrop-filter:blur(8px)}
.q-voice{width:min(370px,62vw);display:grid;grid-template-columns:46px minmax(0,1fr) 34px;gap:10px;align-items:center;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--panel-bg) 88%,var(--accent) 8%);padding:9px 10px;box-shadow:0 3px 12px rgba(0,0,0,.06)}.mine .q-voice{background:color-mix(in srgb,var(--bubble-me) 84%,var(--accent) 8%)}.q-voice.locked{cursor:pointer}.q-voice-play{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;cursor:pointer;overflow:hidden;padding:0}.q-voice.locked .q-voice-play{background:transparent}.q-voice-play .q-download-ring{width:42px;height:42px;box-shadow:none}.q-voice-play .q-download-ring::before{inset:4px}.q-voice-body{min-width:0;display:grid;gap:5px}.q-voice-wave{height:29px;display:flex;align-items:center;gap:2px;direction:ltr;overflow:hidden}.q-voice-wave i{width:3px;height:var(--h,42%);border-radius:10px;background:color-mix(in srgb,var(--accent) 35%,var(--muted));opacity:.58;flex:0 0 auto}.q-voice.playing .q-voice-wave i.active,.q-voice-wave i.active{background:var(--accent);opacity:1}.q-voice-meta{display:flex;align-items:center;gap:8px;justify-content:space-between;color:var(--muted);font-size:10.5px;direction:ltr}.q-voice-label{font-size:10px;color:var(--muted);font-weight:800}.q-save-media{width:32px;height:32px;border:0;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);cursor:pointer}.q-save-media .ico{width:18px;height:18px}.voice-audio{display:none!important}
.q-audio,.q-file{width:min(390px,64vw);display:flex;align-items:center;gap:11px;border:1px solid var(--q-media-border);border-radius:13px;background:var(--panel-bg);padding:10px 11px;box-shadow:0 3px 12px rgba(0,0,0,.06)}.q-audio.locked,.q-file.locked{cursor:pointer}.q-audio-cover,.q-file-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 6%,transparent));color:var(--accent);overflow:hidden}.q-audio-cover .q-download-ring,.q-file-icon .q-download-ring{width:46px;height:46px;box-shadow:none}.q-audio-body,.q-file-body{min-width:0;display:grid;gap:3px;flex:1}.q-audio-body b,.q-file-body b{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-audio-body small,.q-file-body small{font-size:11px;color:var(--muted);direction:ltr;justify-self:start}.q-audio-player{width:100%;height:32px;margin-top:5px}.q-inline-download{border:0;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:900;padding:7px 9px;cursor:pointer}.q-file.ready{cursor:pointer}.q-upload-bubble{min-width:min(340px,64vw)!important;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 5px 15px rgba(0,0,0,.08)}.q-upload-media{position:relative;width:min(310px,58vw);height:176px;border-radius:12px;overflow:hidden;background:#101827}.q-upload-media img,.q-upload-media video{width:100%;height:100%;object-fit:cover;filter:blur(2.5px) brightness(.75);transform:scale(1.025)}.q-upload-ring{position:absolute!important;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:3}.q-upload-file,.q-upload-voice{position:relative;display:flex;align-items:center;gap:10px;min-height:62px}.q-upload-file>span:first-child,.q-upload-mic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;position:relative;flex:0 0 auto}.q-upload-file b{font-size:13px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-upload-file small{font-size:11px;color:var(--muted);direction:ltr}.q-upload-status{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:7px;color:var(--muted);font-size:11px;font-weight:800;direction:ltr}.q-upload-status .upload-label{margin-inline-end:auto;direction:rtl}.q-upload-msg .avatar{align-self:flex-end}.media-viewer{direction:rtl}.media-viewer img{max-width:min(92vw,980px);max-height:76dvh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.38)}.media-viewer-bar{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px}.media-viewer-bar b{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-video{max-width:min(92vw,980px);max-height:76dvh;border-radius:14px;background:#000}.viewer-audio{width:min(520px,82vw)}
@keyframes qSpin{to{transform:rotate(360deg)}}
@media(max-width:860px){.dialogs.view-active{width:100vw!important;max-width:none!important}.q-media{width:min(330px,76vw);min-height:176px}.q-photo img,.q-video-player,.q-blur,.q-video-thumb{min-height:176px;max-height:330px}.q-voice{width:min(328px,78vw);grid-template-columns:42px minmax(0,1fr) 30px;padding:8px 9px}.q-voice-play{width:39px;height:39px}.q-voice-play .q-download-ring{width:39px;height:39px}.q-voice-wave{height:25px}.q-voice-label{display:none}.q-audio,.q-file{width:min(330px,78vw)}.q-audio-player{max-width:220px}.q-upload-bubble{min-width:min(316px,78vw)!important}.q-upload-media{width:min(300px,74vw);height:168px}.q-download-ring{width:54px;height:54px}.q-ring-icon .ico{width:20px;height:20px}}

/* ===== bundled from v28-pwa-fixes.css ===== */
/* v28: profile warning fix + install/PWA UI polish */
.install-help p{line-height:1.9;margin:8px 0;color:var(--text)}
.install-help b{color:var(--accent)}
.pwa-install-ready [data-menu="install"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.profile-cover .btn{cursor:pointer}

/* ===== v29 offline / production UI polish ===== */
:root{
  --font:"Vazirmatn", "Vazir", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-ui:var(--font);
  --composer-h:64px;
  --sidebar-w:390px;
  --radius-lg:14px;
  --radius-md:11px;
  --radius-sm:8px;
}
body{font-family:var(--font)!important;}
button,input,textarea,select{font-family:var(--font)!important;}
.app:not(.hidden){background:var(--stage)!important;}
.dialogs{box-shadow:0 0 0 1px var(--border)!important;}
.dialog-row{border-radius:0!important;margin:0!important;padding-inline:14px!important;}
.dialog-row.active{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;}
.dialog-row .avatar{width:46px;height:46px;}
.dialog-title b{font-size:15.5px!important;}
.dialog-sub{font-size:12.8px!important;display:flex;align-items:center;gap:4px;}
.chat{background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 28%),var(--wall)!important;}
.chat-topbar{height:62px;min-height:62px;}
.chat-title-btn{min-width:0!important;}
.chat-title-btn strong{font-size:15.5px!important;}
.chat-title-btn span{font-size:12px!important;}
.messages{background-image:radial-gradient(color-mix(in srgb,var(--muted) 13%,transparent) .6px,transparent .6px);background-size:24px 24px;}
.msg{gap:6px!important;margin:2px 0!important;}
.msg.mine{justify-content:flex-start!important;}
.msg.theirs{justify-content:flex-end!important;}
.msg.mine .avatar,.msg.mine .avatar-spacer{order:2;}
.msg.mine .bubble{order:1;}
.msg.theirs .avatar,.msg.theirs .avatar-spacer{order:1;}
.msg.theirs .bubble{order:2;}
.bubble{border-radius:10px!important;padding:7px 9px 5px!important;box-shadow:var(--bubble-shadow)!important;}
.msg.mine .bubble{border-bottom-right-radius:4px!important;}
.msg.theirs .bubble{border-bottom-left-radius:4px!important;}
.msg-text:empty{display:none;}
.composer{border-top:1px solid var(--border)!important;background:var(--bar)!important;backdrop-filter:blur(18px)!important;padding:9px 12px!important;grid-template-columns:42px 1fr 40px 40px 44px!important;gap:8px!important;}
.composer textarea{border-radius:12px!important;min-height:42px!important;max-height:132px!important;background:var(--input)!important;}
.send-btn{border-radius:12px!important;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 76%,#66ccff))!important;}
.q-media{border-radius:11px!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important;}
.q-media-chip{border-radius:7px!important;}
.q-download-ring{transition:background .18s ease, transform .18s ease;}
.q-download-ring .ico{transition:transform .18s ease;}
.downloading .q-download-ring .ico{animation:qPulse .75s ease-in-out infinite alternate;}
.q-voice{border-radius:12px!important;min-height:64px!important;background:color-mix(in srgb,var(--bubble-in) 92%,var(--accent) 8%)!important;}
.msg.mine .q-voice{background:color-mix(in srgb,var(--bubble-out) 92%,#fff 3%)!important;}
.q-voice-wave i{transition:height .12s, background .12s, opacity .12s;}
.q-voice.playing .q-voice-wave i:nth-child(3n){height:82%!important;}
.q-audio,.q-file{border-radius:12px!important;background:color-mix(in srgb,var(--panel) 92%,var(--accent) 4%)!important;}
.q-upload-msg{opacity:.96;}
.q-upload-bubble{border-radius:12px!important;}
.voice-rec-ui{width:100%;display:flex;align-items:center;gap:10px;}
.voice-rec-ui .voice-wave{flex:1;min-width:80px;}
.voice-cancel,.voice-send{border:0;border-radius:10px;padding:7px 10px;font-weight:900;cursor:pointer;}
.voice-cancel{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);}
.voice-send{background:var(--accent);color:#fff;}
.install-help{line-height:1.9;}
@keyframes qPulse{to{transform:translateY(-1px) scale(1.08)}}
@media(max-width:860px){
  :root{--sidebar-w:100vw;--header-h:58px;}
  html,body,#app{width:100%;max-width:100%;}
  .app:not(.hidden){display:block!important;direction:rtl!important;}
  .dialogs{position:absolute!important;inset:0!important;width:100vw!important;min-width:100vw!important;max-width:100vw!important;border:0!important;box-shadow:none!important;}
  .chat{position:absolute!important;inset:0!important;width:100vw!important;min-width:100vw!important;max-width:100vw!important;z-index:20!important;}
  .app:not(.chat-open) .chat{transform:translateX(-100%)!important;pointer-events:none;}
  .app.chat-open .dialogs{transform:translateX(100%)!important;}
  .app.chat-open .chat{transform:translateX(0)!important;pointer-events:auto;}
  .messages{padding:12px 8px 8px!important;}
  .composer{grid-template-columns:40px 1fr 38px 38px 42px!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;gap:6px!important;}
  .composer textarea{min-height:40px!important;border-radius:12px!important;}
  .msg{max-width:96%!important;}
  .q-media{width:min(336px,77vw)!important;}
  .q-voice,.q-audio,.q-file{width:min(336px,79vw)!important;}
  .side-sheet{width:100vw!important;max-width:100vw!important;border-radius:0!important;}
}

/* v30: stable UI polishing, local-only assets, no install badge near compose */
@font-face{font-family:'VazirmatnLocal';src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'VazirmatnLocal';src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
:root{--font-ui:'VazirmatnLocal','Vazirmatn','Tahoma','Segoe UI',Arial,sans-serif;--r-sm:9px;--r-md:12px;--r-lg:16px;--q-gap:10px}
html,body,button,input,textarea,select{font-family:var(--font-ui)!important}
.pwa-install-ready #composeBtn::after{display:none!important;content:none!important}
.dialog-row{min-height:74px;border-radius:0;padding:10px 12px;transition:background .18s ease,border-color .18s ease}
.dialog-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dialog-row.active{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset -3px 0 0 var(--accent)}
.dialog-title b{font-weight:850;letter-spacing:-.01em}.dialog-sub{gap:5px}.badge,.pending-badge{min-width:22px;height:22px;border-radius:999px;font-size:11px;font-weight:900;display:inline-grid;place-items:center}.pending-badge{background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--muted)}
.chat{min-width:0}.chat-topbar{min-height:64px;border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(14px)}.chat-title-btn strong{font-weight:900;letter-spacing:-.01em}.chat-title-btn span{font-size:12px}
.messages{padding:18px clamp(12px,2.4vw,30px) 12px;gap:3px}.messages.bottom-stack{justify-content:flex-end}.msg{max-width:100%}.msg .bubble{border-radius:var(--r-md);box-shadow:0 2px 10px rgba(0,0,0,.06);line-height:1.9}.msg.mine .bubble{border-bottom-right-radius:5px}.msg.theirs .bubble{border-bottom-left-radius:5px}.msg.same-next .bubble{border-bottom-right-radius:var(--r-md);border-bottom-left-radius:var(--r-md)}.msg.mine{justify-content:flex-start;direction:ltr}.msg.mine .bubble{direction:rtl}.msg.theirs{justify-content:flex-start;direction:rtl}.msg.theirs .bubble{direction:rtl}.avatar.sm{box-shadow:0 2px 8px rgba(0,0,0,.15)}
.meta{font-size:10.5px;opacity:.8}.read-icon{font-family:Arial,sans-serif;font-weight:900;letter-spacing:-.18em;margin-inline-start:3px}.read-icon.read{color:#22a7f2}.read-icon.delivered{color:var(--muted)}.read-icon.sent{color:var(--muted);letter-spacing:0}
.composer{border-radius:0;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel-bg) 96%,transparent)}.composer textarea{border-radius:12px;min-height:42px;background:var(--input-bg);padding:10px 13px;line-height:1.8}.round-btn,.send-btn{border-radius:12px}.send-btn{box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 24%,transparent)}
.q-media{border-radius:12px;overflow:hidden;background:var(--q-media-bg)}.q-media-chip{border-radius:8px}.q-download-face{gap:8px;text-align:center}.q-download-face small{font-size:12px;direction:rtl}.q-download-ring{width:62px;height:62px}.q-photo.ready img,.q-video-player{border-radius:12px}.q-voice,.q-audio,.q-file{border-radius:12px;border-color:color-mix(in srgb,var(--line) 78%,var(--accent) 10%);box-shadow:0 2px 12px rgba(0,0,0,.05)}.q-voice{min-width:min(330px,72vw)}.q-voice-play{border-radius:50%;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent)}.q-voice-wave i{border-radius:3px}.q-save-media,.q-inline-download{border-radius:10px}.media-viewer img,.viewer-video{border-radius:13px}
.error-state .btn{margin-top:10px}.field,input,textarea{font-family:var(--font-ui)!important}
@media(max-width:860px){.dialogs{width:100%!important;max-width:none!important;flex:1 1 100%!important}.app:not(.chat-open) .dialogs{display:flex!important}.app.chat-open .dialogs{display:none!important}.chat{width:100%!important;max-width:none!important;flex:1 1 100%!important}.chat-topbar{min-height:58px}.messages{padding-inline:8px}.msg .bubble{max-width:min(78vw,420px)}.q-media{width:min(76vw,380px);min-height:180px}.q-audio,.q-file{width:min(76vw,390px)}.composer{gap:7px}.composer textarea{font-size:14px}}
@media(min-width:861px){.app{display:flex!important;flex-direction:row-reverse!important}.dialogs{flex:0 0 360px!important;width:360px!important;max-width:380px!important}.chat{display:flex!important;flex:1 1 auto!important;min-width:0!important}.chat.desktop-visible,.desktop-ready .chat{display:flex!important}.desktop-ready .composer{display:grid!important}.desktop-ready .messages{display:flex!important;flex-direction:column!important}.msg .bubble{max-width:min(58vw,640px)}}

/* =========================================================
   v31 — App navigation polish + professional mobile composer
   ========================================================= */
:root{
  --q-compose-radius: 18px;
  --q-compose-inner: color-mix(in srgb, var(--panel, #17212b) 86%, #fff 4%);
  --q-compose-border: color-mix(in srgb, var(--border, #243447) 80%, transparent);
}
.chat .composer.composer-pro{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  min-height:auto!important;
  padding:10px max(14px,calc((100% - 860px)/2)) calc(10px + env(safe-area-inset-bottom))!important;
  background:color-mix(in srgb,var(--bar,#101923) 94%,transparent)!important;
  border-top:1px solid var(--q-compose-border)!important;
  box-shadow:0 -12px 34px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(18px)!important;
  position:relative!important;
  z-index:40!important;
}
.chat .composer.composer-pro.hidden{display:none!important;}
.composer-pro .composer-shell{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:end!important;
  width:100%!important;
}
.composer-pro .composer-input-pill{
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)42px!important;
  align-items:end!important;
  gap:4px!important;
  border:1px solid var(--q-compose-border)!important;
  border-radius:var(--q-compose-radius)!important;
  background:var(--q-compose-inner)!important;
  padding:4px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 28px rgba(0,0,0,.10)!important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease!important;
}
.composer-pro:focus-within .composer-input-pill{
  border-color:color-mix(in srgb,var(--accent,#3390ec) 52%,var(--q-compose-border))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#3390ec) 12%,transparent), 0 8px 28px rgba(0,0,0,.11)!important;
}
.composer-pro textarea#messageInput{
  min-height:38px!important;
  height:38px;
  max-height:126px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  resize:none!important;
  outline:none!important;
  padding:8px 6px 7px!important;
  color:var(--text,#e8eef5)!important;
  font-size:14.5px!important;
  line-height:1.55!important;
  border-radius:12px!important;
  overflow:auto!important;
}
.composer-pro textarea#messageInput::placeholder{color:color-mix(in srgb,var(--muted,#8aa0b4) 80%,transparent)!important;}
.composer-pro .composer-tool,
.composer-pro .composer-main-action,
.voice-composer-bar .voice-mini-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border:0!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  color:var(--muted,#8aa0b4)!important;
  background:transparent!important;
  transition:transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease!important;
}
.composer-pro .attach-tool{
  width:44px!important;
  height:48px!important;
  min-width:44px!important;
  background:var(--q-compose-inner)!important;
  border:1px solid var(--q-compose-border)!important;
  border-radius:16px!important;
}
.composer-pro .composer-tool:hover,
.composer-pro .composer-main-action:hover,
.voice-composer-bar .voice-mini-btn:hover{
  background:color-mix(in srgb,var(--accent,#3390ec) 14%,transparent)!important;
  color:var(--accent,#3390ec)!important;
}
.composer-pro .composer-main-action:active,
.composer-pro .composer-tool:active{transform:scale(.94)!important;}
.composer-pro #sendBtn{
  display:none!important;
  background:linear-gradient(135deg,var(--accent,#3390ec),color-mix(in srgb,var(--accent,#3390ec) 72%,#77d1ff))!important;
  color:#fff!important;
  border-radius:15px!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent,#3390ec) 30%,transparent)!important;
}
.composer-pro #voiceBtn{display:grid!important;}
.composer-pro.has-text #voiceBtn{display:none!important;}
.composer-pro.has-text #sendBtn{display:grid!important;}
.composer-pro #sendBtn:disabled{opacity:.55!important;cursor:default!important;box-shadow:none!important;}
.composer-pro .ico{width:21px!important;height:21px!important;stroke-width:2.15!important;}
.composer-pro .emoji-panel{
  bottom:calc(76px + env(safe-area-inset-bottom))!important;
  left:max(14px,calc((100% - 860px)/2))!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--panel,#17212b) 98%,transparent)!important;
  border:1px solid var(--q-compose-border)!important;
}
.voice-composer-bar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:54px!important;
  border:1px solid color-mix(in srgb,#ef4444 34%,var(--q-compose-border))!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,color-mix(in srgb,#ef4444 10%,var(--q-compose-inner)),var(--q-compose-inner))!important;
  padding:7px 8px!important;
  box-shadow:0 10px 30px rgba(239,68,68,.09)!important;
}
.voice-composer-bar.hidden{display:none!important;}
.composer-pro.recording-voice .composer-shell{display:none!important;}
.voice-live-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.5);animation:qRecPulse 1.1s infinite;}
@keyframes qRecPulse{70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.voice-composer-bar b{direction:ltr;font-variant-numeric:tabular-nums;color:var(--text);min-width:44px;text-align:center;}
.voice-record-wave{height:34px;display:flex;align-items:center;gap:3px;flex:1;min-width:0;overflow:hidden;direction:ltr;}
.voice-record-wave i{width:3px;height:var(--h,40%);min-height:7px;border-radius:999px;background:color-mix(in srgb,var(--accent,#3390ec) 72%,#fff);opacity:.82;transition:height .22s ease;}
.voice-composer-bar .voice-mini-btn.danger{background:rgba(239,68,68,.12)!important;color:#ef4444!important;}
.voice-composer-bar .voice-mini-btn.send{background:var(--accent,#3390ec)!important;color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--accent,#3390ec) 25%,transparent)!important;}
.composer-state:not(.hidden){
  margin:0 max(14px,calc((100% - 860px)/2));
  border-radius:14px 14px 0 0;
  min-height:38px!important;
  padding:7px 12px!important;
  background:color-mix(in srgb,var(--accent,#3390ec) 9%,var(--bar,#101923))!important;
  border:1px solid color-mix(in srgb,var(--accent,#3390ec) 17%,var(--q-compose-border))!important;
  border-bottom:0!important;
}
@media(max-width:860px){
  .app:not(.chat-open) .dialogs{width:100%!important;max-width:none!important;flex-basis:100%!important;}
  .app.chat-open .chat{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;z-index:20!important;}
  .chat .composer.composer-pro{
    padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  }
  .composer-pro .composer-shell{grid-template-columns:42px minmax(0,1fr)!important;gap:7px!important;}
  .composer-pro .attach-tool{width:42px!important;height:46px!important;min-width:42px!important;border-radius:15px!important;}
  .composer-pro .composer-input-pill{min-height:46px!important;border-radius:17px!important;grid-template-columns:38px minmax(0,1fr)40px!important;}
  .composer-pro textarea#messageInput{font-size:14px!important;min-height:37px!important;height:37px!important;max-height:112px!important;}
  .composer-pro .composer-tool,.composer-pro .composer-main-action{width:38px!important;height:38px!important;min-width:38px!important;border-radius:13px!important;}
  .voice-composer-bar{min-height:50px!important;border-radius:17px!important;gap:7px!important;}
  .voice-record-wave{gap:2px;height:30px;}
  .voice-record-wave i{width:2.5px;}
  .composer-pro .emoji-panel{position:fixed!important;right:8px!important;left:8px!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;width:auto!important;}
}
@media(min-width:861px){
  .chat .composer.composer-pro{padding-inline:max(18px,calc((100% - 860px)/2))!important;}
  .composer-pro .composer-shell{max-width:860px;margin:0 auto;width:100%;}
  .voice-composer-bar{max-width:860px;margin:0 auto;width:100%;}
}

/* =========================================================
   v32 — Upload bug fix support + clean light composer/media
   ========================================================= */
body.theme-light{
  --q-compose-bg:rgba(255,255,255,.98);
  --q-compose-inner:#ffffff;
  --q-compose-border:rgba(31,54,76,.14);
  --q-compose-input:#f3f7fb;
  --q-compose-input-focus:#ffffff;
  --q-compose-shadow:0 -8px 28px rgba(17,34,51,.08);
  --q-media-surface:#ffffff;
  --q-media-soft:#f5f8fb;
  --q-media-text:#17212b;
}
body.theme-dark{
  --q-compose-bg:rgba(18,28,39,.98);
  --q-compose-inner:#1b2836;
  --q-compose-border:rgba(232,242,250,.095);
  --q-compose-input:#172433;
  --q-compose-input-focus:#1e3040;
  --q-compose-shadow:0 -12px 34px rgba(0,0,0,.22);
  --q-media-surface:#17212b;
  --q-media-soft:#202c37;
  --q-media-text:#eef3f7;
}
.chat .composer.composer-pro{
  background:var(--q-compose-bg)!important;
  border-top:1px solid var(--q-compose-border)!important;
  box-shadow:var(--q-compose-shadow)!important;
}
.composer-pro .composer-input-pill,
.composer-pro .attach-tool{
  background:var(--q-compose-inner)!important;
  border-color:var(--q-compose-border)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.theme-light .composer-pro .composer-input-pill,
body.theme-light .composer-pro .attach-tool{
  background:#fff!important;
  box-shadow:0 6px 18px rgba(15,35,55,.07), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.composer-pro textarea#messageInput{background:transparent!important;color:var(--text)!important;}
body.theme-light .composer-pro textarea#messageInput::placeholder{color:#8ca0b2!important;}
body.theme-light .composer-pro .composer-tool,
body.theme-light .composer-pro .composer-main-action{color:#6f8294!important;}
body.theme-light .composer-pro .composer-tool:hover,
body.theme-light .composer-pro .composer-main-action:hover{background:rgba(34,158,217,.10)!important;color:var(--accent)!important;}
body.theme-light .voice-composer-bar{
  background:linear-gradient(135deg,#fff2f2,#ffffff)!important;
  border-color:rgba(239,68,68,.22)!important;
  box-shadow:0 8px 22px rgba(239,68,68,.08)!important;
}
body.theme-light .q-voice,
body.theme-light .q-audio,
body.theme-light .q-file{
  background:var(--q-media-surface)!important;
  border-color:rgba(31,54,76,.12)!important;
  color:var(--q-media-text)!important;
  box-shadow:0 4px 16px rgba(15,35,55,.07)!important;
}
body.theme-light .msg.mine .q-voice,
body.theme-light .msg.mine .q-audio,
body.theme-light .msg.mine .q-file{
  background:color-mix(in srgb,var(--bubble-out) 88%,#fff)!important;
}
.q-media.locked.downloading .q-media-shade,
.q-video.locked.downloading .q-media-shade,
.q-photo.locked.downloading .q-media-shade{backdrop-filter:blur(3px) saturate(.9)!important;background:rgba(4,12,22,.54)!important;}
.q-upload-status .upload-label{font-weight:900!important;}
.q-upload-msg .q-upload-bubble{background:color-mix(in srgb,var(--bubble-out) 94%,var(--panel-bg) 6%)!important;}
body.theme-light .q-upload-msg .q-upload-bubble{box-shadow:0 8px 24px rgba(15,35,55,.08)!important;}
@media(max-width:860px){
  .chat .composer.composer-pro{padding:8px 7px calc(8px + env(safe-area-inset-bottom))!important;}
  .composer-pro .composer-shell{grid-template-columns:42px minmax(0,1fr)!important;}
  .composer-pro .composer-input-pill{min-height:46px!important;border-radius:16px!important;}
}

/* v33 Pro Media System -------------------------------------------------- */
:root{
  --qx-card-radius:14px;
  --qx-media-shadow:0 10px 28px rgba(16,24,40,.14);
  --qx-media-border:color-mix(in srgb,var(--line) 76%,transparent);
  --qx-media-bg:color-mix(in srgb,var(--panel) 94%,var(--accent) 3%);
  --qx-media-dark:#0d1722;
}
body.theme-dark{
  --qx-media-shadow:0 16px 34px rgba(0,0,0,.30);
  --qx-media-border:rgba(255,255,255,.08);
  --qx-media-bg:color-mix(in srgb,var(--panel) 88%,#fff 4%);
  --qx-media-dark:#0a111a;
}
.qx-attachment{margin-top:7px;max-width:100%;direction:rtl}.qx-attachment *{box-sizing:border-box}.qx-media,.qx-voice,.qx-audio,.qx-file{font-family:inherit}.qx-media{position:relative;display:block;width:min(372px,58vw);min-height:214px;max-height:450px;overflow:hidden;border:1px solid var(--qx-media-border);border-radius:var(--qx-card-radius);background:var(--qx-media-dark);padding:0;box-shadow:var(--qx-media-shadow);cursor:pointer;isolation:isolate;text-align:initial}.qx-media img,.qx-media video,.qx-thumb{width:100%;height:100%;min-height:214px;max-height:450px;object-fit:cover;display:block}.qx-photo.ready img{filter:none;transform:none}.qx-video.ready{height:auto;cursor:default}.qx-video-player{width:100%;height:auto;min-height:214px;max-height:450px;border-radius:calc(var(--qx-card-radius) - 1px);background:#000;display:block}.qx-thumb.qx-blur{filter:blur(18px) saturate(.88) brightness(.72);transform:scale(1.07);opacity:.95}.qx-empty-thumb,.qx-video-thumb{display:grid;place-items:center;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.18),transparent 32%),linear-gradient(135deg,#101b2b,#1d2d42)}.qx-empty-thumb .ico,.qx-video-thumb .ico{width:48px;height:48px;color:#fff;opacity:.72}.qx-gradient{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,6,14,.04),rgba(2,6,14,.58));backdrop-filter:blur(1px)}.qx-download-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;color:#fff}.qx-download-main{display:flex;align-items:center;gap:12px;max-width:86%;padding:10px 12px;border-radius:18px;background:rgba(6,16,28,.50);box-shadow:0 14px 32px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.qx-download-text{display:grid;gap:2px;text-align:right}.qx-download-text b{font-size:13px;font-weight:900;line-height:1.35}.qx-download-text small{font-size:11px;font-weight:800;opacity:.82;direction:ltr}.q-download-ring{--p:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(255,255,255,.38) 0);box-shadow:0 8px 20px rgba(0,0,0,.28);color:#fff}.q-download-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(8,17,29,.74);backdrop-filter:blur(8px)}.q-ring-icon,.q-ring-percent{position:relative;z-index:1;display:grid;place-items:center}.q-ring-icon .ico{width:22px;height:22px}.q-ring-percent{display:none;font-size:12px;font-weight:950;direction:ltr}.downloading .q-ring-icon{display:none}.downloading .q-ring-percent{display:grid}.downloading .q-download-ring{animation:qSpin 1s linear infinite}.qx-corner-meta{position:absolute;z-index:8;inset:auto 8px 8px auto;max-width:calc(100% - 16px);padding:4px 8px;border-radius:9px;background:rgba(3,10,18,.54);color:#fff;font-size:11px;font-weight:800;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;backdrop-filter:blur(10px)}.qx-media-open{position:absolute;z-index:9;inset:9px 9px auto auto;border:0;border-radius:10px;background:rgba(3,10,18,.52);color:#fff;font-size:11px;font-weight:900;padding:6px 9px;cursor:pointer;backdrop-filter:blur(10px)}
.qx-voice{width:min(390px,64vw);min-height:74px;display:grid;grid-template-columns:48px minmax(0,1fr) 34px;align-items:center;gap:11px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--qx-media-border));border-radius:14px;background:color-mix(in srgb,var(--panel) 90%,var(--accent) 7%);padding:10px 11px;box-shadow:0 4px 16px rgba(0,0,0,.07)}.msg.mine .qx-voice{background:color-mix(in srgb,var(--bubble-out) 88%,#fff 3%)}.qx-voice.locked{cursor:pointer}.qx-voice-button{width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;cursor:pointer;padding:0;overflow:hidden;box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 28%,transparent)}.qx-voice.locked .qx-voice-button{background:transparent;box-shadow:none}.qx-small-ring{width:46px!important;height:46px!important;box-shadow:none!important}.qx-small-ring::before{inset:4px!important}.qx-voice-body{min-width:0;display:grid;gap:5px}.qx-voice-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.qx-voice-line b{font-size:12.5px;font-weight:950;color:var(--title)}.qx-voice-line small{font-size:11px;font-weight:850;color:var(--muted);direction:ltr}.qx-voice-wave{height:26px;display:flex;align-items:center;gap:2px;direction:ltr;overflow:hidden}.qx-voice-wave i{width:3px;height:var(--h,44%);border-radius:4px;background:color-mix(in srgb,var(--accent) 36%,var(--muted));opacity:.58;flex:0 0 auto;transition:height .12s,background .12s,opacity .12s}.qx-voice.playing .qx-voice-wave i.active,.qx-voice-wave i.active{background:var(--accent);opacity:1}.qx-voice-meta{display:flex;align-items:center;gap:8px;justify-content:space-between;color:var(--muted);font-size:10.5px;font-weight:750;direction:ltr}.qx-locked-label{font-size:10.5px;color:var(--muted);font-weight:900}.qx-media-save{width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);cursor:pointer}.qx-media-save .ico{width:18px;height:18px}.voice-audio{display:none!important}
.qx-audio,.qx-file{width:min(410px,65vw);display:flex;align-items:center;gap:12px;border:1px solid var(--qx-media-border);border-radius:14px;background:var(--qx-media-bg);padding:11px 12px;box-shadow:0 4px 16px rgba(0,0,0,.06)}.qx-audio.locked,.qx-file.locked{cursor:pointer}.qx-audio-art,.qx-file-icon,.qx-upload-action{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));color:var(--accent);overflow:hidden;position:relative}.qx-audio-body,.qx-file-body{min-width:0;display:grid;gap:4px;flex:1}.qx-audio-body b,.qx-file-body b,.qx-upload-body b{font-size:13.2px;font-weight:950;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qx-audio-body small,.qx-file-body small,.qx-upload-body small{font-size:11px;font-weight:750;color:var(--muted);direction:ltr;justify-self:start}.qx-audio-player{width:100%;height:34px;margin-top:5px}.qx-audio-placeholder{font-size:11px;font-weight:800;color:var(--muted)}.qx-download-pill{border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:950;padding:8px 10px;cursor:pointer;white-space:nowrap}.qx-file.ready{cursor:pointer}
.qx-upload{position:relative}.qx-upload-visual{width:min(330px,58vw);height:188px;border-radius:14px;overflow:hidden;background:#0d1722;box-shadow:var(--qx-media-shadow)}.qx-upload-visual img,.qx-upload-visual video{width:100%;height:100%;object-fit:cover;display:block;filter:blur(2.5px) brightness(.74);transform:scale(1.025)}.qx-upload-visual b,.qx-upload-visual small{position:absolute;z-index:5;right:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}.qx-upload-visual b{bottom:34px;font-size:13px}.qx-upload-visual small{bottom:14px;font-size:11px;direction:ltr}.qx-upload-ring{position:absolute!important;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:6}.qx-upload-voice,.qx-upload-audio,.qx-upload-file{display:flex;align-items:center;gap:12px;min-height:64px;min-width:min(340px,64vw)}.qx-upload-body{min-width:0;display:grid;gap:5px}.q-upload-status{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:8px;color:var(--muted);font-size:11px;font-weight:850;direction:ltr}.q-upload-status .upload-label{margin-inline-end:auto;direction:rtl}.q-upload-bubble{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))!important;box-shadow:0 5px 16px rgba(0,0,0,.08)!important}
.qx-viewer{direction:rtl;width:min(96vw,1040px);margin:auto}.qx-viewer-stage{display:grid;place-items:center;background:#05080d;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.42)}.qx-viewer-stage img{max-width:min(96vw,1040px);max-height:76dvh;object-fit:contain;display:block}.qx-viewer-stage video{max-width:min(96vw,1040px);max-height:76dvh;background:#000;display:block}.qx-viewer-toolbar{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.qx-viewer-toolbar>div{min-width:0;display:grid;gap:2px;flex:1}.qx-viewer-toolbar b{font-size:13px;font-weight:950;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qx-viewer-toolbar span{font-size:11px;font-weight:800;color:var(--muted);direction:ltr;justify-self:start}.qx-viewer-audio,.qx-viewer-file{display:grid;place-items:center}.qx-viewer-audio-card{width:min(420px,90vw);display:grid;place-items:center;gap:12px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}.qx-viewer-audio-icon{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.qx-viewer-audio-icon .ico{width:36px;height:36px}.viewer-audio{width:100%}
body.theme-light .qx-media,body.theme-light .qx-voice,body.theme-light .qx-audio,body.theme-light .qx-file{border-color:#d8e1ea}body.theme-light .qx-voice,body.theme-light .qx-audio,body.theme-light .qx-file{background:#fff;color:#17212b}body.theme-light .msg.mine .qx-voice{background:#dff1ff}body.theme-light .qx-audio-body b,body.theme-light .qx-file-body b,body.theme-light .qx-voice-line b{color:#17212b}
@media(max-width:860px){.qx-media{width:min(78vw,386px);min-height:184px}.qx-media img,.qx-media video,.qx-thumb,.qx-video-player{min-height:184px;max-height:360px}.qx-download-main{padding:9px 10px;gap:10px}.q-download-ring{width:54px;height:54px}.qx-voice,.qx-audio,.qx-file{width:min(78vw,370px)}.qx-voice{grid-template-columns:44px minmax(0,1fr) 30px;padding:9px 10px}.qx-voice-button,.qx-small-ring{width:42px!important;height:42px!important}.qx-voice-wave{height:24px}.qx-audio-art,.qx-file-icon,.qx-upload-action{width:46px;height:46px;border-radius:13px}.qx-upload-visual{width:min(76vw,350px);height:178px}.qx-upload-voice,.qx-upload-audio,.qx-upload-file{min-width:min(76vw,350px)}.qx-viewer-toolbar{flex-wrap:wrap}.qx-viewer-toolbar .btn{flex:1}}