/* =========================================================
   Panel v2 — TicSell-style admin look (panels only; the public site keeps its own palette)
   ========================================================= */
.tone-violet { --c: var(--violet); --cb: var(--violet-bg); }
.tone-blue { --c: var(--blue); --cb: var(--blue-bg); }

/* ---------- sidebar: light, with search and grouped flat menu ---------- */
/* collapsed rail = 80px column; pinned menu = 260px column (content narrows / widens with it) */
@media (min-width: 1025px) { .shell { grid-template-columns: 80px minmax(0, 1fr); } }
.side {
  background: var(--surface); background-image: none; color: var(--text); padding: 16px 14px;
  border-inline-start: 0; border-inline-end: 1px solid var(--line);
}
.side-top { justify-content: flex-start; gap: 10px; padding: 2px 6px 14px; }
.side-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.side-logo .logo { display: none; }
.side-brand { width: 46px; height: 46px; border-radius: 14px; background: none; display: grid; place-items: center; flex: none; box-shadow: 0 10px 20px -10px rgba(18,49,44,.6); overflow: hidden; }
.side-brand img { width: 46px; height: 46px; display: block; border-radius: 14px; object-fit: cover; }
.side-title { display: grid; line-height: 1.35; min-width: 0; }
.side-title b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-title small { font-size: 12px; color: var(--muted); }
.side-close { color: var(--text-2); margin-inline-start: auto; }
.side-tool {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; cursor: pointer; padding: 0; transition: background .2s, color .2s, border-color .2s;
}
.side-tool:hover { background: var(--surface-3); color: var(--text); }
.side-tool[aria-pressed="true"], .side-pinned .side-tool.side-pin { background: var(--brand-100); color: var(--brand-ink); border-color: transparent; }
.side-pinned .side-pin .ic { transform: rotate(45deg); }
.side-role { display: none; }
.side-nav { gap: 2px; scrollbar-color: var(--line-2) transparent; }
.side-group { color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 16px 12px 6px; }
.side-link { color: var(--text-2); font-size: 14px; padding: 10px 12px; border-radius: 12px; }
.side-link:hover { background: var(--surface-3); color: var(--text); }
.side-link.on { background: var(--brand-100); color: var(--brand-ink); box-shadow: none; }
.side-link.on::before { display: none; }
.side-link.on .ic { color: var(--brand-ink); }
.side-badge { background: var(--brand); color: #fff; }
.side-promo { background: var(--brand-soft); border-color: var(--brand-100); color: var(--text); }
.side-promo span { color: var(--text-2); }
.side-promo .progress { background: rgba(0,0,0,.08); }
@media (min-width: 1025px) {
  .side-pinned .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .side-pinned .side, .side.peek { width: 260px; }
  html:not(.side-pinned) .side.peek { box-shadow: -30px 0 70px -30px rgba(8,20,18,.35); }
  html:not(.side-pinned) .side:not(.peek) .side-badge { box-shadow: 0 0 0 2px var(--surface); }
}

/* ---------- topbar: page title, range switch, user pill ---------- */
/* frosted glass bar: content scrolls underneath without showing through */
.topbar { height: 64px; gap: 16px; z-index: 32; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: none; }
/* the side menu (40) must stay above the bar when it opens */
.topbar { z-index: 32; }
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-100); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.topbar-title h1 { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 800; box-shadow: var(--sh-xs); }
.topbar-user { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 700; }
.topbar-user .ic { color: var(--muted); }
.topbar-user:hover { border-color: var(--brand-300); }
.topbar-me { display: none; }
.page-head p { margin-top: 0; }

/* ---------- dashboard: greeting hero ---------- */
.dash-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 28px 32px; color: #fff; min-height: 210px;
  background: linear-gradient(100deg, #0E2B27 0%, #163E38 48%, #2C665B 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dash-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.07), transparent 60%); }
.dash-hero-main { min-width: 0; flex: 1 1 380px; }
.dash-date { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; margin-bottom: 14px; }
.dash-hero h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dash-hero p { color: rgba(255,255,255,.76); margin-top: 6px; font-size: 14.5px; }
.dash-hero p b { color: #fff; }
.dash-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.dash-glass { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); flex: 0 1 330px; min-width: 0; }
.dash-glass > div { min-width: 0; flex: 1; }
.dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.75); font-weight: 600; }
.dash-live i { width: 7px; height: 7px; border-radius: 50%; background: #4FCFB8; box-shadow: 0 0 0 3px rgba(79,207,184,.25); }
.dash-glass b { display: block; font-size: 16px; margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-glass .sub { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); }
.ring { --p: 0; --s: 72px; --w: 7px; --rc: #4FCFB8; --track: rgba(255,255,255,.14); --ring-bg: #16413B; width: var(--s); height: var(--s); border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), var(--track) 0); display: grid; place-items: center; position: relative; flex: none; }
.ring::before { content: ""; position: absolute; inset: var(--w); border-radius: 50%; background: var(--ring-bg); }
.ring > span { position: relative; display: grid; text-align: center; line-height: 1.15; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.ring small { font-size: 10px; font-weight: 600; opacity: .75; }

/* ---------- dashboard: attention ---------- */
.dash-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 800; }
.dash-alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.dash-alert .ic-box { width: 42px; height: 42px; border-radius: 50%; }
.dash-alert > div { min-width: 0; flex: 1; }
.dash-alert b { display: block; font-size: 14.5px; }
.dash-alert p { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.dash-alert .link { margin-top: 8px; font-size: 13px; }
.dash-alert.is-zero { opacity: .7; }

/* ---------- dashboard: KPI cards with sparkline / ring ---------- */
.stat { gap: 10px; }
.stat-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--cb, var(--brand-soft)); color: var(--c, var(--brand-ink)); }
.stat-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.stat-value { font-size: 26px; line-height: 1.2; white-space: nowrap; }
.stat-value small { display: block; margin: 2px 0 0; }
.spark { width: 96px; height: 42px; flex: none; color: var(--c, var(--brand)); overflow: visible; }
.stat .ring { --s: 58px; --w: 6px; --track: var(--surface-3); --ring-bg: var(--surface); --rc: var(--c, var(--brand)); color: var(--text); }
.stat .ring > span { font-size: 13px; }
.tag-new { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11.5px; font-weight: 800; }
.grid-stats.a-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- dashboard: chart card + upcoming ---------- */
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--ch-line); }
.legend i.prev { background: var(--ch-base); }
.legend b { color: var(--text); }
.dash-ev .grow b { white-space: normal; }
.dash-ev .progress { margin-top: 8px; height: 6px; }
.dash-ev-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dash-table .table td:first-child { font-weight: 600; }

@media (max-width: 1180px) {
  .grid-stats.a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .side { width: 290px; }
  .shell-backdrop { background: rgba(8,20,18,.45); }
}
@media (max-width: 860px) {
  .topbar .seg { display: none; }
  .topbar-title { flex: 1 1 0; }
  .topbar-tools { flex: none; }
  .topbar-user b { display: none; }
  .topbar-user { padding-inline-end: 6px; }
  .dash-alerts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-stats.a-kpis { grid-template-columns: 1fr; }
  .dash-hero { padding: 22px 20px; border-radius: 20px; }
  .dash-hero h2 { font-size: 23px; }
  .dash-glass { flex-basis: 100%; }
  .topbar-title h1 { font-size: 17px; }
  .topbar { height: 62px; }
}

/* ---------- uploads: avatars, covers, attachments ---------- */
.avatar.has-img { background: var(--surface-3); overflow: hidden; }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cover { position: relative; overflow: hidden; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cover.has-img .cover-glyph { display: none; }
.cover.has-img::after { opacity: .15; }
.post-image { display: block; margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); max-height: 520px; }
.post-image img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; background: var(--surface-2); }
.composer-attach { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; font-weight: 700; margin-bottom: 8px; max-width: 100%; }
.composer-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.composer-attach .btn-icon { width: 24px; height: 24px; border-radius: 50%; color: inherit; }

/* ---------- v1.3: chat inbox ---------- */
.chat-inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.chat-threads { display: flex; flex-direction: column; max-height: 72vh; }
.chat-thread-list { overflow-y: auto; padding: 6px 0; }
.chat-thread { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--text); border-inline-start: 3px solid transparent; }
.chat-thread:hover { background: var(--surface-2); }
.chat-thread.on { background: var(--brand-soft); border-inline-start-color: var(--brand); }
.chat-thread .grow { min-width: 0; }
.chat-thread .grow b { display: block; font-size: 14px; }
.chat-thread .grow span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-meta { display: grid; justify-items: end; gap: 4px; }
.chat-thread-meta small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chat-start { padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.chat-pane .l-chat .chat-log { max-height: 58vh; overflow-y: auto; }
@media (max-width: 900px) { .chat-inbox { grid-template-columns: 1fr; } .chat-threads { max-height: none; } }

/* ---------- tickets ---------- */
.tk-title { font-size: 20px; font-weight: 800; }
.tk-thread { display: grid; gap: 14px; }
.tk-msg { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); max-width: 86%; }
.tk-msg.admin { background: var(--brand-soft); border-color: var(--brand-100); margin-inline-start: auto; }
.tk-msg-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.tk-msg-head time { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.tk-msg p { white-space: pre-wrap; font-size: 14px; }
.tk-support { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--brand-ink); }
.t-sub { display: block; color: var(--muted); font-size: 12px; }
.st-note { align-items: center; }
.st-note .btn { flex: none; }

/* ---------- assignments ---------- */
.as-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line-2); display: grid; gap: 10px; }
.as-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.as-meta b { color: var(--brand-ink); }
.as-meta span { padding: 2px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.as-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-result { display: grid; gap: 6px; }
.as-result p { font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; }
.as-answer { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; display: grid; gap: 10px; }
.as-answer p { white-space: pre-wrap; }
.as-excerpt { font-size: 13px; color: var(--text-2); }

/* ---------- coupons, plan toggles, cycles, sms ---------- */
.cp-msg { display: block; min-height: 18px; font-size: 12.5px; }
.cp-msg.ok { color: var(--ok); font-weight: 700; }
.cp-msg.bad { color: var(--bad); }
.cp-btn { border-radius: 0; flex: none; }
.plan-toggles, .cyc-toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; }
.sms-packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sms-pack { display: grid; gap: 2px; justify-items: center; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--text); transition: border-color .2s, background .2s; }
.sms-pack:hover { border-color: var(--brand-300); background: var(--brand-soft); }
.sms-pack b { font-size: 20px; font-weight: 800; }
.sms-pack span, .sms-pack small { font-size: 12px; color: var(--muted); }
.sms-pack[disabled] { opacity: .5; pointer-events: none; }
.bank-live .kv { margin-top: 10px; }

/* ---------- admin integrations: one form, one save ---------- */
.ai-form td .input { max-width: 220px; }
.ai-reveal { flex: none; border-radius: 0; min-width: 64px; }
.ai-cb { display: block; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.ai-seed { gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ai-save { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-md); }
@media (max-width: 640px) { .ai-save { flex-direction: column; align-items: stretch; } .ai-save .btn { width: 100%; } }

/* ---------- in-site live room (LiveKit): top bar, speaker / grid layouts, one control bar ---------- */
.lv { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0B1513; color: #fff; }
.lv [hidden] { display: none !important; }
.lv:fullscreen { width: 100vw; height: 100vh; }
.lv-top { flex: none; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lv-top .grow { flex: 1; }
.lv-live { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #FF7489; white-space: nowrap; }
.lv-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
.lv-live em { font-style: normal; opacity: .6; }
.lv-live b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-live.wait b { font-weight: 600; color: rgba(255,255,255,.7); }
.lv-names { display: grid; min-width: 0; line-height: 1.35; }
.lv-title { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-kanj { font-size: 12px; color: #8DD8CA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-meta { flex: none; font-size: 12.5px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); border-radius: 99px; padding: 3px 12px; white-space: nowrap; }
.lv-hands { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: #F2B544; color: #1B1B1B; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.lv-hands b { font-weight: 800; }
.lv-net { flex: none; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(242,181,68,.18); color: #FFE3A8; white-space: nowrap; }
.lv-net.bad { background: #CC3149; color: #fff; }
.lv-layout { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lv-layout button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: rgba(255,255,255,.7); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lv-layout button[aria-pressed="true"] { background: #21A08C; color: #fff; }
.lv-hbtn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lv-hbtn:hover { background: rgba(255,255,255,.12); }

.lv-banner { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 14px; background: rgba(242,181,68,.16); border-bottom: 1px solid rgba(242,181,68,.35); color: #FFE3A8; }
.lv-banner.bad { background: rgba(204,49,73,.18); border-color: rgba(204,49,73,.45); color: #FFC2CC; }
.lv-banner .grow { display: flex; align-items: center; gap: 8px; flex: 1; }
.lv-banner .btn { flex: none; }

.lv-body { flex: 1; display: flex; min-height: 0; position: relative; }
.lv-main { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 12px; position: relative; }
.lv-stage { flex: 1; min-width: 0; display: flex; }
.lv-stage .lv-tile { flex: 1; border-radius: 18px; }
.lv-strip { width: 340px; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.lv-strip .lv-tile { cursor: pointer; }
.lv.lv-solo .lv-strip { display: none; }
.lv[data-view="grid"] .lv-stage { display: none; }
.lv[data-view="grid"] .lv-strip { flex: 1; width: auto; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), minmax(140px, 1fr)); grid-auto-rows: minmax(140px, 1fr); align-content: stretch; }
.lv[data-view="grid"] .lv-strip .lv-tile { cursor: default; border-radius: 16px; }
.lv.lv-waiting .lv-stage, .lv.lv-waiting .lv-strip { visibility: hidden; }
.lv-state { position: absolute; inset: 12px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; border-radius: 18px; background: #152522; color: rgba(255,255,255,.75); font-size: 14px; }
.lv-state b { color: #fff; font-size: 17px; }
.lv-state > span:not(.spinner):not(.lv-state-ic) { max-width: 380px; }
.lv-state-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(204,49,73,.18); color: #FFC2CC; }
.lv-state-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lv-state .spinner { border-color: rgba(255,255,255,.14); border-top-color: #4FCFB8; }

/* tiles: the video carries its own radius (a GPU-composited <video> ignores the parent clip in Chromium),
   and the speaking / pinned ring is drawn by an overlay above the picture so it follows the corners */
.lv-tile { --r: 14px; --ring: transparent; position: relative; min-width: 0; min-height: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; background: #152522; display: grid; place-items: center; }
.lv-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ring); pointer-events: none; z-index: 3; transition: box-shadow .15s; }
.lv-tile.speaking { --ring: #4FCFB8; }
.lv-tile.pinned { --ring: #F2B544; }
.lv-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: inherit; }
/* camera pictures always fill their tile (no black bars); a shared screen is shown whole */
.lv-tile.screen video { object-fit: contain; }
.lv-tile.mirror video { transform: scaleX(-1); }
.lv-tile .avatar { --s: 72px !important; }
.lv-stage .lv-tile .avatar { --s: 132px !important; }
.lv[data-view="speaker"] .lv-strip .lv-tile .avatar { --s: 52px !important; }
.lv-name { position: absolute; right: 10px; bottom: 10px; z-index: 4; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 11px; border-radius: 99px; background: rgba(0,0,0,.6); font-size: 12.5px; font-weight: 600; }
.lv-badges { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 6px; pointer-events: none; }
.lv-bdg { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.lv-bdg.mic { background: rgba(204,49,73,.9); color: #fff; }
.lv-bdg.hand { background: #F2B544; color: #1B1B1B; }
.lv-tools { position: absolute; top: 8px; left: 8px; z-index: 4; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.lv-tile:hover .lv-tools, .lv-tile:focus-within .lv-tools, .lv-tile.pinned .lv-tools { opacity: 1; }
@media (hover: none) { .lv-tools { opacity: 1; } }
.lv-tool { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lv-tool:hover { background: rgba(0,0,0,.8); }
.lv-tool.bad { background: rgba(204,49,73,.85); }
.lv-tool.on { background: rgba(242,181,68,.9); color: #1B1B1B; }
/* small strip tiles keep only "show big"; moderation is in the people panel */
.lv[data-view="speaker"] .lv-strip .lv-tool:not([data-lvt="pin"]) { display: none; }
.lv[data-view="speaker"] .lv-strip .lv-name { right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 9px; font-size: 11.5px; }
.lv[data-view="speaker"] .lv-strip .lv-badges { top: 6px; right: 6px; gap: 4px; }
.lv[data-view="speaker"] .lv-strip .lv-bdg { width: 24px; height: 24px; }
.lv[data-view="speaker"] .lv-strip .lv-tools { top: 4px; left: 4px; }
.lv-wm {
  position: absolute; left: 10px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 10px; pointer-events: none; direction: ltr;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
.lv-wm img { display: block; height: 15px; width: auto; opacity: .92; }
.lv-stage .lv-wm img { height: 20px; }
.lv[data-view="speaker"] .lv-strip .lv-wm { display: none; }
.lv-stage .lv-tile:has(.lv-wm:not([hidden])) .lv-name, .lv[data-view="grid"] .lv-tile:has(.lv-wm:not([hidden])) .lv-name { max-width: calc(100% - 110px); }

/* side panel: chat / people */
.lv-side { width: 340px; flex: none; display: flex; flex-direction: column; border-inline-start: 1px solid rgba(255,255,255,.08); background: #0B1513; }
.lv-side > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lv-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lv-tabs button { min-height: 38px; border: 0; background: none; color: rgba(255,255,255,.7); font: inherit; font-size: 13px; font-weight: 700; padding: 0 14px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lv-tabs button[aria-selected="true"] { background: #21A08C; color: #fff; }
.lv-tabs em { font-style: normal; font-size: 11px; background: rgba(0,0,0,.25); padding: 0 6px; border-radius: 99px; }
.lv-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.lv-x:hover { background: rgba(255,255,255,.08); }
.lv-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.lv-chat p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; line-height: 1.7; }
.lv-chat p b { font-size: 12.5px; color: #8DD8CA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-chat p.me b { color: rgba(255,255,255,.6); }
.lv-chat time { font-size: 11px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.lv-chat p span { grid-column: 1 / -1; }
.lv-chat-empty { margin: auto; display: grid; justify-items: center; gap: 6px; max-width: 240px; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; }
.lv-chat-empty .ic { color: #8DD8CA; }
.lv-chat-empty b { color: #fff; font-size: 14.5px; }
.lv-chat-form { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.lv-chat-form .input { height: 44px; min-height: 44px; padding-block: 0; background: #152522; color: #fff; border-color: rgba(255,255,255,.12); font-size: 16px; }
.lv-chat-form .btn { width: 44px; height: 44px; padding: 0; flex: none; border-radius: 12px; }
.lv-chat-form .emo-btn { width: 44px; height: 44px; background: #152522; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.lv-chat-form .emo-pop { background: #15241F; border-color: rgba(255,255,255,.12); width: 260px; grid-template-columns: repeat(7, 1fr); }
.lv-chat-form .emo-pop button:hover { background: rgba(255,255,255,.08); }
.lv-people { flex: 1; overflow-y: auto; padding: 6px 10px 14px; }
.lv-ptools { padding: 6px 4px 2px; }
.lv-soft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; }
.lv-soft:hover { background: rgba(255,255,255,.12); }
.lv-all { width: 100%; margin-top: 12px; }
.lv-sec { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); padding: 12px 4px 6px; }
.lv-none { display: grid; justify-items: center; gap: 8px; padding: 28px 10px 10px; color: rgba(255,255,255,.6); font-size: 13.5px; text-align: center; }
.lv-none .ic { color: #F2B544; }
.lv-person { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; }
.lv-person:hover { background: rgba(255,255,255,.04); }
.lv-person .grow { flex: 1; min-width: 0; display: grid; }
.lv-person b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-person b small { font-weight: 500; color: rgba(255,255,255,.55); }
.lv-person .grow span { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-person.is-out { opacity: .85; }
.lv-qn { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #F2B544; color: #1B1B1B; font-size: 12px; font-weight: 800; }
.lv-allow { flex: none; min-height: 40px; }
.lv-st { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); }
.lv-st.on { color: #4FCFB8; background: rgba(79,207,184,.14); }

/* one control bar: media | panels, then leave / end at the end */
.lv-ctrls { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); }
.lv-c-mid { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.lv-c-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.lv-btn { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #1B3531; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.lv-btn:hover { background: #24453F; }
.lv-btn.off { background: #CC3149; }
.lv-btn.on { background: #21A08C; }
.lv-btn.locked { background: #3A2A12; color: #F2B544; }
.lv-sep { width: 1px; height: 32px; background: rgba(255,255,255,.12); margin: 0 6px; }
.lv-pbtn { position: relative; flex: none; height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: transparent; color: #fff; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.lv-pbtn:hover { background: rgba(255,255,255,.06); }
.lv-pbtn[aria-pressed="true"] { background: rgba(33,160,140,.2); color: #8DD8CA; }
.lv-pbtn em { font-style: normal; font-variant-numeric: tabular-nums; }
.lv-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #F2B544; color: #1B1B1B !important; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.lv-end { flex: none; height: 48px; padding: 0 16px; border-radius: 14px; font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.lv-leave { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; }
.lv-leave:hover { background: rgba(255,255,255,.12); }
.lv-endall { border: 0; background: #CC3149; color: #fff; }
.lv-more { position: relative; display: inline-flex; }
.lv-menu { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 7; min-width: 220px; padding: 6px; border-radius: 16px; display: grid; gap: 2px; background: rgba(16,30,27,.97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.lv-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #fff; font: inherit; font-size: 14px; text-align: start; white-space: nowrap; cursor: pointer; }
.lv-menu button:hover { background: rgba(255,255,255,.08); }
.lv-menu .lv-mob { display: none; }

/* background picker */
.lv-bgpop { position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; width: min(440px, calc(100vw - 24px)); padding: 12px; border-radius: 18px; background: rgba(16,30,27,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lv-bgpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.lv-bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv-bg-opt { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #fff; font: inherit; cursor: pointer; }
.lv-bg-opt:hover { background: rgba(255,255,255,.08); }
.lv-bg-opt.on { border-color: #4FCFB8; background: rgba(79,207,184,.14); }
.lv-bg-opt:disabled { opacity: .5; cursor: wait; }
.lv-bg-opt small { font-size: 11.5px; opacity: .85; }
.lv-bg-opt > .ic { width: 38px; height: 26px; padding: 4px; }
.lv-bg-sw, .lv-bg-blur { display: block; width: 46px; height: 28px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); }
.lv-bg-blur { background: radial-gradient(circle at 50% 70%, #d9d4cc 0 22%, transparent 23%), linear-gradient(135deg, #6f8f89, #36524d); filter: blur(2.5px); }
.lv-bg-blur.s { filter: blur(1px); }
.lv-bgpop-note { margin: 10px 2px 0; font-size: 12px; color: rgba(255,255,255,.6); }

@media (max-width: 1100px) {
  .lv-meta { display: none; }
  .lv-strip { width: 250px; grid-template-columns: 1fr; }
}
/* phones: the teacher stays in view, people in a row below, chat / people as a bottom sheet */
@media (max-width: 760px) {
  .lv-top { gap: 8px; min-height: 56px; padding: 6px 10px; }
  .lv-live { font-size: 12px; gap: 5px; }
  .lv-live.wait em, .lv-live.wait b { display: none; }
  .lv-title { font-size: 14px; }
  .lv-kanj { font-size: 11px; }
  .lv-layout, .lv-desk { display: none !important; }
  .lv-hands { padding: 0 10px; min-height: 36px; }
  .lv-hands span { display: none; }
  .lv-hbtn { width: 44px; height: 44px; }
  .lv-banner { font-size: 13px; padding: 6px 10px; }
  .lv-main { flex-direction: column; gap: 8px; padding: 8px; }
  .lv-strip { width: auto; height: 96px; display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .lv-strip .lv-tile { flex: none; height: 100%; aspect-ratio: 4 / 3; }
  .lv[data-view="speaker"] .lv-strip .lv-tools { display: none; }
  .lv[data-view="grid"] .lv-strip { height: auto; display: grid; overflow-y: auto; overflow-x: hidden; grid-template-rows: repeat(var(--rows, 2), minmax(150px, 1fr)); }
  .lv[data-view="grid"] .lv-strip .lv-tile { height: auto; aspect-ratio: auto; }
  .lv[data-view="grid"] .lv-strip .lv-tool:not([data-lvt="pin"]) { display: none; }
  .lv-stage .lv-tile .avatar { --s: 104px !important; }
  .lv-strip .lv-wm { display: none; }
  .lv-strip .lv-name { max-width: calc(100% - 16px) !important; }
  .lv-wm img { height: 12px; }
  .lv-side { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; width: auto; height: 58%; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(0,0,0,.5); }
  .lv-ctrls { display: flex; justify-content: space-between; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .lv-c-mid { gap: 5px; }
  .lv-c-end { gap: 5px; }
  .lv-btn, .lv-pbtn { width: 46px; height: 46px; }
  .lv-pbtn { padding: 0; justify-content: center; border-radius: 50%; background: #1B3531; }
  .lv-pbtn > span { display: none; }
  .lv-pbtn .lv-count { position: absolute; top: -3px; left: -3px; }
  .lv-end { height: 46px; padding: 0 12px; font-size: 13px; gap: 6px; }
  .lv-endall span { display: none; }
  .lv-endall::after { content: "پایان"; }
  .lv-menu .lv-mob { display: flex; }
  .lv-bgpop { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .lv-bg-grid { gap: 6px; }
}

/* ---------- Jalali date picker (studio scheduling) ---------- */
.jd { position: relative; }
.jd-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; cursor: pointer; }
.jd-btn b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-btn .ic { color: var(--muted); flex: none; }
.jd-pop { margin-top: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-lg); width: min(100%, 340px); }
.jd-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.jd-head select { flex: 1; min-width: 0; height: 38px; padding-block: 0; }
.jd-nav { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.jd-nav:disabled { opacity: .35; cursor: default; }
.jd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.jd-wd { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.jd-d { height: 38px; border: 0; border-radius: 10px; background: none; color: var(--text); font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; }
.jd-d:hover:not(:disabled) { background: var(--surface-3); }
.jd-d.fri { color: var(--bad, #CC3149); }
.jd-d.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.jd-d.on { background: var(--brand); color: #fff; }
.jd-d:disabled { opacity: .3; cursor: default; }
.jd-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- one-field SMS code ---------- */
.otp-one { width: 100%; height: 58px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .5em; padding-inline-start: .5em; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.otp-one::placeholder { color: var(--line-2); letter-spacing: .5em; }
.otp-err { margin-top: 8px; color: var(--bad, #CC3149); font-size: 13px; text-align: center; }

/* ---------- account menu (topbar) ---------- */
.umenu { position: relative; }
.umenu .topbar-user { border: 0; font: inherit; cursor: pointer; }
.umenu-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 45; width: 250px; padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.umenu.open .umenu-pop { opacity: 1; visibility: visible; transform: none; }
.umenu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.umenu-head > div { display: grid; min-width: 0; }
.umenu-head b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umenu-head span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: end; }
.umenu-pop a, .umenu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
.umenu-pop a:hover, .umenu-pop button:hover { background: var(--surface-3); }
.umenu-pop .ic { color: var(--muted); flex: none; }
.umenu-pop .umenu-out { color: var(--bad, #CC3149); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.umenu-pop .umenu-out .ic { color: currentColor; }
/* phones & tablets: the drawer has no pinned mode, and the nav needs the height */
@media (max-width: 1024px) {
  .side .side-pin { display: none !important; }
  .side .side-promo { display: none; }
}
/* while a live class is open, keep toasts above the room's control bar */
body:has(.lv) .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- chat, Telegram-style (teacher inbox + member conversation) ---------- */
.tg { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: min(720px, calc(100vh - 190px)); min-height: 460px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.tg-side { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--line); background: var(--surface); }
.tg-search { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 0 12px; height: 42px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.tg-search:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.tg-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 14px; }
.tg-sub { padding: 0 16px 8px; font-size: 12px; color: var(--muted); }
.tg-sub b { color: var(--brand-ink); }
.tg-list { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.tg-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--text); }
.tg-item[hidden] { display: none; }
.tg-item:hover { background: var(--surface-2); }
.tg-item.on { background: var(--brand); color: #fff; }
.tg-item.on .tg-row small, .tg-item.on .tg-row span, .tg-item.on .tg-row em, .tg-item.on .tg-row i { color: rgba(255,255,255,.85); }
.tg-mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tg-row b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row small { font-size: 11.5px; color: var(--muted); flex: none; }
.tg-row span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row span i { font-style: normal; color: var(--brand-ink); }
.tg-row span em { font-style: normal; color: var(--muted); }
.tg-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--brand); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.tg-item.on .tg-badge { background: #fff; color: var(--brand-ink); }
.tg-none { padding: 16px; font-size: 13.5px; color: var(--muted); }
.tg-convo { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface-2); }
.tg-idle { align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); padding: 24px; }
.tg-idle .ic { color: var(--brand-ink); }
.tg-idle b { color: var(--text); font-size: 16px; }
.tg-idle span { max-width: 320px; font-size: 13.5px; }
.tg-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tg-head .grow { display: grid; min-width: 0; }
.tg-head b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-head span { font-size: 12.5px; color: var(--muted); }
.tg-back { display: none; width: 38px; height: 38px; border-radius: 12px; place-items: center; color: var(--text-2); }
.tg-back:hover { background: var(--surface-3); }
.tg-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.tg-log .msg { max-width: min(78%, 560px); padding: 7px 12px 6px; border-radius: 16px; font-size: 14.5px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.tg-log .msg.them { background: var(--surface); border: 1px solid var(--line); }
.tg-log .msg time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; opacity: .75; margin-top: 0; direction: ltr; }
.tg-log .msg.pending { opacity: .7; }
.tg-log .msg.failed { background: #CC3149; }
.tick { display: inline-grid; font-style: normal; }
.tick.seen { color: #BFF3E8; }
.chat-day { align-self: center; margin: 8px 0 4px; }
.chat-day span { font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 3px 12px; border-radius: 99px; }
.tg-empty { margin: auto; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--muted); font-size: 13.5px; max-width: 300px; }
.tg-empty .ic { color: var(--brand-ink); }
.tg-empty b { color: var(--text); font-size: 15px; }
.tg-new { position: relative; align-self: center; margin: -52px auto 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; border: 0; background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 700; box-shadow: var(--sh-md); cursor: pointer; }
.tg-new[hidden] { display: none; }
.tg-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.tg-form textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; line-height: 1.7; padding-block: 9px; font-size: 15px; }
.tg-send { width: 46px; height: 44px; padding: 0; border-radius: 14px; flex: none; }
/* member side keeps its card, only the log/composer are Telegram-like */
.l-chat .chat { display: flex; flex-direction: column; }
.l-chat .tg-log { flex: 1; }
@media (max-width: 860px) {
  .tg { grid-template-columns: 1fr; height: calc(100dvh - 230px); min-height: 420px; border-radius: 16px; }
  .tg.has-convo .tg-side { display: none; }
  .tg:not(.has-convo) .tg-convo { display: none; }
  .tg-back { display: grid; }
  .tg-log { padding: 12px; }
  .tg-log .msg { max-width: 86%; }
  .tg-form textarea { font-size: 16px; }
}

/* kanj cards: the whole card is one link (decorative layers must not swallow the click) */
.comm-card { cursor: pointer; }
.comm-card .comm-badges, .comm-card .comm-teacher, .comm-card .cover, .comm-card .comm-meta { pointer-events: none; }

/* ---------- chat composer: box height = send button; emoji picker ---------- */
.tg-form { align-items: flex-end; }
.tg-form textarea { height: 44px; min-height: 44px; padding: 10px 12px; line-height: 22px; box-sizing: border-box; }
.tg-send { width: 44px; height: 44px; }
.emo { position: relative; flex: none; display: inline-flex; }
.emo-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.emo-btn:hover { color: var(--brand-ink); border-color: var(--brand-300); }
.emo-pop { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 20; width: min(300px, 80vw); max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg); }
.emo-pop[hidden] { display: none; }
.emo-pop button { border: 0; background: none; font-size: 21px; line-height: 1; padding: 5px 0; border-radius: 8px; cursor: pointer; }
.emo-pop button:hover { background: var(--surface-3); }

/* ---------- wallet ---------- */
.wl-card { padding: 28px; display: grid; gap: 22px; }
.wl-top { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.wl-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.wl-lbl { font-size: 14px; color: var(--text-2); }
.wl-big { font-size: 40px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wl-big small { font-size: 18px; font-weight: 600; color: var(--text-2); margin-inline-start: 8px; }
.wl-main p { font-size: 13px; color: var(--muted); }
.wl-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-acts .btn { height: 46px; }
.wl-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wl-part { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); line-height: 1.5; min-width: 0; }
.wl-part span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.wl-part b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wl-how { font-size: 13.5px; color: var(--text-2); }
.wl-how summary { cursor: pointer; color: var(--brand-ink); font-weight: 600; width: fit-content; min-height: 32px; display: flex; align-items: center; }
.wl-how p { margin-top: 8px; line-height: 1.9; }
.wl-head { flex-wrap: wrap; gap: 12px; }
.wl-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
.wl-amt.plus { color: var(--ok, #1C9482); }
.wl-amt.minus { color: var(--bad, #CC3149); }
.umenu-amt { margin-inline-start: auto; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .wl-card { padding: 20px 16px; gap: 18px; }
  .wl-big { font-size: 32px; }
  .wl-acts { width: 100%; }
  .wl-acts .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .wl-parts { grid-template-columns: 1fr; gap: 6px; }
  .wl-part { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
  .wl-part b { font-size: 16px; }
}

/* ---------- phone / tablet drawer: the whole menu scrolls as one, the page behind stays still ---------- */
@media (max-width: 1024px) {
  .side {
    height: 100vh; height: 100dvh; max-height: 100dvh;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .side .side-nav { flex: none; overflow: visible; }
  .side .side-nav > *, .side .side-top, .side .side-foot { flex-shrink: 0; }
  .side .side-foot { margin-top: 8px; }
  html:has(body.drawer-open), body.drawer-open { overflow: hidden; }
  .drawer-open .shell-backdrop { touch-action: none; }
}

/* ---------- dialogs: title and buttons stay in view, only the middle scrolls (long forms on phones) ---------- */
.modal { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.modal-head, .modal-foot { flex: none; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-foot { border-top: 1px solid var(--line); padding-top: 12px; background: var(--surface); }
@media (max-width: 640px) { .modal-head { padding: 16px 16px 6px; } .modal-body { padding: 12px 16px 8px; } .modal-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); } }

/* ---------- upload progress: tray (every upload) + inline bar in forms ---------- */
.up-tray { position: fixed; z-index: 210; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.up-row { pointer-events: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); padding: 10px 12px; display: grid; gap: 6px; transition: opacity .35s, transform .35s; }
.up-row.out { opacity: 0; transform: translateY(8px); }
.up-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.up-ic { color: var(--brand-ink); display: grid; flex: none; }
.up-name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }
.up-pct { font-style: normal; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-ink); }
.up-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand); transition: width .2s; }
.up-msg { font-size: 12px; color: var(--muted); }
.up-row[data-state="ok"] .up-bar i, [data-state="ok"] > .t-drop-prog .up-bar i { background: var(--ok, #1C9482); }
.up-row[data-state="ok"] .up-pct { color: var(--ok, #1C9482); }
.up-row[data-state="bad"] .up-bar i, [data-state="bad"] > .t-drop-prog .up-bar i { background: var(--bad, #CC3149); }
.up-row[data-state="bad"] .up-pct, .up-row[data-state="bad"] .up-msg { color: var(--bad, #CC3149); }
.t-drop-prog { position: relative; z-index: 1; width: 100%; max-width: 360px; display: grid; gap: 4px; margin-top: 6px; pointer-events: none; }
.t-drop-prog small { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.t-drop[data-state="bad"] .t-drop-prog small { color: var(--bad, #CC3149); }
.t-drop[data-state="ok"] .t-drop-prog small { color: var(--ok, #1C9482); }
body:has(.lv) .up-tray { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- pay with wallet + SMS send ---------- */
.pw-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--brand-300, var(--line)); background: var(--brand-soft); cursor: pointer; }
.pw-opt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.pw-opt span { display: grid; gap: 2px; }
.pw-opt small { color: var(--muted); font-size: 12.5px; }
.pw-split { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pw-split > div { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.pw-split > div[hidden] { display: none; }
.pw-split .pw-w b { color: var(--ok, #1C9482); }
.pw-split .pw-g { border-top: 1px dashed var(--line); padding-top: 8px; font-weight: 800; }
.pw-split b { font-variant-numeric: tabular-nums; }
.sms-send { display: grid; gap: 14px; }
.sms-preview { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.9; color: var(--text-2); }
.sms-preview .ic { flex: none; margin-top: 4px; color: var(--brand-ink); }
.sms-foot { gap: 12px; flex-wrap: wrap; }
.sms-why { color: var(--warn); font-size: 13px; font-weight: 600; flex: 1 1 220px; }
@media (max-width: 640px) {
  .sms-packs { grid-template-columns: 1fr; gap: 8px; }
  .sms-pack { grid-template-columns: auto 1fr auto; align-items: baseline; justify-items: start; gap: 6px; padding: 12px 14px; min-height: 48px; }
  .sms-pack b { font-size: 17px; }
  .sms-pack small { font-size: 13px; font-weight: 700; color: var(--text); }
  .sms-foot .btn { width: 100%; }
}

/* ---------- payment method dialog ---------- */
.pm-price { display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; }
.pm-price span { font-size: 13px; color: var(--muted); }
.pm-price b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-price small { font-size: 12px; color: var(--ok, #1C9482); }
.pm-list { display: grid; gap: 8px; }
.pm-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.pm-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pm-opt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.pm-opt span { display: grid; gap: 2px; }
.pm-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.pm-opt.is-off { opacity: .6; cursor: not-allowed; background: var(--surface-2); }

/* ---------- kanj page as the owner's hub: post tools, link card, inline video ---------- */
.post-own { display: inline-flex; gap: 2px; }
.post-own .btn-icon { width: 34px; height: 34px; color: var(--muted); }
.post-own .btn-icon:hover { color: var(--brand-ink); background: var(--surface-3); }
.post-link { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.post-link:hover { border-color: var(--brand-300); background: var(--brand-soft); }
.post-link .grow { display: grid; min-width: 0; }
.post-link b { font-size: 14px; }
.post-link small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.post-link > .ic { color: var(--brand-ink); flex: none; }
.post-vid { margin-top: 10px; border-radius: 14px; overflow: hidden; background: #000; }
.post-vid video { display: block; width: 100%; max-height: 70vh; border-radius: inherit; }
.l-chan-head .btn { flex: none; }
.as-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.as-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.as-file small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ai-seed-t { display: grid; gap: 2px; min-width: 0; }

/* kanj form: the exact problem under each field */
.field-err { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bad); }
.check.has-err { color: var(--bad); }
.check .field-err { flex-basis: 100%; }
.t-newkanj .btn-block { margin-top: 10px; justify-content: center; }