/* ---------- fonts (bundled locally — works with no internet) ---------- */
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --panel-2: #f0f2f5;
  --text: #111827;
  --text-2: #6b7280;
  --accent: #2f7cf6;
  --accent-soft: #e3edfd;
  --bubble-me: #d9ecff;
  --bubble-other: #ffffff;
  --border: #e5e7eb;
  --danger: #e0455a;
  --online: #22c55e;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
}
[data-theme="dark"] {
  --bg: #1c2733;
  --panel: #242f3d;
  --panel-2: #2b3847;
  --text: #eef2f6;
  --text-2: #8f9bab;
  --accent: #5aa2f7;
  --accent-soft: #2b4361;
  --bubble-me: #2b5278;
  --bubble-other: #2b3847;
  --border: #344150;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent); }
img { display: block; }
.hidden { display: none !important; }

#app { height: 100dvh; max-width: 560px; margin: 0 auto; background: var(--panel); position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.side { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* keyboard accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-contrast: more) {
  :root { --border: #9aa3ad; --text-2: #404a55; }
  [data-theme="dark"] { --border: #6b7685; --text-2: #c3ccd6; }
}

/* two-pane desktop layout */
@media (min-width: 900px) {
  #app { max-width: 1200px; flex-direction: row; }
  .side { flex: 0 0 380px; border-left: 1px solid var(--border); }
  html[dir="ltr"] .side { border-left: none; border-right: 1px solid var(--border); }
  #app > #chatView { position: static; flex: 1; transform: none !important; transition: none; }
  #app > #chatView:empty::after {
    content: 'یک گفتگو را انتخاب کنید 💬';
    margin: auto; color: var(--text-2); font-size: 15px;
  }
  html[lang="en"] #chatView:empty::after { content: 'Select a chat 💬'; }
  #chatView .chat-head #chBack { display: none; }
}

/* ---------- auth ---------- */
.auth-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; gap: 10px; }
.auth-logo { width: 84px; height: 84px; border-radius: 24px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 8px; }
.auth-wrap h1 { text-align: center; font-size: 22px; margin-bottom: 4px; }
.auth-wrap .sub { text-align: center; color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.field label { font-size: 13px; color: var(--text-2); }
.field input, .field textarea, .field select {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; outline: none; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
/* masked password: a plain text input visually masked — avoids macOS secure-input
   issues in embedded webviews where type=password receives no keystrokes */
input.pw { -webkit-text-security: disc; }
input.pw.show { -webkit-text-security: none; }
.btn { background: var(--accent); color: #fff; border-radius: 12px; padding: 12px 18px; font-weight: 500; width: 100%; }
.btn:disabled { opacity: .6; }
.btn.ghost { background: var(--panel-2); color: var(--text); }
.btn.danger { background: var(--danger); }
.btn.small { width: auto; padding: 7px 14px; border-radius: 10px; font-size: 13px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 10px; }
.auth-switch button { color: var(--accent); font-weight: 500; }
.form-error { color: var(--danger); font-size: 13px; text-align: center; min-height: 18px; }
.form-ok { color: var(--online); font-size: 13px; text-align: center; }

/* ---------- main layout ---------- */
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.topbar { padding: 12px 16px 8px; display: flex; align-items: center; gap: 10px; }
.topbar h2 { font-size: 17px; flex: 1; }
.searchbox { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; padding: 0 12px; margin: 0 16px 8px; }
.searchbox input { background: none; border: none; outline: none; padding: 10px 8px; flex: 1; }
.searchbox svg { opacity: .5; }

.tabs { display: flex; gap: 6px; padding: 0 16px 10px; }
.tabs button { padding: 6px 14px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); font-size: 13px; }
.tabs button.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.list { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.list-section { padding: 10px 16px 4px; font-size: 12px; color: var(--text-2); }

.chat-item, .user-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; cursor: pointer; }
.chat-item:active, .user-item:active { background: var(--panel-2); }
.avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; position: relative; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .dot { position: absolute; bottom: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--online); border: 2px solid var(--panel); }
.avatar.sm { width: 40px; height: 40px; font-size: 15px; }
.chat-item .meta { flex: 1; min-width: 0; }
.chat-item .row1 { display: flex; align-items: center; gap: 6px; }
.chat-item .name { font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chat-item .time { font-size: 11px; color: var(--text-2); flex-shrink: 0; }
.chat-item .row2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chat-item .preview { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.badge { background: var(--accent); color: #fff; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }
.pin-ico { color: var(--text-2); flex-shrink: 0; font-size: 12px; }
.type-ico { font-size: 12px; color: var(--text-2); }

.empty { text-align: center; color: var(--text-2); padding: 48px 24px; font-size: 14px; }

/* ---------- bottom nav ---------- */
.bottomnav { display: flex; border-top: 1px solid var(--border); background: var(--panel); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; color: var(--text-2); font-size: 11px; position: relative; }
.bottomnav button.active { color: var(--accent); }
.bottomnav .navbadge { position: absolute; top: 4px; right: calc(50% - 22px); background: var(--danger); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---------- chat screen ---------- */
#chatView { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 20; transform: translateX(-100%); transition: transform .22s ease; }
#chatView.open { transform: translateX(0); }
[data-theme="dark"] #chatView { background: #18222d; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.chat-head .titles { flex: 1; min-width: 0; cursor: pointer; }
.chat-head .t-name { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .t-status { font-size: 12px; color: var(--text-2); }
.chat-head .t-status.on { color: var(--accent); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.icon-btn:active { background: var(--panel-2); }

.pinbar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 6px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pinbar .pb-line { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; }
.pinbar .pb-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pinbar .pb-title { color: var(--accent); font-weight: 500; }

#messages { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.day-sep { align-self: center; background: var(--panel); color: var(--text-2); font-size: 11.5px; border-radius: 999px; padding: 3px 12px; margin: 10px 0 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.msg { max-width: 78%; display: flex; flex-direction: column; position: relative; }
.msg.me { align-self: flex-start; }   /* RTL: my messages on the left like Telegram fa */
.msg.other { align-self: flex-end; }
.bubble { border-radius: 16px; padding: 7px 12px 5px; position: relative; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.05); font-size: 14.5px; line-height: 1.65; }
.bubble .mtext { white-space: pre-wrap; }  /* only user text keeps its line breaks, not template markup */
.msg.me .bubble { background: var(--bubble-me); border-bottom-left-radius: 6px; }
.msg.other .bubble { background: var(--bubble-other); border-bottom-right-radius: 6px; }
.msg .sender { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 1px; }
.msg .stamp { display: flex; align-items: center; gap: 3px; justify-content: flex-end; font-size: 10.5px; color: var(--text-2); margin-top: 1px; direction: ltr; }
.msg .ticks { font-size: 12px; color: var(--text-2); }
.msg .ticks.read { color: var(--accent); }
.replyq { border-right: 3px solid var(--accent); background: rgba(127,127,127,.08); border-radius: 8px; padding: 4px 8px; margin-bottom: 4px; font-size: 12.5px; cursor: pointer; }
.replyq .rq-name { color: var(--accent); font-weight: 500; font-size: 12px; }
.replyq .rq-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.msg img.photo { max-width: min(320px, 64vw); border-radius: 12px; margin: 2px 0; cursor: pointer; }
.msg video { max-width: min(320px, 64vw); border-radius: 12px; }
.filebox { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.filebox .f-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.filebox .f-name { font-size: 13.5px; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebox .f-size { font-size: 11.5px; color: var(--text-2); }
.voicebox { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 4px 2px; }
.voicebox button { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.voicebox .v-track { flex: 1; height: 4px; background: rgba(127,127,127,.3); border-radius: 2px; position: relative; cursor: pointer; }
.voicebox .v-fill { position: absolute; right: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; width: 0; }
.voicebox .v-time { font-size: 11px; color: var(--text-2); direction: ltr; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.reacts span { background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-size: 12px; padding: 2px 8px; cursor: pointer; animation: rx-in .18s ease; transition: transform .12s; }
.reacts span:active { transform: scale(1.2); }
.reacts span.mine { background: var(--accent); color: #fff; }
@keyframes rx-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bubble.react-pop { animation: bub-pop .25s ease; }
@keyframes bub-pop { 35% { transform: scale(1.04); } }

/* desktop hover quick-actions */
.hover-acts { display: none; position: absolute; top: 50%; transform: translateY(-50%); gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px; box-shadow: var(--shadow); z-index: 3; }
.msg.me .hover-acts { right: calc(100% + 6px); }
.msg.other .hover-acts { left: calc(100% + 6px); }
.hover-acts button { font-size: 14px; padding: 4px 6px; border-radius: 50%; }
.hover-acts button:hover { background: var(--panel-2); }
@media (hover: hover) and (min-width: 900px) {
  .msg:hover .hover-acts { display: flex; }
}
.edited-tag { font-size: 10px; }

.scroll-down { position: absolute; bottom: 86px; left: 16px; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); color: var(--text-2); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 5; }

/* composer */
.composer-wrap { background: var(--panel); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.reply-preview, .edit-preview { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; font-size: 12.5px; }
.reply-preview .rp-body, .edit-preview .rp-body { flex: 1; border-right: 3px solid var(--accent); padding-right: 8px; min-width: 0; }
.rp-name { color: var(--accent); font-weight: 500; }
.rp-text { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; }
.composer textarea {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 18px;
  padding: 9px 14px; resize: none; outline: none; max-height: 120px; line-height: 1.6;
}
.send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn.rec { background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.upload-bar { height: 3px; background: var(--accent); width: 0; transition: width .15s; }

/* emoji panel */
.emoji-panel { background: var(--panel); border-top: 1px solid var(--border); max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); padding: 8px; }
.emoji-panel button { font-size: 24px; padding: 6px; border-radius: 8px; }
.emoji-panel button:active { background: var(--panel-2); }

/* context menu */
#ctxOverlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.ctx { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); min-width: 220px; overflow: hidden; }
.ctx .rxrow { display: flex; gap: 2px; padding: 10px 10px 6px; justify-content: space-between; }
.ctx .rxrow button { font-size: 24px; padding: 4px 6px; border-radius: 10px; }
.ctx .rxrow button:active { background: var(--panel-2); }
.ctx .item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; border-top: 1px solid var(--border); }
.ctx .item:active { background: var(--panel-2); }
.ctx .item.danger { color: var(--danger); }

/* ---------- sheets / modals ---------- */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--panel); width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 86dvh; overflow-y: auto; }
.sheet h3 { font-size: 16px; margin-bottom: 14px; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: -6px auto 12px; }

.media-prev { display: flex; justify-content: center; }
.media-prev img, .media-prev video { max-width: 100%; max-height: 48dvh; border-radius: 14px; object-fit: contain; }

.profile-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 6px; }
.profile-head .avatar { width: 92px; height: 92px; font-size: 34px; }
.profile-head .p-name { font-weight: 700; font-size: 18px; }
.profile-head .p-user { color: var(--text-2); font-size: 13px; direction: ltr; }
.menu-list { padding: 6px 0; }
.menu-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 18px; font-size: 14px; text-align: right; color: var(--text); }
.menu-row:active { background: var(--panel-2); }
.menu-row .mr-ico { width: 24px; text-align: center; color: var(--text-2); }
.menu-row .mr-label { flex: 1; }
.menu-row .mr-val { color: var(--text-2); font-size: 13px; }
.switch { width: 42px; height: 24px; border-radius: 12px; background: var(--border); position: relative; transition: .2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(-18px); }

/* admin */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 12px; }
.stat { background: var(--panel-2); border-radius: 14px; padding: 14px; text-align: center; }
.stat .s-num { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat .s-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.admin-user { display: flex; align-items: center; gap: 10px; padding: 9px 16px; }
.admin-user .au-meta { flex: 1; min-width: 0; }
.admin-user .au-name { font-size: 14px; font-weight: 500; }
.admin-user .au-sub { font-size: 12px; color: var(--text-2); direction: ltr; text-align: right; }
.chip { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); }
.chip.pending { background: #fdf0d8; color: #b97f10; }
.chip.banned { background: #fde3e7; color: var(--danger); }
.chip.active { background: #def5e5; color: #15803d; }
[data-theme="dark"] .chip.pending { background: #4a3a14; }
[data-theme="dark"] .chip.banned { background: #4a1d25; }
[data-theme="dark"] .chip.active { background: #14391f; }

.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: rgba(20,20,25,.88); color: #fff; border-radius: 12px; padding: 10px 18px; font-size: 13px; z-index: 100; max-width: 86%; text-align: center; }

.typing-dots::after { content: '…'; animation: dots 1.2s infinite; }
@keyframes dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }

/* ---------- stories ---------- */
.stories-bar { display: flex; gap: 12px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.stories-bar::-webkit-scrollbar { display: none; }
.story-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; width: 62px; }
.story-pill .ring { width: 58px; height: 58px; border-radius: 50%; padding: 2.5px; background: var(--border); }
.story-pill.unseen .ring { background: linear-gradient(45deg, #2f7cf6, #9b5cf6, #e0455a); }
.story-pill .ring .avatar { width: 100%; height: 100%; border: 2px solid var(--panel); }
.story-pill .sp-name { font-size: 11px; color: var(--text-2); max-width: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-pill.add .ring { background: none; }
.story-pill.add .avatar { background: var(--panel-2); color: var(--accent); font-size: 26px; border: 2px dashed var(--accent); }

#storyViewer { position: fixed; inset: 0; background: #000; z-index: 90; display: flex; flex-direction: column; }
#storyViewer .sv-progress { display: flex; gap: 4px; padding: 10px 12px 6px; direction: ltr; }
#storyViewer .sv-progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
#storyViewer .sv-progress span i { position: absolute; inset: 0; width: 0; background: #fff; display: block; }
#storyViewer .sv-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px; color: #fff; }
#storyViewer .sv-media { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
#storyViewer .sv-media img, #storyViewer .sv-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
#storyViewer .sv-caption { color: #fff; text-align: center; padding: 8px 18px; font-size: 14px; }
#storyViewer .sv-foot { display: flex; gap: 8px; justify-content: center; padding: 10px 0 calc(16px + env(safe-area-inset-bottom)); }
#storyViewer .sv-foot button { font-size: 24px; padding: 6px 10px; border-radius: 50%; background: rgba(255,255,255,.12); }
#storyViewer .sv-tap { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; }

/* ---------- polls ---------- */
.poll { min-width: 220px; }
.poll .p-q { font-weight: 600; margin-bottom: 6px; }
.poll .p-opt { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin: 5px 0; cursor: pointer; overflow: hidden; font-size: 13.5px; }
.poll .p-opt .p-bar { position: absolute; inset: 0; background: var(--accent); opacity: .16; width: 0; transition: width .25s; }
.poll .p-opt.mine { border-color: var(--accent); }
.poll .p-opt .p-row { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.poll .p-total { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }

.bubble.sticker { background: none !important; box-shadow: none; padding: 2px; }

/* ---------- calls ---------- */
#callUI { position: fixed; inset: 0; z-index: 95; background: #10151c; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40px 20px calc(36px + env(safe-area-inset-bottom)); }
#callUI .c-head { display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; }
#callUI .c-head .avatar { width: 96px; height: 96px; font-size: 36px; }
#callUI .c-name { font-size: 20px; font-weight: 700; }
#callUI .c-status { color: rgba(255,255,255,.7); font-size: 14px; }
#callUI video { background: #000; }
#callUI #remoteMedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#callUI #localMedia { position: absolute; bottom: 130px; left: 16px; width: 110px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.4); z-index: 3; }
#callUI .c-actions { display: flex; gap: 22px; z-index: 3; }
#callUI .c-actions button { width: 62px; height: 62px; border-radius: 50%; font-size: 24px; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; }
#callUI .c-actions .accept { background: #22c55e; }
#callUI .c-actions .hangup { background: #e0455a; }
#callUI .c-actions button.off { background: rgba(255,255,255,.45); color: #10151c; }
#callUI.voice-only #remoteMedia, #callUI.voice-only #localMedia { display: none; }

/* ---------- app lock ---------- */
#lockScreen { position: fixed; inset: 0; z-index: 120; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
#lockScreen .lock-ico { font-size: 44px; }
#lockScreen input { max-width: 200px; text-align: center; letter-spacing: 8px; font-size: 22px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; direction: ltr; -webkit-text-security: disc; }

.sched-bar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 6px 14px; font-size: 12.5px; color: var(--accent); cursor: pointer; }

/* image lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 80; display: flex; align-items: center; justify-content: center; }
#lightbox img { max-width: 96vw; max-height: 92dvh; object-fit: contain; }
#lightbox .lb-close { position: absolute; top: 18px; right: 18px; color: #fff; font-size: 26px; }

/* ---------- production polish (2026-06) ---------- */
.v-bars { display: flex; gap: 2px; align-items: center; height: 30px; flex: 1; direction: ltr; cursor: pointer; min-width: 150px; }
.v-bars i { flex: 1; background: rgba(127,127,127,.45); border-radius: 2px; transition: background .15s; }
.v-bars i.on { background: var(--accent); }

.sv-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; color: #fff; font-size: 26px; font-weight: 700; text-align: center; word-break: break-word; line-height: 1.8; }

#callBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 94; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 14px; font-size: 13.5px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#callBanner button { background: rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 3px 14px; font-size: 12.5px; }

#chatView.dropping::after { content: '📎 فایل را اینجا رها کنید'; position: absolute; inset: 8px; border: 3px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: var(--accent); z-index: 30; pointer-events: none; }

.msg-link { color: var(--accent); text-decoration: underline; word-break: break-all; }