/* ============================================================
   Teletime — Design System v6.34 (Telegram design language;
   docs/DESIGN_MASTER_PROMPT.md + docs/DESIGN_SYSTEM.md).
   ONE accent drives interactivity (default azure #3390EC);
   gold stays reserved for the economy layer (Ali's PLUS rule).
   Modes: Day (:root) / Night Blue + Dark violet
   (html[data-theme="dark"], + [data-mode="night"]).
   Bubble style: html[data-bubble="classic"|"azure"].
   All components consume tokens. See docs/DESIGN_SYSTEM.md
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* accent (DESIGN_MASTER_PROMPT §4.2/§4.4): JS applyTheme writes these
     three inline for the chosen preset/custom colour; the stylesheet
     defaults are the azure default so first paint matches. */
  --color-primary:#3390ec;
  --color-primary-hover:#2b7cd3;
  --color-primary-active:#1f6cbd;
  --color-primary-soft:color-mix(in srgb,var(--color-primary) 12%,transparent);
  --color-primary-soft-strong:color-mix(in srgb,var(--color-primary) 17%,transparent);
  --color-secondary:#3e4c63;
  /* economy gold — PLUS layer only (wallet, gifts, premium purchase) */
  --color-gold:#a87e1f;
  --color-gold-bright:#c99327;
  --gold-grad:linear-gradient(120deg,#eec964,#c99327 55%,#e9cd7e);
  /* surfaces & text — Day (§4.2) */
  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-2:#f1f1f4;
  --color-surface-3:#f0f0f3;
  --color-chat-bg:#ffffff;
  --color-text:#000000;
  --color-text-2:#707579;
  --color-muted:#a2acb4;
  /* v6.24: composer action-button idle colour (Web A --color-composer-button, themes.json) */
  --color-composer-button:#000000;
  --color-border:#e7e8ec;
  --color-border-strong:#d4d8de;
  --color-hover:#f0f0f3;
  /* status (§4.2) */
  --color-success:#4dcd5e;
  --color-warning:#f5a623;
  --color-warning-bg:#fdf3e0;
  --color-error:#e53935;
  --color-error-bg:#fbeaec;
  --color-info:var(--color-primary);
  --color-online:#4dcd5e;
  /* v6.23 rendering parity (research round 2, Web A): the shared
     service/action pill surface, the chat-list sender-prefix colour,
     the unread-badge green (+ its muted grey), the online-dot green
     and the own-bubble outgoing-status accent */
  --color-action-msg-bg:rgba(83,106,128,.55);--color-media-meta-bg:rgba(153,153,153,.6);
  /* §4.6/§5.12: chips floating over the wallpaper (date pills, service
     messages) — translucent tint, white text */
  --overlay-chip-bg:rgba(0,0,0,.33);
  /* chat-list sender prefix = the accent (§7.4) */
  --color-chat-username:var(--color-primary);
  --color-active:var(--color-primary);
  --color-badge-muted:#c6c9cc;
  /* v6.26: the chat-list «Draft:» label red (research round 2, Web A
     --color-error for ChatList.Draft) */
  --color-draft:#e53935;
  --color-online-dot:#4dcd5e;
  /* outgoing ticks/meta colour — set per bubble style × mode in the
     v6.34 bubble blocks (Classic Day = green #5DB75B) */
  --color-accent-own:#5db75b;
  /* bubbles — Day + Classic defaults (§4.2); the [data-bubble] blocks
     and dark-mode blocks below override per style/mode */
  --bubble-out:#effdde;
  --bubble-out-top:#effdde;
  --bubble-out-bot:#effdde;
  --bubble-out-meta:#5db75b;
  --bubble-in-meta:#a0acb6;
  /* v6.34 geometry + type controls (§4.7/§4.9/§9): JS writes
     --bubble-r / --msg-fs inline from the Appearance sliders */
  --bubble-r:17px;
  --bubble-r-sm:6px;
  --msg-fs:16px;
  /* incoming-bubble surface (v5.9): a token so theme presets can lift
     incoming bubbles off the app surface (Default Blue) while the
     default theme keeps them on --color-surface, unchanged */
  --bubble-in:var(--color-surface);
  /* v6.14 clickable entities: ONE link colour per bubble direction
     (Telegram chat_messageLinkIn/Out). --color-link is the non-bubble
     surface colour (bio, sheets); --color-link-in is the incoming-
     bubble colour. ≈ Telegram's classic link blue #2678B6. */
  --color-link:var(--color-primary);
  --color-link-in:var(--color-primary);
  /* selection mode: v6.18 used Telegram Android's action-mode green;
     v6.34 follows DESIGN_MASTER_PROMPT §5.4 — the round checkbox and
     the row/bubble tints derive from the ONE accent */
  --color-select:var(--color-primary);
  --sel-row-bg:color-mix(in srgb,var(--color-select) 10%,transparent);
  --bubble-in-sel:color-mix(in srgb,var(--color-select) 16%,var(--bubble-in));
  --bubble-out-sel-top:color-mix(in srgb,var(--color-select) 16%,var(--bubble-out-top));
  --bubble-out-sel-bot:color-mix(in srgb,var(--color-select) 16%,var(--bubble-out-bot));
  /* v6.2 gift tiles: Telegram's gift surfaces are dark neutral cards in
     BOTH themes — these tokens stay near-black in light theme too. */
  --gift-tile-bg:#17181c; --gift-tile-bg-2:#23242a;
  --gift-tile-text:#f2f3f5; --gift-tile-sub:#9aa0a8;
  --color-chip-blue:#2e7cd6;
  /* spacing — 4pt scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  /* radii */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:999px;
  /* typography — v6.13: bundled faces FIRST (see @font-face below), so a
     device can never substitute its own decorative display font for the
     UI; the system stack remains only as a last-resort fallback. */
  --font:"Roboto","Vazirmatn",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --fs-xs:.72rem; --fs-sm:.82rem; --fs-md:.95rem; --fs-lg:1.06rem; --fs-xl:1.3rem; --fs-display:2rem;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* shadows — restrained */
  --shadow-1:0 1px 2px rgba(18,30,26,.07);
  --shadow-2:0 4px 18px rgba(18,30,26,.10);
  --shadow-pop:0 10px 34px rgba(18,30,26,.17),0 2px 8px rgba(18,30,26,.08);
  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:280ms; --dur-4:360ms;
  --ease-out:cubic-bezier(.21,.82,.25,1);
  --ease-in-out:cubic-bezier(.45,0,.25,1);
  /* spring-soft entrance easing (v5.12 motion layer): a whisper of
     overshoot for pops (menus, pills, modals); exits stay ease-out */
  --ease-spring:cubic-bezier(.25,.9,.3,1.15);
  /* v6.21 animation wave: Telegram's REAL curves — source-verified
     from Android's CubicBezierInterpolator.java and Web A's
     _variables.scss / component SCSS (research report
     telegram-animation-transition-system-20261108-1036, §A; see
     DECISIONS v6.21 for which values are verified vs clone choices).
     New-wave surfaces consume these tokens; the --dur-1..4 / --ease-*
     scale above remains for rules outside this wave. */
  --curve-default:cubic-bezier(.25,.1,.25,1);
  --curve-ease-out:cubic-bezier(0,0,.58,1);
  --curve-ease-out-quint:cubic-bezier(.23,1,.32,1);
  --curve-ease-out-back:cubic-bezier(.34,1.56,.64,1);
  --curve-layer:cubic-bezier(.33,1,.68,1);
  --curve-quart:cubic-bezier(.25,1,.5,1);
  --curve-menu:cubic-bezier(.2,0,.2,1);
  /* v6.34 (§4.12): standard material enter/exit curves join the family */
  --curve-enter:cubic-bezier(.2,0,0,1);
  --curve-exit:cubic-bezier(.4,0,1,1);
  --dur-layer:300ms; --dur-modal:200ms; --dur-menu:150ms;
  --dur-select:200ms; --dur-viewer:300ms;
  /* focus */
  --focus-ring:0 0 0 3px var(--color-primary-soft-strong);
  color-scheme:light;
}
/* v6.13 bundled fonts (Defect 1): self-hosted SAME-ORIGIN woff2 — the
   zero-external-resources rule is preserved (DECISIONS.md v6.13).
   Roboto (latin subset, one variable file served by Google Fonts for
   all three weights) carries Latin; Vazirmatn carries Persian/Arabic;
   per-character fallback in the --font stack routes each script to its
   face automatically. Total payload ≈196KB. */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/roboto-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/roboto-latin.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/roboto-latin.woff2") format("woff2")}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/vazirmatn-regular.woff2") format("woff2")}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/vazirmatn-medium.woff2") format("woff2")}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/vazirmatn-bold.woff2") format("woff2")}
html,body{height:100%}
html{font-family:var(--font)} /* the root carries the same stack as --font so nothing can drift from it */
body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);overflow:hidden;-webkit-font-smoothing:antialiased;font-size:var(--fs-md)}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none;font-size:inherit}
button:disabled{cursor:not-allowed;opacity:.5}
input,textarea,select{font-family:inherit;color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:11px 13px;outline:none;width:100%;
  transition:border-color var(--dur-2),box-shadow var(--dur-2);font-size:var(--fs-md)}
input:hover,textarea:hover{border-color:var(--color-muted)}
input:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
textarea{resize:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs)}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.ic{width:24px;height:24px;flex:none}
.ic.sm{width:19px;height:19px}
[dir="rtl"] .flip{transform:scaleX(-1)}
[dir="rtl"] .flip-send{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{border-radius:var(--radius-md);padding:10px 18px;font-weight:var(--fw-semibold);
  transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1),opacity var(--dur-2);
  border:1px solid transparent;background:var(--color-surface-2);color:var(--color-text-2);font-size:var(--fs-md);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.btn:hover{background:var(--color-surface-3)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--color-primary);color:#fff}
.btn.primary:hover{background:var(--color-primary-hover)}
.btn.primary:active{background:var(--color-primary-active)}
.btn.gold{background:var(--gold-grad);color:#3d2c05}
.btn.gold:hover{filter:brightness(1.05)}
.btn.danger{background:var(--color-error-bg);color:var(--color-error)}
.btn.danger:hover{background:#f6d3d8}
.btn.big{width:100%;padding:13px;font-size:var(--fs-lg);border-radius:var(--radius-md)}
.btn.small{padding:6px 12px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.btn:disabled{opacity:.45;transform:none}
.btn.loading{pointer-events:none;opacity:.75}
.btn.loading::after{content:"";width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--color-muted);
  transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1);flex:none}
.icon-btn:hover{background:var(--color-hover);color:var(--color-text-2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.sm{width:34px;height:34px}

/* ---------- avatars ---------- */
.avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:var(--fw-semibold);font-size:1.2rem;background:#b9c4bf;user-select:none}
img.avatar{display:block}
.avatar.sm{width:40px;height:40px;font-size:.98rem}
.avatar.lg{width:76px;height:76px;font-size:1.8rem}
.avatar.xl{width:100px;height:100px;font-size:2.35rem}
.avatar .ic{width:24px;height:24px}
.avatar.grad-saved{background:linear-gradient(135deg,#4a6fa0,#2f4a73)}
.avatar.grad-arch{background:linear-gradient(135deg,#8a97a8,#5d6b7a);color:#fff}
.avatar.grad-chan{background:linear-gradient(135deg,#7a6a9e,#4a3d73)}
.avatar.grad-group{background:linear-gradient(135deg,#5e8a72,#33524a)}

/* ---------- premium gift marker (NO badge — the gift item is the marker) ---------- */
.name-gift{display:inline-flex;align-items:center;margin-inline-start:4px;vertical-align:-3px}
.name-gift .gift-ic{font-size:1.02em;line-height:1}
.gift-ic{display:inline-flex;line-height:1}
.gift-ic.fire{animation:fireHue 2.6s linear infinite}
@keyframes fireHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.gold-txt{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:var(--fw-bold)}
.gift-ic.goldlike,.gift-ic.banana{filter:drop-shadow(0 1px 2px rgba(169,126,31,.45))}

/* ---------- forms ---------- */
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text-2);margin-bottom:6px}
.row{display:flex;gap:var(--space-2)}
.row>*{flex:1}
.form-error{color:var(--color-error);min-height:1.2em;font-size:var(--fs-sm)}
.hint{color:var(--color-muted);font-size:var(--fs-sm);line-height:1.7}
.screen{position:fixed;inset:0}

/* ---------- connection banner ---------- */
.conn-banner{position:fixed;top:calc(var(--space-3) + env(safe-area-inset-top));inset-inline-start:50%;transform:translateX(50%);
  z-index:400;display:flex;align-items:center;gap:var(--space-2);padding:8px 16px;border-radius:var(--radius-full);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);box-shadow:var(--shadow-2);animation:bannerIn var(--dur-3) var(--ease-out)}
[dir="ltr"] .conn-banner{transform:translateX(-50%)}
[dir="rtl"] .conn-banner{transform:translateX(50%)}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1}}
.conn-banner.reconnecting{background:var(--color-warning-bg);color:#7a520a;border:1px solid #ecd9ac}
.conn-banner.offline{background:var(--color-error-bg);color:var(--color-error);border:1px solid #f0c2c8}
.conn-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulseDot 1.2s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.35}}

/* ---------- auth ---------- */
#auth-screen{display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--color-surface)}
.auth-card{width:min(392px,94vw);animation:fadeUp var(--dur-3) var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.logo-badge{width:92px;height:92px;margin:0 auto var(--space-4);border-radius:28px;background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2)}
.logo-ic{width:48px;height:48px}
.logo{font-size:var(--fs-display);font-weight:var(--fw-bold);text-align:center;letter-spacing:-.5px}
.tagline{text-align:center;color:var(--color-muted);margin:var(--space-2) 0 var(--space-6);font-size:var(--fs-md);line-height:1.8}
.tabs{display:flex;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-5)}
.tab{flex:1;padding:11px;font-weight:var(--fw-semibold);color:var(--color-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--dur-2),border-color var(--dur-2);font-size:var(--fs-lg)}
.tab:hover{color:var(--color-text)}
.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.auth-form{display:flex;flex-direction:column;gap:2px}
.auth-form .btn{margin-top:var(--space-2)}

/* ---------- app layout ---------- */
#app-screen{display:flex;background:var(--color-surface)}
.chat-pane{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;background:var(--color-chat-bg)}
.dropdown{position:absolute;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:5px;
  box-shadow:var(--shadow-pop);z-index:200;min-width:212px;animation:menuIn var(--dur-menu) var(--curve-menu);transform-origin:top center}
@keyframes menuIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dropdown button{display:flex;width:100%;text-align:start;padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--fs-md);color:var(--color-text-2);transition:background var(--dur-1);align-items:center;gap:10px}
.dropdown button:hover{background:var(--color-hover)}
.dropdown button.danger-text{color:var(--color-error)}
.wallet-mini{margin:var(--space-1) var(--space-4) var(--space-2);border-radius:var(--radius-md);padding:8px 12px;display:flex;align-items:center;gap:10px;
  justify-content:center;cursor:pointer;font-size:var(--fs-sm);background:var(--color-primary-soft);color:var(--color-text-2);transition:background var(--dur-2);width:calc(100% - 32px)}
.wallet-mini:hover{background:var(--color-primary-soft-strong)}
.wallet-mini b{color:var(--color-primary)}
.wm-item{display:inline-flex;align-items:center;gap:5px}
.wm-item .gold-ic{color:var(--color-gold)}
.dot-sep{width:4px;height:4px;border-radius:50%;background:var(--color-border-strong)}
.search-box{padding:2px var(--space-4) 10px;position:relative}
.search-box input{border-radius:var(--radius-full);background:var(--color-surface-2);border:1.5px solid transparent;padding:9px 14px;padding-inline-start:42px;font-size:var(--fs-md)}
.search-box input:focus{background:var(--color-surface);border-color:var(--color-primary);box-shadow:none}
.search-ic{position:absolute;top:10px;inset-inline-start:27px;width:20px;height:20px;color:var(--color-muted);pointer-events:none}
.search-results{position:absolute;top:calc(100% - 4px);inset-inline:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:5px;z-index:150;box-shadow:var(--shadow-pop);max-height:340px;overflow:auto}
.sr-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:var(--radius-sm);text-align:start;transition:background var(--dur-1)}
.sr-item:hover{background:var(--color-hover)}
.sr-item .grow small{display:block;color:var(--color-muted);direction:ltr;text-align:start;font-size:var(--fs-sm)}

/* ---------- chat list ---------- */
.chat-list{flex:1;overflow-y:auto;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:rgba(18,30,26,.25) transparent;overscroll-behavior-y:contain}
/* v6.23 (Web A B1): the row's padding is .5625rem (9px) on all sides */
.chat-item{display:flex;gap:var(--space-3);width:100%;padding:9px;text-align:start;align-items:center;transition:background var(--dur-1);position:relative}
/* chat-list anatomy (v5.9, Telegram metrics — literals are metric-locked):
   54px avatars, 16px names, 14.5px previews, and a trailing side column
   (time on the name line, unread badge directly under it) */
.chat-item .avatar{width:54px;height:54px;font-size:1.28rem}
.chat-item:hover{background:var(--color-hover)}
.chat-item.active{background:var(--color-primary)}
.chat-item.active .ci-title,.chat-item.active .ci-last{color:#fff}
.chat-item.active .ci-time{color:rgba(255,255,255,.78)}
.chat-item.active .unread-badge{background:#fff;color:var(--color-primary)}
.ci-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.ci-title{font-weight:var(--fw-semibold);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text);display:flex;align-items:center}
.ci-last{color:var(--color-muted);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.ci-last .ic{width:15px;height:15px}
/* trailing column: time (with own-message ticks) level with the name,
   unread badge directly beneath it — Telegram's list anatomy */
.ci-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;align-self:flex-start}
.ci-time{color:var(--color-muted);font-size:var(--fs-xs);flex:none;display:inline-flex;align-items:center;gap:3px}
.ci-ticks{color:var(--color-primary);display:inline-flex;flex:none}
.ci-ticks svg{width:16px;height:10px}
.chat-item.active .ci-ticks{color:#fff}
/* v6.23 (Web A B1): the unread badge is a 22px pill — GREEN
   (--color-active #00c73e) for an unmuted chat, GREY
   (--color-badge-muted #c4c9cc) for a muted one. The chat DTO carries
   no muted flag yet, so rows render unmuted today; .muted is the
   ready hook for the chat-control wave. */
.unread-badge{background:var(--color-active);color:#fff;font-size:.875rem;font-weight:var(--fw-medium);min-width:22px;height:22px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;padding:0 7px;flex:none}
.unread-badge.muted{background:var(--color-badge-muted)}
.avatar-wrap{position:relative;flex:none;display:inline-flex}
/* v6.23 (Web A B1): the online dot is .875rem (14px) in #0ac630 with
   a 2px ring of the row surface, scaling in over 200ms */
.online-dot{position:absolute;bottom:1px;inset-inline-end:1px;width:14px;height:14px;border-radius:50%;background:var(--color-online-dot);border:2px solid var(--color-surface);animation:dotIn var(--dur-select) var(--curve-ease-out)}
@keyframes dotIn{from{transform:scale(0);opacity:0}}
/* v6.23 hook for the chat-control wave: Web A puts the mute icon
   AFTER the title (1.125rem, list-icon colour). No chat carries a
   muted flag in the DTO yet, so nothing renders this today. */
.ci-mute{margin-inline-start:4px;color:var(--color-muted);display:inline-flex;flex:none}
.ci-mute .ic{width:18px;height:18px}
/* v6.26 — chat control: badge row (mentions @ + unread), pin marker,
   draft preview, the archive folder row and archived view header */
.ci-badges{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.unread-badge.mention{font-weight:var(--fw-semibold)}
.ci-pin{color:var(--color-muted);display:inline-flex;flex:none}
.ci-pin .ic{width:15px;height:15px}
.ci-draft{color:var(--color-draft);font-weight:var(--fw-medium);margin-inline-end:.5ch}
.arch-head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:10px var(--space-3);
  color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--fs-md);text-align:start}
.arch-head .ic{width:20px;height:20px}
/* v6.26 — pinned-messages bar: a surface strip under the chat head with
   Telegram's segmented accent rail (one segment per pin, the shown pin
   filled). Slides/fades in on the v6.21 layer tokens. */
.pinned-bar{display:flex;align-items:center;gap:var(--space-3);padding:7px var(--space-3);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);position:relative;z-index:5;
  cursor:pointer;animation:pinbarIn var(--dur-layer) var(--curve-layer)}
@keyframes pinbarIn{from{opacity:0;transform:translateY(-6px)}}
.pinbar-rail{display:flex;flex-direction:column;gap:2px;flex:none;align-self:stretch;justify-content:center}
.pinbar-rail i{display:block;width:3px;flex:1;min-height:6px;max-height:16px;border-radius:2px;background:var(--color-border-strong)}
.pinbar-rail i.on{background:var(--color-primary)}
.pinbar-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.pinbar-main b{color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.pinbar-main span{color:var(--color-text-2);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-bar .icon-btn{flex:none}
/* v6.26 — jump highlight (research round 2): a full-width black overlay
   flash on the jumped-to row — opacity .1 light / .6 dark, fading out */
.msg-row.jump-flash::after{content:'';position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;
  animation:jumpFlash 1.4s var(--curve-default)}
@keyframes jumpFlash{0%{opacity:.1}30%{opacity:.1}100%{opacity:0}}
html[data-theme="dark"] .msg-row.jump-flash::after{animation-name:jumpFlashDark}
@keyframes jumpFlashDark{0%{opacity:.6}30%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .pinned-bar{animation:none} .msg-row.jump-flash::after{animation-duration:.3s} }
.list-state{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.list-state .ic{width:34px;height:34px;color:var(--color-border-strong)}
.list-state p{font-size:var(--fs-sm);line-height:1.8;max-width:280px}
/* skeletons */
.chat-item.skel{pointer-events:none}
.sk-circle,.sk-lines i{background:linear-gradient(100deg,var(--color-surface-2) 40%,var(--color-surface-3) 50%,var(--color-surface-2) 60%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.sk-circle{width:54px;height:54px;border-radius:50%;flex:none}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:9px}
.sk-lines i{display:block;height:11px;border-radius:6px}
.sk-lines i:first-child{width:52%}
.sk-lines i:last-child{width:78%}
.msg-skel{display:flex;gap:var(--space-2);padding:3px 0;align-items:flex-end}
.msg-skel .sk-bubble{height:38px;border-radius:var(--radius-md);background:linear-gradient(100deg,var(--color-surface-2) 40%,var(--color-surface-3) 50%,var(--color-surface-2) 60%);background-size:200% 100%;animation:shimmer 1.3s infinite}
.msg-skel.mine{justify-content:flex-end}

/* ---------- chat pane ---------- */
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-5)}
.empty-art{width:74px;height:74px;border-radius:24px;background:var(--color-surface);color:var(--color-primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.empty-art .ic{width:38px;height:38px}
.empty-pill{text-align:center;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-1)}
.empty-pill h2{font-size:var(--fs-lg);margin-bottom:4px}
.empty-pill p{color:var(--color-muted);font-size:var(--fs-sm)}
.chat-view{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-head{display:flex;align-items:center;gap:var(--space-2);padding:7px var(--space-3);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:6}
.chat-head .avatar{width:42px;height:42px;font-size:1.02rem}
.chat-head-meta{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;padding:2px 4px;border-radius:var(--radius-sm)}
.chat-head-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-md);display:flex;align-items:center}
.chat-head-meta small{color:var(--color-muted);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-meta small.online{color:var(--color-online)}
.back-btn{display:none}
.chat-body{flex:1;position:relative;display:flex;flex-direction:column;min-height:0 /* wallpaper painted via --wp-* in the v5.5 block */}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;overflow-x:clip;padding:var(--space-4) max(var(--space-4),4%) var(--space-2);scrollbar-width:thin;scrollbar-color:rgba(18,30,26,.25) transparent;
  display:flex;flex-direction:column /* v5.13: a flex column — sibling margins never collapse, so the Web A §4 rhythm below is exact */}
/* v6.23 (Web A A3): date chips, the unread divider and service
   messages are ONE pill — white text on --color-action-msg-bg,
   radius = messages radius (15px), padding 3px 8px, font = message
   text − .0625rem, medium, line-height 1.25 */
.day-sep,.unread-sep,.system-msg{width:fit-content;max-width:88%;text-align:center;background:var(--color-action-msg-bg);
  color:#fff;font-size:.89rem;font-weight:var(--fw-medium);line-height:1.25;padding:3px 8px;border-radius:15px}
/* Message System v2 separators (Web A §4): date separators are STICKY —
   they pin while their day is being scrolled through, and a STUCK one
   fades out once scrolling stops (the .stuck class is driven from the
   scroll listener via the .sep-anchor sibling, which marks the date's
   natural position). Date margins 16px; service rows (system + unread)
   8px top/bottom. The sticky top offset is 10px: Web A's 1rem includes
   an overlay-header inset that Timee's in-flow header doesn't have. */
.sep-anchor{display:block;height:0}
.day-sep{position:sticky;top:10px;z-index:5;margin:16px auto;transition:opacity var(--dur-3)}
.messages:not(.is-scrolling) .day-sep.stuck{opacity:0}
.unread-sep{margin:8px auto}
.system-msg{margin:8px auto}
.state-block{margin:var(--space-8) auto;max-width:340px;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);box-shadow:var(--shadow-1)}
.state-block .ic{width:34px;height:34px;color:var(--color-muted)}
.state-block.err .ic{color:var(--color-error)}
.state-block p{color:var(--color-muted);font-size:var(--fs-sm);line-height:1.8}

/* ---------- message rows & bubbles ---------- */
.msg-row{display:flex;gap:var(--space-2);align-items:flex-end;animation:msgIn var(--dur-2) var(--ease-out);position:relative;margin-bottom:6px}
.msg-row.mine{justify-content:flex-end}
/* Message System v2 rhythm (Web A §4): EVERY row carries margin-bottom
   6px; the last row of a group (g-last / g-single) carries 10px; the
   final row of the list is 6px again. No margin-top exists anywhere in
   the message column. Reaction compensation lives in .has-rx (on the
   reacted row itself) — the following row's margin never changes, so a
   reacted message inside a group no longer inflates the group rhythm. */
.msg-row.g-last,.msg-row.g-single{margin-bottom:10px}
.messages>.msg-row:last-child{margin-bottom:6px}
.msg-row.g-first .avatar,.msg-row.g-mid .avatar{visibility:hidden}
.msg-row.g-mid .sender-name,.msg-row.g-last .sender-name{display:none}
@keyframes msgIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
/* Message System v2 geometry (Web A §2): radius 15px on all corners,
   padding 5px / 8px / 6px, max-width 29rem incoming / 30rem own.
   Grouped reduction to 6px happens ONLY on the tail side (logical
   properties, so RTL mirrors automatically): first → bottom-tail,
   middle → both tail corners, last → top-tail. The tail-side BOTTOM
   corner of a group's last bubble (or a single) is 0 — the tail
   appendix hangs off exactly that corner. */
.bubble{background:var(--bubble-in);border-radius:15px;padding:5px 8px 6px;max-width:29rem;
  box-shadow:var(--shadow-1);position:relative;word-break:break-word}
.msg-row.mine .bubble{background:linear-gradient(180deg,var(--bubble-out-top),var(--bubble-out-bot));max-width:30rem}
.msg-row.mine.g-last .bubble,.msg-row.mine.g-single .bubble{border-end-end-radius:0}
.msg-row:not(.mine).g-last .bubble,.msg-row:not(.mine).g-single .bubble{border-end-start-radius:0}
.msg-row.mine.g-first .bubble{border-end-end-radius:6px}
.msg-row.mine.g-mid .bubble{border-start-end-radius:6px;border-end-end-radius:6px}
.msg-row.mine.g-last .bubble{border-start-end-radius:6px}
.msg-row:not(.mine).g-first .bubble{border-end-start-radius:6px}
.msg-row:not(.mine).g-mid .bubble{border-start-start-radius:6px;border-end-start-radius:6px}
.msg-row:not(.mine).g-last .bubble{border-start-start-radius:6px}
.bubble.failed{opacity:.75}
.bubble.failed::after{content:"";position:absolute;inset:0;border:1px solid var(--color-error);border-radius:inherit;pointer-events:none;opacity:.55}
/* v6.23 (Web A A1): sender name = message text − .125rem, medium */
.sender-name{font-size:.875rem;font-weight:var(--fw-medium);line-height:1.25;margin-bottom:2px;display:flex;align-items:center}
.text{white-space:pre-wrap;font-size:var(--fs-md);line-height:1.3125;text-align:start;overflow-wrap:anywhere;
  unicode-bidi:plaintext /* v5.13 (Web A §3): the TEXT CONTAINER carries the per-message bidi context (dir="auto" in markup + plaintext here), so the message's own first strong character sets the line direction — a lone «د» in an own bubble takes the RTL line and the floated meta lands at the message's own inline-end */}
/* meta (time / edited / ticks) is a normal flex row at the bubble's end.
   No float: a floated flex box shrink-wraps unstably on mobile WebKit/Blink
   and collapsed the time into a one-character-per-line stack (v5.1 fix). */
.meta{display:flex;gap:5px;align-items:center;justify-content:flex-end;font-size:11px;color:var(--bubble-in-meta);margin-top:2px;min-height:14px}
.meta>span{white-space:nowrap}
.meta .ticks-slot{display:inline-flex;flex:none;align-items:center}
.meta .pending-ic{flex:none}
.msg-row.mine .meta{color:var(--bubble-out-meta)}
.meta .ticks{display:inline-flex;flex:none;color:var(--bubble-in-meta)}
.meta .ticks svg{width:17px;height:11px}
/* v6.23 (Web A A2): the outgoing status on own bubbles is drawn in
   the own-accent colour in BOTH states — pending/sent/read are told
   apart by the glyph (clock / single / double check), not the tint */
.meta .ticks.read{color:var(--color-accent-own)}
.msg-row.mine .meta .ticks{color:var(--color-accent-own)}
.meta .ticks svg.tick1{width:12px}
/* Media (Message System v2, Web A §2/§3): the media breaks OUT of the
   bubble's horizontal padding to the bubble's own edges; the bubble
   keeps its 5px top / 6px bottom padding. The wide layout (caption
   longer than 40 chars, app.js adds .media-wide) uses the full bubble
   measure. Uncaptioned media carries the meta as an absolute pill ON
   the media — inset 0.25rem, 1.25rem tall, white on
   rgba(153,153,153,.6) (v6.23; Web A A2 media pill);
   captioned media keeps the in-flow meta under the caption. */
.bubble.media{padding:5px 0 6px}
.bubble.media .media{width:100%;max-width:min(21.25rem,72vw);display:block;border-radius:10px 10px 9px 9px}
.bubble.media-wide .media{max-width:min(29rem,86vw)}
.msg-row.mine .bubble.media-wide .media{max-width:min(30rem,86vw)}
.bubble.media .text{padding:3px 8px 0}
.bubble.media .sender-name{padding:1px 8px 3px;margin-bottom:0}
.bubble.media .reply-quote{margin:1px 8px 5px}
.media-wrap{position:relative;line-height:0}
/* v6.23 (Web A A2): the on-media meta pill is 1.25rem tall, white on
   rgba(153,153,153,.6), inset .25rem */
.media-wrap .meta.pill, .stk-wrap .meta.pill{position:absolute;inset-inline-end:4px;bottom:4px;margin:0;min-height:0;height:1.25rem;
  display:inline-flex;align-items:center;background:var(--color-media-meta-bg);color:#fff;border-radius:var(--radius-full);padding:0 4px;line-height:1}
.media-wrap .meta.pill .ticks, .stk-wrap .meta.pill .ticks{color:#fff}
.media-wrap .meta.pill .ticks.read, .stk-wrap .meta.pill .ticks.read{color:#fff}
.media-wrap .meta.pill .pending-ic, .stk-wrap .meta.pill .pending-ic{color:#fff}
/* v6.25: sticker messages — bubble-less art at ~10rem (aspect kept by
   object-fit), the meta pill rides its bottom inline-end corner via
   the shared .meta.pill rules above */
.stk-wrap{position:relative;line-height:0;display:inline-block;max-width:100%}
.stk-art{width:10rem;height:10rem;max-width:62vw;object-fit:contain;display:block}
.stk-art.stk-tgs svg{width:100%;height:100%;display:block}
audio.voice{height:38px;max-width:250px}
.file-chip{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text);padding:2px 0}
.file-chip .fc-ic{width:42px;height:42px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex:none}
.file-chip small{color:var(--color-muted)}
/* Quote block — Web A EmbeddedMessage metrics (§6): padding-block 3px,
   radius 6px, font-size = message text −2px, BOTH lines at a fixed 18px
   line-height, the snippet a single 18px line with ellipsis. (The fixed
   18px lines are also the v5.8 anti-balloon guard: an inherited
   line-height:normal let the Arabic fallback font inflate the box.)
   The tint/bar keep the QUOTED sender's name color (--rq from
   replyQuoteHtml, accent fallback); a media reply adds a 2rem
   pictogram (Web A); the quote-text variant (a quoted SELECTION) may
   wrap — Timee has no selection-quoting, replies-only, n/a. */
.reply-quote{display:flex;gap:8px;align-items:flex-start;border-inline-start:3px solid var(--rq,var(--color-primary));background:color-mix(in srgb,var(--rq,var(--color-primary)) 12%,transparent);border-radius:6px;
  padding:3px 8px;margin-bottom:1px}
.reply-quote .rq-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.reply-quote .rq-thumb{width:32px;height:32px;border-radius:4px;object-fit:cover;flex:none;margin-top:3px}
/* v6.23 (Web A A2 EmbeddedMessage): quote font = text − .125rem */
.reply-quote .rq-name{font-size:.875rem;font-weight:var(--fw-semibold);line-height:18px;text-align:start;color:var(--rq,var(--color-primary));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote .rq-text{font-size:.875rem;line-height:18px;height:18px;text-align:start;color:var(--color-text);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-failed{display:flex;align-items:center;gap:6px;color:var(--color-error);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  padding:3px 4px 0;cursor:pointer;background:none}
.msg-failed .ic{width:14px;height:14px}
.msg-failed:hover{text-decoration:underline}
.pending-ic{color:var(--bubble-in-meta);display:inline-flex}
.pending-ic svg{width:13px;height:11px}
/* reactions — Telegram pins the chips OVERLAPPING the bubble's bottom
   tail-side corner (half outside, on the wallpaper), not as an in-flow row
   (v5.7). The bubble wrapper (.bwrap) is the positioning context; the row
   reserves bottom padding ONLY when it actually carries reactions
   (.has-rx, set by messageHtml), so reaction-less groups keep the tight
   3px/10px rhythm and the next group never collides with the chips.
   Special (gift/transfer) rows keep their in-flow centered chips. */
.bwrap{position:relative;min-width:0 /* v5.8: flex item must be allowed to shrink below its content's min-content, or nowrap quote names / unbroken strings widen the whole chat */}
/* v6.18: «Forwarded from X» header inside a forwarded copy's bubble */
.fwd-from{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-primary);margin-bottom:2px}
.fwd-from .ic{width:13px;height:13px}
/* ---------- v6.18: message selection mode (Telegram ActionMode) ----------
   The selection bar swaps in for the chat header; the bottom Forward
   pill swaps in for the composer (and the reply/edit/readonly bars).
   Rows keep both highlight layers: a full-row background tint plus a
   tint shift on the bubble itself. The checkbox column is a real
   element (.sel-box, injected per row by app.js) whose width animates
   0 → 30px so the bubbles slide over to make room. */
.sel-bar{display:none;align-items:center;gap:var(--space-2);padding:7px var(--space-3);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:6}
.sel-bar b{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.sel-bar .icon-btn:disabled{opacity:.35;cursor:default}
#chat-view.sel-active .sel-bar{display:flex}
#chat-view.sel-active .chat-head{display:none}
.sel-bottom{display:none;justify-content:center;padding:10px var(--space-3) calc(10px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-border)}
#chat-view.sel-active .sel-bottom{display:flex}
#chat-view.sel-active #composer,#chat-view.sel-active #reply-bar,#chat-view.sel-active #edit-bar,#chat-view.sel-active #channel-readonly{display:none!important}
.sel-fwd-pill{display:flex;align-items:center;gap:var(--space-2);background:var(--color-primary);color:#fff;font-weight:var(--fw-semibold);font-size:var(--fs-md);padding:12px 38px;border-radius:var(--radius-full);box-shadow:var(--shadow-1);transition:transform var(--dur-1),background var(--dur-2)}
.sel-fwd-pill:hover{background:var(--color-primary-hover)}
.sel-fwd-pill:active{transform:scale(.97)}
.sel-box{flex:none;align-self:center;width:0;overflow:hidden;opacity:0;transition:width var(--dur-select) var(--curve-ease-out),opacity var(--dur-select) var(--curve-ease-out)}
.messages.sel-mode .sel-box{width:30px;opacity:1}
.sel-disc{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--color-muted);color:#fff;background:transparent;transition:background var(--dur-1),border-color var(--dur-1)}
.sel-disc svg{width:13px;height:13px;opacity:0;transform:scale(.4);transition:opacity var(--dur-menu),transform var(--dur-select) var(--curve-ease-out-back)}
.sel-box.on .sel-disc{background:var(--color-select);border-color:var(--color-select);animation:selPop var(--dur-select) var(--curve-ease-out-back)}
.sel-box.on .sel-disc svg{opacity:1;transform:scale(1)}
@keyframes selPop{40%{transform:scale(1.18)}}
.messages.sel-mode .msg-row{transition:background var(--dur-select) var(--curve-ease-out)}
.msg-row.sel-on{background:var(--sel-row-bg)}
.messages .msg-row.sel-on .bubble{background:var(--bubble-in-sel)}
.messages .msg-row.mine.sel-on .bubble{background:linear-gradient(180deg,var(--bubble-out-sel-top),var(--bubble-out-sel-bot))}
/* ---------- v6.19: swipe-to-reply ----------
   Rows yield horizontal drags to the gesture: touch-action pan-y
   keeps vertical scrolling native and lets horizontal pointermoves
   stream to the handler. The badge sits in the strip the bubble
   vacates on its right and is REVEALED as the bubble slides off it
   (the dragged wrap paints above it) — a muted circle with the reply
   arrow while approaching, filled with the link colour + a pop the
   moment the threshold arms. JS drives position/opacity/scale; the
   fill and the pop (which must restate translateY(-50%) because the
   animation overrides the inline transform) live here. */
.messages .msg-row,.messages [data-bubble]{touch-action:pan-y}
.swipe-reply-badge{position:absolute;width:34px;height:34px;border-radius:50%;z-index:0;
  background:var(--color-surface-3);color:var(--color-muted);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none}
.swipe-reply-badge .ic{width:19px;height:19px}
.swipe-reply-badge.on{background:var(--color-link);color:#fff;animation:swipePop var(--dur-select) var(--curve-ease-out-back)}
@keyframes swipePop{0%{transform:translateY(-50%) scale(1)}40%{transform:translateY(-50%) scale(1.18)}100%{transform:translateY(-50%) scale(1)}}
/* the reacted row's own footprint grows downward by exactly the chips'
   overhang (half of the 30px chip + 2px clearance); nothing is added to
   any other row — Web A §4 compensation, in Timee's overlap model */
.msg-row.has-rx{padding-bottom:17px}
.reactions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.msg-row:not(.special) .bwrap>.reactions{position:absolute;bottom:0;transform:translateY(50%);margin-top:0;flex-wrap:nowrap;z-index:3}
.msg-row.mine .bwrap>.reactions{inset-inline-end:6px}
.msg-row:not(.mine) .bwrap>.reactions{inset-inline-start:6px}
.msg-row.mine .reactions{justify-content:flex-end}
/* chip metrics (Web A §5): 30px tall, glyph 20px, 6px row gap, 2px
   internal gap, semibold tabular counter, server order (no re-sort) */
.rx-chip{display:inline-flex;align-items:center;gap:2px;height:30px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-full);padding:0 6px 0 4px;font-size:var(--fs-sm);box-shadow:var(--shadow-1);transition:transform var(--dur-1),background var(--dur-2)}
.rx-chip .rx-g{font-size:20px;line-height:1;display:inline-flex;align-items:center}
.rx-chip .rx-g .gift-ic{font-size:20px;line-height:1}
.rx-chip:hover{transform:scale(1.07)}
.rx-chip.mine{background:var(--color-primary-soft);border-color:var(--color-primary)}
.rx-chip .cnt{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.rx-chip.paid{border-color:#e3cd8f;background:#fdf8ea}
/* gifts in chat */
.gift-bubble{background:linear-gradient(160deg,#fffdf4,#fdf3d3);border:1px solid #ecd9a0}
.gift-display{font-size:3.1rem;line-height:1.15;display:block;text-align:center;padding:2px 8px}
.gift-label{font-size:var(--fs-sm);color:#7a5c10;text-align:center;margin-top:2px}
.gift-label b{color:var(--color-gold)}

/* ---------- typing / scroll-down ---------- */
.typing-bar{display:flex;align-items:center;gap:var(--space-2);margin:0 auto var(--space-2);background:var(--color-surface);color:var(--color-muted);
  font-size:var(--fs-sm);padding:5px 14px;border-radius:var(--radius-full);box-shadow:var(--shadow-1);width:fit-content}
.tdots{display:inline-flex;gap:3px}
.tdots i{width:6px;height:6px;border-radius:50%;background:var(--color-primary);animation:tblink 1.1s infinite}
.tdots i:nth-child(2){animation-delay:.18s}.tdots i:nth-child(3){animation-delay:.36s}
@keyframes tblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.scrolldown{position:absolute;bottom:14px;inset-inline-end:18px;width:44px;height:44px;border-radius:50%;background:var(--color-surface);
  box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;color:var(--color-text-2);z-index:8;transition:transform var(--dur-modal) var(--curve-ease-out-quint);
  animation:scrollDownIn var(--dur-modal) var(--curve-ease-out-quint)}
@keyframes scrollDownIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.scrolldown:hover{transform:scale(1.07)}
.scrolldown span{position:absolute;top:-6px;inset-inline-end:-4px;background:var(--color-primary);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  min-width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;padding:0 5px}
/* v6.25: the panel is Telegram's SymbolMenu — a search row + scrolling
   body (Web A size: width 24rem, total height 22.375rem), the tab
   switcher a floating pill at the bottom-centre (Ali's Android
   panel). It keeps the v6.21 rise (200ms curve-menu) and seats above
   the composer's inline-START — the emoji button's side (v6.25
   correction; v6.24 had it at the end per Web A). */
.emoji-panel{position:absolute;bottom:12px;inset-inline-start:14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);padding:0;display:flex;flex-direction:column;width:min(24rem,calc(100vw - 20px));height:22.375rem;max-height:calc(100% - 24px);
  overflow:hidden;z-index:60;animation:riseIn var(--dur-modal) var(--curve-menu)}
.sm-body{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding-bottom:3.75rem}
/* panel search row (Ali's shots: «Search» at the top of the panel) */
.sm-search{display:flex;align-items:center;gap:8px;padding:10px 12px 4px}
.sm-search .ic{color:var(--color-muted);flex:none;width:1.15rem;height:1.15rem}
.sm-search input{flex:1;min-width:0;border:none;background:var(--color-surface-2);border-radius:var(--radius-full);padding:8px 14px;font:inherit;font-size:var(--fs-sm);color:var(--color-text)}
.sm-search input:focus{outline:2px solid var(--color-primary-soft-strong)}
.sm-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px}
.sm-emoji-grid button{font-size:1.25rem;padding:5px;border-radius:var(--radius-sm)}
.sm-emoji-grid button:hover{background:var(--color-hover)}
/* v6.25 corrections: the tab switcher is a FLOATING PILL at the
   panel's bottom-centre (Ali's Android panel) — Emoji | GIFs |
   Stickers text segments, the active one a filled segment */
.sm-pill{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:2px;padding:3px;
  background:color-mix(in srgb, var(--color-surface-2) 88%, transparent);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-pop)}
.sm-tab{padding:6px 14px;border-radius:var(--radius-full);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-muted);white-space:nowrap}
.sm-tab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-1)}
/* floating circular backspace over the emoji grid (Ali's shot 1) */
.sm-backspace{position:absolute;bottom:64px;inset-inline-end:12px;z-index:3;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);
  background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-pop);display:flex;align-items:center;justify-content:center;color:var(--color-text-2)}
.sm-backspace .ic{width:1.35rem;height:1.35rem}
.sm-backspace:active{transform:scale(.94)}
/* stickers inside the SymbolMenu: set switcher row (recents, favourites,
   then one chip per set — Web A header order), sections of 4.5rem cells
   (Web A picker size; grid gaps .625rem / .25rem from SymbolMenu.scss) */
.stk-switcher{position:sticky;top:0;z-index:2;display:flex;gap:6px;padding:8px 10px;background:var(--color-surface);overflow-x:auto;scrollbar-width:none}
.stk-switcher::-webkit-scrollbar{display:none}
.stk-chip{flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-muted);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px}
.stk-chip .ic{width:1.25rem;height:1.25rem}
.stk-chip img, .stk-chip video, .stk-chip .stk-chip-tgs{width:100%;height:100%;object-fit:contain}
.stk-chip .stk-chip-tgs svg{width:100%;height:100%;display:block}
.stk-chip.active{outline:2px solid var(--color-primary);outline-offset:-2px;color:var(--color-primary)}
.stk-sec{padding:0 10px 12px;scroll-margin-top:3.6rem}
/* Trending row (Ali's shot 5): a horizontal strip under its own
   header, dismissible for the session */
.stk-trend-head{display:flex;align-items:center;justify-content:space-between}
.stk-trend-x{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:var(--radius-full);color:var(--color-muted)}
.stk-trend-x:hover{background:var(--color-hover)}
.stk-trend-x .ic{width:.95rem;height:.95rem}
.stk-trend-row{display:flex;gap:.25rem;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.stk-trend-row::-webkit-scrollbar{display:none}
.stk-trend-row .stk-cell{flex:none}
.stk-sec-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-2);padding:8px 2px 6px}
.stk-grid{display:grid;grid-template-columns:repeat(auto-fill,4.5rem);column-gap:.625rem;row-gap:.25rem;justify-content:space-between}
.stk-cell{position:relative;width:4.5rem;height:4.5rem;border-radius:var(--radius-md);padding:6px;background:transparent}
.stk-cell:hover{background:var(--color-hover)}
.stk-cell:active{transform:scale(.96)}
.stk-cell img, .stk-cell video, .stk-cell .stk-cell-tgs{width:100%;height:100%;object-fit:contain;display:block}
.stk-cell .stk-cell-tgs svg{width:100%;height:100%;display:block}
.stk-fav-badge{position:absolute;top:1px;inset-inline-end:1px;color:var(--color-gold);display:flex;pointer-events:none}
.stk-fav-badge .ic{width:.95rem;height:.95rem}
.stk-empty{padding:20px 14px;text-align:center;color:var(--color-muted);font-size:var(--fs-sm);line-height:1.6}

/* ---------- composer ---------- */
.reply-bar{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border-top:1px solid var(--color-border);padding:7px var(--space-3)}
.reply-bar-line{width:3px;align-self:stretch;border-radius:2px;background:var(--color-primary)}

/* ---------- composer ---------- */
/* floating rounded bar (v5.7): ~6px screen margins, ~24px radius; the
   send/mic button stays a filled circle at the bar's end (geometry only) */
.composer{display:flex;gap:var(--space-2);align-items:flex-end;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.composer-bar{flex:1;display:flex;align-items:flex-end;gap:.25rem;background:var(--color-surface);border-radius:1.5rem;box-shadow:var(--shadow-1);padding:.25rem}
.composer-bar textarea{border:none;box-shadow:none;background:transparent;padding:9px 6px;max-height:124px;line-height:1.5;border-radius:0;text-align:start /* v6.26: alignment follows the input's own dir, which follows the typed content (syncComposerDir) */}
.composer-bar textarea:focus{box-shadow:none}
/* v6.24: Web A composer action buttons (attach + emoji) — 2.5rem box
   (2.875rem on mobile widths, in the ≤820px block), glyph 1.5rem via
   .ic, NO background in any state (Web A forces background:none inside
   the pill), idle colour --color-composer-button. Pill padding .25rem
   + 2.5rem button = the 3rem composer height. */
.composer-bar .icon-btn{width:2.5rem;height:2.5rem;color:var(--color-composer-button);background:none}
/* v6.25: the «/» bot-command button (bot DMs only) — the slash sits
   in a rounded-square outline, Telegram Android's glyph seat */
.botcmd-btn .botcmd-glyph{display:flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;margin:auto;
  border:1.6px solid currentColor;border-radius:8px;font-size:1rem;font-weight:var(--fw-semibold);line-height:1}
.composer-bar .icon-btn:hover{background:none;color:var(--color-composer-button)}
/* v6.24: emoji button — panel-open state. Desktop: the smile stays and
   tints the accent (Web A's `activated` pattern). Mobile (≤820px
   block): the glyph SWAPS smile → keyboard with a ~0.4s crossfade
   (Telegram's grow/hide); the reduced-motion kill-switch flattens it. */
.emoji-btn{position:relative}
.emoji-btn .ic-smile{transition:opacity var(--dur-4) var(--curve-default),transform var(--dur-4) var(--curve-default)}
.emoji-btn .ic-kbd{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity var(--dur-4) var(--curve-default),transform var(--dur-4) var(--curve-default)}
@media (min-width:821px){ .composer-bar .icon-btn.emoji-btn.panel-open{color:var(--color-primary)} }
.send-btn{width:46px;height:46px;border-radius:50%;background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;flex:none;
  box-shadow:var(--shadow-1);transition:background var(--dur-2),transform var(--dur-1)}
.send-btn:hover{background:var(--color-primary-hover)}
.send-btn:active{transform:scale(.92)}
.send-btn .ic{width:23px;height:23px}
.composer.has-text .send-btn{display:inline-flex}
.composer.has-text .voice-btn{display:none}
.voice-btn{width:46px;height:46px;background:var(--color-surface);box-shadow:var(--shadow-1);color:var(--color-muted)}
.voice-btn:hover{color:var(--color-primary)}
.recording-bar{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border-top:1px solid var(--color-border);
  padding:10px var(--space-3) calc(10px + env(safe-area-inset-bottom));font-size:var(--fs-md)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--color-error);animation:pulseDot 1s ease-in-out infinite;flex:none}
.reply-info{flex:1;min-width:0;display:flex;flex-direction:column}
.reply-info b{font-size:var(--fs-sm);color:var(--color-primary)}
.reply-info span{font-size:var(--fs-sm);color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readonly-bar{background:var(--color-surface);border-top:1px solid var(--color-border);color:var(--color-muted);text-align:center;
  padding:13px var(--space-3) calc(13px + env(safe-area-inset-bottom));font-size:var(--fs-sm)}

/* ---------- dialogs, menus, states ---------- */
.list-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--color-border)}
.list-row:last-child{border-bottom:none}
.list-row .grow b{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row small{display:block;color:var(--color-muted);font-size:var(--fs-sm);margin-top:1px}
.modal-overlay{position:fixed;inset:0;background:rgba(18,28,24,.45);display:flex;align-items:center;justify-content:center;z-index:300;padding:var(--space-4);animation:fadeIn var(--dur-modal) var(--curve-default)}
@keyframes fadeIn{from{opacity:0}}
.modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6);width:min(520px,100%);max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-pop);animation:modalIn var(--dur-modal) var(--curve-default)}
@keyframes modalIn{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.modal h3{font-size:var(--fs-xl);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.modal h3 .ic{color:var(--color-primary)}
.modal h4{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-md);display:flex;align-items:center;gap:7px}
.modal h4 .ic{width:19px;height:19px;color:var(--color-primary)}
.close-x{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;z-index:2}
.profile-hero{text-align:center;padding:var(--space-2) 0 var(--space-3);position:relative}
.profile-hero .avatar{margin:0 auto}
.cover-band{height:64px;border-radius:var(--radius-md);margin-bottom:-34px}
.pname{font-size:var(--fs-xl);font-weight:var(--fw-semibold);font-style:normal;margin-top:6px;display:flex;align-items:center;justify-content:center;transform-origin:center}
/* v6.3.1: names are upright sans semibold everywhere they head a
   profile/header — no italic/script styling on names. */
.prof-top-id b{font-style:normal;font-weight:var(--fw-semibold)}
#chat-title{font-style:normal}
.puser{color:var(--color-muted);direction:ltr;font-size:var(--fs-sm)}
.pbio{color:var(--color-text-2);margin-top:var(--space-2);font-size:var(--fs-md);line-height:1.7}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform var(--dur-1),border-color var(--dur-1)}
.swatch:hover{transform:scale(1.1)}
.swatch.sel{border-color:var(--color-primary)}
/* gift showcase */
.showcase{margin-top:var(--space-4);border:1px solid #ecd9a0;background:linear-gradient(165deg,#fffdf5,#fdf6dd);border-radius:var(--radius-lg);padding:var(--space-4)}
.showcase-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.showcase-head b{display:flex;align-items:center;gap:7px}
.showcase-head b .ic{color:var(--color-gold)}
.showcase-total{font-weight:var(--fw-bold);color:var(--color-gold);display:flex;align-items:baseline;gap:5px}
.showcase-total small{color:var(--color-muted);font-weight:var(--fw-regular)}
.trophies{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-3)}
.trophy{background:var(--color-surface);border:1px solid #eee0b4;border-radius:var(--radius-md);padding:var(--space-3) 6px;text-align:center}
.trophy .t-ic{font-size:1.7rem;line-height:1.2;display:block}
.trophy .t-cnt{font-weight:var(--fw-bold);margin-top:2px}
.trophy .t-lbl{font-size:var(--fs-xs);color:var(--color-muted)}
.recent-gifts{display:flex;flex-direction:column}
.rg-row{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px dashed #eadfae}
.rg-row:last-child{border-bottom:none}
.rg-ic{font-size:1.25rem}
.rg-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.rg-meta small{color:var(--color-muted);font-size:var(--fs-xs)}
.rg-price{font-weight:var(--fw-bold);color:var(--color-gold);white-space:nowrap;font-size:var(--fs-sm)}
.rg-empty{color:var(--color-muted);font-size:var(--fs-sm);text-align:center;padding:var(--space-3)}
/* gift picker */
.gift-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
/* v6.2 gift shop (Amendment 4): big art on dark, name, price, upgradeable */
.gift-picker.shop{grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.shop-opt{background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));color:var(--gift-tile-text);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-2);display:flex;flex-direction:column;
  align-items:center;gap:6px;transition:transform var(--dur-1)}
.shop-opt:active{transform:scale(.97)}
.shop-name{font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.shop-price{display:inline-flex;gap:5px;align-items:center;color:var(--gift-tile-sub);font-size:var(--fs-sm)}
.shop-price .ic{width:15px;height:15px;color:#eec964}
/* v6.7 catalogue: balance line, Gift Premium cards, price pill,
   send-sheet preview, hidden-sender ghost */
.gc-balance{display:flex;align-items:center;gap:6px;color:var(--color-text-2);font-size:var(--fs-sm);margin-bottom:var(--space-2)}
.gc-balance .ic{width:16px;height:16px;color:var(--color-gold)}
.gc-bal-sep{width:1px;height:14px;background:var(--color-border);margin:0 4px}
.gc-sec{margin-top:var(--space-4)}
.gc-sec-t{font-weight:var(--fw-bold);font-size:var(--fs-md)}
.gc-sec-sub{color:var(--color-muted);font-size:var(--fs-sm);margin:2px 0 var(--space-3);line-height:1.5}
.gc-prem-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.gc-prem-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--space-3) var(--space-2);
  background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));color:var(--gift-tile-text);
  border:1px solid var(--gift-tile-line);border-radius:var(--radius-lg);transition:transform var(--dur-1)}
.gc-prem-card:active{transform:scale(.97)}
.gc-prem-card.sel{border-color:var(--color-gold);box-shadow:0 0 0 1px var(--color-gold)}
.gc-prem-art{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-full);
  background:radial-gradient(circle at 35% 30%,#f3d67c,#c99327);color:#4a3205;margin-bottom:2px}
.gc-prem-art .ic{width:28px;height:28px}
.gc-prem-price{color:var(--gift-tile-sub);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.gc-prem-confirm{display:flex;align-items:center;gap:8px;margin-top:var(--space-3);padding:10px 12px;
  background:var(--color-surface-2);border-radius:var(--radius-md);font-size:var(--fs-sm)}
.gc-prem-confirm .grow{flex:1;line-height:1.5}
.price-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.10);
  border-radius:var(--radius-full);padding:3px 10px;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--gift-tile-text)}
.price-pill .ic{width:14px;height:14px;color:#eec964}
.sg-preview{display:flex;align-items:center;gap:var(--space-3);background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));
  color:var(--gift-tile-text);border:1px solid var(--gift-tile-line);border-radius:var(--radius-lg);padding:var(--space-3);margin-bottom:var(--space-3)}
.sg-prev-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sg-prev-tx small{color:var(--gift-tile-sub);line-height:1.45}
.sg-view{flex:none;color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.tile-sender.ghost{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  background:var(--color-surface-3);color:var(--color-muted);box-shadow:none}
.tile-sender.ghost .ic{width:12px;height:12px}
.ghost-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-full);
  background:var(--color-surface-3);color:var(--color-muted)}
.ghost-av .ic{width:13px;height:13px}
.upg-chip{display:inline-flex;gap:4px;align-items:center;background:rgba(255,255,255,.12);color:#eec964;
  font-size:10px;font-weight:var(--fw-bold);padding:2px 8px;border-radius:var(--radius-full)}
.upg-chip .ic{width:12px;height:12px}
/* v6.2 emoji-status picker */
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:var(--space-3)}
.emoji-cell{font-size:26px;padding:8px 0;border-radius:var(--radius-md);background:var(--color-surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--color-text)}
.emoji-cell.sel{outline:2px solid var(--color-primary)}
.emoji-cell.none{font-size:var(--fs-sm);color:var(--color-text-2);font-weight:var(--fw-semibold)}
.emoji-big{font-size:1.3rem;line-height:1}
.gift-opt{background:var(--color-surface-2);border:2px solid transparent;border-radius:var(--radius-md);padding:var(--space-3) 4px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color var(--dur-1),background var(--dur-2)}
.gift-opt:hover{background:var(--color-surface-3)}
.gift-opt.sel{border-color:var(--color-gold);background:#fdf6dd}
.gift-opt small{font-size:var(--fs-xs);color:var(--color-text-2)}
.gift-opt:disabled{opacity:.45;cursor:not-allowed}
/* wallet */
.balance-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-2)}
.balance-card{background:var(--color-primary-soft);border:1px solid var(--color-primary-soft-strong);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}
.balance-card.goldc{background:#fdf6dd;border-color:#ecd9a0}
.balance-card .bc-ic{color:var(--color-primary);display:flex;justify-content:center;margin-bottom:4px}
.balance-card.goldc .bc-ic{color:var(--color-gold)}
.balance-card .amt{font-size:1.45rem;font-weight:var(--fw-bold)}
.balance-card small{color:var(--color-muted)}
.premium-banner{border:1px solid #ecd9a0;background:linear-gradient(165deg,#fffdf5,#fdf3d0);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-3) 0}
.premium-banner .pb-head{display:flex;align-items:center;gap:8px;font-weight:var(--fw-bold)}
.premium-banner .pb-head .ic{color:var(--color-gold)}
.perk-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:var(--space-2)}
.perk-list li{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-md);color:var(--color-text-2);line-height:1.6}
.perk-list li .ic{width:18px;height:18px;color:var(--color-gold);margin-top:3px}
.lb-rank{font-weight:var(--fw-bold);color:var(--color-muted);min-width:26px;text-align:center}
.lb-rank.top1{color:var(--color-gold)}
.lb-rank.top2{color:#8a9299}
.lb-rank.top3{color:#a8713a}
.member-chip{background:var(--color-surface-2);border-radius:var(--radius-full);padding:1px 8px;font-size:var(--fs-xs);color:var(--color-text-2)}
.token-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm);direction:ltr}
/* (the floating .reaction-bar and the v5.8 in-menu strip are gone —
   reactions live in the v5.10 long-press overlay at the end of this
   file; .msg-menu is styled there too) */
/* gift overlay */
.gift-overlay{position:fixed;inset:0;background:rgba(15,22,19,.55);display:flex;align-items:center;justify-content:center;z-index:500;animation:fadeIn var(--dur-modal) var(--curve-default)}
.gift-stage{text-align:center;position:relative;width:min(430px,92vw)}
.gift-big{font-size:6.2rem;line-height:1.1;animation:giftPop .55s var(--ease-out)}
.gift-big.fire{animation:giftPop .55s var(--ease-out),fireHue 2.2s linear infinite}
@keyframes giftPop{0%{transform:scale(.2);opacity:0}55%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.gift-caption{color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-lg);margin-top:var(--space-4);text-shadow:0 2px 10px rgba(0,0,0,.4)}
#gift-particles{position:absolute;inset:0;pointer-events:none}
.particle{position:absolute;width:9px;height:9px;border-radius:50%;animation:burst 1.5s var(--ease-out) forwards}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35);opacity:0}}
/* toasts */
#toasts{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));inset-inline-start:50%;transform:translateX(50%);z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
[dir="ltr"] #toasts{transform:translateX(-50%)}
[dir="rtl"] #toasts{transform:translateX(50%)}
.toast{background:#22302b;color:#fff;padding:10px 20px;border-radius:var(--radius-full);font-size:var(--fs-sm);box-shadow:var(--shadow-pop);animation:toastIn var(--dur-modal) var(--curve-layer);max-width:88vw;text-align:center}
.toast.err{background:#5c1f24}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .pane-section{width:100%;border-inline-end:none}
  .chat-pane{position:fixed;inset:0;z-index:40;transform:translateX(105%);transition:transform var(--dur-layer) var(--curve-quart)}
  [dir="rtl"] .chat-pane{transform:translateX(-105%)}
  body.chat-open .chat-pane{transform:none}
  /* v6.12 edge-swipe back: vertical pans stay native scrolling (pan-y)
     while the gesture claims horizontal drags; the panel clips its
     corners while dressed with radius + shadow mid-drag. Drag frames
     kill the transition (finger-driven); settling runs the chat-slide
     token (v6.21: 300ms var(--curve-quart)) on transform + radii +
     shadow; the list underneath dims a touch. */
  .chat-pane{touch-action:pan-y;overflow:hidden}
  .chat-pane.swipe-drag{transition:none}
  .chat-pane.swipe-settle{transition:transform var(--dur-layer) var(--curve-quart),border-radius var(--dur-layer) var(--curve-quart),box-shadow var(--dur-layer) var(--curve-quart)}
  body.swipe-active .pane-section{filter:brightness(calc(1 - var(--swipe-p,0)*.16))}
  .back-btn{display:inline-flex}
  .messages{padding:var(--space-3) var(--space-3) var(--space-2)}
  .modal{padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg) var(--radius-lg) 0 0;align-self:flex-end;width:100%;animation:sheetIn var(--dur-layer) var(--curve-layer)}
  .modal .det-stage{margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) var(--space-3)}
  .modal.prof{margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0}
  .modal-overlay{padding:0;align-items:flex-end}
  .gift-picker{grid-template-columns:repeat(4,1fr)}
  /* v6.25: mobile SymbolMenu is the full-width bottom sheet (Web A
     ≤600px: height 17.6875rem) */
  .emoji-panel{inset-inline-start:8px;inset-inline-end:8px;width:auto;height:17.6875rem;bottom:8px}
  /* v6.24: mobile composer action buttons are 2.875rem (Web A
     .mobile-symbol-menu-button), and the emoji button swaps its glyph
     smile → keyboard while the panel is open (no accent tint here —
     the swap IS the state, as in Web A mobile). */
  .composer-bar .icon-btn{width:2.875rem;height:2.875rem}
  .emoji-btn.panel-open .ic-smile{opacity:0;transform:scale(.4)}
  .emoji-btn.panel-open .ic-kbd{opacity:1;transform:scale(1)}
}

/* Message System v2 small-screen values (Web A §2/§4 at ≤600px):
   viewport-relative bubble caps (incoming keeps the avatar-gutter
   allowance; avatar-less lists — DMs/Saved — use the own allowance for
   both sides), the 7px group-end margin, sticky-date margins .5/.75rem */
@media (max-width:600px){
  .msg-row:not(.mine) .bubble{max-width:min(29rem,100vw - 6.25rem)}
  .msg-row.mine .bubble{max-width:min(30rem,100vw - 3.75rem)}
  .messages.no-avatars .msg-row:not(.mine) .bubble{max-width:min(29rem,100vw - 3.75rem)}
  /* v6.23 (Web A A1): the ≤600 intra-group row margin is .25rem (4px) */
  .msg-row{margin-bottom:4px}
  .msg-row.g-last,.msg-row.g-single{margin-bottom:7px}
  .messages>.msg-row:last-child{margin-bottom:6px}
  .day-sep{margin:8px auto 12px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .gift-ic.fire,.gift-big.fire{animation:none!important}
}
/* v6.21: at the token level the wave's durations also collapse to
   short fades (100–150 ms) — the web-correct equivalent of Web A's
   animation levels (§A5 of the research report: Telegram Web itself
   has levels, no prefers-reduced-motion rule). The kill-switch above
   still flattens movement; this mapping keeps the wave's timing
   tokens honest if that switch is ever relaxed. */
@media (prefers-reduced-motion:reduce){
  :root{--dur-layer:120ms;--dur-modal:120ms;--dur-menu:100ms;--dur-select:120ms;--dur-viewer:150ms}
}

/* ============================================================
   v4 — Telegram-faithful structure: bottom tab bar (mobile),
   icon rail (desktop), tab views, settings list, app bars.
   Same design language/tokens as v3. See docs/DESIGN_SYSTEM.md
   ============================================================ */
#app-screen{flex-direction:column;height:100%}
.app-main{flex:1;display:flex;min-height:0;position:relative;background:var(--color-surface)}
.pane-section{width:392px;max-width:100vw;display:flex;flex-direction:column;border-inline-end:1px solid var(--color-border);background:var(--color-surface);z-index:5;min-height:0;position:relative}
.tab-view{display:none;flex-direction:column;flex:1;min-height:0;position:relative}
.tab-view.active{display:flex}
.view-scroll{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(18,30,26,.25) transparent}

/* app bar (section headers, Telegram-style) */
.app-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);min-height:56px;border-bottom:1px solid var(--color-border);background:var(--color-surface);flex:none}
.app-bar-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-avatar-btn{flex:none;border-radius:50%;padding:0;display:inline-flex;transition:transform var(--dur-1)}
.me-avatar-btn:active{transform:scale(.93)}
.me-avatar-btn .avatar{width:38px;height:38px;font-size:.95rem}
#chats-search-box{display:none}
#chats-search-box.open{display:block}

/* navigation: shared tab buttons */
.nav-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-muted);
  font-size:.66rem;font-weight:var(--fw-medium);padding:6px 4px;border-radius:var(--radius-md);
  transition:color var(--dur-2),background var(--dur-2)}
.nav-tab .ic{width:25px;height:25px}
.nav-tab:hover{color:var(--color-text-2)}
.nav-tab.active{color:var(--color-primary)}
.nav-tab.gold-tab.active{color:var(--color-gold)}
.nav-badge{position:absolute;top:1px;inset-inline-start:calc(50% + 3px);background:var(--color-primary);color:#fff;
  font-size:.62rem;font-weight:var(--fw-bold);min-width:18px;height:18px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--color-surface)}
/* mobile bottom tab bar */
#tabbar{display:flex;background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--color-border);padding:4px var(--space-2) calc(4px + env(safe-area-inset-bottom));z-index:45;flex:none}
#tabbar .nav-tab{flex:1;min-height:50px}
/* desktop icon rail */
#nav-rail{display:none}
@media (min-width:821px){
  #tabbar{display:none}
  #nav-rail{display:flex;flex-direction:column;align-items:center;width:64px;flex:none;background:var(--color-surface);
    border-inline-end:1px solid var(--color-border);padding:var(--space-3) 6px;gap:var(--space-2);z-index:6}
  .rail-logo{color:var(--color-primary);display:flex;padding:4px 0 var(--space-2)}
  .rail-logo .ic{width:28px;height:28px}
  .rail-tabs{display:flex;flex-direction:column;gap:var(--space-1);flex:1;width:100%}
  #nav-rail .nav-tab{min-height:54px;width:100%}
  .rail-me{border-radius:50%;padding:0;display:inline-flex;transition:transform var(--dur-1)}
  .rail-me:active{transform:scale(.93)}
  .rail-me .avatar{width:40px;height:40px;font-size:1rem}
  #chats-search-box{display:block}
}

/* compose FAB (chats tab) */
.fab{position:absolute;bottom:var(--space-4);inset-inline-end:var(--space-4);width:54px;height:54px;border-radius:50%;
  background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);
  z-index:30;transition:background var(--dur-2),transform var(--dur-1)}
.fab:hover{background:var(--color-primary-hover)}
.fab:active{transform:scale(.93)}
.fab .ic{width:24px;height:24px}

/* people view */
.search-box.always{flex:none}
.people-results{flex:1;overflow-y:auto;padding:var(--space-1) var(--space-2) var(--space-4);scrollbar-width:thin;scrollbar-color:rgba(18,30,26,.25) transparent}
.people-results .sr-item{padding:9px 8px;border-radius:var(--radius-md)}
.people-results .sr-item small{font-size:var(--fs-sm)}
.sr-status{color:var(--color-online);font-weight:var(--fw-medium)}

/* wallet view */
.wallet-view{padding:var(--space-4)}
.wallet-view h3{font-size:var(--fs-xl);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.wallet-view h3 .ic{color:var(--color-gold)}
.wallet-view h4{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-md);display:flex;align-items:center;gap:7px}
.wallet-view h4 .ic{width:19px;height:19px;color:var(--color-primary)}

/* settings view (Telegram grouped list) */
.settings-view{padding:var(--space-3) var(--space-3) var(--space-6)}
.settings-profile{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;padding:var(--space-3);
  background:var(--color-surface-2);border-radius:var(--radius-lg);transition:background var(--dur-2);margin-bottom:var(--space-4)}
.settings-profile:hover{background:var(--color-surface-3)}
.settings-profile .avatar{width:58px;height:58px;font-size:1.35rem}
.settings-profile .sp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.settings-profile .sp-meta b{font-size:var(--fs-lg);display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-profile .sp-meta small{color:var(--color-muted);direction:ltr;text-align:start;font-size:var(--fs-sm)}
.settings-profile .ic{color:var(--color-muted)}
[dir="ltr"] .chev-end{transform:scaleX(-1)}
.set-group{background:var(--color-surface-2);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4)}
.set-row{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;padding:11px var(--space-3);
  font-size:var(--fs-md);color:var(--color-text);transition:background var(--dur-1);position:relative;min-height:52px}
.set-row:hover{background:var(--color-surface-3)}
.set-row + .set-row::before{content:"";position:absolute;top:0;inset-inline-start:calc(var(--space-3) + 46px);inset-inline-end:0;height:1px;background:var(--color-border)}
.set-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.set-ic .ic{width:19px;height:19px}
.set-ic.teal{background:var(--color-primary)}
.set-ic.gold{background:linear-gradient(135deg,#c99327,#a87e1f)}
.set-ic.slate{background:var(--color-secondary)}
.set-ic.bronze{background:#a8713a}
.set-ic.forest{background:#2f6b4f}
.set-ic.plum{background:#7a5a86}
.set-row .set-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-row .set-val{color:var(--color-muted);font-size:var(--fs-sm);flex:none}
.set-row .ic.chev{width:17px;height:17px;color:var(--color-muted);flex:none}
.set-row.danger{color:var(--color-error);justify-content:center;font-weight:var(--fw-semibold)}
.set-row.danger:hover{background:var(--color-error-bg)}

/* chat overflow menu */
.chat-head{position:relative}
.chat-menu{top:calc(100% + 4px);inset-inline-end:8px}

/* action sheets / menu lists inside modals */
.menu-list{display:flex;flex-direction:column}
.menu-list button{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;padding:13px var(--space-2);
  border-radius:var(--radius-md);font-size:var(--fs-md);color:var(--color-text);transition:background var(--dur-1);min-height:52px}
.menu-list button:hover{background:var(--color-hover)}
.menu-list button .ic{color:var(--color-primary)}
.menu-list button.danger-text{color:var(--color-error)}
.menu-list button.danger-text .ic{color:var(--color-error)}
/* attach sheet */
.attach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);padding:var(--space-2) 0}
.attach-item{display:flex;flex-direction:column;align-items:center;gap:9px;padding:var(--space-3) 4px;border-radius:var(--radius-md);transition:background var(--dur-1);font-size:var(--fs-sm);color:var(--color-text-2)}
.attach-item:hover{background:var(--color-hover)}
.attach-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.attach-ic .ic{width:26px;height:26px}
.attach-ic.photo{background:#4a7d5b}
.attach-ic.video{background:#5b6fa6}
.attach-ic.doc{background:var(--color-secondary)}

/* profile screen info (Telegram profile structure; action tiles are
   .pf-tile in the v5.12 block) */
.profile-status{color:var(--color-muted);font-size:var(--fs-sm);margin-top:2px}
.profile-status.online{color:var(--color-online)}
/* v6.12.1: the card paints in its own layer above any hero bleed, and
   its rows carry a full line box — with the inherited line-height the
   balance value's tall script metrics could shear against the card's
   top edge (owner's clipped «Timee · Tcoins» line). */
.info-card{margin-top:var(--space-4);background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);position:relative;z-index:1}
.info-row{padding:12px 0;border-bottom:1px solid var(--color-border)}
.info-row:last-child{border-bottom:none}
.info-row b{display:block;font-size:var(--fs-md);font-weight:var(--fw-medium);word-break:break-word;line-height:1.6}
.info-row small{display:block;color:var(--color-muted);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.5}
.info-row .ltr-val{direction:ltr;text-align:start;display:block}

/* toasts clear the mobile tab bar */
@media (max-width:820px){
  #toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ============================================================
   v5 — Telegram 13.2 structure: floating pill tab bar, folder
   chips, Contacts, Profile tab, Money-model wallet card.
   Same tokens/identity as v3/v4. See docs/DESIGN_SYSTEM.md
   ============================================================ */
/* floating pill tab bar (mobile) */
#tabbar{position:fixed;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));
  border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-pop);
  background:color-mix(in srgb,var(--color-surface) 84%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  padding:5px;transition:transform var(--dur-3) var(--ease-in-out),opacity var(--dur-2)}
#tabbar .nav-tab{border-radius:var(--radius-full);min-height:52px}
/* selected segment (v5.9): a subtle surface-2 pill; the accent lives in
   the icon + label (.nav-tab.active color) — Telegram's reference bar */
#tabbar .nav-tab.active{background:var(--color-surface-2)}
#nav-rail .nav-tab.active{background:var(--color-surface-2)}
.tab-avatar{display:inline-flex;line-height:0}
.tab-avatar .avatar{width:25px;height:25px;font-size:.78rem}
#tabbar .nav-tab.active .tab-avatar .avatar{box-shadow:0 0 0 2px var(--color-surface),0 0 0 3.5px var(--color-primary)}
#rail-me.active{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary)}
#chats-search-box{display:block}
.app-bar{position:relative}
.chats-menu{top:calc(100% + 4px);inset-inline-end:8px}
/* folder chips (client-side chat filters) */
.folder-chips{display:flex;gap:6px;padding:0 var(--space-4) 9px;overflow-x:auto;flex:none;scrollbar-width:none}
.folder-chips::-webkit-scrollbar{display:none}
/* Telegram folder chips (v5.9): unselected = transparent + meta text;
   selected = surface-2 fill with ACCENT text — never a filled accent pill */
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border-radius:var(--radius-full);
  background:transparent;border:1px solid transparent;color:var(--color-muted);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);transition:background var(--dur-2),color var(--dur-2)}
.fchip:hover{background:var(--color-surface-2)}
.fchip.active{background:var(--color-surface-2);border-color:transparent;color:var(--color-primary)}
.fchip-badge{background:var(--color-primary);color:#fff;font-size:.62rem;font-weight:var(--fw-bold);min-width:17px;height:17px;
  border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
/* contacts */
.invite-row{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;padding:9px 8px;
  border-radius:var(--radius-md);transition:background var(--dur-1);margin-bottom:var(--space-1)}
.invite-row:hover{background:var(--color-hover)}
.invite-row b{font-size:var(--fs-md)}
.contact-row{padding:7px 8px;border-radius:var(--radius-md)}
.contact-row .avatar{width:48px;height:48px}
#contacts-list .sr-item small{font-size:var(--fs-sm)}
/* (v5.12: the saturated themed hero + white chips were removed — the
   profile header is the plain Telegram anatomy in the v5.12 block at
   the end of this file; balance/premium live in the info card now) */
.profile-view{padding-bottom:var(--space-6)}
.profile-view .info-card,.profile-view .showcase{margin-inline:var(--space-3)}
/* wallet card (Money model) */
.wallet-card{border-radius:var(--radius-xl);padding:var(--space-5);color:#fff;position:relative;overflow:hidden;
  margin-bottom:var(--space-4);box-shadow:var(--shadow-2);min-height:158px;display:flex;flex-direction:column;
  background:linear-gradient(128deg,var(--color-primary) 0%,color-mix(in srgb,var(--color-primary) 66%,var(--color-gold)) 82%,var(--color-gold-bright) 135%)}
.wallet-card::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  background:rgba(255,255,255,.09);top:-120px;inset-inline-end:-70px;pointer-events:none}
.wallet-card .sk-lines i{background:rgba(255,255,255,.25)}
.wc-top{display:flex;align-items:center;justify-content:space-between}
.wc-brand{font-weight:var(--fw-bold);letter-spacing:.04em;font-size:var(--fs-md);opacity:.92}
.wc-gem{display:inline-flex;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.16);
  align-items:center;justify-content:center;color:#eec964}
.wc-gem .ic{width:21px;height:21px}
.wc-amt{display:flex;align-items:center;gap:9px;font-size:2.05rem;font-weight:var(--fw-bold);margin-top:var(--space-4)}
.wc-amt .ic{width:27px;height:27px;color:#eec964}
.wc-amt small{font-size:var(--fs-md);font-weight:var(--fw-medium);opacity:.85}
.wc-sub{font-size:var(--fs-sm);opacity:.88;margin-top:1px}
.wc-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4)}
.wc-holder{direction:ltr;font-size:var(--fs-md);letter-spacing:.03em}
.wc-gifts{display:inline-flex;gap:6px;font-size:1.3rem}
.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-1)}
.wallet-actions .btn.big{width:auto}
.addr-row{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:7px;padding-inline-start:14px}
.addr-val{flex:1;min-width:0;font-weight:var(--fw-semibold);direction:ltr;text-align:start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-ic.money{background:linear-gradient(135deg,#c99327,#a87e1f)}
.set-val{max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-2) 0 var(--space-3)}
.info-hero .avatar{width:76px;height:76px;font-size:1.8rem}
/* mobile: scroll areas and FAB clear the floating pill; pill hides while a chat is open */
@media (max-width:820px){
  .chat-list,.people-results,.view-scroll{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body.chat-open #tabbar{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
  .fab{bottom:calc(98px + env(safe-area-inset-bottom))}
  #toasts{bottom:calc(108px + env(safe-area-inset-bottom))}
}

/* ============================================================
   v5.1 — dark theme (html[data-theme="dark"]): Telegram-night
   mood in Timee's teal identity. Tokens swap wholesale; the few
   components with hard-coded light tints (gold assets, separators,
   banners) get explicit dark variants. Gold stays gold. A user-picked
   accent (inline --color-primary from applyTheme) still wins over
   the dark default primary below, in both modes.
   ============================================================ */
/* Dark (violet) — DESIGN_MASTER_PROMPT §4.3 B. The accent itself is
   NOT set here: it stays the user's chosen preset in every mode
   (applyTheme writes it inline). Night Blue overrides live in the
   v6.34 section: html[data-theme="dark"][data-mode="night"]. */
html[data-theme="dark"]{
  color-scheme:dark;
  --color-gold:#d9a92f;
  --color-bg:#212121;
  --color-surface:#212121;
  --color-surface-2:#181818;
  --color-surface-3:#2a2a2a;
  --color-chat-bg:#0f0f0f;
  --color-text:#ffffff;
  --color-text-2:#aaaaaa;
  --color-muted:#707579;
  --color-composer-button:#ffffff;
  --color-border:rgba(255,255,255,.08);
  --color-border-strong:rgba(255,255,255,.15);
  --color-hover:#2a2a2a;
  --color-warning-bg:#3a2d10;
  --color-error-bg:#3d1e22;
  --color-online:#4dcd5e;
  --color-action-msg-bg:rgba(83,106,128,.42);
  --bubble-out:var(--color-primary);
  --bubble-out-top:color-mix(in srgb,var(--color-primary) 86%,#ffffff);
  --bubble-out-bot:var(--color-primary);
  --bubble-out-meta:rgba(255,255,255,.65);
  --bubble-in-meta:#aaaaaa;
  --bubble-in:#212121;
  --color-link:color-mix(in srgb,var(--color-primary) 62%,#ffffff);
  --color-link-in:color-mix(in srgb,var(--color-primary) 62%,#ffffff);
  --gift-tile-bg:#101216; --gift-tile-bg-2:#1a1c21;
  --gift-tile-text:#f2f3f5; --gift-tile-sub:#8b9096;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 4px 18px rgba(0,0,0,.5);
  --shadow-pop:0 10px 34px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.45);
}
html[data-theme="dark"] .chat-body[data-wp="default"],html[data-theme="dark"] .wp-prev[data-wp="default"]{--wp-bg:#0e1621;
  --wp-grad:linear-gradient(150deg,#0e1621 0%,#12202c 45%,#0d1a20 75%,#101d26 100%);
  --wp-img:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%20viewBox%3D%220%200%20480%20480%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2845%2055%29%20rotate%28-14%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2216%22%2F%3E%3Cpath%20d%3D%22M-12%2C-11%20L-14%2C-25%20L-2%2C-17%20M12%2C-11%20L14%2C-25%20L2%2C-17%22%2F%3E%3Ccircle%20cx%3D%22-6%22%20cy%3D%220%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%220%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-3%2C7%20Q0%2C9%203%2C7%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%2038%29%20rotate%2810%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-16%20L4.7%2C-6.5%20L15%2C-5%20L7.5%2C2.3%20L9.3%2C12.5%20L0%2C7.6%20L-9.3%2C12.5%20L-7.5%2C2.3%20L-15%2C-5%20L-4.7%2C-6.5%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28262%2062%29%20rotate%28-8%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-15%2C0%20Q-2%2C-11%207%2C-5%20L15%2C-12%20L15%2C12%20L7%2C5%20Q-2%2C11%20-15%2C0%20Z%22%2F%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28372%2042%29%20rotate%2818%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M7%2C-15%20L7%2C5%20M7%2C-15%20L17%2C-12%20L17%2C2%22%2F%3E%3Cellipse%20cx%3D%222%22%20cy%3D%226%22%20rx%3D%225%22%20ry%3D%224%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%223%22%20rx%3D%225%22%20ry%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28442%20128%29%20rotate%28-12%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C16%20L-13%2C-10%20a15%2C9%200%200%2C1%2026%2C0%20Z%22%2F%3E%3Ccircle%20cx%3D%22-3%22%20cy%3D%220%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%22-6%22%20r%3D%222.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2892%20142%29%20rotate%288%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2215%22%2F%3E%3Cpath%20d%3D%22M-13%2C-7%20q-7%2C9%201%2C17%20M13%2C-7%20q7%2C9%20-1%2C17%22%2F%3E%3Ccircle%20cx%3D%22-5.5%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223%22%20ry%3D%222.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28205%20122%29%20rotate%28-18%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-18%20C8%2C-8%208%2C6%200%2C14%20C-8%2C6%20-8%2C-8%200%2C-18%20Z%22%2F%3E%3Ccircle%20cy%3D%22-4%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M-7%2C8%20L-13%2C16%20L-4%2C14%20M7%2C8%20L13%2C16%20L4%2C14%20M0%2C14%20L0%2C19%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28312%20152%29%20rotate%2812%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C13%20C-14%2C3%20-16%2C-6%20-9%2C-11%20C-4%2C-14%200%2C-10%200%2C-6%20C0%2C-10%204%2C-14%209%2C-11%20C16%2C-6%2014%2C3%200%2C13%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28425%20232%29%20rotate%28-6%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-14%2C9%20a7%2C7%200%200%2C1%20-1%2C-13.8%20A9%2C9%200%200%2C1%2011%2C-6%20A6.5%2C6.5%200%200%2C1%2013%2C9%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2842%20252%29%20rotate%2815%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-6%20C-12%2C-14%20-18%2C2%200%2C15%20C18%2C2%2012%2C-14%200%2C-6%20M0%2C-6%20C0%2C-11%203%2C-14%208%2C-15%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28142%20236%29%20rotate%28-10%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-13%2C-9%20a5.5%2C5.5%200%201%2C1%203.5%2C-7.5%20a5.5%2C5.5%200%201%2C1%207%2C3.5%20L11%2C8%20a5.5%2C5.5%200%201%2C1%20-3.5%2C7.5%20a5.5%2C5.5%200%201%2C1%20-7%2C-3.5%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28252%20262%29%20rotate%286%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2214%22%2F%3E%3Ccircle%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M-9%2C-7%20l3%2C2%20M6%2C-10%20l1%2C3%20M9%2C6%20l3%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%20256%29%20rotate%28-16%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-16%2C7%20L-13%2C-2%20L5%2C-2%20L11%2C3%20L16%2C4%20L16%2C7%20M-16%2C7%20L16%2C7%22%2F%3E%3Ccircle%20cx%3D%22-8%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M-4.5%2C8%20L5.5%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28448%20332%29%20rotate%2810%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M3%2C-17%20L-9%2C2%20L-1%2C2%20L-4%2C17%20L10%2C-3%20L2%2C-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2872%20346%29%20rotate%28-13%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-11%2C14%20L-11%2C-3%20a11%2C11%200%200%2C1%2022%2C0%20L11%2C14%20L6%2C9%20L2%2C14%20L-3%2C9%20L-7%2C14%20Z%22%2F%3E%3Ccircle%20cx%3D%22-4.5%22%20cy%3D%22-2%22%20r%3D%221.9%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%22-2%22%20r%3D%221.9%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.08%29%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28182%20332%29%20rotate%2811%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-14%2C10%20L-12%2C-8%20L-4%2C2%20L0%2C-10%20L4%2C2%20L12%2C-8%20L14%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28292%20352%29%20rotate%28-7%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-2%2C16%20L-2%2C-8%20a5%2C5%200%200%2C1%2010%2C0%20L8%2C0%20M-2%2C-1%20L-10%2C-1%20a4.5%2C4.5%200%200%2C1%20-4.5%2C-4.5%20M-2%2C16%20L8%2C16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28398%20432%29%20rotate%2814%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-9%2C0%20L9%2C0%20L0%2C17%20Z%22%2F%3E%3Ccircle%20cy%3D%22-6%22%20r%3D%229%22%2F%3E%3Ccircle%20cy%3D%22-17%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28122%20442%29%20rotate%28-18%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C16%20C0%2C4%202%2C-8%2010%2C-14%20M0%2C4%20C-6%2C0%20-10%2C-2%20-14%2C-2%20M1%2C-2%20C-4%2C-6%20-6%2C-10%20-6%2C-14%20M2%2C-7%20C6%2C-10%2010%2C-11%2014%2C-11%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28252%20446%29%20rotate%287%29%20scale%281.0%29%22%3E%3Ccircle%20cy%3D%22-11%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M0%2C-7%20L0%2C14%20M-6%2C-2%20L6%2C-2%20M-10%2C5%20a12%2C12%200%200%2C0%2020%2C0%20M-10%2C5%20l-3.5%2C-.5%20M10%2C5%20l3.5%2C-.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28362%20458%29%20rotate%28-11%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-15%2C0%20a15%2C11%200%200%2C1%2030%2C0%20Z%22%2F%3E%3Cpath%20d%3D%22M-4%2C0%20L-3%2C13%20L4%2C13%20L4%2C0%22%2F%3E%3Ccircle%20cx%3D%22-6%22%20cy%3D%22-5%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%22-7%22%20r%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28458%20458%29%20rotate%285%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-11%2C2%20L11%2C2%20L7%2C16%20L-7%2C16%20Z%22%2F%3E%3Cpath%20d%3D%22M-11%2C2%20a6%2C6%200%200%2C1%204%2C-9%20a7%2C7%200%200%2C1%2013%2C0%20a6%2C6%200%200%2C1%205%2C9%22%2F%3E%3Ccircle%20cy%3D%22-12%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");--wp-size:480px 480px}
html[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.62)}
html[data-theme="dark"] .rx-chip.paid{background:rgba(217,169,47,.13);border-color:rgba(217,169,47,.45)}
html[data-theme="dark"] .gift-bubble{background:linear-gradient(160deg,#2b2410,#211a09);border-color:#5c4b1c}
html[data-theme="dark"] .gift-label{color:#d9bc6a}
html[data-theme="dark"] .showcase{background:linear-gradient(165deg,#251e0d,#191408);border-color:#54471e}
html[data-theme="dark"] .trophy{border-color:#4a3f1c}
html[data-theme="dark"] .rg-row{border-bottom-color:#463a1a}
html[data-theme="dark"] .balance-card.goldc{background:rgba(217,169,47,.12);border-color:rgba(217,169,47,.4)}
html[data-theme="dark"] .premium-banner{background:linear-gradient(165deg,#251e0d,#1a1508);border-color:#54471e}
html[data-theme="dark"] .gift-opt.sel{background:rgba(217,169,47,.15)}
html[data-theme="dark"] .conn-banner.reconnecting{color:#eec27a;border-color:#6b551f}
html[data-theme="dark"] .conn-banner.offline{border-color:#7a343c}
html[data-theme="dark"] .btn.danger:hover{background:#4a262b}
html[data-theme="dark"] .toast{background:#2f2f34}
html[data-theme="dark"] .wallet-card{background:linear-gradient(128deg,#0a4a3f 0%,color-mix(in srgb,var(--color-primary) 52%,#3d2f08) 82%,#6e5410 135%)}
html[data-theme="dark"] .chat-list,html[data-theme="dark"] .people-results,
html[data-theme="dark"] .view-scroll,html[data-theme="dark"] .messages{scrollbar-color:rgba(233,242,238,.22) transparent}

/* ============================================================
   v5.3 — special messages: gift & transfer cards (centered
   standalone rows), detail sheets, profile gift grid + FAB.
   Gift gradients are per-item product tints (like the gold
   assets, they are fixed colors that read on both themes).
   ============================================================ */
.avatar.xs{width:22px;height:22px;font-size:.6rem}
/* special rows: centered column — pill, card, meta */
.msg-row.special{justify-content:center}
.special-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;max-width:100%;min-width:0}
.special-col .reply-quote{max-width:300px;text-align:start}
.special-col .reactions{justify-content:center;margin-top:0}
/* v6.23: the special rows' service pill joins the shared action-pill
   family (same bg token, 15px radius, 3px 8px) — its smaller label
   size stays: it heads a card, it is not a list service row */
.svc-pill{background:var(--color-action-msg-bg);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-medium);
  padding:3px 8px;border-radius:15px;text-align:center;max-width:88%}
.special-meta{margin-top:0}
/* gift card in chat */
.gift-card{width:min(320px,76%);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--gift-tile-text);
  background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));box-shadow:var(--shadow-2);
  text-align:center;position:relative;overflow:hidden;transition:transform var(--dur-1)}
.gift-card:active{transform:scale(.98)}
.gift-card-art{font-size:4.4rem;line-height:1.1;display:flex}
.gift-card-from{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:rgba(255,255,255,.95);max-width:100%}
.gift-card-from .avatar{border:1.5px solid rgba(255,255,255,.5)}
.gift-card-from b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gift-card-val{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.22);
  padding:4px 12px;border-radius:var(--radius-full);font-size:var(--fs-sm)}
.gift-card-val .ic{width:16px;height:16px;color:#eec964}
/* premium gift card in chat (v6.9) — golden; the treatment scales with
   the gifted duration: tier 1 (3mo) rich gold + subtle sparkles,
   tier 2 (6mo) brighter gold + more sparkles + soft glow, tier 3
   (12mo) deepest gold + shine sweep + floating particles + strong
   glow. --pg-* shades drive the box artwork per tier. */
.prem-gift-card{width:min(320px,76%);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.prem-gift-card.tier-1{--pg-hi:#e9cd7e;--pg-mid:#c99327;--pg-deep:#8a6414;
  background:linear-gradient(155deg,#d9b545,#a87e1f 58%,#7c5c11);color:#fff8e2}
.prem-gift-card.tier-2{--pg-hi:#f6dc8a;--pg-mid:#e0aa1e;--pg-deep:#a87e1f;
  background:linear-gradient(155deg,#eec964,#c99327 55%,#96690f);color:#fffbe9;
  box-shadow:var(--shadow-2),0 0 22px rgba(238,201,100,.35)}
.prem-gift-card.tier-3{--pg-hi:#ffe89a;--pg-mid:#f0b90f;--pg-deep:#c07f10;
  background:linear-gradient(155deg,#f6d878,#e0aa1e 42%,#b8860b 78%,#8a6414);color:#fffdf4;
  box-shadow:var(--shadow-2),0 0 38px rgba(240,185,15,.55)}
.pg-art{width:96px;height:96px;display:flex;position:relative;z-index:1}
.pg-art svg{width:100%;height:100%}
.tier-2 .pg-art{filter:drop-shadow(0 0 10px rgba(255,232,154,.45))}
.tier-3 .pg-art{filter:drop-shadow(0 0 16px rgba(255,238,170,.75))}
.pg-head{font-size:var(--fs-md);font-weight:var(--fw-bold);position:relative;z-index:1;text-shadow:0 1px 6px rgba(90,60,0,.35)}
.pg-months{display:inline-flex;align-items:center;gap:6px;background:rgba(61,44,5,.28);color:#ffedb5;
  padding:4px 12px;border-radius:var(--radius-full);font-size:var(--fs-sm);position:relative;z-index:1}
.pg-months .ic{width:16px;height:16px;color:#ffe89a}
.pg-sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.pg-sparks i{position:absolute;width:9px;height:9px;background:#fff3c4;
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
  opacity:.25;animation:pgTwinkle 2.6s ease-in-out var(--d,0s) infinite}
.tier-1 .pg-sparks i{width:7px;height:7px;opacity:.16;animation-duration:3.6s}
.tier-3 .pg-sparks i{width:11px;height:11px;background:#fff8dc;filter:drop-shadow(0 0 4px rgba(255,232,154,.9));
  animation-name:pgTwinkleFloat;animation-duration:2.8s}
@keyframes pgTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}
@keyframes pgTwinkleFloat{0%,100%{opacity:.2;transform:translateY(3px) scale(.75) rotate(0deg)}50%{opacity:1;transform:translateY(-4px) scale(1.2) rotate(30deg)}}
.pg-shine{position:absolute;inset:0;z-index:2;pointer-events:none}
.pg-shine::before{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,250,220,.5),transparent);
  transform:translateX(-160%) skewX(-18deg);animation:pgShine 3.4s ease-in-out infinite}
@keyframes pgShine{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(340%) skewX(-18deg)}}
@media (prefers-reduced-motion: reduce){
  .pg-sparks i,.pg-shine::before{animation:none}
  .tier-2 .pg-sparks i{opacity:.55}
  .tier-3 .pg-sparks i{opacity:.85}
}
/* transfer card in chat (teal→gold, per the wallet card's structure) */
.transfer-card{width:min(320px,76%);border-radius:var(--radius-lg);padding:var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:#fff;box-shadow:var(--shadow-2);
  text-align:center;position:relative;overflow:hidden;transition:transform var(--dur-1);
  background:linear-gradient(140deg,var(--color-primary) 0%,color-mix(in srgb,var(--color-primary) 62%,var(--color-gold)) 85%,var(--color-gold-bright) 140%)}
.transfer-card:active{transform:scale(.98)}
.tf-ribbon{position:absolute;top:17px;inset-inline-end:-36px;transform:rotate(45deg);background:var(--gold-grad);
  color:#3d2c05;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:3px 38px;box-shadow:var(--shadow-1)}
[dir="rtl"] .tf-ribbon{transform:rotate(-45deg)}
.tf-coin{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;color:#eec964}
.tf-coin .ic{width:28px;height:28px}
.tf-amt{font-size:1.7rem;font-weight:var(--fw-bold);line-height:1.2}
.tf-amt small{font-size:var(--fs-md);font-weight:var(--fw-medium);opacity:.85}
.tf-amt.in{color:#a9ecc6}
.tf-parties{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:rgba(255,255,255,.92)}
.tf-parties .ic{width:15px;height:15px;opacity:.85}
/* detail sheets (gift / transfer / gift type) */
.sheet-hero{text-align:center;padding:var(--space-2) 0 var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.sheet-hero .gift-card-art{font-size:5rem}
.sheet-title{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.tf-hero-coin{width:74px;height:74px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-gold);
  display:flex;align-items:center;justify-content:center}
.tf-hero-coin .ic{width:38px;height:38px}
.tf-hero-amt{font-size:var(--fs-display);font-weight:var(--fw-bold);line-height:1.15}
.tf-hero-amt small{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--color-muted)}
.tf-hero-amt.in{color:var(--color-success)}
.sheet-rows{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.sheet-row{display:flex;align-items:center;gap:var(--space-3);padding:11px var(--space-4);background:var(--color-surface-2)}
.sheet-row + .sheet-row{border-top:1px solid var(--color-border)}
.sheet-lbl{width:86px;flex:none;color:var(--color-text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.sheet-val{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sheet-val .ic{color:var(--color-gold);width:18px;height:18px}
.sheet-val .btn{margin-inline-start:auto}
.sheet-user{display:inline-flex;flex-direction:column;min-width:0}
.sheet-user b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-user small{color:var(--color-muted);font-size:var(--fs-xs)}
/* profile gift grid */
.gf-chips{display:flex;gap:6px;margin-top:var(--space-3);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gf-chips::-webkit-scrollbar{display:none}
.gf-chips .fchip .gift-ic{font-size:.95rem;line-height:1}
/* v6.3.2: THREE columns everywhere (Telegram's layout) */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-3)}
/* v6.2 tiles: plain = dark neutral card (Telegram); collectible = the tile
   IS the stage (full-bleed backdrop + spread pattern, no name text). */
.gift-tile{border-radius:var(--radius-lg);padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;
  align-items:center;gap:var(--space-1);color:var(--gift-tile-text);position:relative;box-shadow:var(--shadow-1);
  background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));
  transition:transform var(--dur-1);text-align:center;overflow:hidden}
.gift-tile:active{transform:scale(.97)}
.gift-tile.is-coll{padding:0;min-height:138px;justify-content:center;background:none} /* v6.10: taller stage for the 84px art */
.gift-tile.is-coll .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.gift-tile.is-coll .gift-art{position:relative;z-index:1}
/* v6.13 (Defect 5): Telegram's grid art is ~55–60% of the tile, centred,
   with the symbol ring hugging it (JS: tile maxR .42 → .33). The fixed
   84px gives way to a proportional stage size on collectible tiles. */
.gift-tile.is-coll .gift-art.tile{width:58%;height:auto;aspect-ratio:1/1}
/* v6.13 (Defect 5d): fixed-width ribbon, text centred on the band's
   midpoint — the midpoint sits ~19px inside the corner, so «#serial»
   always lands fully within the tile's rounded corner; only the band's
   tails reach the edges (clipped by the tile's overflow, as designed). */
.tile-ribbon{position:absolute;top:14px;inset-inline-end:-34px;transform:rotate(45deg);z-index:2;width:108px;text-align:center;
  background:rgba(0,0,0,.38);color:#fff;font-size:9px;font-weight:var(--fw-bold);padding:2px 0;letter-spacing:.02em}
[dir="rtl"] .tile-ribbon{transform:rotate(-45deg)}
.tile-art{font-size:3.4rem}
.tile-badge{position:absolute;top:8px;inset-inline-end:8px;background:rgba(0,0,0,.28);color:#fff;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:2px 9px;border-radius:var(--radius-full)}
.tile-name{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.tile-cap{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--gift-tile-sub);position:relative;z-index:1}
.tile-cap .ic{width:14px;height:14px;color:#eec964}
.gift-hint{margin-top:var(--space-3);text-align:center}
.gift-empty{text-align:center;color:var(--color-muted);padding:var(--space-5) var(--space-3);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.gift-empty .ic{width:34px;height:34px;color:var(--color-border-strong)}
.gift-empty p{font-size:var(--fs-md);color:var(--color-text-2)}
.gift-empty small{font-size:var(--fs-sm);line-height:1.7}
/* (v5.12: the floating sticky gift pill was removed — it covered gift
   tiles while scrolling; the CTA is now a static full-width button row
   under the showcase grid, .gift-cta in the v5.12 block) */
/* dark variants for the fixed-color v5.3 surfaces */
html[data-theme="dark"] .transfer-card{background:linear-gradient(140deg,#0a4a3f 0%,color-mix(in srgb,var(--color-primary) 52%,#3d2f08) 85%,#6e5410 140%)}

/* ---------- redeem codes (v5.4) ---------- */
.redeem-card{padding:var(--space-3)}
.redeem-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.redeem-head .set-lbl{flex:1;min-width:0;font-weight:var(--fw-semibold)}
#set-redeem-input{text-transform:uppercase;letter-spacing:.05em}
.sheet-sub{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.tf-hero-coin.gold-hero{background:var(--gold-grad);color:#fff}
.oc-unit{flex:none!important;align-self:center;color:var(--color-muted);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.code-reveal{border:1px solid #ecd9a0;background:linear-gradient(165deg,#fffdf5,#fdf3d0);border-radius:var(--radius-lg);
  padding:var(--space-4);margin:var(--space-3) 0;text-align:center}
.code-big{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35rem;font-weight:var(--fw-bold);
  letter-spacing:.08em;margin-bottom:var(--space-3);word-break:break-all}
.code-status{flex:none;font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:3px 9px;border-radius:var(--radius-full);
  background:var(--color-surface-3);color:var(--color-text-2)}
.code-status.active{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}
.code-status.revoked,.code-status.expired,.code-status.exhausted{background:var(--color-error-bg);color:var(--color-error)}
html[data-theme="dark"] .code-reveal{background:linear-gradient(165deg,#251e0d,#1a1508);border-color:#54471e}

/* ============================================================
   v5.5 — Telegram structure: bubble tails, inline corner meta,
   big-emoji messages, own-bubble gradient (tokens above) and
   user-changeable chat wallpaper.
   ============================================================ */
/* ---------- bubble tails ----------
   The wedge is an inline SVG inside the bubble (markup in app.js), shown
   only on the last bubble of a group (g-last / g-single). Its path is drawn
   pointing inline-end with the tip at the bottom corner; the fill is the
   bubble's bottom color, so the overlap sliver against the bubble is
   invisible. Incoming bubbles sit on the inline-start side, so the shape
   flips — except in RTL, where ownership and direction cancel out. */
/* tail appendix (Web A §2): 9×18px, hanging off the bottom tail-side
   corner by its own width, 1px above the bubble's bottom edge */
.b-tail{display:none;position:absolute;bottom:-1px;width:9px;height:18px;pointer-events:none}
.msg-row.g-last .b-tail,.msg-row.g-single .b-tail{display:block}
.b-tail path{fill:var(--color-surface)}
.msg-row.mine .b-tail{inset-inline-end:-9px}
.msg-row.mine .b-tail path{fill:var(--bubble-out-bot)}
.msg-row:not(.mine) .b-tail{inset-inline-start:-9px;transform:scaleX(-1)}
[dir="rtl"] .msg-row.mine .b-tail{transform:scaleX(-1)}
[dir="rtl"] .msg-row:not(.mine) .b-tail{transform:none}

/* ---------- inline meta for text bubbles (Message System v2, Web A §3) ----------
   The meta is a PLAIN floated span INSIDE the text container — Web A's
   exact construction: position:relative; float to the inline-end;
   top 6px; margin-inline-start 7px; margin-inline-end −6px; height 16px.
   Because the float follows the TEXT CONTAINER's direction and .text
   carries dir="auto" + unicode-bidi:plaintext, the meta docks at the
   MESSAGE's own inline-end: an RTL message in an own bubble gets its
   meta on the correct side (the lone-«د» root fix). The float is on a
   display:inline span (Web A floats a plain element, not a flex box) —
   the v5.1 per-character stacking came from floating a display:flex
   meta, which is exactly what this avoids; .text is a flow-root, so the
   float is always contained by its own text block. */
.bubble .text{display:flow-root}
.meta.fmeta{display:inline;float:inline-end;position:relative;top:6px;height:16px;min-height:0;line-height:16px;
  margin-top:0;margin-inline-start:7px;margin-inline-end:-6px}

/* ---------- big-emoji messages ----------
   No bubble, no tail: the emoji (1–3 grapheme clusters) is the message at
   display size, and the meta sits as a small translucent pill on its own
   line under the glyphs, at the inline-end (v5.8; it used to overlay the
   last glyph). */
/* v5.8: the meta pill reserves its own line BELOW the glyph row (column
   flex, pill aligned to the inline-end) instead of absolutely overlaying
   the last glyph's face. */
/* Big-emoji sizing (Web A §7): counts 1–7 get the spec's rem ladder
   (for i>1: min(7.5 − 0.75·i, 5.625)rem); the glyph font is 0.9× the
   size, the line box is exactly the size, and the block is
   (size + 1px) × count wide with a 6rem floor. Meta sits BELOW the
   glyph row as the §3 pill (18px, rgba(0,0,0,.2)). Counts >7 never
   reach this markup — app.js falls back to a normal text bubble. */
.big-emoji{--be-size:2.25rem;--be-n:1;display:inline-flex;flex-direction:column;max-width:100%}
.big-emoji.be-1{--be-size:7rem;--be-n:1}
.big-emoji.be-2{--be-size:5.625rem;--be-n:2}
.big-emoji.be-3{--be-size:5.25rem;--be-n:3}
.big-emoji.be-4{--be-size:4.5rem;--be-n:4}
.big-emoji.be-5{--be-size:3.75rem;--be-n:5}
.big-emoji.be-6{--be-size:3rem;--be-n:6}
.big-emoji.be-7{--be-size:2.25rem;--be-n:7}
.big-emoji .be-txt{display:block;font-size:calc(var(--be-size)*.9);line-height:var(--be-size);
  width:calc((var(--be-size) + 1px)*var(--be-n));min-width:6rem;white-space:nowrap}
.meta.be-pill{position:static;align-self:flex-end;margin:2px 0 0;min-height:0;height:18px;
  background:rgba(0,0,0,.2);color:#fff;border-radius:var(--radius-full);padding:0 6px 0 5px}
.meta.be-pill .ticks{color:#fff}
.meta.be-pill .ticks.read{color:color-mix(in srgb,var(--color-primary) 45%,#fff)}
.meta.be-pill .pending-ic{color:#fff}

/* ---------- chat wallpaper ----------
   One definition paints both the chat background layer (.chat-body) and
   the picker previews (.wp-prev) through the same --wp-* properties, keyed
   by [data-wp]. Preset colors are fixed product assets (like the gift
   gradients): each has a light value and a deep-tinted dark counterpart,
   except the two color-mix gradients, which follow the accent + theme
   tokens automatically. The wallpaper lives only on .chat-body — the
   composer and chat head keep their own surfaces. */
.chat-body,.wp-prev{background-color:var(--wp-bg,transparent);background-image:var(--wp-img,none),var(--wp-grad,none);
  background-size:var(--wp-size,auto),cover;background-position:center;background-repeat:repeat,no-repeat}
.chat-body[data-wp="default"],.wp-prev[data-wp="default"]{--wp-bg:#cfe0bd;
  --wp-grad:linear-gradient(135deg,#dbddbb 0%,#6ba587 42%,#d5d88d 74%,#88b884 100%);
  --wp-img:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%20viewBox%3D%220%200%20480%20480%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2845%2055%29%20rotate%28-14%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2216%22%2F%3E%3Cpath%20d%3D%22M-12%2C-11%20L-14%2C-25%20L-2%2C-17%20M12%2C-11%20L14%2C-25%20L2%2C-17%22%2F%3E%3Ccircle%20cx%3D%22-6%22%20cy%3D%220%22%20r%3D%222%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%220%22%20r%3D%222%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-3%2C7%20Q0%2C9%203%2C7%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%2038%29%20rotate%2810%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-16%20L4.7%2C-6.5%20L15%2C-5%20L7.5%2C2.3%20L9.3%2C12.5%20L0%2C7.6%20L-9.3%2C12.5%20L-7.5%2C2.3%20L-15%2C-5%20L-4.7%2C-6.5%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28262%2062%29%20rotate%28-8%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-15%2C0%20Q-2%2C-11%207%2C-5%20L15%2C-12%20L15%2C12%20L7%2C5%20Q-2%2C11%20-15%2C0%20Z%22%2F%3E%3Ccircle%20cx%3D%22-7%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28372%2042%29%20rotate%2818%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M7%2C-15%20L7%2C5%20M7%2C-15%20L17%2C-12%20L17%2C2%22%2F%3E%3Cellipse%20cx%3D%222%22%20cy%3D%226%22%20rx%3D%225%22%20ry%3D%224%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%223%22%20rx%3D%225%22%20ry%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28442%20128%29%20rotate%28-12%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C16%20L-13%2C-10%20a15%2C9%200%200%2C1%2026%2C0%20Z%22%2F%3E%3Ccircle%20cx%3D%22-3%22%20cy%3D%220%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%22-6%22%20r%3D%222.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2892%20142%29%20rotate%288%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2215%22%2F%3E%3Cpath%20d%3D%22M-13%2C-7%20q-7%2C9%201%2C17%20M13%2C-7%20q7%2C9%20-1%2C17%22%2F%3E%3Ccircle%20cx%3D%22-5.5%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%22-1%22%20r%3D%222%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%220%22%20cy%3D%225%22%20rx%3D%223%22%20ry%3D%222.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28205%20122%29%20rotate%28-18%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-18%20C8%2C-8%208%2C6%200%2C14%20C-8%2C6%20-8%2C-8%200%2C-18%20Z%22%2F%3E%3Ccircle%20cy%3D%22-4%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M-7%2C8%20L-13%2C16%20L-4%2C14%20M7%2C8%20L13%2C16%20L4%2C14%20M0%2C14%20L0%2C19%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28312%20152%29%20rotate%2812%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C13%20C-14%2C3%20-16%2C-6%20-9%2C-11%20C-4%2C-14%200%2C-10%200%2C-6%20C0%2C-10%204%2C-14%209%2C-11%20C16%2C-6%2014%2C3%200%2C13%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28425%20232%29%20rotate%28-6%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-14%2C9%20a7%2C7%200%200%2C1%20-1%2C-13.8%20A9%2C9%200%200%2C1%2011%2C-6%20A6.5%2C6.5%200%200%2C1%2013%2C9%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2842%20252%29%20rotate%2815%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C-6%20C-12%2C-14%20-18%2C2%200%2C15%20C18%2C2%2012%2C-14%200%2C-6%20M0%2C-6%20C0%2C-11%203%2C-14%208%2C-15%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28142%20236%29%20rotate%28-10%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-13%2C-9%20a5.5%2C5.5%200%201%2C1%203.5%2C-7.5%20a5.5%2C5.5%200%201%2C1%207%2C3.5%20L11%2C8%20a5.5%2C5.5%200%201%2C1%20-3.5%2C7.5%20a5.5%2C5.5%200%201%2C1%20-7%2C-3.5%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28252%20262%29%20rotate%286%29%20scale%281.0%29%22%3E%3Ccircle%20r%3D%2214%22%2F%3E%3Ccircle%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M-9%2C-7%20l3%2C2%20M6%2C-10%20l1%2C3%20M9%2C6%20l3%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%20256%29%20rotate%28-16%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-16%2C7%20L-13%2C-2%20L5%2C-2%20L11%2C3%20L16%2C4%20L16%2C7%20M-16%2C7%20L16%2C7%22%2F%3E%3Ccircle%20cx%3D%22-8%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M-4.5%2C8%20L5.5%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28448%20332%29%20rotate%2810%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M3%2C-17%20L-9%2C2%20L-1%2C2%20L-4%2C17%20L10%2C-3%20L2%2C-3%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2872%20346%29%20rotate%28-13%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-11%2C14%20L-11%2C-3%20a11%2C11%200%200%2C1%2022%2C0%20L11%2C14%20L6%2C9%20L2%2C14%20L-3%2C9%20L-7%2C14%20Z%22%2F%3E%3Ccircle%20cx%3D%22-4.5%22%20cy%3D%22-2%22%20r%3D%221.9%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%22-2%22%20r%3D%221.9%22%20fill%3D%22rgba%2824%2C48%2C34%2C0.15%29%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28182%20332%29%20rotate%2811%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-14%2C10%20L-12%2C-8%20L-4%2C2%20L0%2C-10%20L4%2C2%20L12%2C-8%20L14%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28292%20352%29%20rotate%28-7%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-2%2C16%20L-2%2C-8%20a5%2C5%200%200%2C1%2010%2C0%20L8%2C0%20M-2%2C-1%20L-10%2C-1%20a4.5%2C4.5%200%200%2C1%20-4.5%2C-4.5%20M-2%2C16%20L8%2C16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28398%20432%29%20rotate%2814%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-9%2C0%20L9%2C0%20L0%2C17%20Z%22%2F%3E%3Ccircle%20cy%3D%22-6%22%20r%3D%229%22%2F%3E%3Ccircle%20cy%3D%22-17%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28122%20442%29%20rotate%28-18%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C16%20C0%2C4%202%2C-8%2010%2C-14%20M0%2C4%20C-6%2C0%20-10%2C-2%20-14%2C-2%20M1%2C-2%20C-4%2C-6%20-6%2C-10%20-6%2C-14%20M2%2C-7%20C6%2C-10%2010%2C-11%2014%2C-11%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28252%20446%29%20rotate%287%29%20scale%281.0%29%22%3E%3Ccircle%20cy%3D%22-11%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M0%2C-7%20L0%2C14%20M-6%2C-2%20L6%2C-2%20M-10%2C5%20a12%2C12%200%200%2C0%2020%2C0%20M-10%2C5%20l-3.5%2C-.5%20M10%2C5%20l3.5%2C-.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28362%20458%29%20rotate%28-11%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-15%2C0%20a15%2C11%200%200%2C1%2030%2C0%20Z%22%2F%3E%3Cpath%20d%3D%22M-4%2C0%20L-3%2C13%20L4%2C13%20L4%2C0%22%2F%3E%3Ccircle%20cx%3D%22-6%22%20cy%3D%22-5%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%22-7%22%20r%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28458%20458%29%20rotate%285%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M-11%2C2%20L11%2C2%20L7%2C16%20L-7%2C16%20Z%22%2F%3E%3Cpath%20d%3D%22M-11%2C2%20a6%2C6%200%200%2C1%204%2C-9%20a7%2C7%200%200%2C1%2013%2C0%20a6%2C6%200%200%2C1%205%2C9%22%2F%3E%3Ccircle%20cy%3D%22-12%22%20r%3D%222.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");--wp-size:480px 480px}
/* solid presets */
[data-wp="mint"]{--wp-bg:#d9ebdf;--wp-img:none}
[data-wp="sand"]{--wp-bg:#f0e6cf;--wp-img:none}
[data-wp="sky"]{--wp-bg:#d9e6f2;--wp-img:none}
[data-wp="rose"]{--wp-bg:#f4dde1;--wp-img:none}
[data-wp="lilac"]{--wp-bg:#e4dcf2;--wp-img:none}
html[data-theme="dark"] [data-wp="mint"]{--wp-bg:#0f231a}
html[data-theme="dark"] [data-wp="sand"]{--wp-bg:#231b0e}
html[data-theme="dark"] [data-wp="sky"]{--wp-bg:#0e1a29}
html[data-theme="dark"] [data-wp="rose"]{--wp-bg:#271218}
html[data-theme="dark"] [data-wp="lilac"]{--wp-bg:#1a1429}
/* gradient presets */
[data-wp="gteal"]{--wp-bg:transparent;--wp-img:linear-gradient(165deg,color-mix(in srgb,var(--color-primary) 26%,var(--color-chat-bg)),var(--color-chat-bg) 74%)}
[data-wp="ggold"]{--wp-bg:transparent;--wp-img:linear-gradient(165deg,color-mix(in srgb,var(--color-gold) 24%,var(--color-chat-bg)),var(--color-chat-bg) 74%)}
[data-wp="gdusk"]{--wp-bg:transparent;--wp-img:linear-gradient(160deg,#c7d2e4,#e9ede9 76%)}
[data-wp="grose"]{--wp-bg:transparent;--wp-img:linear-gradient(160deg,#eed3d8,#f6ecec 76%)}
html[data-theme="dark"] [data-wp="gdusk"]{--wp-img:linear-gradient(160deg,#1b2740,#0a120e 76%)}
html[data-theme="dark"] [data-wp="grose"]{--wp-img:linear-gradient(160deg,#33202a,#0d1210 76%)}
/* pattern presets (CSS-only) */
[data-wp="dots"]{--wp-bg:transparent;--wp-size:26px 26px;
  --wp-img:radial-gradient(color-mix(in srgb,var(--color-primary) 17%,transparent) 1.6px,transparent 2.1px)}
[data-wp="weave"]{--wp-bg:transparent;--wp-size:26px 26px;
  --wp-img:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 0 2px,transparent 2px 13px),
            repeating-linear-gradient(-45deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 0 2px,transparent 2px 13px)}
/* custom photo: cover + a theme-aware veil so bubbles stay readable */
[data-wp="photo"]{--wp-bg:transparent;--wp-size:cover;
  --wp-img:linear-gradient(rgba(244,246,245,.58),rgba(244,246,245,.58)),var(--wp-photo,none)}
html[data-theme="dark"] [data-wp="photo"]{--wp-img:linear-gradient(rgba(8,14,11,.62),rgba(8,14,11,.62)),var(--wp-photo,none)}
/* picker sheet */
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}
.wp-swatch{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:none;text-align:center;padding:0}
.wp-prev{position:relative;height:64px;border-radius:var(--radius-md);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;color:var(--color-muted);overflow:hidden}
.wp-swatch[data-wp-pick]:active .wp-prev,.wp-swatch[data-wp-photo]:active .wp-prev{transform:scale(.97)}
.wp-prev{transition:transform var(--dur-1)}
.wp-check{position:absolute;top:5px;inset-inline-end:5px;width:20px;height:20px;border-radius:50%;
  background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.wp-check .ic{width:12px;height:12px}
.wp-lbl{font-size:var(--fs-sm);color:var(--color-text-2)}

/* ===== v5.6 — user tags, bundle form, redeem celebration =====
   Tag pills: colored text + 1px colored border, tinted/transparent bg,
   rendered after names everywhere except the chat list. Scam is an
   readable on ANY backdrop since v5.12 (opaque surface-mixed bg). Tag hues
   are catalog constants (content identity colors, like the gift items). */
.tag-pill{display:inline-flex;align-items:center;height:19px;padding:0 7px;margin-inline-start:6px;
  border:1px solid;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  line-height:1;white-space:nowrap;vertical-align:2px}
/* v5.12 readability fix: every pill now carries its OWN opaque
   background — its hue mixed ~22% over the surface token — so contrast
   never depends on what is behind the pill (profile covers, photos,
   either theme). This supersedes the old transparent/outline-only
   treatment (the Support pill was invisible on the purple cover). */
.tag-owner{color:#a87e1f;border-color:#a87e1f;background:color-mix(in srgb,#a87e1f 22%,var(--color-surface))}
.tag-admin{color:#cf4b21;border-color:#cf4b21;background:color-mix(in srgb,#cf4b21 22%,var(--color-surface))}
.tag-bot{color:#5e7a8c;border-color:#5e7a8c;background:color-mix(in srgb,#5e7a8c 22%,var(--color-surface))}
.tag-support{color:#0e7a6a;border-color:#0e7a6a;background:color-mix(in srgb,#0e7a6a 22%,var(--color-surface))}
.tag-vip{color:#7c5cbf;border-color:#7c5cbf;background:color-mix(in srgb,#7c5cbf 22%,var(--color-surface))}
.tag-tester{color:#2e9e5b;border-color:#2e9e5b;background:color-mix(in srgb,#2e9e5b 22%,var(--color-surface))}
.tag-verified{color:#2f7fd0;border-color:#2f7fd0;background:color-mix(in srgb,#2f7fd0 22%,var(--color-surface))}
.tag-scam{color:#e5484d;border-color:#e5484d;background:color-mix(in srgb,#e5484d 20%,var(--color-surface))}
.chk-row{display:flex;align-items:center;gap:8px;margin-top:9px;cursor:pointer;font-size:var(--fs-sm);color:var(--color-text)}
.chk-row input{flex:none;width:18px;height:18px;accent-color:var(--color-primary)}
.tag-select{max-width:118px;padding:5px 6px;font-size:var(--fs-xs)}
.sr-inline-gift{display:inline-flex;vertical-align:-4px}
.sr-inline-gift .gift-art,.sr-inline-gift svg{width:18px;height:18px}
/* Redeem celebration: one-shot particle burst behind the hero (dots +
   SVG sparkles, teal/gold), hero spring-pop, staggered reward rows, and
   the tag stamp-in. JS skips particles under prefers-reduced-motion and
   the global reduced-motion rule above flattens these animations too. */
.celeb-hero{position:relative}
.celeb-hero>*:not(.celebrate){position:relative;z-index:1}
.celebrate{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.celeb-p{position:absolute;left:50%;top:30px;width:7px;height:7px;margin:-3.5px;border-radius:50%;opacity:0;
  animation:celebFly .85s cubic-bezier(.15,.6,.4,1) forwards}
.celeb-p.teal{background:var(--color-primary)}
.celeb-p.gold{background:var(--color-gold-bright)}
.celeb-p.spark{width:13px;height:13px;margin:-6.5px;border-radius:0;background:none;color:var(--color-gold-bright)}
.celeb-p.spark svg{display:block;width:100%;height:100%}
@keyframes celebFly{from{transform:rotate(var(--ang)) translateX(0) scale(1);opacity:1}
  to{transform:rotate(var(--ang)) translateX(var(--dist)) scale(.35);opacity:0}}
.celeb-hero .tf-hero-coin,.celeb-hero .gift-card-art{animation:heroPop .45s var(--curve-ease-out-back) both}
@keyframes heroPop{0%{transform:scale(.3);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.celeb-row{animation:celebRowIn .38s ease both}
@keyframes celebRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tag-stamp{animation:tagStamp .55s var(--curve-ease-out-back) both}
@keyframes tagStamp{0%{transform:scale(2.2) rotate(-8deg);box-shadow:0 0 0 3px currentColor}
  55%{transform:scale(.92) rotate(1deg);box-shadow:0 0 0 6px transparent}
  100%{transform:scale(1) rotate(0);box-shadow:0 0 0 12px transparent}}

/* ============================================================
   v5.9 → v6.34 — Default Blue preset (tgblue): was a full theme that
   overrode the whole surface token set; since v6.34 the Day / Night
   Blue / Dark mode blocks carry the surfaces for EVERY accent, and
   this preset keeps only its economy card art (below).
   ============================================================ */
.th-swatch{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(18,30,26,.12)}
.th-def{color:var(--color-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
/* v6.34: the tgblue preset's TOKEN overrides are gone — Day/Night/Dark
   mode blocks + the accent now carry the whole surface system for every
   preset. What remains keyed to the preset is only the money-card art
   (economy layer): the brand-azure stop in the wallet/transfer card
   gradients, gold end kept. */
html[data-theme="dark"][data-theme-preset="tgblue"] .wallet-card{background:linear-gradient(128deg,#14304a 0%,color-mix(in srgb,#2aabee 45%,#3d2f08) 82%,#6e5410 135%)}
html[data-theme="dark"][data-theme-preset="tgblue"] .transfer-card{background:linear-gradient(140deg,#14304a 0%,color-mix(in srgb,#2aabee 45%,#3d2f08) 85%,#6e5410 140%)}

/* ============================================================
   v5.8 — defect fixes from Ali's phone screenshots of the irani
   DM (he rejected v5.7). Quote line-heights, per-message
   direction, overflow hardening and the card width caps live
   at their rules above; below: the toast anchor and
   transfer-party ellipsis hardening.
   ============================================================ */
/* (the v5.8 in-menu reaction strip was removed in v5.10 — reactions
   moved to the long-press overlay pill/grid; see the end of file) */
/* toasts hug the composer while a chat is open (the tab bar is
   hidden then): one toast at a time (app.js), gone in ≤2.5s,
   never floating mid-chat over the bubbles */
body.chat-open #toasts{bottom:calc(72px + env(safe-area-inset-bottom))}
/* transfer parties can never widen the card */
.tf-parties{max-width:100%;min-width:0}
.tf-parties>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ============================================================
   v5.10 — long-press overlay (Telegram's model). The chat dims
   behind #msg-scrim; the pressed message lifts as .msg-lift-shell
   (a fixed shell with the row's own classes + a clone of the
   message unit); #msg-rx-pill floats above it, #msg-menu is the
   card below it, and the pill's chevron swaps in #msg-rx-grid.
   Z-order: scrim 300 < lift 320 < pill/grid 330 < menu card 340.
   Everything is token-driven, so both themes + tgblue follow.
   ============================================================ */
/* v5.15: NO blur — Telegram Android dims with a plain dark scrim and
   the chat stays sharp behind it; the lifted message sits fully
   bright above the dim. backdrop-filter must not come back here. */
#msg-scrim{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.45);
  animation:fadeIn var(--dur-modal) var(--curve-default)}
.msg-row.msg-lift-shell{position:fixed;z-index:320;margin:0;pointer-events:none;
  animation:liftIn var(--dur-menu) var(--curve-menu);
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.35))}
@keyframes liftIn{from{transform:scale(1)}to{transform:scale(1.02)}}
.msg-lift-shell{transform:scale(1.02)}
/* v5.10 amendment: message text is NEVER natively selectable — not
   while the overlay is up, not ever. Selection handles and the system
   copy popup on long-press were the artefact behind the owner's
   «باگ داره»; copying happens only through the menu's own Copy
   button. Scoped to the message area (rows, bubbles, captions,
   quotes, cards): form fields everywhere else stay selectable. */
.messages,.messages .msg-row,.messages .msg-row *{user-select:none;-webkit-user-select:none}
.msg-row{-webkit-touch-callout:none}
/* reaction pill: free glyphs LARGE, then the paid gifts with their
   Tcoin price under each, then the expand chevron */
.rx-pill{position:fixed;z-index:330;display:flex;align-items:center;gap:2px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);
  box-shadow:var(--shadow-pop);padding:5px 7px;max-width:92vw;overflow-x:auto;scrollbar-width:none;
  animation:menuIn var(--dur-menu) var(--curve-menu);transform-origin:bottom center}
.rx-pill::-webkit-scrollbar{display:none}
.rx-pill button{display:inline-flex;flex-direction:column;align-items:center;gap:1px;flex:none;
  padding:3px 5px;border-radius:var(--radius-md);transition:transform var(--dur-1)}
.rx-pill button:hover{transform:scale(1.15)}
.rx-pill .rx-g{font-size:28px;line-height:1.15;display:inline-flex}
.rx-pill .rx-g .gift-ic{font-size:25px;line-height:1}
.rx-pill .price{font-size:.58rem;color:var(--color-gold);font-weight:var(--fw-bold);line-height:1.1}
.rx-pill .sep{width:1px;height:26px;background:var(--color-border);margin:0 3px;flex:none}
.rx-pill .rx-more{color:var(--color-muted);padding:6px 4px}
.rx-pill .rx-more .ic{width:20px;height:20px}
@media (max-width:480px){ .rx-pill .rx-g{font-size:24px} .rx-pill .rx-g .gift-ic{font-size:22px}
  .rx-pill button{padding:3px 4px} }
/* expanded grid: all free reactions + a Paid section with prices */
.rx-grid{position:fixed;z-index:330;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:20px;box-shadow:var(--shadow-pop);padding:12px;width:min(340px,92vw);
  animation:menuIn var(--dur-menu) var(--curve-menu);transform-origin:bottom center}
.rx-grid-free{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.rx-grid-paid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.rx-grid button{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px;border-radius:var(--radius-md);transition:background var(--dur-1),transform var(--dur-1)}
.rx-grid button:hover{background:var(--color-hover)}
.rx-grid button:active{transform:scale(1.12)}
.rx-grid .rx-g{font-size:29px;line-height:1.15;display:inline-flex}
.rx-grid .rx-g .gift-ic{font-size:26px;line-height:1}
.rx-grid .price{font-size:var(--fs-xs);color:var(--color-gold);font-weight:var(--fw-bold)}
.rx-sec{display:flex;align-items:center;gap:8px;margin:10px 2px 6px;color:var(--color-muted);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.rx-sec-line{flex:1;height:1px;background:var(--color-border)}
.rx-sec .rx-less{color:var(--color-muted);padding:2px}
.rx-sec .rx-less .ic{width:18px;height:18px;transform:rotate(180deg)}
/* the context menu as the overlay's card (same element + handlers
   as before — presentation and anchoring are the overlay's now) */
.msg-menu{position:fixed;z-index:340;width:250px;max-width:92vw;border-radius:var(--radius-lg);padding:6px;transform-origin:top center}
.msg-menu button{padding:11px 12px}

/* ================= v5.11 — owner panel (Telegram Settings anatomy) =================
   Full-screen sheet frame + grouped cards + icon/label/value rows.
   Tokens only; every width fluid (inputs width:100% + min-width:0,
   text ellipsis) so nothing can stick out at ~360px. */
/* full-screen frame: closeModal() strips these two classes again */
.modal-overlay.ow-overlay{padding:0;align-items:stretch}
.modal.ow-full{width:min(600px,100%);height:100%;max-height:100%;border-radius:0;padding:0;
  margin:0 auto;align-self:stretch;display:flex;flex-direction:column;overflow:hidden}
.ow-head{display:flex;align-items:center;gap:var(--space-2);flex:none;
  padding:calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) var(--space-3);
  border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.ow-head h3{flex:1;min-width:0;margin:0;font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-head-ic{color:var(--color-primary);display:inline-flex;flex:none}
.ow-head .icon-btn{flex:none}
.ow-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-4) var(--space-8)}
.ow-foot{flex:none;padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-border);background:var(--color-surface)}
/* small-caps section headers + grouped cards */
.ow-sec{margin:var(--space-5) var(--space-2) var(--space-2);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.ow-body>.ow-sec:first-child{margin-top:var(--space-2)}
.ow-card{background:var(--color-surface-2);border-radius:var(--radius-lg);overflow:hidden}
.ow-form-card{padding:var(--space-4) var(--space-3) var(--space-2)}
.ow-pad{padding:var(--space-3)}
/* rows: icon/avatar + label/value column + end meta; hairlines between rows */
.ow-row{display:flex;align-items:center;gap:var(--space-3);padding:11px var(--space-3);
  width:100%;text-align:start;color:var(--color-text);background:transparent;border:none;font:inherit}
.ow-card .ow-row{border-top:1px solid var(--color-border)}
.ow-card .ow-row:first-child{border-top:none}
button.ow-tap{cursor:pointer;transition:background var(--dur-1)}
button.ow-tap:hover{background:var(--color-hover)}
.ow-row .grow,.switch-row .grow{display:flex;flex-direction:column;gap:1px}
.ow-row .grow b,.switch-row .grow b{font-size:var(--fs-md);font-weight:var(--fw-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-row .grow small{font-size:var(--fs-sm);color:var(--color-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-row .ic.chev{width:17px;height:17px;color:var(--color-muted);flex:none}
.ow-row .avatar{flex:none}
.ow-gift-ic{width:34px;display:flex;align-items:center;justify-content:center;flex:none;font-size:1.3rem;line-height:1}
.ow-code-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.ow-uses{font-size:var(--fs-sm);color:var(--color-muted);font-variant-numeric:tabular-nums}
.code-status.pending{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
.set-ic.red{background:var(--color-error)}
/* search row inside the users card */
.ow-search{display:flex;align-items:center;gap:var(--space-2);padding:10px var(--space-3);
  border-bottom:1px solid var(--color-border)}
.ow-search .ic{color:var(--color-muted);flex:none}
.ow-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;box-shadow:none;
  font:inherit;color:var(--color-text);padding:0}
/* form fields: labeled, always full-width and shrinkable */
.ow-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3);min-width:0}
.ow-field label{font-size:var(--fs-sm);color:var(--color-text-2);font-weight:var(--fw-medium)}
.ow-field input,.ow-field select{width:100%;min-width:0}
.ow-field input:disabled{opacity:.45}
.ow-field-row{display:flex;gap:var(--space-3)}
.ow-field-row .ow-field{flex:1}
.ow-num{width:104px;flex:none;min-width:0;text-align:center}
.ow-select{width:auto;max-width:46%;min-width:0;flex:none}
.ow-card-btn{margin-top:var(--space-1)}
.ow-sheet-btn{margin-top:var(--space-4)}
.ow-2col{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.ow-2col .btn{flex:1;min-width:0;width:auto}
/* per-item sheet hero (user / request / code) */
.ow-hero{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:var(--space-4) var(--space-2) var(--space-5)}
.ow-hero-title{font-size:var(--fs-lg)}
.ow-hero .hint{font-size:var(--fs-sm)}
.ow-hero-ic{margin-bottom:2px}
.ow-reveal{margin-bottom:var(--space-2)}
/* segmented control (single / bundle) */
.seg{display:flex;background:var(--color-surface-3);border-radius:var(--radius-md);
  padding:3px;gap:3px;margin-bottom:var(--space-3)}
.seg-btn{flex:1;min-width:0;padding:8px 6px;border:none;border-radius:9px;background:transparent;
  font:inherit;font-weight:var(--fw-semibold);color:var(--color-muted);cursor:pointer;
  transition:background var(--dur-1),color var(--dur-1)}
.seg-btn.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-1)}
/* Telegram-style switch rows */
.switch-row{display:flex;align-items:center;gap:var(--space-3);padding:10px 0;cursor:pointer}
.switch{position:relative;width:46px;height:27px;flex:none;display:inline-block}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch .track{position:absolute;inset:0;background:var(--color-surface-3);
  border-radius:var(--radius-full);transition:background var(--dur-2);pointer-events:none}
.switch .track::after{content:'';position:absolute;top:2.5px;inset-inline-start:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-2) var(--ease-out)}
.switch input:checked + .track{background:var(--color-primary)}
.switch input:checked + .track::after{transform:translateX(18px)}
[dir="rtl"] .switch input:checked + .track::after{transform:translateX(-18px)}
.switch input:focus-visible + .track{outline:2px solid var(--color-primary);outline-offset:2px}

/* ================= v5.12 — profile anatomy, tag readability, motion layer, BotFather guide =================
   Motion discipline: transform/opacity only, entrances spring-soft,
   exits ease-out, durations on the --dur scale (200/280/360), and
   prefers-reduced-motion collapses everything (end of block). */
/* --- profile header: plain surface, centered 100px avatar, name,
   status line. A set cover renders as a rich 132px band (v5.14): a
   two-stop gradient of the cover color (lighter top → deeper bottom)
   with a soft radial highlight, a gentle top scrim, and a bottom fade
   into the page surface; the avatar overlaps the band's bottom edge
   with a clean 3px ring in the surface color (no heavy dark ring),
   and name/status carry a text shadow so they stay readable over
   bright covers. No cover = the plain header, unchanged. (Timee
   covers are colors — cover_color is the only cover field in the
   API — and the fade/scrim stack is cover-type agnostic.) */
.profile-cover{position:absolute;top:0;inset-inline:0;height:132px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cover) 68%,#ffffff),var(--cover) 52%,color-mix(in srgb,var(--cover) 76%,#000000))}
.profile-cover::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.30),transparent 60%)}
.profile-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.16),transparent 32%,transparent 58%,var(--cover-fade,var(--color-surface)))}
.profile-view .profile-cover{--cover-fade:var(--color-bg)}
.profile-hero-in{position:relative;z-index:1;padding-top:var(--space-3)}
.profile-hero.has-cover .profile-hero-in{padding-top:82px}
.profile-hero.has-cover .pname,.profile-hero.has-cover .puser,.profile-hero.has-cover .profile-status{text-shadow:0 1px 10px rgba(0,0,0,.45),0 0 3px rgba(0,0,0,.35)}
.profile-hero .avatar{box-shadow:0 0 0 3px var(--color-surface),0 2px 10px rgba(0,0,0,.18)}
.profile-view .profile-hero .avatar{box-shadow:0 0 0 3px var(--color-surface),0 2px 10px rgba(0,0,0,.18)}
/* v6.3.1: on a worn backdrop the ring melts into the backdrop's own
   edge colour (--bdedge, set from the pool data) — never a black ring */
.profile-hero.worn-hero .avatar{box-shadow:0 0 0 3px var(--bdedge, var(--color-surface)),0 2px 10px rgba(0,0,0,.18)}
.modal .profile-hero{margin-top:var(--space-3)}
/* --- channel showcase card (v5.14): small «Channel · N subscribers»
   label, then avatar + name + last-post preview (max 2 lines) --- */
.showcase-channel-card{display:flex;flex-direction:column;gap:8px;width:100%;text-align:start;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:12px var(--space-3);margin-top:var(--space-3);box-shadow:var(--shadow-1);transition:background var(--dur-1)}
.showcase-channel-card:hover{background:var(--color-hover)}
.profile-view .showcase-channel-card{margin-inline:var(--space-3);width:auto}
.scc-label{display:flex;align-items:baseline;gap:5px;font-size:var(--fs-sm)}
.scc-kind{color:var(--color-primary);font-weight:var(--fw-semibold)}
.scc-cnt{color:var(--color-muted);font-weight:var(--fw-medium)}
.scc-top{display:flex;align-items:baseline;gap:8px}
.scc-top b{flex:1;min-width:0}
.scc-date{color:var(--color-muted);font-size:var(--fs-xs);flex:none}
.scc-main{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.scc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.scc-meta b{font-size:var(--fs-md);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scc-meta small{color:var(--color-muted);font-size:var(--fs-sm);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* v5.14: the profile scroll view always clears the floating tab bar
   (bar ≈ 64px + its 10px bottom margin + safe area) — by id, so no
   earlier padding rule can undercut it again */
#profile-content{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
/* v6.13 (Defects 3+4): the own-profile action tiles moved INTO the hero
   (the translucent .prof-tiles component), and the info card's balance
   button-row is gone (the header balance pill is the only balance UI) —
   the old .pf-tiles / .info-row-btn rules are deleted with them. */
/* --- gift CTA: a static full-width row under the showcase grid —
   it can never cover a tile (the old sticky pill could) --- */
.gift-cta{margin-top:var(--space-5);justify-content:center}
.profile-view .gift-cta{display:flex;width:auto;margin:var(--space-5) var(--space-3) 0}
/* --- view + chat transitions --- */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-view.active{animation:viewIn var(--dur-3) var(--ease-out)}
@keyframes chatIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes chatInRtl{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
#chat-view:not(.hidden){animation:chatIn var(--dur-layer) var(--curve-quart)}
[dir="rtl"] #chat-view:not(.hidden){animation-name:chatInRtl}
/* --- press states (scale .97) + tab switching --- */
.btn:active,.seg-btn:active{transform:scale(.97)}
#tabbar .nav-tab{transition:background var(--dur-2),color var(--dur-2),transform var(--dur-1)}
#tabbar .nav-tab:active{transform:scale(.96)}
/* --- BotFather guide sheet --- */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.bf-steps{margin:var(--space-1) 0 var(--space-2)}
.bf-step{display:flex;gap:var(--space-3);align-items:flex-start;padding:6px 0}
.bf-step-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.bf-step p{margin:0;padding-top:2px;font-size:var(--fs-md);line-height:1.7}
.bf-base{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:9px 12px;margin:var(--space-2) 0;overflow-x:auto;white-space:nowrap;max-width:100%}
.info-card.bf-methods{margin-top:var(--space-2)}
.info-row small.bf-mdesc{font-weight:var(--fw-regular)}
/* the example code scrolls horizontally INSIDE its own block; the page
   never does. Non-selectable by design — it has its own Copy button. */
.code-wrap{position:relative;margin-top:var(--space-2);min-width:0}
.code-pre{direction:ltr;text-align:left;overflow-x:auto;max-width:100%;margin:0;
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.65;
  white-space:pre;user-select:none;-webkit-user-select:none}
.code-copy{position:absolute;top:8px;inset-inline-end:8px}
/* --- reduced motion: shorten/disable the whole layer --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- v6.0 collectibles ---------- */
.gift-art{display:inline-flex;line-height:0}
.gift-art svg{width:100%;height:100%}
.gift-art.mini{width:20px;height:20px}
.gift-art.chip{width:34px;height:34px;flex:none}
.gift-art.tile{width:84px;height:84px} /* v6.10: grid scale → Telegram's 90px class */
/* v6.8: long-press feedback + context menu head + reorder rows */
.gift-tile{-webkit-touch-callout:none}
.gift-tile.lp-press{transform:scale(.94)}
/* v6.11: gift collections. v6.12.1: the profile row is Telegram's ONE
   compact chip row directly under the tabs (selected = filled light
   pill / inverse in light theme); the .coll-cover renderer below stays
   for the collection picker + manage sheet, and is shrunk to a thumb
   inside chips. */
.coll-row-wrap{margin-bottom:var(--space-2)}
.coll-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.coll-chips::-webkit-scrollbar{display:none}
.cchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;
  border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.cchip.sel{background:var(--color-text);color:var(--color-surface)}
.cchip.add{color:var(--color-primary)}
.cchip .ic{width:15px;height:15px}
.cchip-thumb{display:inline-flex;flex:none}
.cchip-thumb .coll-cover{width:17px;height:17px;border-radius:5px}
.cchip-thumb .coll-cover .gift-art{width:15px;height:15px}
.cchip-thumb .coll-cover.empty .ic{width:12px;height:12px}
.coll-cover{position:relative;flex:none;width:44px;height:44px;border-radius:var(--radius-md);overflow:hidden;
  background:var(--gift-tile-bg);display:flex;align-items:center;justify-content:center;color:var(--gift-tile-sub)}
.coll-cover .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.coll-cover .gift-art{position:relative;z-index:1;width:36px;height:36px}
.coll-cover.empty{background:var(--color-surface-3);color:var(--color-muted)}
/* v6.11: gift long-press POPUP — Telegram overlay (blur + colour bokeh,
   big centred card, floating menu at the card's trailing edge) */
.glp-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:var(--space-4);overflow-y:auto;background:rgba(10,12,14,.42);
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  opacity:0;transition:opacity var(--dur-modal) var(--curve-default)}
.glp-overlay.in{opacity:1}
.glp-overlay.out{opacity:0}
.glp-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glp-orb{position:absolute;border-radius:50%;background:var(--orb);filter:blur(52px);opacity:0;transform:scale(.55)}
.glp-overlay.in .glp-orb{animation:glpOrbIn var(--dur-layer) var(--curve-layer) forwards}
.glp-orb.o1{width:300px;height:300px;top:-70px;inset-inline-start:-60px}
.glp-orb.o2{width:260px;height:260px;bottom:-60px;inset-inline-end:-50px;animation-delay:50ms!important}
.glp-orb.o3{width:180px;height:180px;top:38%;inset-inline-start:56%;animation-delay:100ms!important}
@keyframes glpOrbIn{to{opacity:.5;transform:scale(1)}}
.glp-wrap{position:relative;display:flex;flex-direction:column;width:min(320px,86vw)}
.glp-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--gift-tile-bg);
  box-shadow:var(--shadow-pop);transform:scale(.85);opacity:0}
.glp-overlay.in .glp-card{animation:glpCardIn var(--dur-layer) var(--curve-layer) forwards}
.glp-overlay.out .glp-card{transform:scale(.93);opacity:0;transition:transform var(--dur-modal) var(--curve-default),opacity var(--dur-modal) var(--curve-default);animation:none}
@keyframes glpCardIn{to{transform:scale(1);opacity:1}}
.glp-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:230px;padding:var(--space-5) var(--space-4)}
.glp-stage .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.glp-stage .gift-art{position:relative;z-index:1}
.glp-stage.plain{background:radial-gradient(115% 115% at 50% 36%,var(--gift-tile-bg-2) 0%,var(--gift-tile-bg) 80%)}
.glp-title{position:relative;z-index:1;color:var(--gift-tile-text);font-weight:var(--fw-bold);font-size:var(--fs-lg);text-align:center}
.glp-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:3;width:26px;height:26px;border-radius:var(--radius-full);
  background:var(--color-chip-blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.glp-menu{align-self:flex-end;margin-top:var(--space-3);width:min(280px,78vw);background:var(--color-surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-1);transform:scale(.9) translateY(8px);opacity:0}
.glp-overlay.in .glp-menu{animation:glpMenuIn var(--dur-menu) var(--curve-menu) 60ms forwards}
.glp-overlay.out .glp-menu{transform:scale(.94);opacity:0;transition:transform var(--dur-modal) var(--curve-default),opacity var(--dur-modal) var(--curve-default);animation:none}
@keyframes glpMenuIn{to{transform:scale(1) translateY(0);opacity:1}}
.glp-menu button{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;
  padding:11px var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font-weight:var(--fw-semibold)}
.glp-menu button+button{border-top:1px solid var(--color-border)}
.glp-menu button:hover{background:var(--color-hover)}
.glp-menu button .ic{color:var(--color-primary)}
@media (prefers-reduced-motion: reduce){
  .glp-overlay.in .glp-card,.glp-overlay.in .glp-menu,.glp-overlay.in .glp-orb{animation:none}
  .glp-card{transform:none;opacity:1}
  .glp-menu{transform:none;opacity:1}
  .glp-orb{transform:none;opacity:.5}
}
.lp-head{display:flex;align-items:center;gap:var(--space-3);padding:2px 2px var(--space-3)}
.pr-row{display:flex;align-items:center;gap:var(--space-3);padding:8px 2px;border-bottom:1px solid var(--color-border)}
.pr-row .grow{flex:1;font-weight:var(--fw-semibold)}
.mv-btn{width:34px;height:34px;border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text);
  display:flex;align-items:center;justify-content:center}
.mv-btn:disabled{opacity:.35}
.mv-up{transform:rotate(-90deg)}
.mv-dn{transform:rotate(90deg)}
.gift-art.stage{width:120px;height:120px} /* detail scale — the only stage size (v6.10: stage-lg removed) */
.gift-art.card{width:84px;height:84px}
.gift-art.shop{width:84px;height:84px}
.name-gift{display:inline-flex;vertical-align:-3px;margin-inline-start:3px;line-height:0}
.name-gift.emoji-status{font-size:.95em;line-height:1;vertical-align:-1px}
.name-gift.worn{display:inline-flex;vertical-align:-4px}
/* transfer-card mini stage (v6.2): backdrop + ring pattern, no frame */
.coll-mini-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:92px;overflow:hidden}
.coll-mini-stage .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.coll-mini-stage .gift-art{position:relative;z-index:1}
.tile-sender{position:absolute;top:4px;inset-inline-start:4px;z-index:2;border-radius:var(--radius-full);
  box-shadow:0 0 0 2px rgba(255,255,255,.85);line-height:0}
.tile-sender .avatar{width:18px;height:18px;font-size:.52rem}
.tile-pin .ic,.tile-hidden .ic{width:14px;height:14px}
/* v6.13 (Defect 5c): the pin marker is a small FILLED pin glyph at the
   top-left (inline-start), pinned tiles only — the old bookmark outline
   in a dark circle is gone, unified across plain and collectible tiles. */
.tile-pin{position:absolute;top:6px;inset-inline-start:6px;z-index:3;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));padding:2px;display:inline-flex}
.tile-hidden{position:absolute;bottom:6px;inset-inline-end:6px;z-index:3;background:rgba(0,0,0,.32);color:#fff;
  border-radius:var(--radius-full);padding:3px;display:inline-flex}
/* stages: backdrop gradient + RING pattern canvas + model (v6.10 ring renderer) */
.coll-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:15rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  padding:var(--space-5) var(--space-3);margin-bottom:var(--space-3)}
.coll-stage .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.coll-stage .gift-art{position:relative;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.coll-stage-name{position:relative;font-size:var(--fs-xl);font-weight:var(--fw-bold);text-shadow:0 1px 8px rgba(0,0,0,.25)}
/* v6.2 detail sheets (Amendments 2/3/5): full-bleed stage inside the modal */
.det-stage{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-3);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;min-height:19rem}
.plain-stage{background:linear-gradient(180deg,var(--gift-tile-bg-2),var(--gift-tile-bg));color:var(--gift-tile-text)}
.stage-x{background:rgba(0,0,0,.32);color:#fff;z-index:3;border-radius:var(--radius-full)}
.stage-menu-btn{position:absolute;top:10px;inset-inline-end:10px;z-index:3;background:rgba(0,0,0,.32);color:#fff;
  border-radius:var(--radius-full);width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.sheet-menu{position:absolute;top:52px;inset-inline-end:10px;z-index:5;background:var(--color-surface);
  border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:4px;display:flex;flex-direction:column;
  min-width:190px;color:var(--color-text)}
.sheet-menu button{display:flex;gap:8px;align-items:center;padding:9px 10px;border-radius:var(--radius-sm);
  text-align:start;color:var(--color-text);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.sheet-menu button:hover{background:var(--color-hover)}
.sheet-menu button .ic{color:var(--color-muted)}
.det-title{position:relative;font-size:20px;font-weight:800;color:#fff;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.det-subtitle{position:relative;font-size:var(--fs-sm);font-weight:var(--fw-semibold);opacity:.92;text-align:center;margin-top:-6px}
.rarity-chip{background:var(--color-chip-blue);color:#fff;font-size:11px;font-weight:var(--fw-bold);
  padding:1px 8px;border-radius:var(--radius-full)}
.gs-chip{display:inline-flex;align-items:center;gap:4px;background:var(--color-chip-blue);color:#fff;
  font-size:11px;font-weight:var(--fw-bold);padding:3px 9px;border-radius:var(--radius-full)}
.qty-sep{opacity:.55;margin:0 2px}
.gift-msg-i{font-style:italic}
.convert-line{text-align:center;margin:var(--space-1) 0 var(--space-3)}
.convert-line .cv-num{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-success)}
.convert-line p{color:var(--color-text-2);font-size:var(--fs-sm);margin-top:2px}
.sell-note{color:var(--color-muted)}
.txt-link{color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:2px 4px}
.feat-rows{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.feat-row{display:flex;align-items:center;gap:var(--space-3)}
.feat-row .ic{width:26px;height:26px;color:var(--color-gold);flex:none}
.feat-row span{display:flex;flex-direction:column}
.feat-row small{color:var(--color-muted);font-size:var(--fs-sm)}
.keep-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);cursor:pointer}
.keep-row span{flex:1;display:flex;flex-direction:column}
.keep-row small{color:var(--color-muted);font-size:var(--fs-sm)}
.keep-row input{width:20px;height:20px;accent-color:var(--color-primary);flex:none}
.up-stage{min-height:12rem;background:var(--color-surface-2)}
.up-stage .up-art{position:relative}
.up-combo{position:relative;font-size:var(--fs-sm);font-weight:var(--fw-medium);min-height:1.2em;text-align:center;padding:0 var(--space-2)}
.attr-val{display:inline-flex;align-items:center;gap:var(--space-2)}
.attr-val small{color:var(--color-muted);font-weight:var(--fw-semibold)}
.bd-chip{display:inline-block;width:30px;height:30px;border-radius:var(--radius-sm);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.bd-chip.lg{width:40px;height:40px}
.sym-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--color-surface-2);flex:none}
.sym-chip.lg{width:40px;height:40px}
.sheet-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.sheet-actions .btn{flex:1 1 30%;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.attr-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
/* worn profile header */
.profile-hero.worn-hero{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.worn-bg{position:absolute;inset:0}
.worn-bg .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.profile-hero.worn-hero .profile-hero-in{position:relative;padding-top:var(--space-5)}
/* transfer confirm + palettes + pay options */
.transfer-confirm{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-4) 0}
.tc-gift{position:relative;display:flex;align-items:center;justify-content:center;width:86px;height:86px;border-radius:var(--radius-lg);overflow:hidden}
.tc-gift .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.tc-gift .gift-art{position:relative;z-index:1}
.tc-arrow{color:var(--color-muted);flex:none}
[dir="rtl"] .tc-arrow{transform:scaleX(-1)}
.tc-user{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.tc-user small{color:var(--color-muted)}
.pay-opts{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}
.pay-opt{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;padding:var(--space-3);
  border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.pay-opt.sel{border-color:var(--color-gold-bright);background:var(--color-warning-bg)}
.pay-opt:disabled{opacity:.45}
.pay-opt .po-ic{color:var(--color-gold);display:inline-flex}
.pay-opt small{display:block;color:var(--color-muted);font-size:var(--fs-xs)}
.pay-opt .po-price{color:var(--color-gold);white-space:nowrap}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.pal-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--fs-sm)}
.pal-chip.sel{border-color:var(--color-primary)}
.pal-sw{width:26px;height:26px;border-radius:var(--radius-full);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.up-lbl{font-size:var(--fs-xs);color:var(--color-muted);flex:none}
.up-cur{display:block;color:var(--color-muted);font-size:var(--fs-xs)}
.ow-num.sm{width:76px}
/* reveal ceremony */
.reveal-ov{position:fixed;inset:0;z-index:200;background:var(--color-bg);overflow-y:auto;padding:var(--space-4);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.reveal-ov .coll-stage{width:min(430px,100%);min-height:17rem}
.reveal-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.reveal-confetti i{position:absolute;top:-4%;border-radius:2px;opacity:0}
.reveal-ov.landed .reveal-confetti i{animation:confetti-fall 2.3s ease-in forwards}
@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(46vh) rotate(560deg)}}
.reveal-ov.playing .reveal-art{animation:reveal-glow 1.9s ease-out}
@keyframes reveal-glow{0%{transform:scale(.82);filter:brightness(1.7) drop-shadow(0 0 26px rgba(255,255,255,.75))}
  60%{filter:brightness(1.25) drop-shadow(0 0 14px rgba(255,255,255,.4))}100%{transform:scale(1)}}
.reveal-ov.landed .reveal-art{animation:reveal-land .45s var(--curve-ease-out-back)}
@keyframes reveal-land{0%{transform:scale(1.14)}100%{transform:scale(1)}}
.reveal-body{width:min(430px,100%);text-align:center}
.reveal-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:var(--space-2) 0}
.reveal-ov .reveal-body{opacity:0;transform:translateY(10px)}
.reveal-ov.landed .reveal-body,.reveal-ov.instant .reveal-body{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.reveal-ov.landed .reveal-rows .sheet-row{animation:row-in .5s ease both}
.reveal-ov.landed .reveal-rows .sheet-row:nth-child(2){animation-delay:.12s}
.reveal-ov.landed .reveal-rows .sheet-row:nth-child(3){animation-delay:.24s}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal-issued{color:var(--color-muted);margin:var(--space-3) 0;font-size:var(--fs-sm)}

/* ============================================================
   v6.3 — Telegram-mirror profile page (Round 2 + Amendment B).
   Collapsing header (--col 0→1 driven by scroll), premium header
   layer (floating pinned gifts, worn chip, header action tiles),
   pill tab strip with sliding indicator, shared-content panels.
   ============================================================ */
.prof{--col:0;--coltop:0;position:relative}
.modal.prof{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;padding-bottom:var(--space-6)}
.modal.prof .info-card,.modal.prof .showcase-channel-card,
.modal.prof .prof-actions-row,.modal.prof .prof-action-pill,
.modal.prof .prof-tabs,.modal.prof .prof-panel{margin-inline:var(--space-4)}
.profile-view .prof-tabs,.profile-view .prof-panel,
.profile-view .prof-actions-row,.profile-view .prof-action-pill{margin-inline:var(--space-3)}
/* v6.13 (Defect 2): the compact bar's background is driven by --coltop
   (set by the scroll renderer, 0 until p=.55, 1 at p=.8) and goes from
   fully transparent to SOLID --color-bg — no translucent band, no blur,
   so hero text can never ghost through it. The compact name/presence
   rides the same variable: invisible until the hero text is long gone
   (hero name is fully out by p=.45) — the two layers are never readable
   at the same time. */
.prof-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:color-mix(in srgb, var(--color-bg) calc(var(--coltop) * 100%), transparent)}
.prof-top-id{flex:1;min-width:0;text-align:center;opacity:var(--coltop);
  transform:translateY(calc((1 - var(--coltop)) * 5px))}
.prof-top-id b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-md)}
.prof-top-id small{display:block;color:var(--color-muted);font-size:var(--fs-xs)}
.prof-back{width:36px;height:36px;flex:none;border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--color-surface) 65%, transparent);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:var(--color-text)}
.prof-back-sp{width:36px;flex:none}
.prof-menu{top:calc(100% + 4px);inset-inline-end:8px}
.prof .profile-hero-in{opacity:calc(1 - var(--col) * .45)}
.prof .profile-hero .avatar.xl{transform:scale(calc(1 - var(--col) * .26));transform-origin:center top}
.profile-status{color:var(--color-muted);font-size:var(--fs-sm)}
.profile-status.online{color:var(--color-online)}
/* v6.3.1 Defect 3: on a backdrop header the presence line derives from
   the backdrop's stored text colour at 72% opacity (the hero sets it
   inline on the name); the tag pill keeps its own style. */
.profile-hero.worn-hero .profile-status{color:inherit;opacity:.72}
.profile-hero.worn-hero .puser{opacity:.72}

/* premium header layer: pinned gifts floating around the avatar.
   v6.3.3: cap 6, arranged around the avatar (upper/lower corners +
   midsides), soft GLOW in the backdrop's tint colour (--pin-glow,
   set from pool data), pointer-events ON so a tap opens the tooltip
   chip; the gentle float rides the inner art so the v6.3.4 scroll
   transform on the pin itself never fights the keyframes. */
.prof-pins{position:absolute;inset:0;pointer-events:none;z-index:2}
.prof-pin{position:absolute;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 0 7px var(--pin-glow, rgba(0,0,0,.35))) drop-shadow(0 4px 10px rgba(0,0,0,.30))}
.prof-pin .gift-art{animation:floaty 5s ease-in-out infinite alternate}
.prof-pin.pp1{top:6%;inset-inline-start:12%}
.prof-pin.pp2{top:6%;inset-inline-end:12%}
.prof-pin.pp2 .gift-art{animation-delay:.7s}
.prof-pin.pp3{top:38%;inset-inline-start:4%}
.prof-pin.pp3 .gift-art{animation-delay:1.3s}
.prof-pin.pp4{top:38%;inset-inline-end:4%}
.prof-pin.pp4 .gift-art{animation-delay:1.9s}
.prof-pin.pp5{top:66%;inset-inline-end:10%}
.prof-pin.pp5 .gift-art{animation-delay:2.4s}
.prof-pin.pp6{top:66%;inset-inline-start:10%}
.prof-pin.pp6 .gift-art{animation-delay:3s}
@keyframes floaty{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
@media (prefers-reduced-motion: reduce){ .prof-pin .gift-art{animation:none} }
/* v6.3.4 pinned-gift tooltip chip (under the avatar) + avatar viewer */
/* v6.13 (Defect 6): Telegram's chip is a LIGHT pill with dark text and
   the gift's mini art — --color-text on --color-bg inverts safely in
   the light theme (dark pill, light text). */
.prof-pin-tip{position:absolute;left:50%;transform:translateX(-50%);z-index:5;background:var(--color-text);color:var(--color-bg);
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:7px 13px;border-radius:var(--radius-full);
  box-shadow:var(--shadow-pop);white-space:nowrap;animation:panelIn var(--dur-modal) var(--curve-ease-out-quint)}
.prof-pin-tip .gift-art{width:22px;height:22px;flex:none}
.prof-pin-tip::before{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;background:inherit;
  transform:translateX(-50%) rotate(45deg);border-radius:2px}
.avatar-viewer{position:fixed;inset:0;z-index:320;background:#000;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--dur-viewer) var(--curve-default)}
.avatar-viewer img{width:100%;height:100%;object-fit:contain;display:block}
.av-top{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline:10px;display:flex;justify-content:space-between;z-index:2}
.av-btn{width:38px;height:38px;border-radius:var(--radius-full);background:rgba(20,20,22,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.av-menu{position:absolute;top:calc(56px + env(safe-area-inset-top));inset-inline-end:10px;z-index:2;
  background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:5px;animation:menuIn var(--dur-menu) var(--curve-menu);transform-origin:top center}
.av-menu button{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--radius-sm);color:var(--color-text);font-weight:var(--fw-medium);width:100%}
.av-menu button:hover{background:var(--color-hover)}
.av-scrim{position:absolute;left:0;right:0;bottom:0;padding:38px 18px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#fff;pointer-events:none}
.av-name{font-size:var(--fs-lg);font-weight:var(--fw-semibold);display:flex;align-items:center;gap:6px}
.av-status{color:rgba(255,255,255,.75);font-size:var(--fs-sm);margin-top:2px}
.worn-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);color:#fff;
  padding:3px 10px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  margin-top:var(--space-2)}
.prof-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
  margin-top:var(--space-4);padding-inline:var(--space-3)}
.prof-tile{background:color-mix(in srgb, currentColor 10%, transparent);backdrop-filter:blur(6px);
  border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;
  align-items:center;gap:4px;color:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.prof-tile .ic{width:22px;height:22px}
.bio-status{font-size:1em}
/* v6.14 clickable entities: one link colour for every entity type.
   Non-bubble surfaces (bio, sheets, quotes on tinted fields) use
   --color-link with NO underline (Telegram bio behaviour); incoming
   bubbles use --color-link-in; OWN bubbles follow Telegram's forced
   rule — link colour := the bubble's text colour, told apart by the
   underline alone. Chat-list previews carry inert styled spans. */
a.ent{color:var(--color-link);text-decoration:none;cursor:pointer}
.bubble a.ent{color:var(--color-link-in)}
.msg-row.mine .bubble a.ent{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ci-last span.ent{color:var(--color-link)}
.info-row-flex{display:flex;align-items:center;gap:var(--space-2)}
.info-main{flex:1;min-width:0}
.copy-prof-link{color:var(--color-muted);display:inline-flex;padding:6px;border-radius:var(--radius-full);flex:none}
.copy-prof-link:hover{background:var(--color-hover)}
/* v6.15.1: «also @name» line under the profile username — other ACTIVE
   usernames in the v6.14 link colour; label + separators muted. */
.also-line{display:block;font-size:var(--fs-sm);line-height:1.5;margin-top:1px;white-space:normal;word-break:break-word}
.also-lbl{color:var(--color-muted);font-weight:var(--fw-medium)}
.also-name{background:none;border:none;padding:0;font:inherit;color:var(--color-link);cursor:pointer;text-align:start}
.also-name:hover{text-decoration:underline}
/* v6.17: collectible-username info sheet — Telegram's provenance card:
   blue @ medallion, «belongs to» title, owner chip, mint sentence,
   Copy Link text button (no Learn More: no Fragment in Timee). */
.coll-sheet{text-align:center;padding:var(--space-5) var(--space-2) var(--space-4);display:flex;flex-direction:column;align-items:center}
.coll-medal{width:72px;height:72px;border-radius:50%;background:var(--color-link);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);box-shadow:0 8px 22px color-mix(in srgb,var(--color-link) 32%,transparent)}
.coll-medal .ic{width:42px;height:42px}
/* v6.18 fix: the title MUST stay one flowing centred paragraph — the
   global `.modal h3` rule is display:flex, which (at higher specificity
   than a lone class) turned the title into a flex row: the @name span
   became a separate flex item, vertically centred against the wrapped
   text and displaced to the side (Ali's «چرا بالا پایینه» screenshot).
   `.coll-sheet .coll-title` outranks it and restores block flow; the
   name span itself stays a plain inline (colour only — no inline-block,
   float or transform), baseline-aligned with the sentence around it. */
.coll-sheet .coll-title{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:1.55;text-align:center;margin:0;max-width:340px}
.coll-name{color:var(--color-link)}
.coll-owner{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-surface-2);border-radius:var(--radius-full);padding:4px;margin-inline:0;padding-inline-end:var(--space-4);margin-top:var(--space-4);font-size:var(--fs-md);max-width:100%}
.coll-owner .avatar{width:28px;height:28px;font-size:.8rem}
.coll-owner b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coll-info{color:var(--color-text-2);font-size:var(--fs-md);line-height:1.55;margin-top:var(--space-4);max-width:340px}
.coll-copy{margin-top:var(--space-5);background:none;border:none;color:var(--color-link);font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-md);cursor:pointer;padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);transition:background var(--dur-1)}
.coll-copy:hover{text-decoration:underline}
.coll-copy:active{background:color-mix(in srgb,var(--color-link) 12%,transparent);text-decoration:none}
.coll-loading{padding:var(--space-4) 0 var(--space-6)}
.coll-spin{display:inline-block;width:24px;height:24px;border-radius:50%;border:3px solid var(--color-border-strong);border-top-color:var(--color-link);animation:spin .7s linear infinite}
.also-sep{color:var(--color-muted)}
.prof-actions-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.prof-actions-row .btn{justify-content:center}
.prof-action-pill{width:100%;margin-top:var(--space-4);display:flex;align-items:center;justify-content:center;gap:6px}
/* v6.3.3 pills row under the profile action area: profile music
   (when set) + the viewer-scoped balance pill. */
.prof-pills{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.modal.prof .prof-pills{margin-inline:var(--space-4)}
.profile-view .prof-pills{margin-inline:var(--space-3)}
.prof-pill-btn{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--color-surface-2);
  border-radius:var(--radius-full);padding:9px 13px;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-text)}
.prof-pill-btn .pill-ic{display:inline-flex;color:var(--color-primary);flex:none}
.prof-pill-btn .pill-ic .ic{width:18px;height:18px}
.prof-pill-btn .pill-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.prof-pill-btn .pill-go{color:var(--color-muted);flex:none}
[dir="rtl"] .pill-go{transform:scaleX(-1)}
.prof-pill-btn.playing{background:var(--color-primary-soft-strong)}
/* v6.3.2: CENTRED compact pill tab strip (max-content width,
   scrollable-x on overflow); selected = filled dark pill + accent
   text. The old full-width sliding indicator is gone. */
.prof-tabs{margin-top:var(--space-4);display:flex;justify-content:center}
.prof-tabs-in{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  background:var(--color-surface-2);border-radius:var(--radius-full);padding:3px;width:fit-content;max-width:100%}
.prof-tabs-in::-webkit-scrollbar{display:none}
.ptab{position:relative;z-index:1;padding:6px 12px;border-radius:var(--radius-full);white-space:nowrap;
  font-weight:var(--fw-semibold);color:var(--color-text-2);display:inline-flex;align-items:center;gap:5px;
  transition:background var(--dur-2),color var(--dur-2)}
.ptab.active{background:#101014;color:var(--color-primary)}
.ptab-gic{font-size:15px;line-height:1;display:inline-flex}
.prof-panel{margin-top:var(--space-3)}
.panel-in{animation:panelIn var(--dur-layer) var(--curve-layer)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.prof-panel .gift-tile{animation:fadeUp .35s var(--ease-out) both}
.prof-panel .gift-tile:nth-child(2){animation-delay:30ms}
.prof-panel .gift-tile:nth-child(3){animation-delay:60ms}
.prof-panel .gift-tile:nth-child(4){animation-delay:90ms}
.prof-panel .gift-tile:nth-child(5){animation-delay:120ms}
.prof-panel .gift-tile:nth-child(6){animation-delay:150ms}
.prof-panel .gift-tile:nth-child(7){animation-delay:180ms}
.prof-panel .gift-tile:nth-child(8){animation-delay:210ms}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* shared panels */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.media-cell{aspect-ratio:1;position:relative;overflow:hidden;background:var(--color-surface-3);padding:0;border-radius:2px}
.media-cell img,.media-cell video{width:100%;height:100%;object-fit:cover;display:block}
.media-badge{position:absolute;bottom:4px;inset-inline-end:4px;background:rgba(0,0,0,.55);color:#fff;
  font-size:10px;padding:1px 5px;border-radius:4px;display:inline-flex;align-items:center}
.media-badge.sz{inset-inline-end:auto;inset-inline-start:4px}
.shared-list{display:flex;flex-direction:column;gap:2px}
.shared-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);
  border-radius:var(--radius-md);width:100%;text-align:start;color:var(--color-text);background:none}
a.shared-row{text-decoration:none}
.shared-row:hover{background:var(--color-hover)}
.sr-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-medium)}
.sr-main small{color:var(--color-muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex:none;font-weight:var(--fw-bold);font-size:10px;letter-spacing:.03em}
.ext-img{background:#7c5cff}.ext-pdf{background:#e5484d}.ext-zip{background:#f5a623}
.ext-doc{background:#2e7cd6}.ext-vid{background:#22b07d}.ext-gen{background:#8a97a8}
.ext-link{background:var(--color-primary);font-size:15px}
.play-btn{width:40px;height:40px;border-radius:50%;background:var(--color-primary);display:flex;
  align-items:center;justify-content:center;flex:none}
.play-tri{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:2px}
.play-btn.playing .play-tri{border:none;width:11px;height:13px;border-left:4px solid #fff;
  border-right:4px solid #fff;margin-left:0}
.dl-btn{color:var(--color-muted);display:inline-flex;padding:6px;flex:none}
.link-month{font-weight:var(--fw-bold);color:var(--color-text-2);margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-sm)}
.link-url{color:var(--color-primary)}
.gif-rows{display:flex;flex-direction:column;gap:var(--space-2)}
.gif-row{padding:0;background:none}
.gif-row img{width:100%;display:block;border-radius:var(--radius-md)}
/* v6.3.7: Telegram's floating centred BLUE pill — fixed within the
   profile view, springs/fades in only while the Gifts tab is active
   (the button renders with that panel); the docked placement is gone. */
.send-gift-float{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));z-index:65;
  display:flex;align-items:center;gap:6px;background:var(--color-primary);color:#fff;padding:12px 22px;
  border-radius:999px;box-shadow:var(--shadow-pop);font-weight:var(--fw-bold);white-space:nowrap;
  animation:giftPillIn var(--dur-layer) var(--curve-layer) both}
@keyframes giftPillIn{from{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
/* v6.13 (Defect 4): the floating pill can never cover the last grid row —
   the gifts panel's grid carries bottom padding of pill height (~46px)
   + the pill's bottom offset (88px, which already clears the tab bar)
   + 16px of air, so the final row scrolls fully clear of the pill. */
.prof-panel .gift-grid-wrap{padding-bottom:calc(46px + 88px + 16px + env(safe-area-inset-bottom))}

/* ============================================================
   v6.4 — Wallet «Money» redesign: bank-card hero with scroll
   tilt, compact header balance, quick rows, history, PIN gate.
   ============================================================ */
#view-wallet .app-bar{position:relative}
.wallet-compact{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;
  opacity:0;pointer-events:none;font-size:var(--fs-md);white-space:nowrap}
.wallet-compact .ic{color:var(--color-gold)}
.wallet-compact small{color:var(--color-muted)}
#wallet-title{transition:opacity var(--dur-2)}
.wcard-wrap{perspective:700px;margin-top:var(--space-2)}
.wcard{position:relative;border-radius:var(--radius-xl);padding:var(--space-5);min-height:180px;color:#fff;
  background:linear-gradient(135deg,var(--color-primary) 0%,color-mix(in srgb,var(--color-primary) 45%,#0b2e27) 58%,#08211c 100%);
  box-shadow:var(--shadow-2);transform-origin:top center;overflow:hidden;will-change:transform}
.wcard-specks{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,233,170,.85) 1.1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.5) .8px,transparent 1.2px);
  background-size:89px 67px,53px 41px;background-position:11px 7px,29px 19px}
.wcard .wc-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.wcard .wc-brand{font-size:var(--fs-lg);font-weight:800;letter-spacing:.01em}
.wcard .wc-brand small{font-weight:600;opacity:.75;font-size:var(--fs-sm)}
.wcard-chip{width:44px;height:34px;border-radius:8px;flex:none;position:relative;
  background:linear-gradient(145deg,#f3d67b,#c99327 60%,#a87b16);box-shadow:inset 0 0 0 1.5px rgba(90,60,4,.45),var(--shadow-1)}
.wcard-chip::before,.wcard-chip::after{content:'';position:absolute;background:rgba(90,60,4,.4)}
.wcard-chip::before{left:0;right:0;top:50%;height:1.5px}
.wcard-chip::after{top:0;bottom:0;left:50%;width:1.5px}
.wcard-chip span{position:absolute;inset:9px 13px;border:1.5px solid rgba(90,60,4,.4);border-radius:4px}
.wcard .wc-amt{position:relative;display:flex;align-items:baseline;gap:8px;margin-top:var(--space-5);font-size:2.15rem;font-weight:800}
.wcard .wc-amt .ic{width:26px;height:26px;color:#eec964;align-self:center}
.wcard .wc-amt small{font-size:var(--fs-md);font-weight:600;opacity:.8}
.wcard .wc-sub{position:relative;display:flex;align-items:center;gap:6px;margin-top:4px;font-size:var(--fs-md);opacity:.92}
.wcard .wc-sub .ic{width:17px;height:17px;color:#eec964}
.wc-vertical{position:absolute;top:50%;inset-inline-end:10px;transform:translateY(-50%);writing-mode:vertical-rl;
  font-size:var(--fs-xs);letter-spacing:.22em;opacity:.65;font-weight:600}
.wallet-quick{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4);background:var(--color-surface-2);
  border-radius:var(--radius-lg);padding:4px}
.wq-row{display:flex;align-items:center;gap:var(--space-3);padding:11px var(--space-3);border-radius:var(--radius-md);
  width:100%;text-align:start;color:var(--color-text);font-weight:var(--fw-semibold)}
.wq-row:hover{background:var(--color-hover)}
.wq-row .ic{color:var(--color-gold);flex:none}
.wq-row small{color:var(--color-muted);font-weight:var(--fw-regular)}
.tx-list{display:flex;flex-direction:column;gap:2px}
.tx-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);border-radius:var(--radius-md)}
.tx-row .grow{display:flex;flex-direction:column;min-width:0}
.tx-row .grow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--fw-medium)}
.tx-row .grow small{color:var(--color-muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-ic{width:36px;height:36px;border-radius:50%;background:var(--color-surface-2);color:var(--color-muted);
  display:flex;align-items:center;justify-content:center;flex:none}
.tx-amt{display:inline-flex;align-items:center;gap:4px;font-weight:var(--fw-bold);white-space:nowrap}
.tx-amt .ic{width:15px;height:15px}
.tx-amt.pos{color:var(--color-success)}
.tx-amt.neg{color:var(--color-error,#e5484d)}
.pin-gate{display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-4);gap:var(--space-3);text-align:center}
.pin-lock-ic{width:60px;height:60px;border-radius:50%;background:var(--color-surface-2);color:var(--color-gold);
  display:flex;align-items:center;justify-content:center}
.pin-lock-ic .ic{width:28px;height:28px}
.pin-dots{display:flex;gap:10px;margin:var(--space-2) 0}
.pin-dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--color-border-strong)}
.pin-dots i.on{background:var(--color-primary);border-color:var(--color-primary)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;margin:var(--space-2) 0}
.pin-key{height:56px;border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text);
  font-size:1.25rem;font-weight:var(--fw-semibold);display:flex;align-items:center;justify-content:center}
.pin-key:active{background:var(--color-hover)}
.pin-gate .btn{width:min(240px,100%)}

/* ============================================================
   v6.5 — chat list + channel/comments fidelity
   ============================================================ */
.unread-badge{background:#8a97a8;color:#fff}
.chat-item.active .unread-badge{background:#fff;color:var(--color-primary)}
.ci-kind{color:var(--color-primary);font-weight:var(--fw-semibold)}
/* v6.23 (Web A B1): the group sender prefix on the last-message line
   is coloured --color-chat-username (#3C7EB0 family) */
.ci-from{color:var(--color-chat-username)}
.meta-views{display:inline-flex;align-items:center;gap:3px;margin-inline-end:2px}
.meta-views .ic{width:14px;height:14px}
.chan-extras{position:relative;display:flex;align-items:center;margin-top:6px}
.comments-row{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:var(--radius-full);
  background:var(--color-surface-2);color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
[dir="rtl"] .comments-row{padding:5px 6px 5px 12px}
.comments-row::after{content:'›';font-size:1.05rem;line-height:1;opacity:.8}
[dir="rtl"] .comments-row::after{transform:scaleX(-1)}
.cmt-avs{display:inline-flex}
.cmt-avs .avatar{border:1.5px solid var(--color-surface-2);margin-inline-start:-6px}
.cmt-avs .avatar:first-child{margin-inline-start:0}
.share-fab{position:absolute;inset-inline-end:-6px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border-radius:50%;background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-2);
  display:flex;align-items:center;justify-content:center}
.share-fab .ic{width:19px;height:19px}
.thread-bar{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);position:relative;z-index:5}
.thread-count{background:var(--color-primary);color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm);
  padding:3px 11px;border-radius:var(--radius-full);white-space:nowrap}
.thread-preview{display:flex;align-items:center;gap:8px;min-width:0;color:var(--color-text-2);font-size:var(--fs-sm)}
.thread-preview img{width:34px;height:34px;object-fit:cover;border-radius:var(--radius-sm);flex:none}
.thread-preview span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-started{margin-top:var(--space-2)}

/* ============================================================
   v6.6 — attach sheet, photo/video editors, location/contact
   ============================================================ */
.att-tabs{display:flex;gap:2px;background:var(--color-surface-2);border-radius:var(--radius-lg);padding:4px;margin-top:var(--space-4)}
.att-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:var(--radius-md);
  color:var(--color-text-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.att-tab.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-1)}
.att-tab .ic{width:21px;height:21px}
.att-panel{margin-top:var(--space-3);min-height:120px}
.att-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.att-tile{aspect-ratio:1;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.att-tile .ic{width:24px;height:24px}
.att-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;padding:0;background:var(--color-surface-3)}
.att-thumb img,.att-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.att-thumb{opacity:.45}
.att-thumb.sel{opacity:1;outline:2px solid var(--color-primary);outline-offset:-2px}
.att-badge{position:absolute;top:5px;inset-inline-end:5px;width:20px;height:20px;border-radius:50%;
  background:var(--color-primary);color:#fff;font-size:11px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center}
.loc-card{display:flex;gap:var(--space-3);align-items:center;text-decoration:none;color:inherit;min-width:190px}
.loc-ic{width:42px;height:42px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.loc-main{flex:1;display:flex;flex-direction:column;min-width:0}
.loc-main small{color:var(--color-muted)}
.loc-open{color:var(--color-primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.contact-card{display:flex;gap:var(--space-3);align-items:center;background:none;color:inherit;text-align:start;min-width:190px;padding:0}
/* editors: full-screen black overlays */
.editor-ov{position:fixed;inset:0;z-index:300;background:#060707;color:#f2f3f5;display:flex;flex-direction:column;
  animation:panelIn var(--dur-layer) var(--curve-layer)}
.ed-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4)}
.ed-head .icon-btn{color:#fff}
.ed-head .grow{flex:1}
.ed-hd{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.ed-hd input{width:18px;height:18px;accent-color:var(--color-gold)}
.ed-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:var(--space-2)}
.ed-stage video{max-width:100%;max-height:100%;border-radius:var(--radius-md)}
.ed-canvas-wrap{position:relative;line-height:0;max-width:100%}
.ed-canvas-wrap canvas{max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:4px;touch-action:none}
.ped-crop{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;touch-action:none}
.ped-crop i{position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:rgba(0,0,0,.35);cursor:nwse-resize}
.ped-crop i[data-ch="nw"]{top:-11px;left:-11px}.ped-crop i[data-ch="ne"]{top:-11px;right:-11px}
.ped-crop i[data-ch="sw"]{bottom:-11px;left:-11px}.ped-crop i[data-ch="se"]{bottom:-11px;right:-11px}
.ed-panel{padding:var(--space-2) var(--space-4);min-height:52px}
.ed-row{display:flex;align-items:center;gap:var(--space-3);padding:4px 0}
.ed-row span{font-size:var(--fs-sm);color:#c8cfc9;min-width:64px}
.ed-row input[type="range"]{flex:1;accent-color:var(--color-primary)}
.ed-row input[type="text"],.ed-row input:not([type]){flex:1;background:#1b1e1c;color:#fff;border:1px solid #333;border-radius:var(--radius-sm);padding:7px 10px}
.ed-row select{background:#1b1e1c;color:#fff;border:1px solid #333;border-radius:var(--radius-sm);padding:7px}
.ped-pal{display:flex;gap:8px;padding:6px 0;flex-wrap:wrap}
.ped-swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.ped-swatch.sel{border-color:#fff;transform:scale(1.12)}
.ped-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.ped-emoji-grid button{font-size:24px;padding:5px 0;background:#1b1e1c;border-radius:var(--radius-sm)}
.ed-tools{display:flex;gap:4px;padding:var(--space-2) var(--space-4);overflow-x:auto}
.ed-tool{padding:8px 13px;border-radius:var(--radius-full);background:#1b1e1c;color:#dfe5e0;font-weight:var(--fw-semibold);white-space:nowrap}
.ed-tool.active{background:var(--color-primary);color:#fff}
.ed-foot{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));align-items:center}
.ed-foot input{flex:1;background:#1b1e1c;border:1px solid #2c2f2c;color:#fff;border-radius:var(--radius-full);padding:11px 16px}
.ed-send{width:46px;height:46px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ed-send:disabled{opacity:.5}
[dir="rtl"] .ed-send .ic{transform:scaleX(-1)}
.ved-trim{padding:var(--space-2) var(--space-4)}
.ved-track{position:relative;height:54px;border-radius:var(--radius-sm);overflow:visible;background:#14161a}
.ved-strip{position:absolute;inset:0;display:flex;overflow:hidden;border-radius:var(--radius-sm)}
.ved-strip img{flex:1;width:0;object-fit:cover;height:100%}
.ved-sel{position:absolute;top:0;bottom:0;border:2.5px solid var(--color-gold);border-radius:var(--radius-sm);pointer-events:none}
.ved-h{position:absolute;top:50%;width:22px;height:34px;transform:translate(-50%,-50%);background:var(--color-gold);
  border-radius:6px;cursor:ew-resize;touch-action:none;z-index:2}
.ved-read{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-variant-numeric:tabular-nums}
.ved-read .grow{flex:1}
.ved-read .btn.primary{background:var(--color-primary);color:#fff}

/* ---------- v6.10 collectible stage rebuild (Telegram anatomy) ---------- */
/* Sticky primary-action footer for sheets: Telegram pins the single
   full-width action (OK / Upgrade / Transfer) to the sheet's bottom. */
.sheet-foot{position:sticky;bottom:calc(-1 * var(--space-6));z-index:3;margin:var(--space-4) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  padding:var(--space-3) var(--space-6) var(--space-5);background:var(--color-surface)}
.sheet-foot .btn{width:100%;margin:0}
/* Stage motion (research §2/§3): the backdrop pattern eases on stage
   changes (250ms transform), the subtitle tint cross-fades (150ms). */
.coll-stage .bd-pattern{transition:transform .25s ease}
.det-subtitle{transition:color .15s ease}
/* Artwork: plays ONCE when scrolled into view (.play via IntersectionObserver
   in drawStages/observeArt), loops only while hovered on hover-capable
   devices; reduced motion kills both. */
@keyframes art-bob{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-3px) scale(1.04)}70%{transform:translateY(1px) scale(.99)}100%{transform:translateY(0) scale(1)}}
.gift-art.play svg{animation:art-bob 1.15s ease-in-out 1}
@media (hover:hover) and (pointer:fine){ .gift-art:hover svg{animation:art-bob 1.6s ease-in-out infinite} }
@media (prefers-reduced-motion: reduce){ .gift-art.play svg,.gift-art:hover svg{animation:none} }
/* Worn status glitter (Telegram blog: «glittering star effect» on the
   worn gift): a soft gold four-point sparkle twinkling beside the mini
   art wherever the worn gift marks a name. */
.name-gift.worn{position:relative}
.worn-spark{position:absolute;top:-4px;inset-inline-end:-5px;width:9px;height:9px;pointer-events:none;
  background:var(--color-gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:worn-twinkle 1.7s ease-in-out infinite}
@keyframes worn-twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
@media (prefers-reduced-motion: reduce){ .worn-spark{animation:none;opacity:.8} }
/* Pinned collectible floats on its own mini stage (v6.10): backdrop
   gradient + ring pattern behind the art, inside the profile header. */
.pin-stage{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.pin-stage .bd-pattern{position:absolute;inset:0;width:100%;height:100%}
.pin-stage .gift-art{position:relative;z-index:1;width:30px;height:30px}
/* Reveal rows stagger tightened to the synthesis' ~90ms steps (v6.10). */
.reveal-ov.landed .reveal-rows .sheet-row:nth-child(2){animation-delay:.09s}
.reveal-ov.landed .reveal-rows .sheet-row:nth-child(3){animation-delay:.18s}
/* Upgrade sheet live next-drop countdown sits inline after the note. */
.up-cd{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- v6.15: collectible (NFT) usernames ----------
   The DM receipt card mirrors the golden premium card's anatomy with a
   violet gem treatment (collectible identity, not money). The IDs
   sheet rows reuse the info-card rhythm; no badge or marker exists
   anywhere else — a collectible username renders exactly like a basic
   one (Telegram parity). */
.nft-card{width:min(320px,76%);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(155deg,#4c1d95,#6d28d9 55%,#7c3aed);color:#f3efff;
  box-shadow:var(--shadow-2),0 0 22px rgba(124,58,237,.35)}
.nft-medal{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:center;color:#e9d5ff;position:relative;z-index:1}
.nft-medal .ic{width:42px;height:42px}
.nft-name{font-size:var(--fs-lg);font-weight:var(--fw-bold);position:relative;z-index:1}
.nft-head{font-size:var(--fs-md);font-weight:var(--fw-bold);position:relative;z-index:1;text-shadow:0 1px 6px rgba(46,16,101,.4)}
.nft-tag{display:inline-flex;align-items:center;background:rgba(30,10,70,.32);color:#e9d5ff;
  padding:4px 12px;border-radius:var(--radius-full);font-size:var(--fs-sm);position:relative;z-index:1}
.ids-entry{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:12px 14px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  color:var(--color-text);cursor:pointer;text-align:start;font:inherit}
.ids-entry-ic{color:#8b5cf6;display:inline-flex}
.ids-entry-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.ids-entry-tx small{color:var(--color-text-2)}
.ids-count{font-weight:var(--fw-bold);color:var(--color-text-2)}
.ids-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--color-border)}
.ids-row:last-child{border-bottom:none}
.ids-basic-row{cursor:default}
.ids-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ids-main small{color:var(--color-text-2)}
.ids-gem{color:#8b5cf6;display:inline-flex;flex:none}
.ids-gem.basic{color:var(--color-text-2)}
.ids-state{font-size:var(--fs-sm);padding:3px 10px;border-radius:var(--radius-full);
  background:var(--color-primary);color:#fff;flex:none}
.ids-state.alt{background:var(--color-surface-2);color:var(--color-text-2)}
.na-rot-up{display:inline-flex;transform:rotate(-90deg)}
.na-rot-dn{display:inline-flex;transform:rotate(90deg)}
.nft-name-in{width:180px !important;text-align:left !important;font-weight:var(--fw-medium)}

/* ---------- v6.22: animated emoji (Telegram's AnimatedEmoji TGS set) ----------
   A supported emoji inside text is swapped for a fixed 1.25em box (Web A
   --emoji-size) so first paint is text-first with NO layout shift: the
   system glyph shows inside the box until the Lottie player is ready,
   then the player covers it. The standalone (single-emoji) variant rides
   the existing .big-emoji ladder via --be-size. */
.ae,.ae-big{position:relative;line-height:1}
/* v6.26 (Ali's bug: emoji sliding BEHIND Persian text): every inline
   non-text object — the animated-emoji box AND entity anchors — is an
   explicit bidi ISOLATE, so the bidi algorithm can never reorder it
   across an RTL run boundary and paint it over/under the Persian
   glyphs; the box's fixed 1.25em inline-block geometry does the rest. */
.ae,.ae-big,a.ent,span.ent{unicode-bidi:isolate}
.ae{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.22em}
.ae-big{display:block;width:var(--be-size,7rem);height:var(--be-size,7rem);cursor:pointer}
.ae .ae-g,.ae-big .ae-g{display:block;text-align:center}
.ae .ae-g{font-size:1em;line-height:1.25em}
.ae-big .ae-g{font-size:calc(var(--be-size,7rem)*.9);line-height:var(--be-size,7rem)}
.ae .ae-p,.ae-big .ae-p{position:absolute;inset:0;display:none}
.ae.on .ae-g,.ae-big.on .ae-g{visibility:hidden}
.ae.on .ae-p,.ae-big.on .ae-p{display:block}
.ae .ae-p svg,.ae-big .ae-p svg{width:100%!important;height:100%!important;display:block}

/* ---------- v6.27: chat administration ---------- */
/* slow-mode countdown: a slim quiet line above the composer */
.slow-bar{background:var(--color-surface);border-top:1px solid var(--color-border);color:var(--color-muted);
  text-align:center;padding:7px var(--space-3);font-size:var(--fs-sm)}
/* chat description under the info hero */
.ci-desc{margin:10px 2px 2px;font-size:var(--fs-md);color:var(--color-text);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
/* role / restriction chips inside member rows */
.ci-role{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--radius-full);
  background:var(--color-surface-3);color:var(--color-text-2);font-size:var(--fs-xs);font-weight:var(--fw-medium);vertical-align:1px}
.ci-role .ic{width:11px;height:11px}
.ci-role.owner{color:var(--color-gold-bright)}
.ci-role.restr{color:var(--color-error)}
.ci-member{cursor:pointer}
.ci-photo-row{display:flex;align-items:center;gap:var(--space-3);margin-top:12px}
.ci-photo-row .avatar{width:56px;height:56px;flex:none}
.ci-invites .list-row .btn{flex:none}

/* ---------- v6.28 (admin extension wave) ---------- */
/* join-request banner — Telegram's bar over the chat while requests
   pend; same surface anatomy as the pinned bar */
.jr-banner{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);
  background:var(--color-primary-soft);border-bottom:1px solid var(--color-border);position:relative;z-index:5;
  cursor:pointer;color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  animation:pinbarIn var(--dur-layer) var(--curve-layer)}
.jr-banner .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-banner .chev{opacity:.7}
/* ephemeral («only visible to you») caption under only-for rows */
.only-for-note{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:var(--fs-xs);
  color:var(--color-muted);font-style:italic}
.only-for-note.center{justify-content:center;margin:2px auto 0}
.only-for-note .ic{width:12px;height:12px}
/* reaction chips with reactor mini-avatars (total ≤ 3) */
.rx-chip .rx-avs{display:inline-flex;align-items:center;margin-inline-start:2px}
.rx-chip .rx-avs .avatar{width:18px;height:18px;border:1.5px solid var(--color-surface);margin-inline-start:-5px}
.rx-chip .rx-avs .avatar:first-child{margin-inline-start:0}
/* disallowed reactions in the picker (chat allowed-reactions) */
.rx-off{opacity:.38;filter:grayscale(.6);cursor:not-allowed}
/* chat-info count badge (pending join requests / welcome count) */
.ci-count{margin-inline-start:auto;background:var(--color-primary);color:#fff;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-full);
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
/* checkbox rows (bulk-moderation trio, allowed-reaction types) */
.check-row{display:flex;align-items:center;gap:var(--space-3);padding:8px 0;cursor:pointer;font-size:var(--fs-sm)}
.check-row input{width:18px;height:18px;accent-color:var(--color-primary);flex:none}
#cs-rx-types{display:flex;gap:var(--space-2);flex-wrap:wrap}
#cs-rx-types .check-row{padding:4px 0}
#cs-rx-types .rx-g{font-size:20px}
/* welcome editor slots */
.wc-slot{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:10px var(--space-3);margin-top:10px}
.wc-head{margin-bottom:6px;font-size:var(--fs-sm)}
.wc-media{margin:6px 0}
.wc-media-img{max-width:100%;max-height:160px;border-radius:var(--radius-md);display:block}
/* admin log */
.log-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;scrollbar-width:none}
.log-chips::-webkit-scrollbar{display:none}
.log-chips .chip{flex:none;padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--color-border);
  background:var(--color-surface);font-size:var(--fs-xs);cursor:pointer;color:var(--color-text-2)}
.log-chips .chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.log-row small{display:block;color:var(--color-muted);margin-top:2px}
/* QR sheet — dark modules on a white card in BOTH themes (Telegram) */
.qr-card{display:flex;justify-content:center;margin:14px 0 10px}
.qr-card canvas{background:#fff;padding:10px;border-radius:var(--radius-lg);box-shadow:0 2px 14px rgba(0,0,0,.14);max-width:78vw;height:auto}
@media (prefers-reduced-motion: reduce){ .jr-banner{animation:none} }

/* ================= v6.29: search wave ================= */
/* tabbed search surface (N-41) */
.search-view{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--color-bg)}
.search-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;scrollbar-width:none;flex:none}
.search-tabs::-webkit-scrollbar{display:none}
.search-tab{white-space:nowrap}
.search-body{flex:1;overflow-y:auto;min-height:0;padding-bottom:10px}
.sr-sec-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 6px;color:var(--color-muted);font-size:.85rem;font-weight:600}
.sr-clear{color:var(--color-primary);font-size:.85rem;padding:2px 4px}
.sr-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 12px;text-align:start;transition:background var(--dur-1)}
.sr-row:hover{background:var(--color-hover)}
.sr-row .avatar{width:48px;height:48px;flex:none}
.sr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sr-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sr-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-top small{color:var(--color-muted);flex:none;font-size:.78rem}
.sr-snip{color:var(--color-muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-snip mark{background:transparent;color:var(--color-primary);font-weight:600}
.sr-quick-row{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;scrollbar-width:none}
.sr-quick-row::-webkit-scrollbar{display:none}
.sr-quick-it{display:flex;flex-direction:column;align-items:center;gap:4px;width:60px;flex:none;padding:2px 0}
.sr-quick-it .avatar{width:48px;height:48px}
.sr-quick-it small{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;color:var(--color-muted)}
.sr-recent{display:flex;align-items:center;gap:2px;padding:0 10px}
.sr-recent-q{flex:1;display:flex;align-items:center;gap:10px;padding:9px 6px;text-align:start;color:var(--color-text);min-width:0}
.sr-recent-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-recent-q .ic{color:var(--color-muted);flex:none}
.sr-more{display:block;margin:12px auto}
.sr-grid{padding:2px}
/* chat list completion */
.ci-lastrow{display:flex;align-items:center;gap:6px;min-width:0}
.ci-lastrow .ci-last{flex:1;min-width:0}
.ci-thumb{width:20px;height:20px;border-radius:4px;object-fit:cover;flex:none;background:var(--color-surface-3)}
.ci-typing{color:var(--color-primary)}
.ci-ticks.read svg{width:19px}
.unread-badge.rx{background:var(--color-error);gap:3px}
.unread-badge.rx .ic{width:12px;height:12px}
.ci-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-badge-muted);display:inline-flex;align-items:center;justify-content:center;color:transparent;flex:none;transition:background var(--dur-1),border-color var(--dur-1)}
.ci-check .ic{width:13px;height:13px}
.ci-check.on{background:var(--color-active);border-color:var(--color-active);color:#fff}
.chat-item.selected{background:var(--color-hover)}
.chat-sel-bar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.chat-sel-bar b{font-size:.95rem}
.back-btn{position:relative}
.back-badge{position:absolute;top:-3px;inset-inline-end:-5px;background:var(--color-active);color:#fff;font-size:.68rem;font-weight:var(--fw-medium);min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:flex;align-items:center;justify-content:center}
body.density-compact .chat-item{padding-top:5px;padding-bottom:5px}
body.density-compact .chat-item .avatar{width:44px;height:44px;font-size:1.05rem}
/* in-chat search bar */
.chat-search-bar{display:flex;align-items:center;gap:2px;padding:6px 8px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.chat-search-bar input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:inherit;color:var(--color-text);padding:6px 2px}
.cs-count{color:var(--color-muted);font-size:.85rem;white-space:nowrap;padding:0 4px}
.chat-search-bar .icon-btn:disabled{opacity:.32}
.cs-up-ic{transform:rotate(180deg)}
.cs-chips{display:flex;align-items:center;gap:6px;padding:6px 10px;overflow-x:auto;background:var(--color-surface);border-bottom:1px solid var(--color-border);scrollbar-width:none}
.cs-chips::-webkit-scrollbar{display:none}
#cs-kind-chips{display:inline-flex;gap:6px}
#cs-from{display:inline-flex;align-items:center;gap:5px;flex:none}
/* jump FABs (N-45) — stacked above the scroll-down button */
.jump-fab{position:absolute;inset-inline-end:18px;width:44px;height:44px;border-radius:50%;background:var(--color-surface);box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;color:var(--color-primary);z-index:6;border:1px solid var(--color-border)}
.fab-react{bottom:66px;color:var(--color-error)}
.fab-mention{bottom:118px}
.fab-n{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--color-active);color:#fff;font-size:.66rem;font-weight:var(--fw-medium);min-width:17px;height:17px;border-radius:9px;padding:0 4px;display:flex;align-items:center;justify-content:center}
.fab-react .fab-n{background:var(--color-error)}
/* saved tags (N-40) */
.saved-tags-bar{display:flex;gap:6px;padding:6px 12px;overflow-x:auto;scrollbar-width:none;flex:none}
.saved-tags-bar::-webkit-scrollbar{display:none}
.saved-tags-bar .fchip{display:inline-flex;align-items:center;gap:5px}
.tag-chips{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{display:inline-flex;align-items:center;gap:2px;background:var(--color-surface-2);border-radius:var(--radius-full);padding:4px 4px 4px 6px;padding-inline-start:11px;font-size:.88rem}
.tag-chip button{display:inline-flex;padding:2px;color:var(--color-muted)}
@media (prefers-reduced-motion: reduce){ .ci-check,.sr-row,.jump-fab{transition:none} }
.sr-people{padding:2px 8px}
.sr-chatrows{padding:0 2px}

/* ================= v6.30: privacy & security ================= */
:root{ --color-verified:#3aa2e6; }
.vbadge{ width:1.05em; height:1.05em; color:var(--color-verified); vertical-align:-0.18em; margin-inline-start:.22em; flex:none; }
#pass-lock{ position:fixed; inset:0; z-index:400; background:var(--color-background); display:flex; align-items:center; justify-content:center; }
.pl-box{ text-align:center; padding:24px; width:min(320px,92vw); }
.pl-ic{ width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--color-surface-2); display:flex; align-items:center; justify-content:center; color:var(--color-link); }
.pl-ic .ic{ width:30px; height:30px; }
.pl-title{ font-size:1.1rem; font-weight:600; margin-bottom:18px; color:var(--color-text); }
.pl-dots{ display:flex; gap:14px; justify-content:center; margin-bottom:26px; }
.pl-dots i{ width:13px; height:13px; border-radius:50%; border:2px solid var(--color-muted); box-sizing:border-box; }
.pl-dots i.on{ background:var(--color-link); border-color:var(--color-link); }
.pl-dots.shake{ animation:pl-shake .4s ease; }
@keyframes pl-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.pl-pad{ display:grid; grid-template-columns:repeat(3,72px); gap:12px; justify-content:center; margin-bottom:20px; }
.pl-pad button{ height:64px; border-radius:50%; border:0; background:var(--color-surface-2); color:var(--color-text); font-size:1.45rem; cursor:pointer; }
.pl-pad button:active{ background:var(--color-link); color:#fff; }
.pl-pad .pl-fn{ font-size:1rem; color:var(--color-muted); }
#pl-forgot{ color:var(--color-link); font-size:.9rem; }
.pc-sheet{ text-align:center; }
.pc-sheet .pl-dots{ margin-top:18px; }
.pc-sheet .pl-pad{ margin-bottom:6px; }
.lk-code{ font-size:2rem; font-weight:700; letter-spacing:.35em; text-align:center; padding:14px 6px; background:var(--color-surface-2); border-radius:12px; margin:12px 0; color:var(--color-text); }
.qr-box{ display:flex; justify-content:center; margin:10px 0; }
.qr-box canvas{ background:#fff; border-radius:12px; padding:10px; }
@media (prefers-reduced-motion: reduce){ .pl-dots.shake{ animation:none; } }

/* ---------- v6.31 (calls & live wave) ---------- */
/* voice banner in a group/channel while a session is live/scheduled —
   same surface anatomy as the v6.28 join-request banner */
.voice-bar{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);
  background:var(--color-primary-soft);border-bottom:1px solid var(--color-border);position:relative;z-index:5;
  color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  animation:pinbarIn var(--dur-layer) var(--curve-layer)}
.voice-bar>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-bar .btn{flex:none}

/* 1-to-1 call screen — a dark stage in BOTH themes (Telegram's calls
   are always on a dark backdrop); colours derive from tokens */
.call-screen{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 42%,#0b1210),color-mix(in srgb,var(--color-primary) 14%,#060a09));
  animation:fadeIn var(--dur-layer) var(--curve-layer)}
.call-screen.hidden{display:none}
.call-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.call-remote-video.hidden{display:none}
.call-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 34%,transparent 62%,rgba(0,0,0,.5));
  opacity:1;transition:opacity var(--dur-layer) var(--curve-layer);pointer-events:none}
.call-screen.has-video .call-stage{opacity:0;pointer-events:none;transition:opacity var(--dur-layer) var(--curve-layer)}
.call-screen.chrome-off .call-shade,.call-screen.chrome-off .call-top,.call-screen.chrome-off .call-controls{opacity:0;pointer-events:none}
.call-top{position:relative;z-index:3;display:flex;align-items:center;gap:var(--space-2);
  padding:calc(10px + env(safe-area-inset-top)) var(--space-3) 6px;transition:opacity var(--dur-layer) var(--curve-layer)}
.call-top .grow{flex:1}
.call-icon-btn{width:40px;height:40px;border-radius:var(--radius-full);border:0;background:rgba(255,255,255,.14);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.call-icon-btn:active{background:rgba(255,255,255,.26)}
.call-stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:var(--space-4);text-align:center}
.call-stage .avatar.call-av{width:112px;height:112px;font-size:2.6rem;box-shadow:0 10px 34px rgba(0,0,0,.35)}
.call-peer-name{font-size:1.5rem;font-weight:var(--fw-semibold);line-height:1.25}
.call-state{font-size:var(--fs-md);opacity:.82;min-height:1.4em;font-variant-numeric:tabular-nums}
.call-key-peek{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:var(--radius-full);
  padding:6px 14px;font-size:1.05rem;letter-spacing:.35em;cursor:pointer}
.call-key-peek.hidden{display:none}
.call-local-video{position:absolute;z-index:3;top:calc(64px + env(safe-area-inset-top));inset-inline-end:14px;
  width:96px;height:136px;object-fit:cover;border-radius:var(--radius-lg);background:#000;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transform:scaleX(-1)}
.call-local-video.hidden{display:none}
.call-controls{position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding:var(--space-3) var(--space-4) calc(20px + env(safe-area-inset-bottom));transition:opacity var(--dur-layer) var(--curve-layer)}
.call-btn{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#fff;cursor:pointer;min-width:62px}
.call-btn small{font-size:var(--fs-xs);opacity:.85}
.call-btn-ic{width:58px;height:58px;border-radius:var(--radius-full);background:rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-2),transform var(--dur-menu) var(--curve-ease-out-back)}
.call-btn-ic .ic{width:26px;height:26px}
.call-btn:active .call-btn-ic{transform:scale(.92)}
.call-btn.on .call-btn-ic{background:#fff;color:var(--color-text)}
.call-btn.decline .call-btn-ic{background:var(--color-error);color:#fff}
.call-btn.decline .call-btn-ic .ic{transform:rotate(135deg)}
.call-btn.accept .call-btn-ic{background:var(--color-active);color:#fff}
/* encryption-key sheet */
.call-key-body{text-align:center;padding:6px 0 2px}
.call-key-emojis{font-size:2.5rem;letter-spacing:.3em;padding:10px 0 14px}
.call-key-hex{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm);letter-spacing:.12em;
  word-break:break-all;background:var(--color-surface-2);border-radius:var(--radius-md);padding:12px;margin-bottom:12px}
/* mini bar (N-108) — the call survives navigation as a floating pill */
.call-minibar{position:fixed;z-index:245;top:calc(10px + env(safe-area-inset-top));inset-inline-start:50%;transform:translateX(50%);
  display:flex;align-items:center;gap:10px;background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius-full);padding:5px 6px 5px 12px;
  box-shadow:var(--shadow-pop);cursor:pointer;max-width:min(92vw,430px);
  animation:pinbarIn var(--dur-layer) var(--curve-layer)}
.call-minibar.hidden{display:none}
.call-minibar .avatar{width:34px;height:34px;font-size:.85rem}
.call-minibar b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.call-minibar span{font-size:var(--fs-xs);color:var(--color-muted);font-variant-numeric:tabular-nums}
.call-minibar .mb-end{width:34px;height:34px;border-radius:var(--radius-full);border:0;flex:none;
  background:var(--color-error);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.call-minibar .mb-end .ic{transform:rotate(135deg);width:17px;height:17px}
[dir="rtl"] .call-minibar{transform:translateX(-50%)}
/* calls history view */
.call-row{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);border-bottom:1px solid var(--color-border)}
.call-row .avatar{width:46px;height:46px;font-size:1.05rem}
.call-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.call-row-main b{font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-row-main small{display:inline-flex;align-items:center;gap:4px;color:var(--color-muted);font-size:var(--fs-xs)}
.call-row-main small .ic.sm{width:13px;height:13px}
.call-row-main small.missed{color:var(--color-error);font-weight:var(--fw-semibold)}
.call-row-time{color:var(--color-muted);font-size:var(--fs-xs);white-space:nowrap}
/* quality rating sheet */
.rate-stars{display:flex;justify-content:center;gap:6px;padding:8px 0 12px}
.rate-star{border:0;background:none;cursor:pointer;color:var(--color-border-strong);padding:2px}
.rate-star .ic{width:32px;height:32px}
.rate-star.on{color:var(--color-gold-bright)}
.rate-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
/* group voice screen */
.voice-screen{position:fixed;inset:0;z-index:240;background:var(--color-surface);color:var(--color-text);
  display:flex;flex-direction:column;animation:fadeIn var(--dur-layer) var(--curve-layer)}
.voice-screen.hidden{display:none}
.voice-head{display:flex;align-items:center;gap:var(--space-2);padding:calc(10px + env(safe-area-inset-top)) var(--space-3) 8px;
  border-bottom:1px solid var(--color-border)}
.voice-head-titles{flex:1;min-width:0}
.voice-head-titles b{display:block;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-head-titles small{color:var(--color-muted);font-size:var(--fs-xs)}
.voice-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:var(--space-3);padding:var(--space-4);align-content:start}
.voice-grid .list-state{grid-column:1/-1}
.voice-tile{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:10px 4px;border-radius:var(--radius-lg)}
.voice-tile-av .avatar.voice-av,.voice-tile .avatar.voice-av{width:64px;height:64px;font-size:1.4rem;
  transition:box-shadow var(--dur-2)}
.voice-tile.speaking .avatar.voice-av{box-shadow:0 0 0 3px var(--color-online-dot),0 0 0 6px color-mix(in srgb,var(--color-online-dot) 30%,transparent)}
.voice-tile-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-tile-state{display:inline-flex;align-items:center;gap:3px;color:var(--color-muted);font-size:var(--fs-xs)}
.voice-controls{display:flex;justify-content:center;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding:var(--space-3) var(--space-4) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--color-border)}
.voice-controls .call-btn{color:var(--color-text)}
.voice-controls .call-btn-ic{background:var(--color-surface-2);color:var(--color-text)}
.voice-controls .call-btn.on .call-btn-ic{background:var(--color-primary);color:#fff}
.voice-controls .call-btn.decline .call-btn-ic{background:var(--color-error);color:#fff}
.voice-controls .call-btn.accept .call-btn-ic{background:var(--color-active);color:#fff}
.voice-comments{border-top:1px solid var(--color-border);display:flex;flex-direction:column;max-height:38vh;background:var(--color-surface)}
.voice-comments.hidden{display:none}
.voice-comments-list{overflow-y:auto;padding:10px var(--space-3);display:flex;flex-direction:column;gap:7px}
.voice-comment{display:flex;gap:7px;font-size:var(--fs-sm);align-items:baseline}
.voice-comment b{flex:none;color:var(--color-primary)}
.voice-comment span{word-break:break-word}
.voice-comment-bar{display:flex;gap:8px;padding:8px var(--space-3) calc(8px + env(safe-area-inset-bottom))}
.voice-comment-bar input{flex:1}
@media (prefers-reduced-motion: reduce){
  .call-screen,.voice-screen,.voice-bar,.call-minibar{animation:none}
  .call-shade,.call-screen.has-video .call-stage,.call-top,.call-controls{transition:none}
}

/* ================= v6.32: STORIES (Wave 8) ================= */
/* --- chat-list story tray (N-32) → v6.35 PULL-DOWN DRAWER ---
   Ali (2026-11-08, with screenshots): the tray is a drawer tucked
   shut by default; a pull-down at the top of the chat list opens
   it, scrolling the list tucks it away. The v6.32 always-visible
   row rendered broken on his phone (items stacking, an
   accent-filled band clipping them) — the drawer is therefore
   hardened structurally: the closed state is a hard zero-height
   clip (no band can exist), the items scroller is a single
   non-wrapping flex row with fixed item geometry, and the surface
   is the plain app surface, never the accent. */
.stories-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:0 14px;scrollbar-width:none;background:var(--color-surface);border-bottom:1px solid transparent;max-height:0;opacity:0;pointer-events:none;transition:max-height var(--dur-3) var(--curve-ease-out),padding var(--dur-3) var(--curve-ease-out),opacity var(--dur-2) var(--curve-ease-out)}
.stories-row::-webkit-scrollbar{display:none}
.stories-row.hidden{display:none}
.stories-row.open{max-height:104px;padding-top:10px;padding-bottom:6px;opacity:1;pointer-events:auto;border-bottom-color:var(--color-border)}
.stories-row .sr-item{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;flex:0 0 auto;width:64px;min-width:64px;color:var(--color-text)}
.stories-row .sr-name{display:block;text-align:center}
.sr-ring{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;padding:3px;background:transparent}
.sr-ring .avatar{width:54px;height:54px;box-shadow:0 0 0 2px var(--color-surface)}
.sr-ring.ring-unseen{background:conic-gradient(from 210deg,var(--color-active),#2bb3a3,var(--color-primary),var(--color-active))}
.sr-ring.ring-seen{background:var(--color-badge-muted)}
.sr-ring.ring-live{background:#e5484d;animation:srLivePulse 1.6s var(--curve-default) infinite}
.sr-ring.ring-muted{background:var(--color-badge-muted)}
.sr-item.muted .sr-ring,.sr-item.muted .sr-name{opacity:.55}
@keyframes srLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}55%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
.sr-plus{position:absolute;inset-inline-end:0;bottom:0;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--color-surface)}
.sr-plus .ic{width:12px;height:12px}
.sr-live{position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;background:#e5484d;color:#fff;font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:var(--radius-full);box-shadow:0 0 0 2px var(--color-surface)}
.sr-name{font-size:11px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-2)}
/* story rings on existing avatars (chat rows, profile heroes) */
.avatar-wrap.has-story{border-radius:50%;padding:2px}
.avatar-wrap.has-story .avatar{box-shadow:0 0 0 2px var(--color-surface)}
.avatar-wrap.has-story.ring-unseen,.avatar.has-story.ring-unseen{background:conic-gradient(from 210deg,var(--color-active),#2bb3a3,var(--color-primary),var(--color-active))}
.avatar-wrap.has-story.ring-seen,.avatar.has-story.ring-seen{background:var(--color-badge-muted)}
.avatar-wrap.has-story.ring-live,.avatar.has-story.ring-live{background:#e5484d}
.avatar.has-story{border-radius:50%}
/* --- story viewer --- */
.story-viewer{position:fixed;inset:0;z-index:260;background:#000;color:#fff;display:flex;flex-direction:column;animation:fadeIn var(--dur-2) var(--curve-ease-out)}
.story-viewer.hidden{display:none}
.sv-stage{position:relative;flex:1;overflow:hidden;touch-action:none}
.sv-segs{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:4px;z-index:5}
.sv-seg{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-seg>i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.sv-head{position:absolute;top:calc(18px + env(safe-area-inset-top));left:10px;right:6px;display:flex;align-items:center;gap:8px;z-index:6}
.sv-author{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sv-author b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-time{color:rgba(255,255,255,.75);font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sv-x{color:#fff}
.sv-media{position:absolute;inset:0;display:grid;place-items:center}
.sv-img,.sv-vid{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.sv-tap{display:none}
.sv-live-tag{position:absolute;top:calc(52px + env(safe-area-inset-top));inset-inline-start:12px;z-index:6;background:#e5484d;color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:var(--radius-full)}
.sv-live-tag.static{position:static}
.sv-live-tag.hidden{display:none}
.sv-caption{position:absolute;left:14px;right:14px;bottom:12px;z-index:5;color:#fff;font-size:15px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.65);white-space:pre-wrap;word-break:break-word}
.sv-overlay{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none;white-space:pre-wrap;text-align:center}
.sv-ref-chip{position:absolute;top:calc(56px + env(safe-area-inset-top));inset-inline-start:12px;z-index:6;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.45);color:#fff;padding:5px 10px;border-radius:var(--radius-full);font-size:12px;backdrop-filter:blur(6px)}
.sv-ref-card-sm{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:4;width:min(78%,340px)}
.sv-msgcard{background:rgba(20,20,20,.55);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:16px;color:#fff;max-width:min(80%,340px);backdrop-filter:blur(8px);text-align:start}
.sv-msgcard img,.sv-msgcard video{width:100%;border-radius:12px;margin-bottom:8px;max-height:220px;object-fit:cover}
.sv-msgcard b{display:block;margin-bottom:4px}
.sv-msgcard p{margin:0;line-height:1.55;word-break:break-word}
.sv-foot{padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55));display:flex;flex-direction:column;gap:6px}
.sv-replyrow{display:flex;gap:8px;align-items:center}
.sv-replyrow input{flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);color:#fff;padding:10px 14px;outline:none}
.sv-replyrow input::placeholder{color:rgba(255,255,255,.65)}
.sv-replyrow .icon-btn{color:#fff}
.sv-actions{display:flex;align-items:center;gap:6px}
.sv-heart{background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.sv-heart.on{color:#e5484d}
.sv-heart.on .ic{fill:#e5484d}
.sv-quickrx{display:flex;gap:2px}
.sv-quickrx button{background:none;border:0;font-size:19px;padding:4px 5px;cursor:pointer;border-radius:50%;line-height:1}
.sv-quickrx button.on{background:rgba(255,255,255,.22)}
.sv-views{margin-inline-start:auto;display:flex;align-items:center;gap:5px;background:none;border:0;color:#fff;font-size:13px;cursor:pointer;padding:6px}
.sv-views.hidden{display:none}
/* story-quote card inside message bubbles */
.story-card{display:flex;align-items:center;gap:9px;width:100%;text-align:start;background:var(--color-surface-2);border:0;border-inline-start:3px solid var(--color-primary);border-radius:10px;padding:6px 9px;margin-bottom:6px;cursor:pointer;color:var(--color-text)}
.story-card.gone{display:flex;cursor:default;color:var(--color-text-2);font-size:13px}
.sc-thumb{width:38px;height:48px;object-fit:cover;border-radius:7px;flex:none}
.sc-meta{display:flex;flex-direction:column;min-width:0}
.sc-meta b{font-size:12px;color:var(--color-primary)}
.sc-meta small{color:var(--color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-note{color:var(--color-text-2);font-size:13px;line-height:1.6;margin:8px 0}
/* --- composer sheet --- */
.story-prev{display:grid;place-items:center;margin-bottom:10px}
.sp-prev-media{max-width:100%;max-height:300px;border-radius:14px;object-fit:contain}
.sp-prev-card{width:100%;border-radius:16px;padding:22px 14px;display:grid;place-items:center}
.sp-sec{margin-top:12px}
.sp-sec>b{display:block;margin-bottom:6px}
.sp-mode.on{color:var(--color-primary)}
.sp-chips{display:flex;gap:8px;flex-wrap:wrap}
.sp-chip{border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);border-radius:var(--radius-full);padding:6px 13px;cursor:pointer}
.sp-chip.on{border-color:var(--color-primary);color:var(--color-primary);font-weight:600}
.sp-bg{width:38px;height:38px;border-radius:50%;padding:0}
.pp-list{max-height:46vh;overflow:auto;margin:8px 0}
.pp-row{width:100%;text-align:start}
/* --- profile stories: albums + grids --- */
.prof-story-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.prof-sec{margin:14px 0 8px}
.album-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.album-row::-webkit-scrollbar{display:none}
.album-card{position:relative;display:flex;flex-direction:column;gap:3px;width:86px;flex:none;background:none;border:0;padding:0;cursor:pointer;color:var(--color-text);text-align:start}
.album-card img{width:86px;height:86px;object-fit:cover;border-radius:16px}
.album-ph{width:86px;height:86px;border-radius:16px;background:var(--color-surface-2);display:grid;place-items:center;color:var(--color-text-2)}
.album-card b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-card small{color:var(--color-text-2)}
.album-menu{position:absolute;top:4px;inset-inline-end:4px;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.stg-item{position:relative;border:0;padding:0;background:var(--color-surface-2);aspect-ratio:3/4;overflow:hidden;cursor:pointer}
.stg-item img,.stg-item video{width:100%;height:100%;object-fit:cover;display:block}
.stg-bg{display:block;width:100%;height:100%}
.stg-exp{position:absolute;bottom:5px;inset-inline-start:5px;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.story-grid.pick .stg-item.picked{outline:3px solid var(--color-primary);outline-offset:-3px}
/* --- live story screen (N-104) --- */
.live-screen{position:fixed;inset:0;z-index:270;background:var(--color-surface);color:var(--color-text);display:flex;flex-direction:column;animation:fadeIn var(--dur-2) var(--curve-ease-out)}
.live-screen.hidden{display:none}
.live-stage{position:relative;flex:1;background:#000;display:grid;place-items:center;overflow:hidden;min-height:180px}
.lv-media{width:100%;height:100%;object-fit:contain}
.lv-float{position:absolute;bottom:12px;font-size:26px;pointer-events:none;animation:lvFloat 1.7s var(--curve-ease-out) forwards}
@keyframes lvFloat{0%{transform:translateY(0) scale(.7);opacity:0}18%{opacity:1}100%{transform:translateY(-46vh) scale(1.15);opacity:0}}
.live-waiting{padding:10px 14px;color:var(--color-warning);text-align:center}
.live-waiting.hidden{display:none}
.live-reactbar{display:flex;gap:4px;justify-content:center;padding:6px}
.live-reactbar button{background:var(--color-surface-2);border:1px solid var(--color-border);font-size:19px;padding:5px 10px;border-radius:var(--radius-full);cursor:pointer;line-height:1}
.lv-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--color-surface-2);color:var(--color-text);display:grid;place-items:center;cursor:pointer}
.lv-btn.danger{background:#e5484d;color:#fff}
.lv-btn.off{background:var(--color-error);color:#fff}
@media (prefers-reduced-motion: reduce){ .stories-row,.story-viewer,.live-screen{animation:none;transition:none} .sr-ring.ring-live{animation:none} .lv-float{animation-duration:.01s} }

/* ================= v6.33 (Wave 9) ================= */
/* custom emoji documents */
.ce{ display:inline-block; position:relative; width:1.25em; height:1.25em; vertical-align:-0.28em; }
.ce .ce-g{ font-size:1.05em; line-height:1.25em; }
.ce .ce-p{ position:absolute; inset:0; }
.ce .ce-p img, .ce .ce-p video, .ce .ce-p svg{ width:100%; height:100%; object-fit:contain; display:block; }
.ce.on .ce-g{ visibility:hidden; }
.ce.ce-big{ width:2.6em; height:2.6em; vertical-align:middle; }
.ce.ce-big .ce-g{ font-size:2.2em; line-height:2.6em; }
.ce.ce-rx{ width:1.15em; height:1.15em; vertical-align:-0.2em; }
.ce.ce-status{ width:1.1em; height:1.1em; }
.ce.ce-cell{ width:2em; height:2em; }
.ce.ce-cell .ce-g{ font-size:1.7em; line-height:2em; }
/* rich text */
.spoiler{ background:var(--color-border-strong,#888); color:transparent; border-radius:4px; padding:0 2px; cursor:pointer; filter:blur(3px); transition:filter .18s ease, background .18s ease; }
.spoiler *{ visibility:hidden; }
.spoiler.revealed{ background:color-mix(in srgb, currentColor 14%, transparent); color:inherit; filter:none; }
.spoiler.revealed *{ visibility:visible; }
.msg-code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; background:color-mix(in srgb, currentColor 12%, transparent); border-radius:4px; padding:0 4px; }
.msg-pre{ margin:6px 0; border-radius:10px; overflow:hidden; background:#1e1e2e; color:#e8e8f0; }
.msg-pre .pre-head{ display:flex; justify-content:space-between; align-items:center; padding:4px 10px; font-size:.72rem; opacity:.85; background:rgba(255,255,255,.06); }
.msg-pre .pre-copy{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; opacity:.85; }
.msg-pre pre{ margin:0; padding:8px 10px; overflow-x:auto; font-family:ui-monospace, Menlo, monospace; font-size:.85rem; text-align:left; }
.msg-quote{ margin:6px 0; padding:4px 10px; border-inline-start:3px solid var(--color-active,#3390ec); background:color-mix(in srgb, currentColor 6%, transparent); border-radius:6px; }
mark.rq-frag{ background:color-mix(in srgb, var(--color-active,#3390ec) 30%, transparent); color:inherit; border-radius:3px; padding:0 2px; }
/* polls / quizzes */
.poll{ min-width:230px; }
.poll-q{ font-weight:600; margin-bottom:4px; }
.poll-tags{ display:flex; gap:5px; margin-bottom:8px; }
.poll-tag{ font-size:.68rem; padding:1px 7px; border-radius:99px; background:color-mix(in srgb, currentColor 12%, transparent); opacity:.85; }
.poll-opts{ display:flex; flex-direction:column; gap:6px; }
.poll-opt{ position:relative; overflow:hidden; border:0; border-radius:9px; padding:7px 10px; text-align:start; cursor:pointer;
  background:color-mix(in srgb, currentColor 7%, transparent); color:inherit; font:inherit; width:100%; }
.poll-opt:disabled{ cursor:default; }
.poll-bar{ position:absolute; inset-inline-start:0; top:0; bottom:0; background:color-mix(in srgb, var(--color-active,#3390ec) 28%, transparent); transition:width .35s ease; }
.poll-opt.mine .poll-bar{ background:color-mix(in srgb, var(--color-active,#3390ec) 48%, transparent); }
.poll-opt-main{ position:relative; display:flex; align-items:center; gap:7px; }
.poll-check{ width:1em; display:inline-flex; }
.poll-opt-txt{ flex:1; }
.poll-pct{ font-variant-numeric:tabular-nums; }
.poll-opt.correct{ outline:2px solid #22b07d; }
.poll-opt.wrong{ outline:2px solid #e5484d; }
.poll-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:.75rem; opacity:.85; }
.poll-voters-btn, .poll-close-btn{ background:none; border:0; color:var(--color-active,#3390ec); font:inherit; cursor:pointer; padding:2px 4px; }
.quiz-expl{ margin-top:8px; font-size:.82rem; padding:6px 9px; border-radius:8px; background:color-mix(in srgb, currentColor 8%, transparent); display:flex; flex-direction:column; gap:2px; }
.pv-group{ margin-bottom:12px; } .pv-group > b{ display:block; margin-bottom:5px; }
/* to-dos */
.todo{ min-width:220px; }
.todo-title{ font-weight:600; margin-bottom:6px; }
.todo-item{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.todo-check{ width:20px; height:20px; flex:none; border-radius:6px; border:2px solid var(--color-border-strong,#999); background:transparent; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.todo-item.done .todo-check{ background:var(--color-active,#3390ec); border-color:var(--color-active,#3390ec); }
.todo-item.done .todo-txt{ text-decoration:line-through; opacity:.65; }
.todo-txt{ flex:1; overflow-wrap:anywhere; }
.todo-by{ font-size:.7rem; opacity:.7; }
.todo-add{ display:flex; gap:6px; margin-top:7px; }
.todo-add input{ flex:1; background:color-mix(in srgb, currentColor 8%, transparent); border:0; border-radius:8px; padding:6px 9px; color:inherit; font:inherit; }
.todo-add-btn{ border:0; border-radius:8px; padding:6px 12px; background:var(--color-active,#3390ec); color:#fff; cursor:pointer; font:inherit; }
/* games */
.game-text{ display:flex; align-items:center; gap:12px; }
.game-emoji{ font-size:3.2rem; line-height:1.1; }
.game-chip{ font-size:.8rem; padding:3px 10px; border-radius:99px; background:color-mix(in srgb, currentColor 12%, transparent); }
/* albums */
.album{ display:flex; flex-direction:column; gap:2px; max-width:420px; }
.album-row{ display:flex; gap:2px; max-height:300px; }
.album-cell{ position:relative; border:0; padding:0; overflow:hidden; cursor:pointer; background:var(--color-border,#ddd); min-width:0; }
.album-cell img, .album-cell video{ width:100%; height:100%; object-fit:cover; display:block; }
.album-cell:first-child{ border-start-start-radius:10px; border-end-start-radius:10px; }
.album-cell:last-child{ border-start-end-radius:10px; border-end-end-radius:10px; }
.album-cap{ position:absolute; inset-inline:0; bottom:0; padding:8px 6px 3px; font-size:.68rem; color:#fff; text-align:start;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-file{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%; color:inherit; }
.alb-view{ text-align:center; } .alb-view-media{ max-width:100%; max-height:66vh; border-radius:12px; }
.alb-view-nav{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.alb-dot{ border:0; border-radius:99px; padding:3px 10px; cursor:pointer; font:inherit; background:color-mix(in srgb, currentColor 10%, transparent); color:inherit; }
.alb-dot.on{ background:var(--color-active,#3390ec); color:#fff; }
/* round video notes */
.vnote-wrap{ position:relative; width:200px; height:200px; }
.video-note{ width:200px; height:200px; border-radius:50%; object-fit:cover; cursor:pointer; display:block; background:#000; }
.vnote-badge{ position:absolute; bottom:8px; inset-inline-end:8px; background:rgba(0,0,0,.5); color:#fff; border-radius:50%; padding:5px; display:flex; }
/* paid media */
.paid-lock{ position:relative; border-radius:12px; overflow:hidden; min-width:230px; }
.paid-preview{ width:100%; max-height:260px; object-fit:cover; display:block; filter:blur(14px); transform:scale(1.06); }
.paid-noimg{ height:150px; display:flex; align-items:center; justify-content:center; background:var(--color-border,#ccc); filter:none; transform:none; }
.paid-lock-ui{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.paid-lock-ic{ background:rgba(0,0,0,.45); border-radius:50%; padding:9px; display:flex; }
.paid-badge{ font-size:.72rem; opacity:.85; margin-bottom:5px; display:flex; align-items:center; gap:4px; }
/* link preview card */
.lp-card{ display:flex; gap:9px; margin-top:7px; padding:8px 10px; border-radius:10px; text-decoration:none; color:inherit;
  border-inline-start:3px solid var(--color-active,#3390ec); background:color-mix(in srgb, currentColor 6%, transparent); }
.lp-img{ width:52px; height:52px; border-radius:8px; object-fit:cover; flex:none; }
.lp-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.lp-site{ opacity:.75; font-size:.7rem; } .lp-title{ font-size:.88rem; }
.lp-desc{ font-size:.78rem; opacity:.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* selection callout */
#fmt-callout{ position:fixed; z-index:999; display:flex; gap:2px; padding:4px; border-radius:12px;
  background:var(--color-bg,#fff); box-shadow:0 6px 28px rgba(0,0,0,.28); border:1px solid var(--color-border,#ddd); }
#fmt-callout.hidden{ display:none; }
#fmt-callout button{ border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; font-weight:700;
  border-radius:8px; padding:5px 8px; display:flex; flex-direction:column; align-items:center; gap:0; }
#fmt-callout button small{ font-weight:400; font-size:.6rem; opacity:.75; }
#fmt-callout button:hover{ background:color-mix(in srgb, currentColor 10%, transparent); }
/* send menu + effects */
.fx-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; margin-top:10px; }
.fx-cell{ border:0; border-radius:14px; padding:12px 6px; cursor:pointer; font:inherit; color:inherit;
  background:color-mix(in srgb, currentColor 7%, transparent); display:flex; flex-direction:column; align-items:center; gap:4px; }
.fx-cell.sel{ outline:2px solid var(--color-active,#3390ec); }
.fx-em{ font-size:1.7rem; }
.fx-overlay{ position:fixed; inset:0; z-index:2000; pointer-events:none; overflow:hidden; transition:opacity .6s ease; }
.fx-overlay.out{ opacity:0; }
.fx-p{ position:absolute; top:-8%; animation:fx-fall 2.4s ease-in forwards; }
@keyframes fx-fall{ to{ transform:translateY(115vh) rotate(50deg); } }
@media (prefers-reduced-motion: reduce){ .fx-overlay{ display:none; } .spoiler{ filter:none; } }
/* emoji panel completion */
.sm-emoji-wrap{ display:flex; flex-direction:column; min-height:0; }
.sm-cats{ display:flex; gap:2px; padding:4px 8px; overflow-x:auto; flex:none; }
.sm-cat{ border:0; background:transparent; font-size:1.05rem; cursor:pointer; border-radius:8px; padding:4px 7px; opacity:.65; }
.sm-cat.active{ opacity:1; background:color-mix(in srgb, currentColor 12%, transparent); }
.sm-emoji-sections{ overflow-y:auto; min-height:0; }
.sm-sec-title{ position:sticky; top:0; z-index:1; padding:5px 12px; font-size:.74rem; font-weight:600;
  background:var(--color-bg,#fff); opacity:.9; }
.sm-ce-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:4px; padding:4px 8px; }
.sm-ce-cell{ border:0; background:transparent; cursor:pointer; border-radius:10px; padding:5px; display:flex; align-items:center; justify-content:center; }
.sm-ce-cell:hover, .sm-ce-cell.sel{ background:color-mix(in srgb, currentColor 10%, transparent); }
.sm-ce-hint{ padding:2px 12px 8px; }
/* premium hero / rich editor / boosts */
.premium-hero{ text-align:center; padding:8px 0 2px; }
.premium-hero .ph-gift{ font-size:2.4rem; }
.rte-bar{ display:flex; gap:2px; flex-wrap:wrap; margin-bottom:8px; }
.rte-bar button{ border:0; border-radius:8px; padding:5px 9px; cursor:pointer; font:inherit; font-weight:700;
  background:color-mix(in srgb, currentColor 8%, transparent); color:inherit; display:flex; flex-direction:column; align-items:center; }
.rte-bar button small{ font-weight:400; font-size:.6rem; opacity:.75; }
#rte-text{ width:100%; box-sizing:border-box; border-radius:12px; padding:10px; font:inherit; color:inherit;
  background:color-mix(in srgb, currentColor 5%, transparent); border:1px solid var(--color-border,#ddd); }
.boost-box{ margin-top:12px; padding:12px; border-radius:14px; background:color-mix(in srgb, var(--color-active,#3390ec) 8%, transparent); }
.boost-head{ display:flex; justify-content:space-between; align-items:center; }
.color-swatches{ display:flex; gap:8px; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:inherit; background:transparent; }
.swatch.sel{ border-color:var(--color-active,#3390ec); }
.seg-row{ display:flex; gap:6px; margin-bottom:10px; }
.seg{ flex:1; border:0; border-radius:9px; padding:7px; cursor:pointer; font:inherit; color:inherit; background:color-mix(in srgb, currentColor 8%, transparent); }
.seg.on{ background:var(--color-active,#3390ec); color:#fff; }
.pc-opt-row{ align-items:center; gap:6px; margin-bottom:6px; }
.pc-opt-row input[type="text"]{ flex:1; }
.avatar-video{ object-fit:cover; }

/* ============================================================
   v6.34 — DESIGN-LANGUAGE OVERHAUL (docs/DESIGN_MASTER_PROMPT.md)
   Night Blue mode, bubble styles, peer colours, Appearance
   controls, bulletin/component restyles. Token-driven throughout;
   gold stays on the economy layer only (Ali's PLUS rule).
   ============================================================ */

/* --- Night Blue (§4.3 A): the second dark flavour. data-theme="dark"
   stays set (every legacy dark component rule keeps applying); the
   [data-mode="night"] block re-values the tokens to the navy set. --- */
html[data-theme="dark"][data-mode="night"]{
  --color-bg:#17212b;
  --color-surface:#242f3d;
  --color-surface-2:#242f3d;
  --color-surface-3:#202b36;
  --color-chat-bg:#0e1621;
  --color-text:#f5f5f5;
  --color-text-2:#6d7f8f;
  --color-muted:#5b6b7b;
  --color-hover:#202b36;
  --color-border:rgba(255,255,255,.06);
  --bubble-in:#182533;
  --bubble-in-meta:#6d7f8f;
  --color-link:color-mix(in srgb,var(--color-primary) 45%,#ffffff);
  --color-link-in:color-mix(in srgb,var(--color-primary) 45%,#ffffff);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 18px rgba(0,0,0,.45);
  --shadow-pop:0 10px 34px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}

/* --- Bubble styles (§4.2/§9): Classic / Azure × Day / Dark / Night.
   Day Classic is the :root default above; the tail wedge fills with
   --bubble-out-bot, so it follows the style automatically. --- */
html[data-bubble="azure"]{
  --bubble-out-top:color-mix(in srgb,var(--color-primary) 88%,#ffffff);
  --bubble-out-bot:var(--color-primary);
  --bubble-out-meta:rgba(255,255,255,.72);
  --color-accent-own:#ffffff;
}
html[data-bubble="azure"] .msg-row.mine .bubble{color:#ffffff}
html[data-bubble="azure"] .msg-row.mine .bubble a{color:#ffffff;text-decoration:underline}
html[data-bubble="azure"] .msg-row.mine .bubble .reply-quote{--rq:rgba(255,255,255,.9);background:rgba(255,255,255,.16)}
html[data-theme="dark"][data-bubble="azure"]{
  --bubble-out-top:color-mix(in srgb,var(--color-primary) 78%,#ffffff);
}
html[data-theme="dark"] .msg-row.mine .bubble{color:#ffffff}
html[data-theme="dark"] .msg-row.mine .bubble a{color:color-mix(in srgb,var(--color-primary) 35%,#ffffff)}
html[data-theme="dark"] .msg-row.mine .bubble .reply-quote{background:rgba(255,255,255,.13)}
html[data-theme="dark"][data-mode="night"][data-bubble="classic"]{
  --bubble-out-top:#2b5278;--bubble-out-bot:#2b5278;
  --bubble-out-meta:#7da8d3;--color-accent-own:#8fd1ff;
}
html[data-theme="dark"][data-mode="night"][data-bubble="azure"]{
  --bubble-out-top:#3d6ea5;--bubble-out-bot:#5288c1;
  --bubble-out-meta:rgba(255,255,255,.72);--color-accent-own:#ffffff;
}
html[data-theme="dark"][data-mode="night"] .msg-row.mine .bubble a{color:#8fd1ff}

/* --- Bubble geometry from the Appearance sliders (§4.9/§9) --- */
.bubble{border-radius:var(--bubble-r)}
.bubble .text{font-size:var(--msg-fs);line-height:1.35}
html[lang="fa"] .bubble .text{line-height:1.55}
.ci-last{font-size:calc(var(--msg-fs) - 1.5px)}
.album .album-cell:not(:first-child):not(:last-child){border-radius:5px}

/* --- Peer colours (§4.5): group sender names; avatar gradients are
   painted inline by avGrad() from the same 7-colour order.
   Dark values are the light set lifted ~25% (§4.5 dark rule). --- */
.pn0{color:#cc5049}.pn1{color:#d67722}.pn2{color:#955cdb}.pn3{color:#40a920}
.pn4{color:#309eba}.pn5{color:#368ad1}.pn6{color:#c7508b}
html[data-theme="dark"] .pn0{color:#e88b84}html[data-theme="dark"] .pn1{color:#efa55c}
html[data-theme="dark"] .pn2{color:#bc97e8}html[data-theme="dark"] .pn3{color:#74cc5c}
html[data-theme="dark"] .pn4{color:#63c3d8}html[data-theme="dark"] .pn5{color:#6fade4}
html[data-theme="dark"] .pn6{color:#de85b0}

/* --- Chat list (§7.4): unread pill = accent; muted stays grey --- */
.unread-badge{background:var(--color-primary)}
.unread-badge.muted{background:var(--color-badge-muted)}

/* --- Date / service pills over the wallpaper: overlay chip (§4.6) --- */
.day-sep,.system-msg{background:var(--overlay-chip-bg);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.unread-sep{background:var(--color-primary-soft);color:var(--color-primary)}

/* --- Bulletin toast (§5.11): dark bar, leading glyph, Undo slot --- */
.toast{background:rgba(33,33,33,.95);border-radius:12px;display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;box-shadow:var(--shadow-pop);text-align:start}
.toast .t-ic{display:inline-flex;flex:none;color:#6ab3f3}
.toast .t-ic svg{width:18px;height:18px}
.toast.err{background:rgba(74,28,32,.97)}
.toast.err .t-ic{color:#ff9d97}
.toast .t-undo{flex:none;border:0;background:none;color:#6ab3f3;font:inherit;font-weight:var(--fw-semibold);cursor:pointer;padding:2px 4px}
html[data-theme="dark"] .toast{background:rgba(48,48,52,.97)}

/* --- Composer (§7.7): mic <-> send morph pop --- */
@keyframes sendPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
.composer.has-text .send-btn{animation:sendPop var(--dur-2) var(--curve-ease-out-back)}

/* --- Settings (§7.10): grouped background, surface cards, accent
   section headers, grey footers, destructive rows stay red --- */
.settings-view{background:var(--color-surface-2)}
.settings-profile{background:var(--color-surface);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}
.set-group{background:var(--color-surface)}
.set-head{font-size:.92rem;font-weight:var(--fw-semibold);color:var(--color-primary);padding:0 var(--space-1) 8px}
.set-foot{font-size:.83rem;color:var(--color-text-2);line-height:1.5;padding:8px var(--space-1) 0}

/* --- Profile action tiles (§5.2/§7.9): icon over label --- */
.prof-actions-row .btn{flex-direction:column;gap:5px;height:62px;border-radius:14px;font-size:.8rem;padding:8px 4px}
.prof-actions-row .btn .ic{width:24px;height:24px;color:var(--color-primary)}

/* --- Reaction chips (§5.5): my reaction = solid accent --- */
.rx-chip.mine:not(.paid){background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* --- Link preview (§7.6): accent bar + tint --- */
.lp-card{border-inline-start:3px solid var(--color-primary);background:var(--color-primary-soft)}

/* --- Calls (§7.13): slowly morphing gradient stage, 64px round
   buttons, pulsing rings while ringing --- */
.call-screen{background:linear-gradient(160deg,#2aabee 0%,#5b5bd6 52%,#8774e1 100%);background-size:190% 190%;
  animation:callMorph 16s ease-in-out infinite alternate}
@keyframes callMorph{from{background-position:0% 15%}to{background-position:100% 85%}}
.call-btn-ic{width:64px;height:64px}
.call-btn-ic .ic{width:28px;height:28px}
.call-peer-name{font-size:1.75rem;font-weight:var(--fw-bold)}
.call-stage .avatar.call-av{animation:callPulse 2.2s var(--curve-ease-out) infinite}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.28),0 10px 34px rgba(0,0,0,.35)}
  70%{box-shadow:0 0 0 26px rgba(255,255,255,0),0 10px 34px rgba(0,0,0,.35)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 10px 34px rgba(0,0,0,.35)}}

/* --- Passcode / PIN keys (§7.19/§5.3): 68px round keys --- */
.pin-pad{grid-template-columns:repeat(3,68px);gap:12px}
.pin-key{width:68px;height:68px;border-radius:50%;background:color-mix(in srgb,var(--color-text) 6%,transparent);font-size:1.5rem}
.pin-key:active{background:color-mix(in srgb,var(--color-text) 13%,transparent)}

/* --- Appearance sheet (§9): live preview + controls --- */
.aprev{border-radius:14px;padding:16px 12px 10px;overflow:hidden;margin-bottom:var(--space-4);height:auto}
.aprev .msg-row{margin-bottom:8px}
.acc-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:4px 0 2px}
.acc-dot{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;flex:none;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.acc-dot.sel{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4.5px var(--color-text)}
.acc-dot input[type="color"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.appear-slider{display:flex;align-items:center;gap:12px;padding:2px 0 6px}
.appear-slider input[type="range"]{flex:1;accent-color:var(--color-primary);border:0;padding:0;background:none;box-shadow:none}
.appear-slider input[type="range"]:focus{box-shadow:none}
.appear-slider .aa-s{font-size:.8rem;color:var(--color-text-2)}
.appear-slider .aa-l{font-size:1.35rem;color:var(--color-text-2)}
.appear-val{font-size:var(--fs-sm);color:var(--color-muted);min-width:44px;text-align:end}

/* --- Empty states (§7.21): original in-code SVG illustration --- */
.empty-art{display:flex;justify-content:center;margin:6px 0 12px;color:var(--color-primary)}
.empty-art svg{width:150px;height:auto}
.list-state .empty-art{margin-top:26px}
.chat-empty .empty-art svg{width:180px}

@media (prefers-reduced-motion: reduce){
  .call-screen{animation:none}
  .call-stage .avatar.call-av{animation:none}
  .composer.has-text .send-btn{animation:none}
}

/* ================= v6.35: CHAT PROFILE + EDIT screens =================
   Telegram anatomy on the v6.34 tokens (DESIGN_MASTER_PROMPT §5.2
   tiles / §5.7 cells / §7.9 profile / §7.10 rows): centered-avatar
   hero, neutral action tiles, grouped cards without section
   headers, accent trailing values, red destructive rows last. */
.cp-hero{position:relative;text-align:center;padding:6px 0 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cp-hero .avatar{width:96px;height:96px;font-size:34px}
.cp-hero .pname{font-size:20px;font-weight:var(--fw-bold);margin-top:8px;display:flex;align-items:center;gap:6px}
.cp-sub{color:var(--color-text-2);font-size:var(--fs-sm)}
.cp-tools{position:absolute;top:0;inset-inline-end:0;display:flex;gap:2px}
.cp-desc{margin-top:12px;background:var(--color-surface-2);border-radius:var(--radius-lg);padding:10px 12px;font-size:var(--fs-md);line-height:1.45;text-align:start}
.cp-desc .cp-desc-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cp-desc.open .cp-desc-text{display:block}
.cp-more{color:var(--color-primary);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.cp-linkrow{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--color-surface-2);border-radius:var(--radius-lg);padding:10px 12px;width:100%;border:0;color:var(--color-text);cursor:pointer;text-align:start}
.cp-linkrow .cp-link-ic{color:var(--color-text-2);display:inline-flex}
.cp-linkrow .grow{flex:1;min-width:0}
.cp-linkrow b{color:var(--color-link);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.cp-linkrow small{color:var(--color-text-2)}
.cp-linkrow .cp-qr{color:var(--color-text-2);display:inline-flex;padding:4px}
.cp-tiles{display:flex;gap:var(--space-2);margin-top:12px}
.cp-tile{flex:1 1 0;min-width:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:14px;min-height:60px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--color-text);font-size:12px;font-weight:var(--fw-medium);cursor:pointer}
.cp-tile .ic{width:23px;height:23px}
.cp-tile.danger{color:var(--color-error)}
.cp-addrow{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:14px;padding:12px;color:var(--color-text);cursor:pointer;font-weight:var(--fw-medium)}
.cp-addrow .ic{color:var(--color-primary)}
.cp-mgrow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--color-border);padding:12px 2px;color:var(--color-text);cursor:pointer;text-align:start}
.cp-mgrow:last-child{border-bottom:0}
.cp-mgrow .ic{color:var(--color-text-2)}
.cp-mgrow .grow{flex:1;min-width:0}
.cp-mgrow .cp-val{color:var(--color-primary);font-weight:var(--fw-medium)}
.cp-mg{margin-top:14px;background:var(--color-surface-2);border-radius:var(--radius-lg);padding:2px 12px}
.cp-tabs{display:flex;gap:2px;margin-top:14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--color-border)}
.cp-tabs::-webkit-scrollbar{display:none}
.cp-tab{flex:1 0 auto;background:none;border:0;padding:9px 10px;color:var(--color-text-2);font-weight:var(--fw-semibold);font-size:var(--fs-sm);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cp-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.cp-body{padding-top:10px;min-height:120px}
.cp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
.cp-chips::-webkit-scrollbar{display:none}
.cp-chip{flex:none;background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-full);padding:6px 12px;font-size:var(--fs-sm);cursor:pointer}
.cp-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.cp-cell{position:relative;aspect-ratio:3/4;background:var(--color-surface-2);border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:4px}
.cp-cell img,.cp-cell video{width:100%;height:100%;object-fit:cover;display:block}
.cp-cell .cp-views{position:absolute;bottom:4px;inset-inline-end:5px;color:#fff;font-size:11px;font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:3px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cp-cell .cp-views .ic{width:13px;height:13px}
.cp-cell .cp-live{position:absolute;top:5px;inset-inline-start:5px;background:#e5484d;color:#fff;font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:var(--radius-full)}
.cp-cell .cp-fileic{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-text-2)}
.cp-cell .cp-fileic .ic{width:30px;height:30px}
.cp-cell .cp-dur{position:absolute;bottom:4px;inset-inline-start:5px;color:#fff;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cp-poll{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:10px 12px;margin-bottom:8px;text-align:start}
.cp-poll b{display:block;margin-bottom:2px}
.cp-poll small{color:var(--color-text-2)}
.cp-link-item{display:flex;gap:8px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--color-border)}
.cp-link-item:last-child{border-bottom:0}
.cp-link-item .ic{color:var(--color-primary);flex:none}
.cp-link-item a{color:var(--color-link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* Edit screen: grouped cards, underlined name field, accent values */
.ed-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ed-top .grow{flex:1}
.ed-save{color:var(--color-primary);background:none;border:0;font-weight:var(--fw-bold);font-size:var(--fs-md);cursor:pointer;padding:6px 4px}
.ed-save[disabled]{color:var(--color-muted);cursor:default}
.ed-photo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 2px}
.ed-photo .avatar{width:96px;height:96px;font-size:34px}
.ed-namefield{display:flex;align-items:flex-end;gap:6px;width:100%;max-width:340px;border-bottom:2px solid var(--color-primary);padding-bottom:4px}
.ed-namefield input{flex:1;min-width:0;background:none;border:0;color:var(--color-text);font-size:17px;font-weight:var(--fw-semibold);text-align:center;outline:none}
.ed-namefield .icon-btn{color:var(--color-text-2)}
.ed-card{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:2px 12px;margin-top:12px}
.ed-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--color-border);padding:12px 2px;color:var(--color-text);cursor:pointer;text-align:start;font-size:var(--fs-md)}
.ed-row:last-child{border-bottom:0}
.ed-row .ic{color:var(--color-text-2);flex:none}
.ed-row .grow{flex:1;min-width:0}
.ed-row .ed-val{color:var(--color-primary);font-weight:var(--fw-medium);white-space:nowrap}
.ed-row .ed-chev{color:var(--color-muted);display:inline-flex}
.ed-row.danger{color:var(--color-error)}
.ed-row.danger .ic{color:var(--color-error)}
.ed-row .ed-dot{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid var(--color-border)}
.ed-row.static{cursor:default}
.ed-desc{width:100%;background:none;border:0;color:var(--color-text);font:inherit;resize:vertical;min-height:56px;outline:none;padding:10px 2px}
.ed-badge{background:#e5484d;color:#fff;font-size:10px;font-weight:700;border-radius:var(--radius-full);padding:1px 6px}
/* statistics */
.st-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.st-card{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:10px 6px;text-align:center}
.st-card b{display:block;font-size:19px}
.st-card small{color:var(--color-text-2)}
.st-bars{display:flex;align-items:flex-end;gap:2px;height:74px;margin-top:8px;padding:0 2px}
.st-bar{flex:1;background:var(--color-primary);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.st-bars-lbl{display:flex;justify-content:space-between;color:var(--color-muted);font-size:10px;margin-top:4px}
.st-legend{display:flex;gap:14px;color:var(--color-text-2);font-size:var(--fs-sm);margin-top:6px}
@media (prefers-reduced-motion: reduce){ .stories-row{transition:none} }