:root {
  --accent: var(--brand);
  --brand: #2AABEE;
  --brand-deep: #229ED9;
  --brand-soft: #D6F0FB;
  --brand-glow: rgba(42, 171, 238, 0.34);
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #F0F2F5;
  --text: #1C1C1E;
  --text-2: #5B6470;
  --line: #D1D5DB;
  --danger: #dc2626;
  --bubble-out: #EFFEDE;
  --bubble-in: #ffffff;
  --online: #4CAF50;
  --shadow: 0 8px 28px rgba(14, 22, 33, 0.08);
  --radius: 18px;
  --bubble-radius: 20px;
  --text-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --display: "Syne", "Manrope", system-ui, sans-serif;
  --header-h: 56px;
  --tabs-h: 58px;
  --tabs-dock-pad: 16px; /* floating pill vertical margins */
  --tabs-dock: calc(var(--tabs-h) + var(--tabs-dock-pad));
  --glass-blur: blur(22px) saturate(1.6);
  --glass-bg: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  /* Chat chrome (Android glassChrome ~72% light / ~50% dark) — wallpaper shows through. */
  --glass-chrome-bg: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --glass-chrome-blur: blur(28px) saturate(1.7);
  /* Floating pills / msg actions (tabs / composer language). */
  --glass-pill-bg: color-mix(in srgb, var(--bg-elevated) 30%, transparent);
  --glass-stroke: color-mix(in srgb, var(--line) 90%, transparent);
  --glass-shine: color-mix(in srgb, #ffffff 14%, transparent);
}

/* Self-hosted Syne — brand wordmark must match APK even before Google Fonts. */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  /* block: avoid Manrope flash so «Qchat» matches APK Syne (#14220) */
  font-display: block;
  src: url("/app/fonts/syne-700.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("/app/fonts/syne-800.woff2") format("woff2");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) {
    --bg: #0E1621;
    --bg-elevated: #17212B;
    --surface: #232E3C;
    --text: #F5F5F5;
    --text-2: #8E8E93;
    --line: #2F3A47;
    --bubble-out: #2B5278;
    --bubble-in: #182533;
    --brand-soft: #1B3A4F;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --glass-bg: color-mix(in srgb, #17212B 62%, transparent);
    --glass-bg-strong: color-mix(in srgb, #17212B 82%, transparent);
    --glass-chrome-bg: color-mix(in srgb, #17212B 50%, transparent);
    --glass-pill-bg: color-mix(in srgb, #17212B 28%, transparent);
    --glass-shine: color-mix(in srgb, #ffffff 6%, transparent);
  }
}

html[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #F0F2F5;
  --text: #1C1C1E;
  --text-2: #5B6470;
  --line: #D1D5DB;
  --bubble-out: #EFFEDE;
  --bubble-in: #ffffff;
  --brand-soft: #D6F0FB;
  --brand-glow: rgba(42, 171, 238, 0.36);
  --shadow: 0 8px 28px rgba(14, 22, 33, 0.10);
  --glass-bg: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
  --glass-chrome-bg: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --glass-pill-bg: color-mix(in srgb, var(--bg-elevated) 32%, transparent);
  --glass-stroke: color-mix(in srgb, var(--line) 95%, transparent);
}

html[data-theme="dark"] {
  --bg: #0E1621;
  --bg-elevated: #17212B;
  --surface: #232E3C;
  --text: #F5F5F5;
  --text-2: #8E8E93;
  --line: #2F3A47;
  --bubble-out: #2B5278;
  --bubble-in: #182533;
  --brand-soft: #1B3A4F;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-bg: color-mix(in srgb, #17212B 62%, transparent);
  --glass-bg-strong: color-mix(in srgb, #17212B 82%, transparent);
  --glass-chrome-bg: color-mix(in srgb, #17212B 50%, transparent);
  --glass-pill-bg: color-mix(in srgb, #17212B 28%, transparent);
  --glass-shine: color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme="qpay"] {
  --brand: #16a34a;
  --brand-deep: #15803d;
  --brand-soft: #14532d;
  --brand-glow: rgba(34, 197, 94, 0.18);
  --bg: #050508;
  --bg-elevated: #0b1a14;
  --surface: #12261c;
  --text: #f0fdf4;
  --text-2: #a7f3d0;
  --line: #1f3a2c;
  --bubble-out: #14532d;
  --bubble-in: #0f1f18;
  --online: #34d399;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-bg: color-mix(in srgb, #0b1a14 58%, transparent);
  --glass-bg-strong: color-mix(in srgb, #0b1a14 80%, transparent);
  --glass-chrome-bg: color-mix(in srgb, #0b1a14 48%, transparent);
  --glass-pill-bg: color-mix(in srgb, #0b1a14 28%, transparent);
  --glass-shine: color-mix(in srgb, #86efac 8%, transparent);
}

html[data-theme="midnight"] {
  --brand: #818cf8;
  --brand-deep: #6366f1;
  --brand-soft: #312e81;
  --brand-glow: rgba(129, 140, 248, 0.22);
  --bg: #0b1020;
  --bg-elevated: #141b2d;
  --surface: #1e2740;
  --text: #eef2ff;
  --text-2: #a5b4fc;
  --line: #2a3350;
  --bubble-out: #3730a3;
  --bubble-in: #1a2035;
  --online: #67e8f9;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glass-bg: color-mix(in srgb, #141b2d 58%, transparent);
  --glass-bg-strong: color-mix(in srgb, #141b2d 80%, transparent);
  --glass-chrome-bg: color-mix(in srgb, #141b2d 48%, transparent);
  --glass-pill-bg: color-mix(in srgb, #141b2d 28%, transparent);
  --glass-shine: color-mix(in srgb, #c4b5fd 8%, transparent);
}

html[data-theme="ocean"] {
  --brand: #22d3ee;
  --brand-deep: #0891b2;
  --brand-soft: #155e75;
  --brand-glow: rgba(34, 211, 238, 0.2);
  --bg: #06141a;
  --bg-elevated: #0c222a;
  --surface: #12333c;
  --text: #ecfeff;
  --text-2: #67e8f9;
  --line: #1a3f4a;
  --bubble-out: #0e7490;
  --bubble-in: #0a1f26;
  --online: #2dd4bf;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glass-bg: color-mix(in srgb, #0c222a 58%, transparent);
  --glass-bg-strong: color-mix(in srgb, #0c222a 80%, transparent);
  --glass-chrome-bg: color-mix(in srgb, #0c222a 48%, transparent);
  --glass-pill-bg: color-mix(in srgb, #0c222a 28%, transparent);
  --glass-shine: color-mix(in srgb, #67e8f9 8%, transparent);
}

html[data-theme="ember"] {
  --brand: #f97316;
  --brand-deep: #c2410c;
  --brand-soft: #9a3412;
  --brand-glow: rgba(249, 115, 22, 0.22);
  --bg: #140c0a;
  --bg-elevated: #221511;
  --surface: #2a1a14;
  --text: #fff7ed;
  --text-2: #fdba74;
  --line: #3f2418;
  --bubble-out: #9a3412;
  --bubble-in: #1c1210;
  --online: #fbbf24;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glass-bg: color-mix(in srgb, #221511 58%, transparent);
  --glass-bg-strong: color-mix(in srgb, #221511 80%, transparent);
  --glass-chrome-bg: color-mix(in srgb, #221511 48%, transparent);
  --glass-pill-bg: color-mix(in srgb, #221511 28%, transparent);
  --glass-shine: color-mix(in srgb, #fdba74 8%, transparent);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  font-size: calc(15px * var(--text-scale));
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* Chat: lock page scroll so composer/topbar stay pinned (Telegram-like).
   Scope to .app so a live swipe-back hold of .chat-screen outside #app
   does not keep body locked on chat-info / nested screens. */
body:has(.app .chat-screen),
body:has(.app .chat-info-screen) {
  overflow: hidden;
  min-height: 0 !important;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
}
html:has(.app .chat-screen),
html:has(.app .chat-info-screen) {
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
/* When IME is open, freeze document scroll so iOS cannot pan the fixed shell under the keyboard. */
html.keyboard-open,
html.keyboard-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.auth-glow,
.screen.auth {
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--brand-glow), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 50%),
    var(--bg);
}
button, input, textarea { font: inherit; color: inherit; }
button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  white-space: normal;
}
a { color: var(--brand-deep); }

.app {
  min-height: 100%;
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.app:has(.chat-screen),
.app:has(.chat-info-screen) {
  /* Pin to visualViewport — iOS keyboard otherwise leaves a dead gap under the composer
     and the emoji sheet opens “off-screen” / looks invisible. */
  position: fixed;
  top: var(--app-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* CRITICAL: override .app { min-height: 100dvh } — otherwise the shell stays taller
     than the visual viewport and absolute composer-dock (bottom:0) sits under the IME
     (Safari / Yandex iOS — user types but cannot see the field). */
  min-height: 0 !important;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.app:has(.chat-screen) > .screen.chat-screen,
.app:has(.chat-info-screen) > .screen.chat-info-screen {
  flex: 1;
  min-height: 0;
}

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  /* Opaque so parked swipe-back hold (previous tab) never bleeds through glass lists. */
  background: var(--bg, #0e1621);
  /* Let vertical scroll work; edge swipe-back uses a dedicated hit strip (touch-action:none). */
  touch-action: pan-y;
  position: relative;
}

/* Transparent left-edge latch — claims horizontal back before .messages pan-y scroll.
   Keep ~24px (not 72): wider latch ate voice play + blocked chat-info scroll starts. */
.swipe-back-edge-hit {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 30;
  touch-action: none;
  pointer-events: auto;
  background: transparent;
  /* Below topbar/composer chrome (z-index 20/25) is wrong — need above messages (1),
     but topbar is 20: keep edge under topbar buttons by starting below chrome on chat. */
}
.screen.chat-screen > .swipe-back-edge-hit,
.screen.chat-info-screen > .swipe-back-edge-hit {
  /* Below topbar (~56) and above composer dock so attach/mic stay tappable. */
  top: calc(var(--safe-top, 0px) + 52px);
  bottom: calc(64px + var(--safe-bottom, 0px));
  z-index: 18;
}
.screen.chat-info-screen > .swipe-back-edge-hit {
  /* No composer on profile — latch only below topbar. */
  bottom: 0;
}
.screen.swipe-back-dragging > .swipe-back-edge-hit {
  pointer-events: none;
}

.screen.swipe-back-dragging {
  will-change: transform;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.42);
  z-index: 3;
  position: relative;
  background: var(--bg, #0e1621);
}

/* Live previous screen parked outside #app until swipe-back consumes it. */
.swipe-back-hold {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  visibility: hidden;
}
.swipe-back-hold.is-visible,
.swipe-back-hold.swipe-back-underlay {
  visibility: visible;
  z-index: 1;
}

.swipe-back-underlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg, #0e1621);
  transform: translate3d(-18%, 0, 0) scale(0.94);
  transform-origin: center center;
  will-change: transform, opacity;
}
.swipe-back-underlay .screen,
.swipe-back-underlay .swipe-back-peek-clone {
  pointer-events: none !important;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
.swipe-back-scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #000;
  opacity: 0.38;
  will-change: opacity;
}

/* Conversation: fixed chrome, only message list scrolls.
   --app-height tracks visualViewport so iOS keyboard does not leave a dead gap / jump. */
.screen.chat-screen {
  position: relative;
  height: 100%;
  max-height: 100%;
  /* Override .screen { min-height: 100dvh } — that fought the keyboard viewport. */
  min-height: 0 !important;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: var(--safe-top);
  isolation: isolate;
}
/* Wallpaper behind chrome (Android Scaffold + glassChrome) so topbar frosts the doodle/photo. */
.screen.chat-screen.with-chat-doodle {
  background-color: var(--bg);
}
.screen.chat-screen.with-chat-doodle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--doodle-opacity, 0.28);
  background-color: transparent;
  background-image: url('/app/icons/qubi-doodle.svg');
  background-repeat: repeat;
  background-size: 300px 300px;
  background-position: 0 0;
}
.screen.chat-screen.with-chat-doodle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--brand) 14%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  animation: wallpaper-shimmer 14s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
html:not([data-theme="dark"]):not(.theme-dark) .screen.chat-screen.with-chat-doodle:not(.with-chat-wallpaper)::before,
html[data-theme="light"] .screen.chat-screen.with-chat-doodle:not(.with-chat-wallpaper)::before {
  opacity: var(--doodle-opacity, 0.26);
}
html[data-theme="dark"] .screen.chat-screen.with-chat-doodle::before,
html.theme-dark .screen.chat-screen.with-chat-doodle::before,
html[data-theme="qpay"] .screen.chat-screen.with-chat-doodle::before {
  opacity: var(--doodle-opacity, 0.30);
  filter: invert(1);
}
.screen.chat-screen.with-chat-wallpaper {
  background-size: cover;
  background-position: center;
}
.screen.chat-screen.with-chat-doodle > .messages-wrap.with-doodle,
.screen.chat-screen.with-chat-wallpaper > .messages-wrap.with-wallpaper {
  background-color: transparent;
  background-image: none;
}
.screen.chat-screen.with-chat-doodle > .messages-wrap.with-doodle::before,
.screen.chat-screen.with-chat-doodle > .messages-wrap.with-doodle::after {
  content: none;
  display: none;
}
.screen.chat-screen > .topbar,
.screen.chat-screen > .pin-bar,
.screen.chat-screen > .offline-banner,
.screen.chat-screen > .pwa-shell-torpedo-wrap,
.screen.chat-screen > .composer-dock,
.screen.chat-screen > .multi-select-toolbar {
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
/* Android glassChrome: ~72% light / ~50% dark over wallpaper */
.screen.chat-screen > .topbar,
.screen.chat-screen > .topbar.select-mode-bar {
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 42%),
    var(--glass-chrome-bg);
  backdrop-filter: var(--glass-chrome-blur);
  -webkit-backdrop-filter: var(--glass-chrome-blur);
  border-bottom: 0.5px solid var(--glass-stroke);
  box-shadow: none;
  overflow: visible; /* plate wings must not clip against sticky header */
}
/* Illustrated name plates — compact so status line fits under nick (#11594). */
.screen.chat-screen > .topbar:has(.name-plate) {
  min-height: calc(64px + var(--safe-top));
  padding-top: calc(8px + var(--safe-top));
  padding-bottom: 8px;
  align-items: center;
}
.screen.chat-screen > .messages-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
/* Telegram: fully clear composer chrome — chat/wallpaper shows through;
   only the text capsule + mic stay frosted glass (same language as bottom tabs). */
.screen.chat-screen > .composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  /* JS may lift via style.bottom when VV quirks leave the dock under the IME. */
  bottom: var(--composer-dock-bottom, 0px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  box-shadow: none;
}
html[data-theme="light"] .screen.chat-screen > .composer-dock,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .screen.chat-screen > .composer-dock {
  background: transparent;
  border-top: none;
  box-shadow: none;
}
.screen.chat-screen > .composer-dock > * {
  pointer-events: auto;
}
.screen.chat-screen > .composer-dock .composer {
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 8px calc(8px + var(--safe-bottom));
}
/* iOS keyboard open: drop home-indicator padding so the field sits above the IME. */
html.keyboard-open .screen.chat-screen > .composer-dock .composer {
  padding-bottom: 8px;
}
html.keyboard-open .screen.chat-screen > .messages-wrap {
  /* Leave room for the frosted composer capsule above the keyboard. */
  padding-bottom: 58px;
}
.screen.chat-screen > .composer-dock .composer-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 44px;
  padding: 2px 4px 2px 2px;
  border-radius: 22px;
  border: 0.5px solid color-mix(in srgb, #fff 35%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 26%, transparent);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset;
}
html[data-theme="light"] .screen.chat-screen > .composer-dock .composer-field {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 30%, transparent);
  border-color: color-mix(in srgb, #fff 70%, var(--line));
  box-shadow:
    0 6px 22px rgba(15, 23, 42, 0.10),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
}
html[data-theme="dark"] .screen.chat-screen > .composer-dock .composer-field,
html.theme-dark .screen.chat-screen > .composer-dock .composer-field,
html[data-theme="qpay"] .screen.chat-screen > .composer-dock .composer-field {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-elevated) 24%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
.screen.chat-screen > .composer-dock .composer-field .grow {
  flex: 1;
  min-width: 0;
}
.screen.chat-screen > .composer-dock .composer-field .grow input,
.screen.chat-screen > .composer-dock .composer .grow input,
.screen.chat-screen > .composer-dock .composer-field .grow .composer-ce,
.screen.chat-screen > .composer-dock .composer .grow .composer-ce {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 40px;
  padding: 10px 6px;
  border-radius: 0;
}
.composer .grow .composer-ce {
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--text);
  max-height: 120px;
  overflow-y: auto;
  width: 100%;
}
.composer .grow .composer-ce.is-empty:before,
.composer .grow .composer-ce:empty:before {
  content: attr(data-placeholder);
  color: var(--muted, #8a8a8e);
  pointer-events: none;
}
.composer .grow .composer-ce .ce-inline {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.25em;
}
/* Keep capsule frosted even if later .composer rules raise input fill */
.screen.chat-screen > .composer-dock .composer-field {
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 22%, transparent) !important;
}
html[data-theme="light"] .screen.chat-screen > .composer-dock .composer-field {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 26%, transparent) !important;
}
html[data-theme="dark"] .screen.chat-screen > .composer-dock .composer-field,
html.theme-dark .screen.chat-screen > .composer-dock .composer-field,
html[data-theme="qpay"] .screen.chat-screen > .composer-dock .composer-field {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-elevated) 20%, transparent) !important;
}
.screen.chat-screen > .composer-dock .composer-field .attach,
.screen.chat-screen > .composer-dock .composer-field .emoji-btn {
  background: transparent;
  color: var(--brand);
  width: 40px;
  height: 40px;
  min-width: 40px;
}
.screen.chat-screen > .composer-dock .send.mic:not(.rec):not(.cancel) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 26%, transparent);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  border: 0.5px solid color-mix(in srgb, #fff 35%, var(--line));
  color: var(--brand);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.16),
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset;
}
html[data-theme="light"] .screen.chat-screen > .composer-dock .send.mic:not(.rec):not(.cancel) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 30%, transparent);
  border-color: color-mix(in srgb, #fff 70%, var(--line));
}
.screen.chat-screen > .composer-dock .composer-banner,
.screen.chat-screen > .composer-dock .rec-banner,
.screen.chat-screen > .composer-dock .schedule-hint {
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 6px 12px 0;
}
.screen.chat-screen > .composer-dock .attach-sheet {
  display: none; /* attach opens as glass-sheet-overlay */
}
.screen.chat-screen .messages {
  /* leave room so last bubbles sit above floating field */
  padding-bottom: calc(68px + var(--safe-bottom));
}
.screen.chat-screen .messages-wrap.emoji-open .messages {
  /* composer (~60) + emoji sheet under it (Telegram keyboard slot) */
  padding-bottom: calc(64px + var(--emoji-sheet-h, 300px) + var(--safe-bottom));
}
.screen.chat-screen .scroll-down-fab {
  bottom: calc(76px + var(--safe-bottom));
}
.screen.chat-screen .messages-wrap.emoji-open .scroll-down-fab {
  bottom: calc(64px + var(--emoji-sheet-h, 300px) + var(--safe-bottom));
}
/* When emoji replaces the keyboard, composer keeps home-indicator padding (panel is above). */
html.emoji-sheet-open .screen.chat-screen > .composer-dock.emoji-open-dock .composer {
  padding-bottom: max(8px, var(--safe-bottom));
}
/* If IME is still up, lift the whole dock above it */
html.emoji-kb-overlap .screen.chat-screen > .composer-dock.emoji-open-dock {
  bottom: var(--keyboard-gap, 0px);
}

/* Glass capsule sheets (attach / create FAB) — match bottom tabs pill */
#qchat-glass-portal {
  position: relative;
  z-index: 10040;
  pointer-events: none;
}
#qchat-glass-portal > .glass-sheet-overlay {
  pointer-events: auto;
}
.glass-sheet-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 14px calc(14px + var(--safe-bottom));
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.glass-capsule-sheet {
  width: min(420px, 100%);
  max-width: 420px;
  border-radius: 28px;
  border: 0.5px solid color-mix(in srgb, #fff 35%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 28%, transparent);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.28),
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset;
  padding-bottom: 12px;
  overflow: hidden;
  /* iOS: if backdrop-filter fails, still read as frosted pill not a full-bleed slab */
  background-color: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}
html[data-theme="light"] .glass-capsule-sheet {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 32%, transparent);
  border-color: color-mix(in srgb, #fff 70%, var(--line));
}
html[data-theme="dark"] .glass-capsule-sheet,
html[data-theme="qpay"] .glass-capsule-sheet,
html.theme-dark .glass-capsule-sheet {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-elevated) 26%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
.glass-capsule-handle {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  margin: 10px auto 6px;
  background: color-mix(in srgb, var(--text) 28%, transparent);
  touch-action: none;
  /* Larger hit target for swipe */
  padding: 12px 40px;
  margin-top: 0;
  background-clip: content-box;
  box-sizing: content-box;
}
.glass-capsule-sheet {
  will-change: transform;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  touch-action: pan-y;
}
.glass-capsule-sheet.dragging {
  transition: none;
}
.glass-sheet-overlay.closing {
  transition: background 0.2s ease-out;
  background: rgba(0, 0, 0, 0) !important;
}
.glass-capsule-title {
  font-weight: 600;
  font-size: 1.05rem;
  padding: 4px 20px 8px;
  color: var(--text);
}
.glass-capsule-bubbles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 6px;
  padding: 4px 12px 8px;
}
.glass-capsule-sheet .attach-sheet.attach-sheet-grid.glass-capsule-bubbles,
.glass-capsule-sheet .attach-sheet-grid.glass-capsule-bubbles {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 4px !important;
  padding: 4px 10px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  isolation: auto !important;
  z-index: auto !important;
  position: relative !important;
}
.glass-capsule-sheet .attach-tile,
.glass-capsule-sheet button.attach-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  color: var(--text-2) !important;
  white-space: normal !important;
}
.glass-capsule-sheet .attach-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.glass-capsule-sheet .attach-tile-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.glass-capsule-sheet .attach-tile.music .attach-tile-icon {
  background: #FDCB6E;
  color: #3d2e00;
}

/* ?? Auth ?? */
.auth {
  justify-content: center;
  padding: 28px 22px 40px;
}
.brand-hero {
  text-align: center;
  margin-bottom: 28px;
}
.brand-mark {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  margin: 0 auto 16px;
  background-color: transparent;
  background-image: url("/app/icons/logo_qchat.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
/* Logo + «Qchat» must stay one horizontal row (San4o #11570). */
.brand-lockup-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}
.brand-quby {
  width: 29px; /* ~24sp * 1.2 like APK mascotSize */
  height: 29px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.brand-quby-lg {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 auto 14px;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.brand-hero h1,
.brand-wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(120deg, var(--text) 8%, color-mix(in srgb, #b9e7ff 70%, var(--brand)) 48%, var(--brand) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .brand-hero h1,
html[data-theme="light"] .brand-wordmark,
:root:not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .brand-hero h1,
:root:not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .brand-wordmark {
  background: linear-gradient(120deg, #3bb8f5 10%, var(--brand) 55%, var(--brand-deep) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .brand-hero h1,
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .brand-wordmark {
    background: linear-gradient(120deg, #fff 10%, #b9e7ff 55%, var(--brand) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
html[data-theme="dark"] .brand-hero h1,
html[data-theme="dark"] .brand-wordmark,
html[data-theme="qpay"] .brand-hero h1,
html[data-theme="qpay"] .brand-wordmark {
  background: linear-gradient(120deg, #fff 10%, #b9e7ff 55%, var(--brand) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar .brand-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
/* Nested brand h2 must NOT inherit .topbar h2 flex/clamp (that stacks logo above title). */
.topbar .brand-lockup h2,
.topbar .brand-lockup .brand-wordmark,
.topbar .brand-lockup-inner h2,
.topbar .brand-lockup-inner .brand-wordmark {
  flex: 0 1 auto;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  font-family: "Syne", var(--display);
  font-size: 1.5rem; /* 24px — match APK QchatBrandWordmark(24.sp) */
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
  min-width: 0;
  font-synthesis: none;
}
.topbar .chats-search-toggle {
  flex-shrink: 0;
  margin-left: auto;
}
.brand-hero p {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 0.95rem;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input, .composer input, .search input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 14px 14px;
  outline: none;
  color: var(--text);
}
.field input::placeholder,
.composer input::placeholder,
.search input::placeholder,
textarea::placeholder {
  color: var(--text-2);
  opacity: 1;
}
.field input:focus, .composer input:focus, .search input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.field-password {
  position: relative;
  display: flex;
  align-items: stretch;
}
.field-password input {
  width: 100%;
  padding-right: 48px;
}
.pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.pwd-toggle:hover,
.pwd-toggle:focus-visible {
  color: var(--brand);
  background: var(--brand-glow);
  outline: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 700;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary {
  width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--brand)), var(--brand-deep));
  color: #fff;
  box-shadow:
    0 8px 22px var(--brand-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--brand-deep) 40%, transparent);
}
html[data-theme="light"] .btn-primary,
:root:not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 22%, var(--brand)), var(--brand-deep));
  box-shadow:
    0 10px 26px rgba(42, 171, 238, 0.38),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
}
html[data-theme="dark"] .btn-primary,
html[data-theme="qpay"] .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--brand)), var(--brand-deep));
  border: 0.5px solid color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    0 8px 22px var(--brand-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--brand)), var(--brand-deep));
    border: 0.5px solid color-mix(in srgb, #fff 16%, transparent);
  }
}
.btn-ghost {
  color: var(--brand-deep);
  font-weight: 600;
}
.auth-switch {
  text-align: center;
  margin-top: 14px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  align-items: center;
}
.error-box {
  background: #fef2f2;
  color: #991b1b;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}
html[data-theme="dark"] .error-box,
html[data-theme="qpay"] .error-box {
  background: #3f1d1d;
  color: #fecaca;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .error-box {
    background: #3f1d1d;
    color: #fecaca;
  }
}

/* ќќ Chrome ќќ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: calc(var(--header-h) + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 8px 8px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 40%),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0.5px solid var(--glass-stroke);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
.topbar h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.topbar h2.brand-wordmark {
  display: block;
  flex: 0 1 auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.topbar .sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
}
.topbar-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 100%;
}
.topbar-peer {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: inherit;
  padding: 2px 2px 2px 0;
  border-radius: 12px;
  overflow: visible; /* illustrated name plates (#11510) */
}
.topbar-peer:active { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.topbar-peer .avatar {
  width: 38px;
  height: 38px;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.topbar-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  justify-content: center;
}
.topbar-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  /* Plain nick ellipsis; plates must not be clipped (chat list uses overflow:visible). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  /* Hug nick + plate; never stretch frame across the whole topbar title column */
  width: max-content;
  max-width: 100%;
}
.topbar-name:has(.name-plate) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
}
/* Long nicks: slightly smaller so plate + name fit; last-seen may be hidden via JS. */
.topbar-name.topbar-name-compact {
  font-size: 0.9rem;
  letter-spacing: -0.025em;
}
.topbar-name.topbar-name-tiny {
  font-size: 0.8rem;
  letter-spacing: -0.03em;
}
.topbar-name .name-with-badges {
  max-width: 100%;
  min-width: 0;
  width: max-content;
  overflow: visible;
  /* do NOT width:100% — that stretches neon/plate frames around short nicks */
}
.topbar-name .name-plate {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
  overflow: visible;
}
.topbar-name .name-plate[class*="name-plate-cloud"],
.topbar-name .name-plate[class*="name-plate-storm"],
.topbar-name .name-plate[class*="name-plate-thunder"],
.topbar-name .name-plate[class*="name-plate-bolt"],
.topbar-name .name-plate[class*="name-plate-capo"],
.topbar-name .name-plate[class*="name-plate-qubi"],
.topbar-name .name-plate[class*="name-plate-mist"],
.topbar-name .name-plate[class*="name-plate-cigar"],
.topbar-name .name-plate[class*="name-plate-noir"],
.topbar-name .name-plate[class*="name-plate-bubble"],
.topbar-name .name-plate[class*="name-plate-hairdresser"],
.topbar-name .name-plate[class*="name-plate-nails"],
.topbar-name .name-plate[class*="name-plate-barber"],
.topbar-name .name-plate[class*="name-plate-barista"],
.topbar-name .name-plate[class*="name-plate-doctor"],
.topbar-name .name-plate[class*="name-plate-auto"] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.topbar-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  margin-left: 2px;
}
.topbar-actions .icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.topbar-actions .icon-btn svg {
  width: 20px;
  height: 20px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  padding: 0 12px 8px;
  overflow-x: auto;
}
.settings-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-toggle > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Native checkbox ? brand switch */
.settings-toggle input[type=checkbox],
input.qchat-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-2) 35%, var(--surface));
  cursor: pointer;
  transition: background .18s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.settings-toggle input[type=checkbox]::after,
input.qchat-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.settings-toggle input[type=checkbox]:checked,
input.qchat-switch:checked {
  background: var(--brand);
  box-shadow: none;
}
.settings-toggle input[type=checkbox]:checked::after,
input.qchat-switch:checked::after {
  transform: translateX(20px);
}
.settings-toggle input[type=checkbox]:disabled,
input.qchat-switch:disabled {
  opacity: .45;
  cursor: default;
}
/* Brand checkbox (square with check) */
input.qchat-check {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 7px;
  border: 2px solid color-mix(in srgb, var(--text-2) 55%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
input.qchat-check:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--text-2));
}
input.qchat-check:checked {
  background: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
input.qchat-check:active {
  transform: scale(0.92);
}
input.qchat-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

/* Folder create / edit sheet */
.folder-sheet {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.folder-sheet-title {
  padding: 4px 4px 12px;
  font-weight: 700;
  font-size: 1.05rem;
}
.folder-sheet-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}
.folder-sheet-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.folder-sheet-meta {
  padding: 4px 2px 10px;
  font-size: 0.82rem;
  color: var(--text-2);
  font-weight: 600;
}
.folder-checklist {
  max-height: min(48vh, 360px);
  overflow-y: auto;
  margin: 0 -4px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
}
.folder-check-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.9rem;
}
.folder-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.folder-check-row:last-child { border-bottom: 0; }
.folder-check-row:active,
.folder-check-row.selected {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.folder-check-row .avatar {
  width: 42px;
  height: 42px;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.folder-check-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.folder-check-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-check-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-sheet-save {
  width: 100%;
  margin-top: 4px;
}
.folder-sheet-save:disabled {
  opacity: 0.45;
  cursor: default;
}
.settings-row-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.settings-row-btn.danger strong { color: #ef4444; }
.member-row { display: flex !important; align-items: center; gap: 12px; }
.avatar.sm { width: 36px; height: 36px; font-size: .85rem; }
.avatar.lg { width: 72px; height: 72px; font-size: 1.4rem; }
.link-preview {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  cursor: pointer;
}
.link-preview.entity {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.link-preview-img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.link-preview-img.round { border-radius: 50%; }
.link-preview-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 28%, var(--surface));
  color: var(--brand); font-weight: 800; font-size: 1.2rem;
}
.link-preview-title { font-weight: 700; font-size: .9rem; }
.link-preview-desc { font-size: .78rem; color: var(--text-2); margin-top: 2px; }
.status-actions {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 6;
  padding: 0;
  pointer-events: auto;
}
.status-action {
  background: rgba(12, 18, 28, .42);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.status-action.liked,
.ico-chrome.liked .ico-svg {
  color: var(--brand, #2ee59d);
}
.ico-chrome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.ico-chrome .ico-svg {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ico-chrome .ico-svg svg {
  width: 20px;
  height: 20px;
  display: block;
}
.ico-chrome .ico-count,
.ico-chrome .ico-label {
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.ico-svg.inline {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.ico-svg.inline svg {
  width: 14px;
  height: 14px;
  display: block;
}
.banner-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  border-radius: 10px;
}
.banner-x svg { width: 18px; height: 18px; }
.schedule-hint-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Telegram-like pinned message bar — liquid glass, no hard blue stripe */
.pin-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 6px 10px 8px;
  padding: 0 4px 0 4px;
  min-height: 52px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 48%, rgba(255,255,255,.08)),
    color-mix(in srgb, var(--bg-elevated, #17212B) 55%, transparent);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  border: 0.5px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow:
    0 8px 24px rgba(8, 14, 22, 0.28),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.pin-bar-body {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 10px 8px 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 16px;
}
.pin-bar-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--brand);
  display: grid;
  place-items: center;
  line-height: 0;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 10px;
  border: 0.5px solid color-mix(in srgb, var(--brand) 35%, transparent);
}
.pin-bar-ico svg { width: 14px; height: 14px; display: block; }
.pin-bar-copy {
  min-width: 0;
  flex: 1;
}
.pin-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.pin-bar-text {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  opacity: 0.95;
}
.pin-bar-x {
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  display: grid;
  place-items: center;
  border-radius: 14px;
}
.pin-bar-x:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pin-bar-x svg { width: 18px; height: 18px; }
.screen.chat-screen.has-pin > .pin-bar {
  position: relative;
  z-index: 18;
}
.screen.chat-screen.has-pin > .messages-wrap {
  margin-top: -8px;
  padding-top: 8px;
}
.bubble-wrap.pin-flash .bubble {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  transition: outline-color 0.3s;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: transparent;
}
.icon-btn:active { background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.chats-search-toggle.is-open {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}
.icon-btn.chats-search-toggle.is-open svg {
  opacity: 1;
}

.search {
  padding: 10px 14px 6px;
}
.search.chats-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search.chats-search.compact {
  padding: 6px 12px 8px;
  animation: none;
}
.search.chats-search.compact input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px 8px 34px;
  border-radius: 18px;
  font-size: 0.95rem;
  border: 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
}
.search.chats-search.compact input:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
.search.chats-search .search-leading {
  position: absolute;
  left: 22px;
  width: 16px;
  height: 16px;
  color: var(--text-2);
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 1;
}
.search.chats-search.compact {
  position: relative;
}
.search.chats-search .search-leading svg {
  width: 16px;
  height: 16px;
}
.search-clear {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: transparent;
}
.search-clear svg { width: 16px; height: 16px; }
.search.chats-search input {
  flex: 1;
  min-width: 0;
}
.search-cancel {
  flex-shrink: 0;
  padding: 10px 6px;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.95rem;
}
.list-pull-hint {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 6px 12px 0;
  transition: color 0.15s ease;
}
.list-pull-hint.ready { color: var(--brand); }
.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Side pad lives on rows so avatar glow can breathe; avoid “card squares”. */
  padding: 6px 0 24px;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.08s linear;
}
@keyframes chats-search-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 0;
  width: 100%;
  text-align: left;
  position: relative;
  /* Must stay visible — animated avatar frames glow outside the hit box. */
  overflow: visible;
  cursor: default;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  z-index: 0;
}
.chat-row:active { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.chat-row.active {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.chat-row.pinned {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
/* Telegram-like: avatar is its own profile hit target inside the row */
.chat-row .avatar-wrap.row-avatar-hit {
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
  overflow: visible;
  /* Larger tap target without growing the visual avatar — margin/padding only when no frame.
     NEVER override frame padding / border-radius (that made rings fat + flicker). */
  margin: -8px;
  padding: 8px;
  border-radius: 0;
}
.chat-row .avatar-wrap.row-avatar-hit[class*="frame-"] {
  /* Frame CSS owns padding + round clip; keep a modest outer margin for taps. */
  margin: -6px;
  padding: 0;
  border-radius: 50%;
}
/* Re-apply thin ring sizing after row-avatar-hit reset (static + animated share masked ring). */
.chat-row .avatar-wrap.row-avatar-hit.frame-gold,
.chat-row .avatar-wrap.row-avatar-hit.frame-neon,
.chat-row .avatar-wrap.row-avatar-hit.frame-pulse,
.chat-row .avatar-wrap.row-avatar-hit.frame-ember,
.chat-row .avatar-wrap.row-avatar-hit.frame-ice,
.chat-row .avatar-wrap.row-avatar-hit.frame-bolt,
.chat-row .avatar-wrap.row-avatar-hit.frame-aura,
.chat-row .avatar-wrap.row-avatar-hit.frame-spark,
.chat-row .avatar-wrap.row-avatar-hit.frame-plasma,
.chat-row .avatar-wrap.row-avatar-hit.frame-hearts,
.chat-row .avatar-wrap.row-avatar-hit.frame-rainbow,
.chat-row .avatar-wrap.row-avatar-hit.frame-comet,
.chat-row .avatar-wrap.row-avatar-hit.frame-halo,
.chat-row .avatar-wrap.row-avatar-hit.frame-stardust,
.chat-row .avatar-wrap.row-avatar-hit.frame-vortex {
  padding: 0;
  --avatar-ring: 2px;
}
.chat-row .avatar-wrap.row-avatar-hit:active {
  opacity: 0.88;
}
.chat-row .avatar-wrap[class*="frame-"] {
  z-index: 4;
}
.chat-row:has(.avatar-wrap[class*="frame-"]) {
  z-index: 1;
}
.chat-row:has(.avatar-wrap[class*="frame-"]):hover,
.chat-row:has(.avatar-wrap[class*="frame-"]):active {
  z-index: 3;
}
.chat-row .row-main.row-open-chat {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  position: relative;
  z-index: 1;
  overflow: visible; /* illustrated name plates extend past the text box */
}
.chat-row .row-main.row-open-chat:active {
  opacity: 0.92;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Official mark is only the title plaque (.official-chip) ќ no avatar corner star. */
.row-main { flex: 1; min-width: 0; }
.row-top {
  /* Title fills; time is a fixed trailing column (Telegram-like, name length independent). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: start;
  margin-bottom: 4px;
}
.row-title {
  font-weight: 700;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  line-height: 1.25;
}
.row-title .name-with-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  min-width: 0;
  max-width: 100%;
  width: max-content;
}
.row-title .name-plate {
  width: max-content;
  max-width: 100%;
  flex: 0 1 auto;
}
.row-title .name-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.name-with-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  min-width: 0;
}
.name-with-badges .name-text {
  font: inherit;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.name-with-badges .name-text:not([style*="color"]) {
  color: inherit;
}
.name-with-badges .name-status-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--accent, #2aabee);
  opacity: 0.95;
}
.name-with-badges .status-emoji-inline {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.official-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand);
  vertical-align: middle;
}
.official-verified svg {
  width: 16px;
  height: 16px;
  display: block;
}
.official-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 6px 2px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  white-space: nowrap;
}
.official-chip.system {
  background: transparent;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 600;
}
.official-chip-ico {
  display: inline-flex;
  width: 12px;
  height: 12px;
}
.official-chip-ico svg {
  width: 12px;
  height: 12px;
  display: block;
}
.topbar-name .name-with-badges {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  width: max-content;
}
.topbar-name .name-text {
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.topbar-name .official-chip {
  padding: 0;
  background: transparent;
  gap: 0;
}
.topbar-name .official-chip > span:not(.official-chip-ico) {
  display: none;
}
.topbar-name .official-chip-ico {
  width: 15px;
  height: 15px;
}
.topbar-name .official-chip-ico svg {
  width: 15px;
  height: 15px;
}
.profile-hero-overlay .name-with-badges {
  justify-content: center;
}
.profile-hero-overlay .name-text {
  font-size: inherit;
  font-weight: inherit;
}
.row-time {
  color: var(--text-2);
  font-size: 0.78rem;
  flex-shrink: 0;
  text-align: end;
  justify-self: end;
  white-space: nowrap;
}
.row-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.row-preview {
  color: var(--text-2);
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row-preview-ico {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  color: var(--text-2);
  opacity: 0.92;
  line-height: 0;
}
.row-preview-ico svg { width: 14px; height: 14px; display: block; }
.row-preview-ce {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-preview-ce .ce-inline {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  display: inline-block;
}
.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-2);
}
.empty strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 1.05rem; }
.loading {
  padding: 28px;
  text-align: center;
  color: var(--text-2);
}
.boot-splash {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  background: #0E1621;
  color: #fff;
  text-align: center;
}
.boot-splash-logo {
  width: 128px;
  height: 128px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
.boot-splash-title {
  margin: 4px 0 0;
  font-size: 2rem;
  color: #fff !important;
}
.boot-splash-hint {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.72;
}
.boot-splash-spinner {
  width: 28px;
  height: 28px;
  margin-top: 10px;
  border-radius: 50%;
  border: 2px solid rgba(42, 171, 238, 0.25);
  border-top-color: #2AABEE;
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

/* ?? Chat ?? */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* flex-start + spacer: short threads sit at bottom; long threads scroll correctly.
     justify-content:flex-end breaks scrollTop→bottom on iOS PWA (stuck on oldest). */
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: var(--bg);
}
.messages::before {
  content: '';
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}
/* Chat wallpaper: Qubi doodle on full messages pane (not chat list — Telegram-like) */
.messages-wrap.with-doodle {
  background-color: var(--bg);
  isolation: isolate;
}
.messages-wrap.with-doodle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Visible Qubi pattern (was ~0.13–0.15 — often invisible on phones) */
  opacity: var(--doodle-opacity, 0.28);
  background-color: transparent;
  background-image: url('/app/icons/qubi-doodle.svg');
  background-repeat: repeat;
  background-size: 300px 300px;
  background-position: 0 0;
}
.messages-wrap.with-doodle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--brand) 14%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  animation: wallpaper-shimmer 14s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
@keyframes wallpaper-shimmer {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .messages-wrap.with-doodle::after,
  .screen.chat-screen.with-chat-doodle::after { animation: none; opacity: 0.45; }
}
html:not([data-theme="dark"]):not(.theme-dark) .messages-wrap.with-doodle:not(.with-wallpaper)::before,
html[data-theme="light"] .messages-wrap.with-doodle:not(.with-wallpaper)::before {
  opacity: var(--doodle-opacity, 0.26);
}
html[data-theme="dark"] .messages-wrap.with-doodle::before,
html.theme-dark .messages-wrap.with-doodle::before,
html[data-theme="qpay"] .messages-wrap.with-doodle::before {
  opacity: var(--doodle-opacity, 0.30);
  filter: invert(1);
}
.messages-wrap.with-doodle > .messages {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}
.messages-wrap.with-doodle > .scroll-down-fab,
.messages-wrap.with-doodle > .emoji-panel {
  z-index: 2;
}
.messages-wrap.with-wallpaper {
  background-size: cover;
  background-position: center;
}
.messages-wrap.with-wallpaper:not(.with-doodle) {
  background-color: transparent;
}
.messages-wrap.with-wallpaper.with-doodle {
  /* color wallpaper: solid from inline style + doodle on top */
}

/* legacy class on .messages (kept harmless if present) */
.messages.with-doodle::before,
.messages.with-doodle::after {
  display: none;
}
.messages.with-doodle > * {
  position: relative;
  z-index: 1;
}
.day-chip {
  align-self: center;
  background: rgba(142, 142, 147, 0.78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  margin: 10px 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.theme-dark .day-chip,
html[data-theme="dark"] .day-chip {
  background: rgba(0, 0, 0, 0.45);
}
.chat-sticky-day {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  background: rgba(142, 142, 147, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity .16s ease;
  max-width: min(78vw, 280px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-sticky-day.visible {
  opacity: 1;
}
html.theme-dark .chat-sticky-day,
html[data-theme="dark"] .chat-sticky-day {
  background: rgba(0, 0, 0, 0.55);
}
.messages-wrap.with-doodle > .chat-sticky-day {
  z-index: 6;
}
.bubble-wrap {
  display: flex;
  max-width: 86%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  position: relative;
}
.bubble-wrap.mine { align-self: flex-end; }
.bubble-wrap.theirs { align-self: flex-start; }
/* Channel post: bubble + comments torpedo stack vertically (Android Column parity). */
.bubble-wrap.channel-post-wrap {
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  max-width: min(92%, 380px);
}
.bubble-wrap.channel-post-wrap.mine {
  align-self: flex-start;
}
.bubble-wrap.channel-post-wrap > .bubble {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.bubble-wrap.channel-post-wrap > .channel-comments-torpedo {
  /* Full flush rules live with .channel-comments-torpedo (later in file) */
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.bubble .meta-views {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 2px;
  opacity: 0.82;
}
.bubble .meta-views-ico svg {
  width: 13px;
  height: 13px;
  display: block;
}
.bubble {
  padding: 9px 12px 7px;
  border-radius: var(--bubble-radius, 20px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  position: relative;
  word-break: break-word;
  font-size: calc(15px * var(--text-scale, 1));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border: 0.5px solid color-mix(in srgb, #fff 14%, var(--glass-stroke));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  overflow: hidden;
}
/* Desktop Chrome: allow selecting/copying text inside bubbles */
@media (hover: hover) and (pointer: fine) {
  .bubble-wrap:not(.multi-select),
  .bubble-wrap:not(.multi-select) .bubble,
  .bubble-wrap:not(.multi-select) .body,
  .bubble-wrap:not(.multi-select) .reply-quote {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    cursor: text;
  }
  .bubble-wrap:not(.multi-select) img,
  .bubble-wrap:not(.multi-select) video,
  .bubble-wrap:not(.multi-select) .msg-check {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
  }
}
.bubble-wrap.mine .bubble {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 16%, transparent), transparent 48%),
    color-mix(in srgb, var(--bubble-out) 86%, transparent);
  border-bottom-right-radius: 7px;
}
.bubble-wrap.theirs .bubble {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--bubble-in) 84%, transparent);
  border-bottom-left-radius: 7px;
}
/* Owner posts in a channel still look like Toplie cards, not outgoing DMs. */
.bubble-wrap.channel-post-wrap.mine > .bubble {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--bubble-in) 84%, transparent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bubble-wrap.channel-post-wrap.tail-end > .bubble::after {
  display: none;
}
.bubble-wrap.tail-end.mine .bubble::after,
.bubble-wrap.tail-end.theirs .bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0; height: 0;
  border: 6px solid transparent;
  opacity: 0.92;
}
.bubble-wrap.tail-end.mine .bubble::after {
  right: -4px;
  border-left-color: color-mix(in srgb, var(--bubble-out) 90%, transparent);
  border-right: 0;
  border-bottom: 0;
}
.bubble-wrap.tail-end.theirs .bubble::after {
  left: -4px;
  border-right-color: color-mix(in srgb, var(--bubble-in) 90%, transparent);
  border-left: 0;
  border-bottom: 0;
}

.bubble-wrap.qubi-thinking {
  pointer-events: none;
  user-select: none;
  align-self: flex-start;
}
.qubi-think-bubble {
  min-width: 176px;
  max-width: min(78%, 280px);
  padding: 10px 12px 9px !important;
}
.qubi-think-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.qubi-think-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 10px;
}
.qubi-think-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.28;
  animation: qubi-dot 1.15s ease-in-out infinite;
}
.qubi-think-dots i:nth-child(2) { animation-delay: 0.16s; }
.qubi-think-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes qubi-dot {
  0%, 72%, 100% { opacity: 0.22; transform: translateY(0); }
  36% { opacity: 1; transform: translateY(-3px); }
}
.qubi-think-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted, #8B9BAB);
}
.qubi-think-bar {
  margin-top: 10px;
  height: 3px;
  border-radius: 99px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
}
.qubi-think-bar > span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, #fff), var(--brand));
  animation: qubi-bar 1.35s ease-in-out infinite;
}
@keyframes qubi-bar {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(280%); }
}
.bubble .sender {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 2px;
}
/* Telegram-style channel post header inside the bubble */
.bubble .channel-post-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  color: #f5a623;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.bubble-wrap.channel-post-wrap .bubble .meta {
  margin-top: 0;
  justify-content: flex-end;
  width: auto;
  flex-shrink: 0;
  gap: 6px;
}
.bubble-wrap.channel-post-wrap .bubble .meta-time {
  opacity: 0.78;
}
.bubble-wrap.channel-post-wrap .bubble .meta-views {
  opacity: 0.85;
}
.channel-post-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}
.channel-post-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
  flex: 1;
  min-width: 0;
  align-items: center;
}
.bubble-wrap.channel-post-wrap .channel-post-reactions .reaction-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, rgba(23, 33, 43, 0.72) 88%, transparent);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.82rem;
}
.bubble-wrap.channel-post-wrap .channel-post-reactions .reaction-pill.mine {
  background: color-mix(in srgb, var(--brand) 28%, rgba(23, 33, 43, 0.65));
  border-color: color-mix(in srgb, var(--brand) 45%, rgba(255, 255, 255, 0.2));
}
html[data-theme="light"] .bubble-wrap.channel-post-wrap .channel-post-reactions .reaction-pill {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.bubble .body { white-space: pre-wrap; line-height: 1.35; word-break: break-word; }
.composer-banner .banner-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble .call-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.bubble .call-msg-icon {
  font-size: 1.15rem;
  line-height: 1;
  opacity: .95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.bubble .call-msg-icon.ico-svg svg,
.bubble .call-msg-icon .ico-svg svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.bubble .call-msg-text {
  font-weight: 600;
  line-height: 1.3;
}
.bubble .call-msg.missed .call-msg-text {
  color: #e53935;
}
.bubble .meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-2);
  opacity: 0.9;
}
.msg-ticks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
  opacity: 0.85;
}
.msg-ticks svg {
  display: block;
  width: 16px;
  height: 11px;
}
.msg-ticks.read {
  color: var(--brand);
  opacity: 1;
}
.msg-ticks.failed {
  color: var(--danger, #ef4444);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 1;
}
.msg-ticks.pending {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.75;
}
.row-ticks.msg-ticks svg {
  width: 15px;
  height: 10px;
}
.row-ticks.msg-ticks.read {
  color: var(--brand);
}
.bubble img.media,
.bubble video.media {
  display: block;
  max-width: min(260px, 70vw);
  max-height: min(420px, 55vh);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--bg-elevated, #1a222c) 80%, transparent);
}
@media (min-width: 800px) {
  .desktop-main .bubble img.media,
  .desktop-main .bubble video.media {
    max-width: min(360px, 42vw);
    max-height: min(480px, 50vh);
  }
}
.bubble.pending { opacity: 0.7; }
.bubble-media-wrap {
  position: relative;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.bubble-media-wrap .media {
  display: block;
  width: 100%;
}
.bubble-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.bubble-upload-overlay.has-cancel {
  pointer-events: auto;
}
.bubble-upload-pct {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.bubble-upload-label {
  font-size: 12px;
  opacity: 0.9;
}
.bubble-upload-cancel {
  margin-top: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bubble-upload-cancel:active {
  background: rgba(255, 255, 255, 0.28);
}
.bubble.failed { outline: 1px solid var(--danger); cursor: pointer; }

.draft-attach-strip {
  display: flex;
  gap: 8px;
  padding: 8px 10px 0;
  overflow-x: auto;
  background: var(--glass-bg);
  border-top: 0.5px solid var(--glass-stroke);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.draft-attach-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.draft-attach-thumb.selected { border-color: var(--brand); }
.draft-attach-thumb.broken { background: color-mix(in srgb, var(--surface) 70%, var(--text-3)); }
.draft-attach-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-2);
  pointer-events: none;
}
.chat-search-bar .chat-search-close { flex-shrink: 0; }
.draft-attach-thumb img,
.draft-attach-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.draft-attach-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 6px calc(6px + var(--safe-bottom));
  border-top: 0.5px solid var(--glass-stroke);
  background:
    linear-gradient(0deg, var(--glass-shine), transparent 45%),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.composer .attach,
.composer .send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
.composer .attach {
  background: transparent;
  color: var(--brand);
  border: 0;
}
.composer .attach:active {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--brand-deep);
}
.composer .emoji-btn {
  color: var(--brand);
}
.composer .attach svg,
.composer .send svg {
  width: 20px;
  height: 20px;
  display: block;
}
.composer .emoji-btn svg {
  width: 22px;
  height: 22px;
}
.composer .send {
  background: var(--brand);
  color: #fff;
  width: 40px;
  height: 40px;
  min-width: 40px;
  box-shadow: 0 2px 8px var(--brand-glow);
}
/* display:grid on .send overrides UA [hidden] — force hide mic/send correctly */
.composer .send[hidden],
.composer .attach[hidden] {
  display: none !important;
}
.composer .send svg {
  width: 18px;
  height: 18px;
  margin-left: 1px;
}
.composer .send:disabled { opacity: 0.4; }
.composer .grow { flex: 1; min-width: 0; }

/* ќќ Settings / install ќќ */
.settings-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-list-grouped {
  gap: 18px;
  padding-bottom: calc(88px + var(--safe-bottom));
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-section-title {
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.settings-section-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.settings-toggle-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.settings-push-card-wrap {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.settings-push-card {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #2aabee) 28%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #2aabee) 12%, transparent), transparent 55%),
    var(--surface, #0e1621);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-push-card--ok {
  border-color: color-mix(in srgb, #34d399 45%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, #34d399 14%, transparent), transparent 55%),
    var(--surface, #0e1621);
}
.settings-push-card--denied {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--line));
}
.settings-push-card-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-1, #e8edf5);
  white-space: pre-wrap;
}
.settings-push-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.settings-push-card-btn {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
}
.settings-push-card-ok {
  font-size: 0.82rem;
  font-weight: 700;
  color: #34d399;
}
.settings-push-ios-note,
.settings-privacy-hint {
  opacity: 0.78;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 4px 8px 0;
}
.settings-ringtone-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
}
.settings-ringtone-kicker {
  padding: 10px 16px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-elevated, var(--surface));
}
.settings-ringtone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 16px;
  background: var(--bg-elevated, var(--surface));
}
.settings-ringtone-row.active {
  background: color-mix(in srgb, var(--accent, #2aabee) 12%, var(--surface));
}
.settings-ringtone-copy {
  flex: 1;
  min-width: 0;
}
.settings-ringtone-copy strong {
  display: block;
}
.settings-ringtone-copy span {
  opacity: 0.75;
  font-size: 0.82rem;
}
.settings-ringtone-play {
  flex-shrink: 0;
}
.settings-section-card > .settings-item,
.settings-section-card > .theme-option,
.settings-section-card > label.settings-item {
  border: none;
  border-radius: 0;
  background: var(--bg-elevated);
}
.settings-section-card > .settings-item:active,
.settings-section-card > .theme-option:active {
  background: var(--surface);
}

/* Chat info — Telegram rounded plates */
.chat-info-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Override .settings-list padding so hero stays full-bleed and plates align. */
  padding: 0 0 calc(28px + var(--safe-bottom, 0px)) !important;
  background: var(--bg);
}
.chat-info-body > .profile-hero {
  margin: 0;
  flex-shrink: 0;
  width: 100%;
}
/* Channel/group info — scroll the SCREEN (Telegram). Body grows naturally;
   parent .app is height-bounded so overflow-y on .screen is the scrollport.
   Nested flex+height:0 failed on some PWA WebViews (content clipped, no pan). */
.screen.chat-info-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* Safe areas come from fixed .app shell; avoid double padding eating scroll room. */
  padding-top: 0;
  padding-bottom: 0;
}
.screen.chat-info-screen > .topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  padding-top: var(--safe-top, 0px);
}
.screen.chat-info-screen.chat-info-no-topbar > .topbar {
  display: none !important;
}
.screen.chat-info-screen.chat-info-no-topbar > .swipe-back-edge-hit {
  /* Full-height latch — no topbar chrome to clear. */
  top: 0;
  bottom: 0;
}
.chat-info-float-back {
  position: absolute;
  left: 10px;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 6;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-info-float-back svg {
  width: 22px;
  height: 22px;
  display: block;
}
.chat-info-float-back:active {
  background: rgba(0, 0, 0, 0.52);
}
.screen.chat-info-screen.chat-info-no-topbar .profile-hero {
  /* No sticky «Инфо» bar — give the avatar more room (Telegram-like). */
  height: min(92vw, 460px);
  min-height: 320px;
  max-height: min(58vh, 460px);
}
.screen.chat-info-screen > .chat-info-body {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible !important;
  touch-action: pan-y;
}
.info-actions {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  padding: 10px 12px 4px;
}
.info-action {
  flex: 1;
  max-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 14px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
  background: transparent;
  border: none;
}
.info-action:active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.info-action-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}
.info-action-ico svg { width: 22px; height: 22px; }
.info-plate {
  margin: 0 12px;
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  border: 0.5px solid color-mix(in srgb, #fff 16%, var(--line));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
.info-plate-head {
  padding: 12px 16px 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.info-plate-row,
.info-username-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--text);
}
.info-plate-row:last-child,
.info-username-card:last-child {
  border-bottom: none;
}
.info-plate-row.tap:active,
.info-username-card.tap:active {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.info-plate-row-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--brand);
}
.info-plate-row-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}
.info-plate-row.danger .info-plate-row-ico,
.info-plate-row.danger .info-plate-row-ico svg {
  color: #ef4444;
}
.info-plate-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.info-plate-row-text strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.info-plate-row-text span {
  font-size: 0.8rem;
  color: var(--text-2);
  word-break: break-word;
}
.info-plate-row.danger strong { color: #ef4444; }
.info-username-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.info-username-card .info-plate-row-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--brand);
}
.info-username-card .info-plate-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.info-username-card strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-username-card span {
  font-size: 0.8rem;
  color: var(--text-2);
}

.settings-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--text);
}
.settings-profile-card .avatar-wrap {
  flex-shrink: 0;
}
.settings-profile-card .avatar-wrap .avatar,
.settings-profile-card > .avatar {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.settings-profile-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-profile-meta strong,
.settings-profile-meta .settings-profile-name-row {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
/* Theme text only when cosmetics did not set an inline color / plate fg. */
.settings-profile-meta .settings-profile-name-row:not(:has(.name-text[style*="color"])):not(:has(.name-plate)) {
  color: var(--text);
}
.settings-profile-meta .settings-profile-name-row .name-text:not([style*="color"]) {
  color: var(--text);
}
/* Only the @username line — never force brand color onto the styled display name / plate. */
.settings-profile-meta > .settings-profile-username {
  color: var(--brand);
  font-size: 0.92rem;
}
.settings-profile-status {
  color: var(--text-2) !important;
  font-size: 0.82rem !important;
}
.settings-profile-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.settings-profile-name-row .name-text,
.profile-style-preview-name .name-text {
  font-size: inherit;
  font-weight: inherit;
  /* Cosmetics use inline color / plate !important — never force theme text here. */
}
/* Keep pale “white” nick readable on light themes */
.name-text[style*="color: rgb(248, 250, 252)"],
.name-text[style*="color:#F8FAFC"],
.name-text[style*="color: #F8FAFC"] {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.profile-style-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
  min-width: 0;
  text-align: center;
}
.profile-style-preview-avatar {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
}
.profile-style-preview-avatar .avatar-wrap {
  --avatar-size: 104px;
  width: 104px;
  height: 104px;
}
.profile-style-preview-avatar .avatar-wrap.frame-cloud,
.profile-style-preview-avatar .avatar-wrap.frame-storm,
.profile-style-preview-avatar .avatar-wrap.frame-thunder,
.profile-style-preview-avatar .avatar-wrap.frame-bolt,
.profile-style-preview-avatar .avatar-wrap.frame-capo,
.profile-style-preview-avatar .avatar-wrap.frame-qubi,
.profile-style-preview-avatar .avatar-wrap.frame-mist,
.profile-style-preview-avatar .avatar-wrap.frame-cigar,
.profile-style-preview-avatar .avatar-wrap.frame-noir,
.profile-style-preview-avatar .avatar-wrap.frame-qubi_glow,
.profile-style-preview-avatar .avatar-wrap.frame-bubble,
.profile-style-preview-avatar .avatar-wrap.frame-hairdresser,
.profile-style-preview-avatar .avatar-wrap.frame-nails,
.profile-style-preview-avatar .avatar-wrap.frame-barber,
.profile-style-preview-avatar .avatar-wrap.frame-barista,
.profile-style-preview-avatar .avatar-wrap.frame-doctor,
.profile-style-preview-avatar .avatar-wrap.frame-auto {
  --avatar-size: 104px;
  --illust-pad: 16%;
  width: 104px;
  height: 104px;
  /* Room for hat / ears / mist that stick out past the ring */
  margin: 10px;
}
.profile-style-preview-avatar .avatar-wrap > .avatar {
  width: 104px;
  height: 104px;
  font-size: 2.2rem;
}
/* Illustrated frames: photo must sit in the PNG hole (70%), not fill the wrap (#11878). */
.profile-style-preview-avatar .avatar-wrap[class*="frame-"] > .avatar {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  font-size: 1.55rem !important;
  margin: 0 auto !important;
  place-self: center !important;
  object-fit: cover;
  border-radius: 50%;
}
.cosmetic-shop-card .avatar-wrap[class*="frame-"] > .avatar {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  margin: 0 auto !important;
  place-self: center !important;
  object-fit: cover;
  border-radius: 50%;
  font-size: 1.1rem !important;
}
.profile-style-preview-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.profile-style-preview-camera svg {
  width: 18px;
  height: 18px;
  display: block;
}
.profile-style-preview-camera:active { transform: scale(0.96); }
.profile-style-preview-meta {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.profile-style-preview-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 1.25rem;
  font-weight: 700;
  min-width: 0;
  max-width: 100%;
}
.profile-style-preview-name .name-text:not([style*="color"]) {
  color: var(--text);
}
.profile-style-preview-name .name-plate {
  max-width: 100%;
}
.profile-style-preview-hint {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.35;
  max-width: 280px;
}
.profile-avatar-row .avatar-wrap .avatar {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
}

/* Android-like outlined profile fields (floating label on border). */
.profile-outlined {
  position: relative;
  margin: 14px 0 4px;
}
.profile-outlined-label {
  position: absolute;
  top: -8px;
  left: 12px;
  z-index: 1;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--bg);
  line-height: 1;
}
.profile-outlined-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line));
  border-radius: 14px;
  background: transparent;
}
.profile-outlined-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.profile-outlined-box.is-disabled {
  opacity: 0.72;
}
.profile-outlined-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand);
  display: grid;
  place-items: center;
}
.profile-outlined-ico svg { width: 20px; height: 20px; display: block; }
.profile-outlined-prefix {
  color: var(--text-2);
  font-weight: 600;
  flex-shrink: 0;
}
.profile-outlined-box input,
.profile-outlined-box textarea {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  outline: none;
  color: var(--text);
  resize: none;
  width: 100%;
}
.profile-outlined-hint {
  display: block;
  margin: 6px 4px 0;
  font-size: 0.75rem;
  color: var(--text-2);
}
.profile-screen .settings-list {
  padding-bottom: calc(88px + var(--safe-bottom, 0px));
}
.status-emoji-inline {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: transparent;
}
.status-emoji-open {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  text-align: left;
}
.profile-outlined--status .profile-outlined-box {
  min-height: 52px;
}
.profile-outlined--status .status-emoji-open {
  flex: 1;
  min-width: 0;
}
.about-brand-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.about-app-logo {
  filter: drop-shadow(0 8px 24px rgba(59, 184, 245, 0.35));
}
.about-app-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.about-tagline {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9rem;
}
.status-emoji-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.status-emoji-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: transparent;
}
.status-emoji-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--surface);
  color: var(--text-2);
}
.status-emoji-placeholder.ico-svg svg,
.status-emoji-placeholder svg {
  width: 28px;
  height: 28px;
  display: block;
}
.status-emoji-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.status-emoji-meta strong { font-size: 0.95rem; }
.status-emoji-meta span { color: var(--text-2); font-size: 0.8rem; }
.status-emoji-picker {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elevated);
  max-height: 340px;
  overflow: auto;
}
.branded-emoji-grid .sticker-quick.selected {
  outline: 2px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}
.settings-profile-chevron {
  color: var(--text-2);
  font-size: 1.6rem;
  line-height: 1;
  padding-left: 4px;
}
.settings-item {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  width: 100%;
}
.settings-item.with-ico {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.settings-item-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #3b9cff;
}
.settings-item-ico svg {
  width: 18px;
  height: 18px;
  display: block;
  color: inherit;
  /* Icons are mostly stroke-based (fill="none"); forcing fill paints solid blobs. */
}
.settings-item-ico.tone-blue { background: #3b9cff; }
.settings-item-ico.tone-sky { background: #34aadf; }
.settings-item-ico.tone-teal { background: #1abc9c; }
.settings-item-ico.tone-green { background: #4caf50; }
.settings-item-ico.tone-mint { background: #00c853; }
.settings-item-ico.tone-orange { background: #ff8a00; }
.settings-item-ico.tone-coral { background: #ff6b6b; }
.settings-item-ico.tone-pink { background: #e91e8c; }
.settings-item-ico.tone-purple { background: #9b59b6; }
.settings-item-ico.tone-indigo { background: #6366f1; }
.settings-item-ico.tone-slate { background: #6b7c93; }
.settings-item-ico.tone-gray { background: #8e8e93; }
.settings-item.danger .settings-item-ico {
  background: color-mix(in srgb, var(--danger, #ef4444) 88%, #000);
  color: #fff;
}
.settings-item.danger .settings-item-ico svg {
  color: #fff;
}
.settings-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.settings-item-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-2);
  opacity: 0.7;
  display: grid;
  place-items: center;
}
.settings-item-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}
.settings-item strong { font-weight: 700; color: var(--text); }
.settings-item span { color: var(--text-2); font-size: 0.88rem; }
.settings-item.danger strong { color: var(--danger); }
.settings-time-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
  align-items: stretch;
}
.settings-time-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-time-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.install-banner {
  margin: 10px 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-soft), var(--bg-elevated));
  border: 1px solid var(--line);
}
.install-banner h3 { margin: 0 0 6px; font-size: 1rem; }
.install-banner p { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.4; }
.install-banner ol {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 0.9rem;
}
.install-banner .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 18, 0.42);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  width: min(720px, 100%);
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 28%),
    color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  backdrop-filter: var(--glass-chrome-blur);
  -webkit-backdrop-filter: var(--glass-chrome-blur);
  border: 0.5px solid var(--glass-stroke);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px 12px calc(16px + var(--safe-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  animation: slideUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="light"] .sheet {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 40%, transparent), transparent 32%),
    color-mix(in srgb, var(--bg-elevated) 48%, transparent);
}
.sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-2) 55%, transparent);
  margin: 2px auto 10px;
}
@keyframes slideUp {
  from { transform: translateY(28%); opacity: 0.55; }
  to { transform: none; opacity: 1; }
}
.sheet button.sheet-btn {
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 600;
  color: var(--text);
}
.sheet button.sheet-btn:active {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.sheet button.sheet-btn.danger { color: var(--danger); }

.channel-join-sheet .channel-join-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 12px 16px;
}
.channel-join-sheet .channel-join-head .avatar,
.channel-join-sheet .channel-join-head .av {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
}
.channel-join-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.channel-join-slug {
  color: var(--accent, #2aabee);
  font-weight: 600;
  font-size: 0.95rem;
}
.channel-join-meta {
  color: var(--text-2);
  font-size: 0.88rem;
}
.channel-join-desc {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.4;
  margin-top: 6px;
  max-width: 36rem;
}
.channel-join-btn {
  width: calc(100% - 8px);
  margin: 4px 4px 8px;
  border-radius: 14px;
  font-weight: 700;
  padding: 14px 16px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  background: color-mix(in srgb, #12161c 78%, transparent);
  color: #fff;
  padding: 11px 18px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 200;
  max-width: 90%;
  border: 0.5px solid color-mix(in srgb, #fff 16%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}
.toast[hidden] { display: none; }

/* Bottom nav: clear dock + glass capsule — same pattern as chat composer-dock. */
.tabs-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none;
  box-shadow: none;
  padding: 8px 10px calc(8px + var(--safe-bottom));
}
.tabs-dock > .tabs {
  pointer-events: auto;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: min(700px, 100%);
  margin: 0;
}
.tabs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(8px + var(--safe-bottom));
  width: min(700px, calc(100% - 20px));
  z-index: 30;
  display: flex;
  border: 0.5px solid color-mix(in srgb, #fff 35%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated) 26%, transparent);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  padding: 4px 2px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.22),
    0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset;
  min-height: var(--tabs-h);
  overflow: hidden;
}
html[data-theme="light"] .tabs {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 30%, transparent);
  border-color: color-mix(in srgb, #fff 70%, var(--line));
  box-shadow:
    0 6px 22px rgba(15, 23, 42, 0.10),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
}
html[data-theme="dark"] .tabs,
html[data-theme="qpay"] .tabs {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-elevated) 24%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .tabs {
    background:
      linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 50%),
      color-mix(in srgb, var(--bg-elevated) 24%, transparent);
  }
}
.tabs button {
  flex: 1;
  min-width: 0;
  padding: 6px 2px 8px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tabs button:active { transform: scale(0.94); }
.tabs button.active { color: var(--brand); font-weight: 600; }
.tabs button.active svg { filter: none; }
.tabs .tab-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
}
.tabs .tab-ico svg { width: 22px; height: 22px; }
.tabs .tab-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--brand) 35%, transparent);
}
.tabs .tab-avatar-wrap {
  --avatar-size: 22px;
  --illust-pad: 22%;
  width: 22px;
  height: 22px;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  flex: 0 0 auto;
}
.tabs .tab-avatar-wrap[class*="frame-meme_"] {
  --illust-pad: 21%;
  overflow: visible;
}
.tabs .tab-avatar-wrap .tab-avatar-inner,
.tabs .tab-avatar-wrap > .avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50%;
  overflow: hidden;
}
.tabs .tab-avatar-wrap[class*="frame-meme_"] .tab-avatar-inner,
.tabs .tab-avatar-wrap[class*="frame-meme_"] > .avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.tabs .tab-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  line-height: 1;
}
.tabs .tab-invite-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 28px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.tabs .tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
.tabs .tab-badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.load-more {
  align-self: center;
  margin: 4px 0 10px;
  color: var(--brand-deep);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 12px;
}

/* ?? PWA parity extras — reply quote base (full recipe further below) ?? */
.reply-quote {
  position: relative;
  margin: 0 0 7px;
  overflow: hidden;
}
.reactions { margin-top: 4px; font-size: 0.95rem; }
.voice-btn {
  background: transparent;
  color: inherit;
  font-weight: 700;
  padding: 6px 0;
}
.file-link { color: var(--brand-deep); font-weight: 600; }
.sticker { font-size: 3rem; line-height: 1.1; }
.composer-banner, .rec-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 0;
  padding: 10px 12px 10px 14px;
  border-radius: 16px;
  font-size: 0.88rem;
  overflow: hidden;
  border: 0.5px solid color-mix(in srgb, #fff 18%, var(--glass-stroke));
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 14%, transparent), transparent 50%),
    color-mix(in srgb, var(--brand) 14%, var(--glass-pill-bg));
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  border-top: 0.5px solid color-mix(in srgb, #fff 18%, var(--glass-stroke));
  border-left: 0.5px solid color-mix(in srgb, #fff 18%, var(--glass-stroke));
}
.composer-banner::before,
.rec-banner::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 45%, transparent);
}
.composer-banner .grow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.composer-banner .banner-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-deep);
}
.composer-banner .banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 0.85rem;
}
.row-trail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.chat-empty {
  margin: auto;
  padding: 56px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.chat-empty-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 45%),
    color-mix(in srgb, #000 38%, transparent);
  color: #fff;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 0.5px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 22%, transparent);
  text-align: center;
  max-width: 280px;
}
.chat-empty-greet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px 16px;
  border-radius: 20px;
  border: 0.5px solid color-mix(in srgb, #fff 20%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    color-mix(in srgb, #000 42%, transparent);
  color: #fff;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 28%, transparent);
  text-align: center;
  max-width: 300px;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-empty-greet:active {
  transform: scale(0.97);
}
.chat-empty-greet-sticker,
.chat-empty-qubi {
  width: 132px;
  height: 132px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  pointer-events: none;
}
.chat-empty-greet strong {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  max-width: 16em;
}
.chat-empty-greet span {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255,255,255,.82);
  max-width: 18em;
}
.chat-empty-pill strong {
  margin-bottom: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
}
.chat-empty-pill span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  line-height: 1.35;
}
.chat-empty strong {
  margin-bottom: 8px;
}
.rec-banner { color: var(--danger); font-weight: 600; background: #fef2f2; }
.send.mic { background: var(--brand); }
.send.mic.rec { background: var(--danger); transform: scale(1.08); }
.send.mic.cancel { background: #666; }
.send.mic svg {
  width: 20px !important;
  height: 20px !important;
}
.attach-sheet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  max-height: 220px;
  overflow-y: auto;
}
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: transparent;
  border-top: 0;
  max-height: 220px;
  overflow-y: auto;
}
.attach-sheet.attach-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
  padding: 14px 12px 18px;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 26;
  isolation: isolate;
}
.attach-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px !important;
  background: transparent !important;
  border: none;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  color: var(--text-2);
  min-width: 0;
  position: relative;
  z-index: 1;
  /* Never inherit fullscreen .vnote overlay rules if class collides */
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}
.attach-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.attach-tile.cam .attach-tile-icon { background: #E84393; }
.attach-tile.gal .attach-tile-icon { background: #6C5CE7; }
.attach-tile.vid .attach-tile-icon { background: #0984E3; }
.attach-tile.file .attach-tile-icon { background: #E17055; }
.attach-tile.att-vnote .attach-tile-icon { background: #00CEC9; }
.attach-tile.vnote .attach-tile-icon { background: #00CEC9; } /* legacy class name — avoid */
.attach-tile.sched .attach-tile-icon { background: #636E72; }
.attach-tile.poll .attach-tile-icon { background: #00B894; }
.attach-tile.gif .attach-tile-icon { background: #FDCB6E; color: #3d2e00; }
.attach-tile.once .attach-tile-icon { background: #2d3436; }
.attach-tile.once.on .attach-tile-icon { background: var(--brand); }
.attach-tile-label {
  text-align: center;
  line-height: 1.15;
  max-width: 72px;
}
.attach-sheet button, .emoji-grid button {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 1.1rem;
}
.react-row {
  display: flex;
  gap: 6px;
  padding: 8px 4px 12px;
  overflow-x: auto;
}
.react-chip {
  font-size: 1.4rem;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--surface);
}
.react-chip.active {
  background: color-mix(in srgb, var(--brand) 28%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent);
}

/* Photo editor overlay — Telegram-like compact chrome, correct aspect preview */
.peditor {
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  /* Safe area only under chrome — avoid empty “extra row” under controls */
  padding-bottom: 0;
}
.peditor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 6px 2px;
  min-height: 48px;
}
.peditor-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
}
.peditor-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  overflow: hidden;
}
.vcaption-stage {
  touch-action: manipulation;
  width: 100%;
}
.peditor-stage canvas {
  display: block;
  /* Exact display size set in JS — never let max-* squash one axis */
  max-width: none !important;
  max-height: none !important;
  width: auto;
  height: auto;
  border-radius: 10px;
  touch-action: none;
  background: #111;
}
.vcaption-stage video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  background: #111;
  object-fit: contain;
  touch-action: auto;
}
.vcaption-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 22px;
  pointer-events: none;
}
.peditor-chrome {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 12px, #0a0a0a);
}
.peditor-tools {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 4px 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.peditor-tools::-webkit-scrollbar { display: none; }
.peditor-tools button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 12px;
  background: #222;
  color: #fff;
  white-space: nowrap;
  font-size: 0.88rem;
}
.peditor-tools button.on { background: var(--brand); }
.peditor-draw-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 8px;
}
.peditor-draw-opts[hidden] { display: none !important; }
.peditor-brush {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0;
}
.peditor-brush[hidden] { display: none !important; }
.peditor-brush button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-weight: 700;
}
.peditor-brush button.on { background: var(--brand, #2AABEE); }
.peditor-colors {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 4px;
}
.peditor-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  padding: 0;
}
.peditor-swatch.edge { border-color: rgba(255, 255, 255, 0.55); }
.peditor-swatch.on {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
}
.peditor-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 0;
  min-height: 52px;
}
.peditor-once-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #1c1c1e;
  color: #ddd;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
.peditor-once-btn.on {
  background: color-mix(in srgb, var(--brand) 28%, #1c1c1e);
  border-color: var(--brand);
  color: #fff;
}
.peditor-once-btn svg { display: block; }
.peditor-cap {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border-radius: 22px;
  border: 0;
  padding: 0 16px;
  background: #1c1c1e;
  color: #fff;
  font-size: 1rem;
}
.peditor-cap::placeholder { color: rgba(255, 255, 255, 0.4); }
.peditor-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  border: 0;
}
.peditor-send svg { display: block; }
.peditor-x,
.peditor-undo {
  color: #fff;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.peditor-x svg { display: block; }
.peditor-crop {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  touch-action: none;
}
.peditor-crop i {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 3px;
}
.peditor-crop i[data-c="nw"] { left: -5px; top: -5px; }
.peditor-crop i[data-c="ne"] { right: -5px; top: -5px; }
.peditor-crop i[data-c="sw"] { left: -5px; bottom: -5px; }
.peditor-crop i[data-c="se"] { right: -5px; bottom: -5px; }

/* legacy once label — unused */
.peditor-once { display: none; }

/* Circular avatar crop */
.acrop {
  position: fixed; inset: 0; z-index: 85;
  background: #0E0E0E; color: #fff;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.acrop-top, .acrop-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
}
.acrop-hint {
  margin: 0; padding: 0 16px 8px; color: #b0b0b0; font-size: 13px;
}
.acrop-stage {
  flex: 1; min-height: 0; position: relative; touch-action: none;
  overflow: hidden;
}
.acrop-stage canvas { width: 100%; height: 100%; display: block; }
.acrop-mask { display: none; }
.acrop-btn {
  background: transparent; color: #fff; border: 0; font-size: 15px; padding: 8px 10px;
}
.acrop-done { color: var(--brand); font-weight: 700; }

/* Video notes (??????) */
.vnote-bubble {
  position: relative;
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  touch-action: none;
}
.vnote-play-ring {
  position: absolute; inset: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 1;
}
.vnote-play-ring circle.track {
  fill: none; stroke: rgba(255,255,255,.28); stroke-width: 4;
}
.vnote-play-ring circle.buf {
  fill: none; stroke: rgba(255,255,255,.45); stroke-width: 4;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  stroke-linecap: round;
}
.vnote-play-ring circle.prog {
  fill: none; stroke: #22c55e; stroke-width: 4;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  stroke-linecap: round;
}
.vnote-play {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  display: block;
  z-index: 0;
  pointer-events: none; /* gestures live on .vnote-bubble */
}
.vnote-playbtn {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  pointer-events: none; /* wrap handles play/scrub */
}
.vnote-playbtn svg {
  width: 48px;
  height: 48px;
  margin-left: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.vnote-playbtn:not(.playing)::after {
  content: '';
  position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  z-index: -1;
}
.vnote-time {
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.vnote-react-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 18px;
  margin-bottom: 2px;
  max-width: 220px;
}
.vnote-react-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-2, #1e293b) 88%, transparent);
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vnote-react-chip.mine {
  background: color-mix(in srgb, var(--brand, #22c55e) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #22c55e) 55%, transparent);
}
.vnote-react-chip:active {
  transform: scale(0.94);
}

/* Fullscreen video-note (Telegram enlarge + blur chat) */
.vnote-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.vnote-fs-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  pointer-events: none;
}
.vnote-fs-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 20, 0.48);
}
.vnote-fs-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vnote-fs-bubble.vnote-bubble {
  width: min(78vw, 300px);
  height: min(78vw, 300px);
}
.vnote-fs-bubble .vnote-time {
  bottom: -28px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.vnote-fs-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vnote-fs-close svg { width: 22px; height: 22px; }

.send.mic.mode-vnote { background: color-mix(in srgb, var(--brand) 88%, #0b1520); }
.send.mic {
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.send.mic.rec {
  transform: scale(1.08);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger, #e53935) 26%, transparent);
}
div.vnote {
  position: fixed; inset: 0; z-index: 11050;
  /* Opaque so story-create / chat never show through under the circle */
  background: #0a0a0a;
  color: #fff;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  pointer-events: auto;
  box-sizing: border-box;
}
.vnote-stage {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 20px 22px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-width: min(96vw, 420px);
}
/* Full video record (attach → Запись): true fullscreen preview, not a tiny card */
div.vnote.vnote-full {
  background: #000;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.vnote-full .vnote-stage {
  max-width: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  justify-content: stretch;
}
.vnote-full .vnote-ring {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
  aspect-ratio: auto;
}
.vnote-full .vnote-circle { inset: 0; border-radius: 0; }
.vnote-full .vnote-circle video { border-radius: 0; object-fit: cover; }
.vnote-full .vnote-title,
.vnote-full .vnote-hint {
  position: absolute;
  left: 0; right: 0;
  z-index: 4;
  text-align: center;
  pointer-events: none;
}
.vnote-full .vnote-title { top: calc(10px + env(safe-area-inset-top)); }
.vnote-full .vnote-hint { top: calc(40px + env(safe-area-inset-top)); }
.vnote-full .vnote-rec,
.vnote-full .vnote-preview-actions {
  margin-top: 16px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom));
}
.story-cam .story-cam-stage { max-width: min(96vw, 520px); width: 100%; }
.story-cam .story-cam-preview {
  width: min(100%, 480px);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 58vh;
}
.story-cam .vnote-circle { inset: 6px; border-radius: 18px; }
/* Front cam: natural (no mirror) — match Android VideoNoteRecorder. */
.story-cam .vnote-circle video,
.story-cam.facing-user .vnote-circle video,
.story-cam.facing-environment .vnote-circle video {
  transform: none !important;
}
/* Story camera shutter stays ROUND (circles everywhere — user #6276). */
.story-cam .vnote-rec {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border-width: 4px;
}
.story-cam .vnote-rec::after {
  inset: 10px;
  border-radius: 50%;
}
.story-cam .vnote-rec.on::after {
  inset: 28px;
  border-radius: 8px;
}
/* Attach tile must never pick up recorder overlay rules */
button.attach-tile.vnote,
button.attach-tile.att-vnote {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 2px !important;
  color: var(--text-2) !important;
}
.vnote-x {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; z-index: 8;
  color: #fff; padding: 12px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.62); border-radius: 50%; border: none;
  min-width: 44px; min-height: 44px;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.vnote-title { font-weight: 700; font-size: 1.15rem; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.vnote-hint { color: rgba(255,255,255,.85); font-size: .88rem; margin: 8px 0 18px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.vnote.recording .vnote-hint { color: #ff5252; font-weight: 600; }
.vnote.canceling .vnote-hint { color: #ff8a80; font-weight: 700; }
.vnote.locked .vnote-hint { color: #fff59d; }
.vnote-ring { position: relative; width: min(280px, 78vw); height: min(280px, 78vw); }
.vnote-progress { position: absolute; inset: 0; transform: rotate(-90deg); }
.vnote-progress circle {
  fill: none; stroke: #22c55e; stroke-width: 5.5;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.vnote.canceling .vnote-progress circle { stroke: #ff5252; }
.vnote-circle {
  position: absolute; inset: 10px; border-radius: 50%; overflow: hidden;
  background: rgba(0,0,0,.25);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.vnote-circle video { width: 100%; height: 100%; object-fit: cover; transform: none; }
.vnote-circle { transition: transform 0.32s ease; perspective: 800px; }
.vnote.flip-anim .vnote-circle { transform: rotateY(180deg); }
/* Recorder preview overlay only — must NOT override chat bubble video.vnote-play */
.vnote .vnote-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.92); pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,.15) 0%, transparent 70%);
  width: auto; height: auto; border-radius: 0; object-fit: unset; z-index: auto;
}
/* [hidden] must win — `display:grid` was forcing a play icon on live camera */
.vnote .vnote-play[hidden],
.vnote:not(.preview) .vnote-play {
  display: none !important;
}
.vnote.preview .vnote-circle { cursor: pointer; }
.vnote.preview .vnote-circle video { transform: none; pointer-events: none; }
.vnote.preview .vnote-rec,
.vnote.preview .vnote-rec::after {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.vnote.preview .vnote-hint {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}
.vnote-preview-actions {
  display: none !important;
}
/* Put shutter BETWEEN trash and send (Telegram-like row) */
.vnote-controls-row {
  margin-top: auto;
  margin-bottom: calc(8px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
  z-index: 5;
  min-height: 88px;
}
.vnote-controls-row .vnote-rec {
  margin: 0 !important;
  flex-shrink: 0;
}
.vnote-controls-row .vnote-preview-trash,
.vnote-controls-row .vnote-preview-send {
  opacity: 0.35;
  pointer-events: none;
}
.vnote.preview .vnote-controls-row .vnote-preview-trash,
.vnote.preview .vnote-controls-row .vnote-preview-send {
  opacity: 1;
  pointer-events: auto;
}
.vnote.preview .vnote-controls-row .vnote-rec {
  visibility: hidden;
  pointer-events: none;
}
.vnote-preview-trash, .vnote-preview-send {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; border: none;
}
.vnote-preview-trash { background: rgba(80,80,80,.95); }
.vnote-preview-send { background: #22c55e; }
.vnote-rec {
  margin-top: 28px; width: 84px; height: 84px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,.35); position: relative;
  transition: background .12s ease, transform .05s linear;
  touch-action: none;
}
.vnote:not(.vnote-full) .vnote-rec {
  margin-top: auto;
  margin-bottom: 8px;
}
.vnote-rec::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #e53935;
}
.vnote-rec.on { background: #e53935; }
.vnote-rec.on::after { inset: 28px; border-radius: 8px; background: #fff; }
.vnote-rec.cancel { background: #666; }
.vnote-rec.cancel::after { background: #bdbdbd; }
.vnote.locked .vnote-rec.on::after {
  inset: 26px; border-radius: 6px;
  background: #fff;
}
.vnote-sub { margin-top: 12px; color: rgba(255,255,255,.7); font-size: .8rem; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* Sprint A: FAB, archive, drafts, pin */
.fab {
  position: fixed; right: max(18px, env(safe-area-inset-right));
  bottom: calc(var(--tabs-dock) + 18px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 22%, var(--brand)), var(--brand-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 28px var(--brand-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  z-index: 28;
  border: 0.5px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fab:active { transform: scale(0.94); }
.fab svg { width: 26px; height: 26px; }
.archive-entry {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--line); color: var(--text);
  background: var(--bg-elevated);
}
.archive-entry .archive-avatar {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  font-size: 0;
}
.archive-entry .archive-avatar svg {
  width: 26px;
  height: 26px;
  display: block;
}
.archive-entry .badge { margin-left: auto; }
.chat-row .pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-2);
  opacity: 0.85;
  overflow: hidden;
  line-height: 0;
}
.chat-row .pin-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.chat-row .pin-icon-trail {
  margin-left: 2px;
}
.chat-row .row-time {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap;
  justify-self: end;
}
.chat-row .row-preview.draft {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.chat-row .row-preview.draft .draft-label {
  color: var(--danger, #dc2626);
  font-weight: 600;
}
.chat-row .row-preview.draft .draft-text {
  color: var(--text-2);
  font-weight: 400;
}

/* Voice seek — Android VoiceMessagePlayer parity */
.voice-seek {
  display: flex; align-items: center; gap: 10px;
  min-width: 200px; max-width: 280px; padding: 4px 0;
}
.voice-seek-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.voice-seek-play {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0; border: 1px solid rgba(255,255,255,.42); padding: 0; cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.38), transparent 55%),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 92%, #fff), var(--brand));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 10px color-mix(in srgb, var(--brand) 35%, transparent);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: saturate(1.2);
}
.voice-seek-play::before,
.voice-seek-play::after {
  content: '';
  position: absolute;
  background: #fff;
  pointer-events: none;
}
/* Play triangle */
.voice-seek-play:not(.playing)::before {
  left: 15px; top: 12px;
  width: 0; height: 0;
  background: transparent;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  border-radius: 0;
}
.voice-seek-play:not(.playing)::after { display: none; }
/* Pause bars */
.voice-seek-play.playing::before,
.voice-seek-play.playing::after {
  width: 4px; height: 14px; border-radius: 2px; top: 13px;
  background: #fff; border: 0;
}
.voice-seek-play.playing::before { left: 14px; }
.voice-seek-play.playing::after { left: 22px; }
.voice-seek-track {
  flex: 1; height: 28px; border-radius: 8px;
  background: transparent;
  position: relative; cursor: pointer;
  display: flex; align-items: center;
}
.voice-seek-wave {
  display: flex; align-items: center; gap: 2px;
  width: 100%; height: 28px; pointer-events: none;
}
.voice-seek-wave span {
  flex: 1; min-width: 1.6px; max-width: 4px;
  height: calc(var(--amp, .4) * 100%);
  border-radius: 999px;
  transform-origin: center;
  background: color-mix(in srgb, var(--text) 28%, transparent);
}
.voice-seek-wave span.played,
.voice-seek-wave span.now {
  background: var(--brand);
}
.voice-seek-wave span.now {
  animation: voice-timbre-pulse .7s ease-in-out infinite;
}
@keyframes voice-timbre-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.18); }
}
.voice-seek-bar,
.voice-seek-thumb { display: none; }
.voice-seek-times {
  display: flex; justify-content: space-between;
  padding: 0 2px;
  font-size: 0.7rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.voice-seek-cur, .voice-seek-tot { min-width: 0; }

/* Media viewer — Telegram-like fullscreen on phones, card on desktop */
.media-viewer {
  --mv-pad-x: 16px;
  --mv-pad-y: 12px;
  --mv-max-w: min(1600px, calc(100vw - (var(--mv-pad-x) * 2)));
  --mv-max-h: min(96dvh, calc(100vh - (var(--mv-pad-y) * 2)));
  --mv-img-h: min(94dvh, calc(100vh - 40px));
  --mv-img-h-caption: min(72dvh, calc(100vh - 180px));
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(6, 10, 16, 0.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(var(--mv-pad-y) + env(safe-area-inset-top)) var(--mv-pad-x) calc(var(--mv-pad-y) + env(safe-area-inset-bottom));
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transition: background 0.18s ease, opacity 0.18s ease;
  box-sizing: border-box;
}
.media-viewer.closing {
  opacity: 0;
  pointer-events: none;
}
.media-viewer-blur {
  position: absolute;
  inset: -48px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(48px) saturate(1.3);
  transform: scale(1.14);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
.media-viewer-glass {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #0a121c 28%, transparent);
  pointer-events: none;
  z-index: 0;
}
.media-viewer-frame {
  position: relative;
  z-index: 2;
  /* Cap the card to the viewport — tall screenshots must shrink, not clip */
  width: auto;
  max-width: var(--mv-max-w);
  max-height: var(--mv-max-h);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(255, 255, 255, 0.18);
  background: #121820;
  touch-action: none;
  will-change: transform, opacity;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.media-viewer-frame.dragging {
  transition: none;
}
.media-viewer-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: var(--mv-max-h);
  box-sizing: border-box;
}
.media-viewer-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  max-width: 100%;
  max-height: var(--mv-img-h);
  /* Do not clip until the image has been fitted — tall screenshots must shrink first */
  overflow: visible;
}
.media-viewer-content {
  display: block;
  max-width: min(100%, var(--mv-max-w));
  max-height: var(--mv-img-h);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  touch-action: none;
}
.media-viewer-frame.has-caption .media-viewer-stage {
  max-height: var(--mv-img-h);
}
.media-viewer-frame.has-caption .media-viewer-content {
  max-height: var(--mv-img-h);
}
.media-viewer-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  max-height: calc(1.4em * 3 + 24px);
  overflow: hidden;
  padding: 12px 14px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 18px 18px 20px 20px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08)),
    color-mix(in srgb, #121820 55%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 0.5px solid color-mix(in srgb, #fff 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  cursor: pointer;
  transition: opacity .28s ease;
  pointer-events: auto;
}
.media-viewer-caption.is-hidden { opacity: 0; }
.media-viewer-caption.is-expanded {
  max-height: min(40dvh, 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.media-viewer-stage:has(video) .media-viewer-caption {
  bottom: 80px;
  /* Seek/controls stay tappable — Telegram. Expand only when already open. */
  pointer-events: none;
}
.media-viewer-stage:has(video) .media-viewer-caption.is-expanded {
  pointer-events: auto;
}
.media-viewer-loader {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  pointer-events: none;
}
.media-viewer-buffer-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s;
  z-index: 4;
  pointer-events: none;
}
.media-viewer-buffer-bar.visible { opacity: 1; }
.media-viewer-buffer-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 2px;
  transition: width .15s linear;
}
.album-video-cell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}
.album-video-cell > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-viewer-chrome {
  position: absolute;
  top: 10px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  border: 0.5px solid rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38), transparent 55%),
    rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.media-viewer-chrome:active { transform: scale(0.96); }
.media-viewer-chrome svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: #fff;
  fill: none;
}
.media-viewer-close { left: 10px; }
.media-viewer-save { right: 10px; }
.media-viewer-save.loading { opacity: 0.7; pointer-events: none; }

.media-save-overlay {
  /* Sit under the top-right download chrome — not bottom/left (San4o #11502). */
  position: fixed; inset: 0; z-index: 11050;
  display: flex; align-items: flex-start; justify-content: flex-end;
  pointer-events: none;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 10px 0;
}
.media-save-overlay.in-viewer {
  position: absolute; inset: 0; z-index: 30;
  align-items: flex-start; justify-content: flex-end;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 10px 0;
}
.media-save-glass {
  pointer-events: auto;
  width: min(100%, 280px);
  min-width: 0;
  padding: 12px 14px 12px;
  border-radius: 18px;
  background: rgba(18, 26, 40, 0.88);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.media-save-title {
  color: #fff; font-weight: 600; font-size: 0.92rem; text-align: left;
  margin-bottom: 10px;
}
.media-save-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.media-save-bar > i {
  display: block; height: 100%; width: 8%;
  background: linear-gradient(90deg, #5eb3ff, #7bc8ff);
  border-radius: inherit; transition: width 0.18s ease;
}
.media-save-pct {
  margin-top: 8px; text-align: left; color: rgba(255,255,255,.72);
  font-size: 0.82rem;
}
.media-save-hide {
  margin-top: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 0.88rem;
}

.vnote-playbtn.loading {
  opacity: 0.85;
}
.vnote-playbtn.loading::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: vnote-spin 0.7s linear infinite;
  display: block;
}
@keyframes vnote-spin {
  to { transform: rotate(360deg); }
}

/* Poll */
.poll { min-width: 200px; max-width: 280px; }
.poll-q { font-weight: 700; margin-bottom: 10px; }
.poll-opt {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 12px; background: var(--surface); position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.poll-opt.voted { border-color: var(--brand); }
.poll-opt-text { position: relative; z-index: 1; font-weight: 500; grid-column: 1; }
.poll-opt-meta { position: relative; z-index: 1; font-size: .75rem; color: var(--text-2); grid-column: 2; align-self: center; }
.poll-opt-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%); background: var(--brand-soft); opacity: .85;
}
.poll-footer { font-size: .75rem; color: var(--text-2); margin-top: 4px; }

/* Multi-select (Telegram-style) */
.bubble-wrap .msg-check {
  display: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-2) 55%, transparent);
  background: transparent;
  align-self: center;
  margin: 0 8px 0 2px;
  box-sizing: border-box;
}
.bubble-wrap.mine .msg-check { order: 2; margin: 0 2px 0 8px; }
.bubble-wrap.multi-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 100%;
  opacity: 1;
}
.bubble-wrap.multi-select .msg-check { display: block; }
.bubble-wrap.multi-select.selected {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 12px;
}
.bubble-wrap.selected .msg-check,
.msg-check.on {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--bg-elevated);
}
.bubble-wrap.selected .bubble { outline: none; }
.topbar.select-mode-bar .topbar-name {
  font-size: 1.25rem;
  font-weight: 700;
}
.topbar.select-mode-bar .grow { flex: 1; min-width: 0; }
.icon-btn.danger-icon { color: var(--danger, #e53935); }
.multi-select-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 40%),
    var(--glass-chrome-bg);
  backdrop-filter: var(--glass-chrome-blur);
  -webkit-backdrop-filter: var(--glass-chrome-blur);
  border-top: 0.5px solid var(--glass-stroke);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.multi-select-toolbar .ms-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.multi-select-toolbar .ms-icon svg { width: 22px; height: 22px; }
.multi-select-toolbar .ms-icon.danger { color: var(--danger, #e53935); }
.multi-select-toolbar .ms-count {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}
.multi-select-toolbar .ms-cancel {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}
.multi-select-toolbar .grow { flex: 1; }

/* GIF / emoji panel — Telegram liquid glass (Android EmojiGifPanel parity) */
.emoji-panel {
  --emoji-glass-fill: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  --emoji-glass-frost: color-mix(in srgb, var(--bg) 72%, transparent);
  /* Opaque-enough fill first — iOS backdrop-filter alone looked muddy / “crooked”. */
  background-color: color-mix(in srgb, var(--bg-elevated) 92%, #0e1621);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 42%),
    linear-gradient(180deg, var(--emoji-glass-frost), transparent 68%),
    var(--emoji-glass-fill);
  border: 0.5px solid color-mix(in srgb, #fff 20%, var(--glass-stroke));
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  max-height: min(52vh, 420px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 -10px 32px rgba(14, 22, 33, 0.22),
    0 1px 0 color-mix(in srgb, #fff 14%, transparent) inset;
  touch-action: pan-y;
  overscroll-behavior: contain;
  isolation: isolate;
}
html[data-theme="dark"] .emoji-panel,
html.theme-dark .emoji-panel,
html[data-theme="qpay"] .emoji-panel,
html[data-theme="midnight"] .emoji-panel,
html[data-theme="ocean"] .emoji-panel,
html[data-theme="ember"] .emoji-panel {
  --emoji-glass-fill: color-mix(in srgb, #17212B 94%, transparent);
  --emoji-glass-frost: color-mix(in srgb, #0E1621 78%, transparent);
  background-color: #17212B;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 12%, transparent), transparent 40%),
    linear-gradient(180deg, var(--emoji-glass-frost), transparent 70%),
    var(--emoji-glass-fill);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
html[data-theme="light"] .emoji-panel {
  --emoji-glass-fill: color-mix(in srgb, #ffffff 96%, transparent);
  --emoji-glass-frost: color-mix(in srgb, #F2F5F8 82%, transparent);
  background-color: #ffffff;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 55%, transparent), transparent 46%),
    linear-gradient(180deg, var(--emoji-glass-frost), transparent 68%),
    var(--emoji-glass-fill);
  border-color: color-mix(in srgb, #000 10%, var(--line));
  box-shadow:
    0 -8px 24px rgba(15, 23, 42, 0.10),
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset;
}
.emoji-panel-drag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.emoji-panel-handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--text) 28%, transparent);
  pointer-events: none;
  align-self: center;
}
.emoji-panel .emoji-grid,
.emoji-panel .gif-grid,
.emoji-panel .emoji-tabs,
.emoji-panel .emoji-panel-drag {
  touch-action: pan-y;
}
/* Pack / category chips must scroll horizontally on touch (was pan-y → stuck). */
.emoji-panel .sticker-pack-tabs,
.emoji-panel .emoji-cat-row {
  touch-action: pan-x;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.emoji-panel .emoji-panel-drag {
  touch-action: none;
}
.emoji-panel .emoji-tabs {
  touch-action: none;
}
/* Nested blur inside frosted sheet looks muddy/crooked on iOS — flat chips only */
.emoji-panel .emoji-tabs button,
.emoji-panel .emoji-cat-chip,
.emoji-panel .folder-chip,
.emoji-panel .emoji-logo-tab {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.emoji-panel .emoji-tabs button.active,
.emoji-panel .emoji-cat-chip.active,
.emoji-panel .folder-chip.active {
  background: color-mix(in srgb, var(--brand) 22%, var(--surface));
  color: var(--brand-deep);
}
html[data-theme="dark"] .emoji-panel .emoji-tabs button.active,
html.theme-dark .emoji-panel .emoji-tabs button.active,
html[data-theme="qpay"] .emoji-panel .emoji-tabs button.active,
html[data-theme="dark"] .emoji-panel .emoji-cat-chip.active,
html.theme-dark .emoji-panel .emoji-cat-chip.active,
html[data-theme="qpay"] .emoji-panel .emoji-cat-chip.active,
html[data-theme="dark"] .emoji-panel .folder-chip.active,
html.theme-dark .emoji-panel .folder-chip.active,
html[data-theme="qpay"] .emoji-panel .folder-chip.active {
  color: #e8f7ff;
  background: color-mix(in srgb, var(--brand) 28%, #17212B);
}
.emoji-panel .emoji-grid,
.emoji-panel .gif-grid,
.emoji-panel .pack-download-gate {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.emoji-panel .emoji-tabs,
.emoji-panel .emoji-cat-row,
.emoji-panel .sticker-pack-tabs,
.emoji-panel .emoji-panel-handle,
.emoji-panel .emoji-panel-drag {
  flex-shrink: 0;
}
.messages-wrap.emoji-open > .messages {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}
.messages-wrap.emoji-open::before {
  content: none;
  display: none;
}
.messages-wrap.emoji-open > .emoji-scrim {
  position: absolute;
  inset: 0;
  z-index: 17;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Emoji sheet lives INSIDE composer-dock ABOVE the composer (Android parity). */
.messages-wrap > .emoji-panel {
  display: none;
}
.screen.chat-screen > .composer-dock.emoji-open-dock {
  bottom: 0;
  transition: none;
}
.screen.chat-screen > .composer-dock.emoji-open-dock > .emoji-panel {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 2;
  height: var(--emoji-sheet-h, 300px);
  max-height: var(--emoji-sheet-h, 300px);
  flex-shrink: 0;
  order: -1; /* keep above composer even if DOM order drifts */
  pointer-events: auto;
  border-radius: 20px 20px 0 0;
  padding-bottom: 4px;
  box-sizing: border-box;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
html.emoji-sheet-open .screen.chat-screen > .composer-dock.emoji-open-dock {
  bottom: 0;
}
@media (min-width: 721px) {
  .screen.chat-screen > .composer-dock.emoji-open-dock > .emoji-panel {
    left: auto;
    right: auto;
  }
}
.row-preview.typing {
  color: var(--brand);
  font-weight: 600;
}
.story-create-screen {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1A2740 0%, #0B1220 48%, #152238 100%);
  color: #fff;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
}
.story-create-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.story-create-back {
  color: #fff !important;
  width: 44px;
  height: 44px;
}
.story-create-title {
  flex: 1;
  font-weight: 600;
  font-size: 1.125rem;
  color: #fff;
  padding: 0 4px;
}
.story-create-publish {
  border: none;
  background: transparent;
  color: var(--brand, #2AABEE);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.story-create-publish:disabled,
.story-create-publish.busy {
  opacity: 0.55;
  cursor: default;
}
.story-create-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.story-create-text {
  width: 100%;
  max-width: 520px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  padding: 12px 4px;
  box-sizing: border-box;
  min-height: 140px;
}
.story-create-text::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.story-create-caption {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  padding: 10px 12px;
  resize: none;
  box-sizing: border-box;
  margin-top: 10px;
}
.story-create-caption::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.story-char-count {
  padding: 4px 4px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: .8rem;
  text-align: center;
  width: 100%;
}
.story-media-hint {
  padding: 8px 4px 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: .85rem;
  text-align: center;
}
.story-create-empty-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  text-align: center;
  padding: 24px 16px;
  max-width: 280px;
  line-height: 1.4;
}
.story-create-error {
  flex-shrink: 0;
  color: #FF8A80;
  font-size: 0.85rem;
  text-align: center;
  padding: 4px 16px 8px;
}
.story-create-screen .story-emoji-panel {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  height: min(300px, 42dvh);
  max-height: min(300px, 42dvh);
  margin: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.story-create-screen .story-emoji-panel[hidden] {
  display: none !important;
}
.story-create-screen .story-emoji-panel .emoji-grid {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
}
.story-mode-rail {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.story-mode-rail::-webkit-scrollbar { display: none; }
.story-mode-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px;
  border-radius: 16px;
  cursor: pointer;
  min-width: 64px;
}
.story-mode-chip-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.story-mode-chip-ico svg {
  width: 22px;
  height: 22px;
}
.story-mode-chip.selected {
  color: #fff;
}
.story-mode-chip.selected .story-mode-chip-ico {
  background: var(--brand, #2AABEE);
  border-color: transparent;
}
.story-mode-chip-label {
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}
.story-smile-preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
}
.story-smile-img {
  width: 220px;
  height: 220px;
  object-fit: contain;
}
.story-smile-clear {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  color: #fff;
  padding: 0;
}
.story-smile-clear svg { width: 14px; height: 14px; }
.story-media-preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
  width: 100%;
}
.story-photo-preview {
  max-width: 100%;
  max-height: min(420px, 48dvh);
  border-radius: 20px;
  object-fit: contain;
  background: #000;
}
.story-circle-preview {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 3px solid color-mix(in srgb, var(--brand, #2AABEE) 55%, transparent);
}
/* Legacy sheet create removed — keep harmless stubs if old class appears */
.story-create-sheet .story-emoji-btn { display: none; }
.story-create-actions { display: none; }
.story-publish-btn { display: none; }

.emoji-cat-row {
  display: flex;
  gap: 6px;
  padding: 6px 8px 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.emoji-cat-row::-webkit-scrollbar { display: none; }
.emoji-cat-chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.emoji-cat-chip.active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.emoji-logo-tab {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 3px;
  background: var(--surface);
  display: grid;
  place-items: center;
  position: relative;
}
.emoji-logo-tab.active {
  background: var(--brand-soft);
  outline: 2px solid var(--brand);
}
.emoji-logo-tab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.emoji-logo-tab .pack-dl-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand, #2aabee);
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
  pointer-events: none;
}
.emoji-logo-tab.is-busy .pack-dl-badge,
.pack-dl-badge.pack-dl-spin {
  animation: pack-dl-spin 0.8s linear infinite;
  background: conic-gradient(from 0deg, #fff, var(--brand, #2aabee));
  color: transparent;
}
.emoji-logo-tab.is-busy img {
  animation: pack-dl-pulse 0.9s ease-in-out infinite;
}
@keyframes pack-dl-spin {
  to { transform: rotate(360deg); }
}
@keyframes pack-dl-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.88; }
}
.pack-download-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 16px 16px;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
}
.pack-download-gate.is-busy .pack-download-icon {
  animation: pack-dl-pulse 1.2s ease-in-out infinite;
}
.pack-download-spin {
  width: 36px;
  height: 36px;
  margin-top: 8px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand, #2aabee) 25%, transparent);
  border-top-color: var(--brand, #2aabee);
  animation: pack-dl-spin 0.75s linear infinite;
}
.pack-download-btn.is-busy {
  opacity: 0.85;
  animation: pack-dl-pulse 0.9s ease-in-out infinite;
}
.pack-download-icon {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  position: relative;
}
.pack-download-hit {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  border-radius: 28px;
  line-height: 0;
  flex-shrink: 0;
}
.pack-download-hit:disabled { cursor: default; }
.pack-download-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand, #2aabee);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border: 2px solid color-mix(in srgb, var(--bg-elevated, #17212B) 90%, #000);
  z-index: 2;
}
.pack-download-badge::after {
  content: '';
  position: absolute;
  inset: 10px;
  background: #fff;
  clip-path: polygon(40% 0, 60% 0, 60% 46%, 86% 46%, 50% 86%, 14% 46%, 40% 46%);
}
.pack-download-badge.is-busy::after {
  inset: 7px;
  border-radius: 50%;
  background: var(--brand, #2aabee);
  clip-path: none;
  animation: none;
  box-shadow: inset 0 0 0 2.5px transparent;
}
.pack-download-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pack-download-title {
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--text, #fff);
}
.pack-download-hint {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
  max-width: 280px;
  flex-shrink: 0;
  color: var(--text, #fff);
  line-height: 1.35;
}
.pack-download-gate.is-busy .pack-download-hint {
  opacity: 1;
  color: var(--brand, #2aabee);
}
.pack-download-btn {
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  background: var(--brand, #2aabee);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pack-download-bar {
  width: min(240px, 82%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.12);
}
.pack-download-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand, #2aabee), color-mix(in srgb, var(--brand, #2aabee) 70%, #fff));
  border-radius: 999px;
  transition: width 0.12s linear;
  min-width: 4px;
}
.folder-chip.pack-needs-dl {
  opacity: 0.92;
}
.branded-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 6px 10px;
}
.branded-emoji-grid .sticker-quick,
.branded-emoji-grid .ce-smile {
  width: 40px;
  height: 40px;
  padding: 2px;
  border-radius: 8px;
}
.branded-emoji-grid .sticker-quick img,
.branded-emoji-grid .ce-smile img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.ce-inline {
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.28em;
  display: inline-block;
  object-fit: contain;
  margin: 0 1px;
}
.emoji-tabs {
  display: flex;
  gap: 6px;
  padding: 6px 10px 4px;
  flex-shrink: 0;
}
.emoji-tabs button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-weight: 650;
  font-size: 0.82rem;
  color: var(--text-2);
  border: 0.5px solid color-mix(in srgb, var(--line) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.emoji-tabs button.active {
  background: color-mix(in srgb, var(--brand) 22%, var(--surface));
  color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.gif-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; max-height: 220px; overflow-y: auto; background: transparent; }
.gif-grid button { border-radius: 8px; overflow: hidden; padding: 0; }
.sticker-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: transparent;
  display: block;
}
.sticker-quick img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: transparent;
}
.emoji-grid .sticker-quick {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 4px;
  background: transparent !important;
  border-radius: 8px;
}
.bubble.sticker-bubble {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px;
}
.bubble-wrap.tail-end.mine .bubble.sticker-bubble::after,
.bubble-wrap.tail-end.theirs .bubble.sticker-bubble::after {
  display: none;
}
.bubble.sticker-bubble .meta {
  color: var(--text-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Calls */
.call-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: linear-gradient(160deg, #0b1a14 0%, #052e1a 50%, #0a0a0a 100%);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom));
}
.call-overlay.video .call-remote {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
  transform: none;
  pointer-events: none;
}
.call-overlay.video:not(.call-active):not(.call-has-remote-video):not(.call-answered) .call-remote,
.call-overlay.video:not(.call-active):not(.call-has-remote-video):not(.call-answered) .call-local {
  opacity: 0; pointer-events: none;
}
.call-overlay.video.call-has-remote-video .call-peer-avatar-wrap,
.call-overlay.video.call-answered .call-peer-avatar-wrap {
  display: none;
}
.call-overlay.video.call-answered:not(.call-has-remote-video) .call-local,
.call-overlay.video.call-has-local-video:not(.call-has-remote-video) .call-local {
  opacity: 1;
  pointer-events: auto;
}
.call-overlay .call-avatar,
.call-overlay .call-avatar-letter {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 16px; display: block;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  background: linear-gradient(135deg, #5eb3ff, #7bc8ff);
}
.call-overlay .call-peer-avatar-wrap {
  width: 120px; height: 120px; margin: 0 auto 16px;
}
.call-overlay .call-peer-avatar {
  width: 100%; height: 100%; font-size: 2.6rem;
}
.call-overlay .call-status .call-peer-name,
.call-overlay .call-status .name-text,
.call-overlay .call-status .name-plate,
.call-overlay .call-status .name-plate[class*="name-plate-"],
.call-overlay .call-status .name-plate .name-text,
.call-overlay .call-status .name-plate .call-peer-name {
  /* Plate cosmetics force dark #0f172a / brand hues — unreadable on dark call UI (iOS #11503). */
  color: #fff !important;
  font-size: 1.625rem;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.55);
  -webkit-text-fill-color: #fff;
}
.call-overlay .call-status .name-plate {
  justify-content: center;
  max-width: min(92vw, 420px);
  width: max-content;
  flex-shrink: 0;
  /* Soft static rim — visible plate chrome on dark call scrim (#12973). */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}
.call-overlay .call-status .name-plate::before,
.call-overlay .call-status .name-plate::after {
  animation: none !important;
  opacity: 0.28 !important;
}
.call-overlay.video.call-active .call-avatar,
.call-overlay.video.call-active .call-avatar-letter,
.call-overlay.video.call-active .call-peer-avatar-wrap {
  display: none;
}
.call-overlay.video .call-local.swapped-main {
  inset: 0; width: 100%; height: 100%; top: 0; right: 0; border-radius: 0;
  border: none; box-shadow: none; z-index: 1;
}
.call-overlay.video .call-remote.swapped-pip {
  top: calc(16px + env(safe-area-inset-top)); right: 16px; left: auto;
  width: 100px; height: 140px; border-radius: 12px; z-index: 2;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: auto; cursor: grab;
}
.call-overlay.video .call-local {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; left: auto;
  width: 100px; height: 140px; border-radius: 12px; object-fit: cover;
  background: #222; z-index: 2; border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: grab; touch-action: none; user-select: none;
}
/* Front camera self-view: mirror like Android setMirror(true). Rear cam stays natural. */
.call-overlay.video .call-local.facing-user {
  transform: scaleX(-1);
}
.call-overlay.video .call-local.facing-environment {
  transform: none;
}
.call-overlay.video .call-local.dragging {
  cursor: grabbing;
  border-color: rgba(42,171,238,.65);
}
.call-overlay:not(.video) .call-remote,
.call-overlay:not(.video) .call-local { display: none; }
.call-overlay:not(.video) .call-remote-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.call-head {
  position: relative; z-index: 6; margin-bottom: 28px; text-align: center;
  padding: 0 20px; margin-top: auto;
  pointer-events: auto;
}
.call-status {
  font-size: 1.35rem; font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.call-sub {
  margin-top: 8px; font-size: 0.95rem; font-weight: 500;
  color: rgba(255,255,255,.72); text-shadow: 0 1px 6px rgba(0,0,0,.35);
  min-height: 1.2em;
}
.call-actions {
  position: relative; z-index: 6;
  pointer-events: auto;
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  justify-content: center; align-items: flex-start;
  width: 100%; max-width: 420px;
  padding: 0 8px;
}
.call-head,
.call-actions {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Video: chrome hides so controls don't sit on the picture; tap to show. */
.call-overlay.video.chrome-hidden .call-head,
.call-overlay.video.chrome-hidden .call-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.call-overlay.video .call-actions {
  flex-wrap: nowrap;
  gap: 8px;
  max-width: min(420px, 100%);
  padding: 0 10px 2px;
  align-items: center;
  justify-content: center;
}
.call-overlay.video .call-ctrl-wrap {
  min-width: 0;
  gap: 0;
}
.call-overlay.video .call-ctrl-label { display: none; }
.call-overlay.video .call-ctrl {
  width: 44px; height: 44px;
}
.call-overlay.video .call-ctrl.hangup,
.call-overlay.video .call-ctrl.decline,
.call-overlay.video .call-ctrl.accept {
  width: 48px; height: 48px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.call-overlay.video .call-ctrl .call-ctrl-ico,
.call-overlay.video .call-ctrl .ico-svg {
  width: 20px; height: 20px;
}
.call-overlay.video .call-ctrl.hangup .call-ctrl-ico,
.call-overlay.video .call-ctrl.hangup .ico-svg,
.call-overlay.video .call-ctrl.decline .call-ctrl-ico,
.call-overlay.video .call-ctrl.decline .ico-svg,
.call-overlay.video .call-ctrl.accept .call-ctrl-ico,
.call-overlay.video .call-ctrl.accept .ico-svg {
  width: 22px; height: 22px;
}
.call-overlay.video .call-head {
  margin-bottom: 16px;
}
.call-overlay.video .call-status { font-size: 1.1rem; }
.call-overlay.video .call-sub { font-size: 0.88rem; margin-top: 4px; }

/* In-app minimize: floating bubble over chat (Telegram-style). WebRTC stays alive. */
.call-overlay.minimized {
  inset: auto;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: auto;
  bottom: auto;
  width: 112px;
  height: 168px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  align-items: stretch;
  justify-content: stretch;
  z-index: 125;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow 0.15s ease;
}
.call-overlay.minimized.dragging {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(42, 171, 238, 0.55);
}
.call-overlay.minimized .call-head,
.call-overlay.minimized .call-actions,
.call-overlay.minimized .call-local {
  display: none !important;
}
.call-overlay.minimized .call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
  pointer-events: none;
}
.call-overlay.minimized:not(.video) {
  top: auto;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 168px;
  max-width: min(280px, calc(100vw - 24px));
  height: auto;
  padding: 10px 12px 10px 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, #12261c 0%, #0a1812 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.call-overlay.minimized:not(.video) .call-head {
  display: block !important;
  margin: 0;
  padding: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.call-overlay.minimized:not(.video) .call-status {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-overlay.minimized:not(.video) .call-sub {
  margin-top: 2px;
  font-size: 0.78rem;
}
.call-mini-hangup {
  display: none;
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  margin: 0;
  padding: 0;
  background: #e53935;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.call-overlay.minimized .call-mini-hangup {
  display: inline-flex;
}
.call-overlay.minimized:not(.video) .call-mini-hangup {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.call-mini-hangup .ico-svg,
.call-mini-hangup svg {
  width: 16px;
  height: 16px;
  display: block;
}

.call-ctrl-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; min-width: 64px; flex-shrink: 0;
}
.call-ctrl-label {
  font-size: 11px; font-weight: 500; line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  text-align: center; max-width: 76px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none; user-select: none;
}
.call-ctrl {
  box-sizing: border-box;
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0; padding: 0; border: 0; outline: none;
  -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.call-ctrl:active { transform: scale(0.94); }
.call-ctrl.accept {
  width: 64px; height: 64px;
  background: #22c55e; color: #fff;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}
.call-ctrl.decline,
.call-ctrl.hangup {
  width: 64px; height: 64px;
  background: #ef4444; color: #fff;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}
.call-ctrl .call-ctrl-ico,
.call-ctrl .ico-svg {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; pointer-events: none;
}
.call-ctrl.accept .call-ctrl-ico,
.call-ctrl.accept .ico-svg,
.call-ctrl.decline .call-ctrl-ico,
.call-ctrl.decline .ico-svg,
.call-ctrl.hangup .call-ctrl-ico,
.call-ctrl.hangup .ico-svg {
  width: 28px; height: 28px;
}
.call-ctrl .call-ctrl-ico svg,
.call-ctrl .ico-svg svg {
  width: 100%; height: 100%; display: block;
}
.call-ctrl.off { background: rgba(255, 255, 255, 0.85); color: #111; }
.call-btn {
  min-width: 120px; min-height: 52px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  border: 0; -webkit-appearance: none; appearance: none;
}
.call-btn.accept { background: var(--brand); color: #fff; }
.call-btn.decline { background: #ef4444; color: #fff; }
.group-call-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.call-hist-avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--brand-soft, rgba(42,171,238,.14));
  color: var(--brand);
}
.call-hist-avatar .call-hist-type {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.call-hist-avatar .call-hist-type svg { width: 26px; height: 26px; display: block; }
.call-hist-avatar .call-hist-dir {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--line, rgba(0,0,0,.08));
}
.call-hist-avatar .call-hist-dir svg { width: 12px; height: 12px; display: block; }
.calls-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 16px; }
.calls-glass-row {
  display: flex; align-items: stretch; gap: 8px;
  border-radius: 18px;
  background: var(--glass-pill-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.calls-glass-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 0; background: transparent; text-align: left; color: inherit;
}
.calls-glass-main:disabled { opacity: 0.55; }
.call-hist-letter { font-weight: 700; font-size: 1.1rem; }
.call-hist-sub { display: flex; align-items: center; gap: 6px; }
.call-hist-dir-inline svg { width: 14px; height: 14px; display: block; }
.call-hist-sub.missed { color: var(--danger, #ef4444); }
.call-hist-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.calls-glass-actions {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 8px 10px 8px 0;
}
.calls-act {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}
.calls-act svg { width: 20px; height: 20px; display: block; }
.calls-act-video {
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text);
}
.calls-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); }
.emoji-cat-chip .emoji-cat-ico {
  width: 1.05em; height: 1.05em;
  display: inline-flex; vertical-align: -0.15em; margin-right: 2px;
}
.emoji-cat-chip .emoji-cat-ico svg { width: 1.05em; height: 1.05em; display: block; }
.emoji-cat-chip.emoji-unicode-cat {
  font-size: 20px;
  line-height: 1;
  min-width: 40px;
  padding: 6px 10px;
  letter-spacing: 0;
}
.emoji-panel .emoji-logo-tab.active,
.emoji-panel .emoji-cat-chip.emoji-unicode-cat.active {
  background: color-mix(in srgb, var(--brand) 22%, var(--surface));
}

/* Create / privacy / settings extras */
.create-tabs { display: flex; gap: 6px; padding: 8px 16px; }
.create-tabs button {
  flex: 1; padding: 10px; border-radius: 12px; background: var(--surface); font-weight: 600;
  color: var(--text);
  border: 1px solid var(--line);
}
.create-tabs button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.privacy-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.privacy-row:last-child { border-bottom: 0; }
.privacy-row strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.privacy-opts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.privacy-opts button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 90%, var(--line));
  border: 1px solid transparent;
  font-size: .82rem;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.privacy-opts button .check {
  display: none;
  width: 14px;
  height: 14px;
}
.privacy-opts button.active {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}
.privacy-opts button.active .check {
  display: inline-block;
}
.settings-section-card > .privacy-row {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
.settings-section-card > .privacy-row:last-child {
  border-bottom: 0;
}
.chat-search-bar {
  display: flex; gap: 8px; padding: 8px 12px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}
.chat-search-bar input {
  flex: 1; border: 0; background: var(--surface); border-radius: 12px; padding: 10px 12px;
}
.global-hit {
  display: block; width: 100%; text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg-elevated);
}
.global-hit strong { display: block; font-size: .9rem; }
.global-hit span { font-size: .8rem; color: var(--text-2); }
.topbar .call-btns { display: flex; gap: 2px; }
.muted-dot { opacity: 0.85; }

/* Album grid — Telegram-like: 2 large on top, denser squares below */
.album-grid {
  display: grid; gap: 2px; border-radius: 12px; overflow: hidden;
  max-width: min(280px, 72vw);
}
.album-grid.count-2 { grid-template-columns: 1fr 1fr; }
.album-grid.count-2 .album-cell .album-item,
.album-grid.count-2 .album-item { aspect-ratio: 1; }
.album-grid.count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.album-grid.count-3 .album-cell:nth-child(1),
.album-grid.count-3 .album-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.album-grid.count-3 .album-cell:nth-child(1) .album-item { aspect-ratio: auto; height: 100%; }
.album-grid.count-3 .album-item:nth-child(1) { aspect-ratio: auto; height: 100%; }
.album-grid.count-3 .album-cell:nth-child(2) .album-item,
.album-grid.count-3 .album-cell:nth-child(3) .album-item,
.album-grid.count-3 .album-item:nth-child(2),
.album-grid.count-3 .album-item:nth-child(3) { aspect-ratio: 1; }
.album-grid.count-4,
.album-grid.count-5,
.album-grid.count-6,
.album-grid.count-7,
.album-grid.count-8,
.album-grid.count-9,
.album-grid.count-10 {
  grid-template-columns: 1fr 1fr;
}
.album-grid.count-5 .album-cell:nth-child(1) .album-item,
.album-grid.count-5 .album-cell:nth-child(2) .album-item,
.album-grid.count-6 .album-cell:nth-child(1) .album-item,
.album-grid.count-6 .album-cell:nth-child(2) .album-item,
.album-grid.count-7 .album-cell:nth-child(1) .album-item,
.album-grid.count-7 .album-cell:nth-child(2) .album-item,
.album-grid.count-8 .album-cell:nth-child(1) .album-item,
.album-grid.count-8 .album-cell:nth-child(2) .album-item,
.album-grid.count-9 .album-cell:nth-child(1) .album-item,
.album-grid.count-9 .album-cell:nth-child(2) .album-item,
.album-grid.count-10 .album-cell:nth-child(1) .album-item,
.album-grid.count-10 .album-cell:nth-child(2) .album-item,
.album-grid.count-5 .album-item:nth-child(1),
.album-grid.count-5 .album-item:nth-child(2),
.album-grid.count-6 .album-item:nth-child(1),
.album-grid.count-6 .album-item:nth-child(2),
.album-grid.count-7 .album-item:nth-child(1),
.album-grid.count-7 .album-item:nth-child(2),
.album-grid.count-8 .album-item:nth-child(1),
.album-grid.count-8 .album-item:nth-child(2),
.album-grid.count-9 .album-item:nth-child(1),
.album-grid.count-9 .album-item:nth-child(2),
.album-grid.count-10 .album-item:nth-child(1),
.album-grid.count-10 .album-item:nth-child(2) {
  aspect-ratio: 1.05;
}
.album-item {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--surface); cursor: pointer;
  position: relative;
}
.album-item.album-item-selected,
.album-cell.selected .album-item {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
  filter: brightness(0.72);
}
.album-cell {
  position: relative;
  width: 100%;
  min-width: 0;
}
.album-cell.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  pointer-events: none;
}
.album-item video.album-item,
video.album-item { background: #111; }
.album-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-weight: 700; font-size: 1.1rem;
}

/* Persistent host for file pickers (outside remounted chat DOM). */
.sr-file-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
/* Visually hidden file inputs — iOS Safari needs real size/opacity for .click() */
.sr-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* View-once */
.view-once-bubble {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-elevated) 100%);
  min-width: 180px; cursor: pointer; user-select: none;
}
.view-once-bubble.locked { border: 1px dashed var(--line); }
.view-once-bubble.opened { opacity: 0.75; cursor: default; }
.view-once-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--brand);
  flex-shrink: 0;
}
.view-once-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.view-once-hint {
  font-size: .75rem;
  color: var(--text-2);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Group call overlay */
.group-call-overlay {
  position: fixed; inset: 0; z-index: 125;
  background: linear-gradient(160deg, #0b1a14 0%, #052e1a 50%, #0a0a0a 100%);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom));
}
.group-call-status {
  font-size: 1.2rem; font-weight: 700; margin-bottom: 24px; text-align: center;
}
.group-call-peers {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 32px; max-width: 320px;
}
.group-call-peer {
  padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.08);
  font-size: .85rem;
}
.group-call-peer audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.group-call-actions { display: flex; gap: 16px; }
.icon-btn.group-call-active { color: var(--brand); }

/* Attach sheet view-once toggle */
.attach-sheet button.on {
  background: var(--brand-soft); color: var(--brand-deep); font-weight: 700;
}

/* Favorites */
.favorites-screen { display: flex; flex-direction: column; }
.favorites-list { flex: 1; overflow-y: auto; }
.favorites-composer { flex-shrink: 0; border-top: 1px solid var(--line); }
.favorite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.favorite-row .msg-check {
  display: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-2) 55%, transparent);
  background: transparent;
  box-sizing: border-box;
}
.favorite-row.multi-select .msg-check { display: block; }
.favorite-row.multi-select.selected {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 12px;
}
.favorite-row.selected .msg-check,
.favorite-row .msg-check.on {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--bg-elevated);
}
.fav-pin-slot { flex-shrink: 0; }
.fav-pin-bar { width: 100%; border-radius: 0; border-bottom: 1px solid var(--line); }
.fav-chat-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 12px;
}
.fav-chat-feed .fav-msg {
  align-self: flex-end;
  max-width: min(92%, 520px);
}
.fav-chat-feed .fav-bubble { border-radius: 18px 18px 4px 18px; }
.fav-chat-feed .fav-media {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 6px;
}
.fav-chat-feed .fav-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.92rem;
}
.brand-wordmark--connecting {
  /* Keep brand gradient + Syne — parity with Android connecting lockup (#15703). */
  font-weight: 700;
  opacity: 0.92;
}

/* Sprint C: folders, stories, theme, media, schedule */
.folder-chips {
  display: flex;
  gap: 8px;
  padding: 4px 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.folder-chips::-webkit-scrollbar { display: none; }
.folder-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.folder-chip-ico {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.folder-chip-ico svg { width: 16px; height: 16px; display: block; }
.folder-chip.active {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-color: transparent;
  color: var(--brand);
}
.folder-chip-add {
  min-width: 36px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-deep);
}

.chat-row-swipe {
  position: relative;
  /* Visible so avatar frame glow can spill onto neighbors; clip only while swiping. */
  overflow: visible;
  background: transparent;
}
.chat-row-swipe.swiping,
.chat-row-swipe:has(.chat-row[style*="translateX"]) {
  overflow: hidden;
}
.chat-row-swipe-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  color: #fff;
  background: var(--brand);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.chat-row-swipe.swiping .chat-row-swipe-reveal,
.chat-row-swipe:has(.chat-row[style*="translateX"]) .chat-row-swipe-reveal {
  opacity: 1;
}
.chat-row-swipe.swipe-action-pin .chat-row-swipe-reveal { background: var(--brand); }
.chat-row-swipe.swipe-action-archive .chat-row-swipe-reveal {
  background: color-mix(in srgb, var(--brand-deep, #0d9488) 70%, #334155);
}
.chat-row-swipe.swipe-action-delete .chat-row-swipe-reveal {
  background: var(--danger, #dc2626);
}
.chat-row-swipe-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  line-height: 0;
}
.chat-row-swipe-ico svg { width: 24px; height: 24px; display: block; }
.chat-row-swipe > .chat-row {
  position: relative;
  z-index: 1;
  background: transparent;
  will-change: transform;
}
.chat-row-swipe.swiping > .chat-row,
.chat-row-swipe:has(.chat-row[style*="translateX"]) > .chat-row {
  background: var(--bg-elevated);
}

.stories-wrap {
  border-bottom: 1px solid var(--line);
  max-height: 148px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.stories-wrap.collapsed {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
  pointer-events: none;
}
.stories-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
}
.stories-collapse-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 2px;
  cursor: pointer;
  white-space: nowrap;
}
.stories-collapse-btn:active {
  opacity: 0.7;
}
.stories-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.story-new-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.story-strip {
  display: flex;
  gap: 12px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.story-label.new {
  color: var(--brand);
  font-weight: 700;
}
.story-strip::-webkit-scrollbar { display: none; }
.story-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  position: relative;
  background: var(--line);
  box-sizing: border-box;
}
.story-ring.unviewed {
  background: linear-gradient(135deg, #2aabee 0%, #5ac8fa 45%, #007aff 100%);
}
.story-ring.viewed {
  background: color-mix(in srgb, var(--text-2) 35%, transparent);
}
.story-ring.empty {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--text-2) 45%, transparent);
  padding: 2.5px;
}
.story-ring > .avatar-wrap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
.story-ring .avatar,
.story-ring .avatar-wrap .avatar {
  width: 100%;
  height: 100%;
  border: 2.5px solid var(--bg-elevated);
  box-sizing: border-box;
  font-size: 1.15rem;
}
.story-new-badge {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  border: 1.5px solid var(--bg-elevated);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.story-plus {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg-elevated);
  cursor: pointer;
  z-index: 2;
}
.story-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 1.5px solid var(--bg-elevated);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.story-item.mine .story-count-badge {
  right: 14px; /* leave room for + */
}
.story-item.mine .story-ring { cursor: pointer; }
.status-add {
  align-self: center;
  margin: 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: auto;
}
.status-add .ico-svg,
.status-add .ico-svg svg {
  width: 18px;
  height: 18px;
}
.status-delete {
  display: none; /* moved to .status-viewer-delete in the header */
}
.status-delete .ico-svg,
.status-delete .ico-svg svg {
  width: 18px;
  height: 18px;
}
.story-label {
  font-size: 0.72rem;
  color: var(--text-2);
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.status-viewer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
}
.status-viewer-close {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: 12px;
  color: #fff;
  padding: 10px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}
.status-viewer-delete {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: 62px;
  color: #fff;
  padding: 10px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}
.status-viewer-delete svg {
  width: 22px;
  height: 22px;
  display: block;
}
.status-viewer-footer {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  pointer-events: auto;
  flex-shrink: 0;
}
.status-viewer-close svg {
  width: 22px;
  height: 22px;
  display: block;
}
.status-viewer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  z-index: 2;
}
.status-viewer-header .avatar { width: 40px; height: 40px; }
.status-time { margin-left: auto; font-size: 0.78rem; opacity: 0.7; }
.status-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.status-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.25);
  overflow: hidden;
  position: relative;
}
.status-progress-seg.done { background: #fff; }
.status-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #fff;
  border-radius: 2px;
}
.status-caption {
  text-align: center;
  padding: 8px 12px 4px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #fff;
  z-index: 2;
}
.status-viewer-body {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.status-text {
  font-size: 1.35rem;
  line-height: 1.45;
  text-align: center;
  padding: 24px;
  max-width: 100%;
  word-break: break-word;
}
.status-media {
  max-width: 100%;
  max-height: 70dvh;
  object-fit: contain;
  border-radius: 8px;
}
.status-media-circle {
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  max-width: min(78vw, 320px);
  max-height: min(78vw, 320px);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, #fff 35%, transparent);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.theme-option {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  color: var(--text);
  width: 100%;
}
.theme-option.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, var(--bg-elevated));
}
.theme-option strong { font-weight: 700; color: var(--text); }
.theme-option span { color: var(--text-2); font-size: 0.88rem; }
.theme-check {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  font-weight: 800;
  font-size: 1.1rem;
}

.media-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.media-tabs button {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-2);
}
.media-tabs button.active {
  background: var(--brand);
  color: #fff;
}
.media-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.media-content.grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-day-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-2);
  padding: 10px 4px 6px;
  letter-spacing: 0.01em;
}
.media-day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  align-content: start;
  margin-bottom: 6px;
}
.media-grid-item {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: var(--surface);
  border: none;
  cursor: pointer;
}
.media-grid-item img,
.media-grid-item video,
.media-grid-item .media-video-thumb,
.media-grid-item .media-video-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-grid-item.round { border-radius: 50%; }
.media-thumb-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.9);
  animation: media-thumb-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes media-thumb-spin {
  to { transform: rotate(360deg); }
}
.media-play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.22);
  color: #fff;
  pointer-events: none;
}
.media-play-badge-glass {
  background: transparent;
}
.media-play-badge-glass::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 55%, rgba(255,255,255,.18)),
    color-mix(in srgb, var(--brand) 55%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.28);
}
.media-play-badge svg {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.media-video-fallback-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--brand) 35%, #1a2330);
}
.media-video-fallback-icon svg { width: 36px; height: 36px; }
.media-file-row,
.media-link-row,
.media-voice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.media-glass-row {
  background:
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 55%, rgba(255,255,255,.12)),
    color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid color-mix(in srgb, #fff 28%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px rgba(0,0,0,.08);
}
.media-voice-row .voice-seek {
  flex: 1;
  max-width: none;
  min-width: 0;
}
.media-glass-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--brand);
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.1)),
    color-mix(in srgb, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.media-file-name,
.media-link-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.media-file-date { font-size: 0.75rem; color: var(--text-2); flex-shrink: 0; }
.media-link-icon,
.media-file-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--brand);
  display: grid;
  place-items: center;
}
.media-file-icon svg,
.media-link-icon svg,
.media-glass-ico svg {
  width: 20px;
  height: 20px;
  display: block;
}

.scheduled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-soft) 80%, transparent);
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 600;
}
.schedule-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--brand-soft) 70%, var(--bg-elevated));
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-deep);
}
.schedule-hint button {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
}
.favorite-thumb {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  background: var(--surface); flex-shrink: 0;
}

/* ќќ Parity UX additions ќќ */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-soft) 80%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: 0.82rem; line-height: 1.3;
}
.reaction-pill.mine { background: color-mix(in srgb, var(--brand) 22%, var(--bg-elevated)); }
.messages.with-wallpaper {
  background-size: cover;
  background-position: center;
}
.messages.with-wallpaper:not(.with-doodle) {
  background-color: transparent;
}
html[data-list-lines="1"] .chat-row .row-preview {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.accent-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px;
}
.accent-swatch {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: 14px; background: var(--bg-elevated);
  border: 1px solid var(--line); font-weight: 600; color: var(--text);
}
.accent-swatch:disabled { opacity: 0.45; }
.accent-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.accent-swatch span { color: var(--text); }
.accent-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sw); flex-shrink: 0;
}
.wall-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px;
}
.wall-swatch {
  min-height: 64px; border-radius: 12px; border: 2px solid transparent;
  color: #fff; font-size: 0.75rem; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: var(--surface);
}
.wall-swatch.active { border-color: var(--brand); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.settings-item.col { flex-direction: column; align-items: stretch; }
.lock-screen { justify-content: center; padding: 28px 22px; }
.composer {
  border-radius: 0;
  padding: 5px 6px calc(6px + var(--safe-bottom));
  gap: 6px;
  background:
    linear-gradient(0deg, var(--glass-shine), transparent 45%),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 0.5px solid var(--glass-stroke);
}
.composer .grow input,
.composer .grow .composer-ce {
  border-radius: 20px;
  min-height: 40px;
  padding: 9px 14px;
  font-size: 0.95rem;
  line-height: 1.25;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 0.5px solid var(--glass-stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.composer .send,
.composer .attach {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
}
.composer .send {
  width: 40px;
  height: 40px;
  min-width: 40px;
}
.composer .attach {
  background: transparent;
  border: 0;
  color: var(--text-2);
}
.mention-popup {
  position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 40;
  max-height: 180px; overflow: auto;
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 40%),
    var(--glass-pill-bg);
  border: 0.5px solid color-mix(in srgb, #fff 28%, var(--glass-stroke));
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-chrome-blur);
  -webkit-backdrop-filter: var(--glass-chrome-blur);
}
.mention-popup button {
  display: flex; width: 100%; text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line); gap: 10px; align-items: center;
}
.mention-popup button:last-child { border-bottom: 0; }
.body .mention {
  display: inline; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--accent, var(--brand-deep)); font: inherit; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.body .mention:active { opacity: 0.72; }
.bubble-wrap.swipe-replying { transition: transform .08s linear; }
.bubble-wrap.swiping-reply { opacity: .92; }
.bubble-wrap.swiping-reply::before {
  content: "↩";
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--accent, var(--brand));
  opacity: 0.9;
  pointer-events: none;
}
.media-viewer-stage {
  touch-action: none;
  z-index: 1;
}
.media-viewer-stage img,
.media-viewer-stage video {
  max-width: var(--mv-max-w, min(960px, calc(100vw - 48px)));
  max-height: var(--mv-img-h, min(86dvh, calc(100vh - 56px)));
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
  user-select: none;
  border-radius: 0;
}
.media-viewer-frame.has-caption .media-viewer-stage img,
.media-viewer-frame.has-caption .media-viewer-stage video {
  max-height: var(--mv-img-h, min(86dvh, calc(100vh - 56px)));
}
@media (max-width: 799px) {
  .media-viewer {
    --mv-pad-x: 0px;
    --mv-pad-y: 0px;
    --mv-max-w: 100vw;
    --mv-max-h: 100dvh;
    --mv-img-h: 100dvh;
    --mv-img-h-caption: calc(100dvh - 96px);
    background: #000;
  }
  .media-viewer-frame {
    width: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    background: #000;
    overflow: visible;
  }
  .media-viewer-content,
  .media-viewer-stage img,
  .media-viewer-stage video {
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }
}
@media (min-width: 800px) {
  .media-viewer {
    --mv-pad-x: 48px;
    --mv-pad-y: 28px;
    --mv-max-w: min(1100px, calc(100vw - 96px));
    --mv-max-h: min(90dvh, calc(100vh - 56px));
    --mv-img-h: min(84dvh, calc(100vh - 72px));
    --mv-img-h-caption: min(68dvh, calc(100vh - 220px));
    background: rgba(6, 10, 16, 0.78);
  }
  /* Cover-blur reads as a cropped zoom of the same photo on wide screens. */
  .media-viewer-blur { display: none !important; }
  /* Don't clip tall phone screenshots while fitImg settles. */
  .media-viewer-frame {
    overflow: visible;
  }
  .media-viewer-stage img,
  .media-viewer-stage video,
  .media-viewer-content {
    width: auto !important;
    height: auto !important;
    /* max-* left without !important so fitImg can tighten portrait columns */
    max-width: min(100%, var(--mv-max-w));
    max-height: var(--mv-img-h);
    object-fit: contain !important;
    object-position: center;
  }
  .media-viewer-frame.has-caption .media-viewer-stage img,
  .media-viewer-frame.has-caption .media-viewer-stage video,
  .media-viewer-frame.has-caption .media-viewer-content {
    max-height: var(--mv-img-h);
  }
}
.row-preview.missed { color: var(--danger); }
.folder-chip.active {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  color: var(--brand);
}
.filter-chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; }
.vnote-flip {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.1rem;
  border: none; display: grid; place-items: center;
  pointer-events: auto;
}
.vnote.recording .vnote-flip { opacity: 1; }
.vnote-zoom {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(118px + env(safe-area-inset-bottom));
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: auto;
}
.vnote-zoom[hidden] { display: none !important; }
.vnote-zoom-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
  flex-shrink: 0;
}
.vnote-zoom-range {
  flex: 1;
  accent-color: var(--brand, #2aabee);
  height: 28px;
}

.media-viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  display: grid; place-items: center; padding: 0; border: 0;
}
.media-viewer-nav svg { width: 22px; height: 22px; display: block; }
.media-viewer-nav.prev { left: 10px; }
.media-viewer-nav.next { right: 10px; }
.media-viewer-counter {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 5;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: .85rem; font-weight: 600;
}
.vnote video { transform: none; }
/* Keep .vnote as position:fixed (see above) — do NOT override to relative */

/* ќќ Android parity polish ќќ */
.messages-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.messages-wrap .messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
.avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; line-height: 0; overflow: visible; }
.avatar-wrap.frame-gold,
.avatar-wrap.frame-neon,
.avatar-wrap.frame-pulse,
.avatar-wrap.frame-ember,
.avatar-wrap.frame-ice,
.avatar-wrap.frame-bolt,
.avatar-wrap.frame-aura,
.avatar-wrap.frame-spark,
.avatar-wrap.frame-plasma,
.avatar-wrap.frame-hearts,
.avatar-wrap.frame-rainbow,
.avatar-wrap.frame-comet,
.avatar-wrap.frame-halo,
.avatar-wrap.frame-stardust,
.avatar-wrap.frame-vortex,
.avatar-wrap.frame-cloud,
.avatar-wrap.frame-mist,
.avatar-wrap.frame-thunder,
.avatar-wrap.frame-storm,
.avatar-wrap.frame-capo,
.avatar-wrap.frame-cigar,
.avatar-wrap.frame-noir,
.avatar-wrap.frame-qubi,
.avatar-wrap.frame-qubi_glow,
.avatar-wrap.frame-bubble {
  /* Thin ring on the outer edge — parity with Android Avatar stroke (not a fat padding disk). */
  padding: 0;
  border-radius: 50%;
  --avatar-ring: 2px;
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}
.avatar-wrap.frame-gold { --avatar-frame: conic-gradient(from 180deg, #fde68a, #d97706, #fbbf24, #fde68a); }
.avatar-wrap.frame-neon { --avatar-frame: conic-gradient(from 90deg, #22d3ee, #a855f7, #22d3ee); }
.avatar-wrap.frame-pulse { --avatar-frame: conic-gradient(from 0deg, #fb7185, #f43f5e, #fb7185); }
.avatar-wrap.frame-ember { --avatar-frame: conic-gradient(from 200deg, #fdba74, #ea580c, #fdba74); }
.avatar-wrap.frame-ice { --avatar-frame: conic-gradient(from 120deg, #bae6fd, #38bdf8, #e0e7ff, #bae6fd); }
.avatar-wrap.frame-gold::before,
.avatar-wrap.frame-neon::before,
.avatar-wrap.frame-pulse::before,
.avatar-wrap.frame-ember::before,
.avatar-wrap.frame-ice::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: var(--avatar-frame);
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
}
.avatar-wrap.frame-bolt,
.avatar-wrap.frame-aura,
.avatar-wrap.frame-spark,
.avatar-wrap.frame-plasma,
.avatar-wrap.frame-hearts,
.avatar-wrap.frame-rainbow,
.avatar-wrap.frame-comet,
.avatar-wrap.frame-halo,
.avatar-wrap.frame-stardust,
.avatar-wrap.frame-vortex {
  --avatar-frame: transparent;
  position: relative;
  animation: none;
}
/* Contour chase: bright tip races along the rim (not a spinning rainbow disk). */
.avatar-wrap.frame-bolt::before,
.avatar-wrap.frame-aura::before,
.avatar-wrap.frame-spark::before,
.avatar-wrap.frame-plasma::before,
.avatar-wrap.frame-hearts::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
}
.avatar-wrap.frame-bolt::before {
  /* Dim wire + electric tip + short trail */
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.2) 0deg,
    rgba(56, 189, 248, 0.2) 255deg,
    rgba(56, 189, 248, 0.55) 290deg,
    #38bdf8 310deg,
    #fef08a 330deg,
    #ffffff 342deg,
    #a855f7 352deg,
    transparent 360deg
  );
  animation: avatar-frame-chase 1.55s linear infinite;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}
.avatar-wrap.frame-aura::before {
  background: conic-gradient(
    from 90deg,
    rgba(196, 181, 253, 0.18) 0deg,
    rgba(196, 181, 253, 0.18) 240deg,
    rgba(103, 232, 249, 0.45) 280deg,
    #67e8f9 310deg,
    #f9a8d4 335deg,
    #ffffff 348deg,
    transparent 360deg
  );
  animation: avatar-frame-chase 3.1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(196, 181, 253, 0.5));
}
.avatar-wrap.frame-spark::before {
  background: conic-gradient(
    from 180deg,
    rgba(251, 191, 36, 0.14) 0deg,
    transparent 40deg,
    rgba(251, 191, 36, 0.14) 120deg,
    transparent 160deg,
    rgba(251, 113, 133, 0.2) 200deg,
    #fbbf24 230deg,
    #fff7ed 245deg,
    transparent 260deg,
    rgba(251, 113, 133, 0.55) 300deg,
    #fb7185 320deg,
    #fff 332deg,
    transparent 348deg,
    rgba(251, 191, 36, 0.14) 360deg
  );
  animation: avatar-frame-chase 2s linear infinite;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.45));
}
.avatar-wrap.frame-plasma::before {
  background: conic-gradient(
    from 45deg,
    rgba(168, 85, 247, 0.16) 0deg,
    rgba(168, 85, 247, 0.16) 250deg,
    #22d3ee 300deg,
    #ffffff 320deg,
    #a855f7 340deg,
    transparent 360deg
  );
  animation: avatar-frame-chase 2.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.avatar-wrap.frame-plasma::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  background: conic-gradient(
    from 225deg,
    transparent 0deg,
    transparent 250deg,
    #ec4899 300deg,
    #ffffff 322deg,
    #a855f7 340deg,
    transparent 360deg
  );
  animation: avatar-frame-chase-rev 2.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.45));
}
.avatar-wrap.frame-hearts::before {
  background: conic-gradient(
    from 0deg,
    rgba(251, 113, 133, 0.22),
    rgba(244, 114, 182, 0.28),
    rgba(251, 113, 133, 0.22)
  );
  animation: none;
}
/* Tiny hearts pulse in place around the rim (chaotic phases via --i). */
.avatar-wrap.frame-hearts .avatar-fx-orbit {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  transform: rotate(calc(var(--i) * 51.428deg));
}
.avatar-wrap.frame-hearts .avatar-fx-heart {
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0;
  padding: 0;
  color: #fb7185;
  font-size: max(8px, 0.55em);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: avatar-heart-beat 1.35s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.17s);
  text-shadow: 0 0 4px rgba(251, 113, 133, 0.75);
}
@keyframes avatar-heart-beat {
  0%, 100% { opacity: 0.35; filter: saturate(0.9); font-size: max(7px, 0.48em); }
  12% { opacity: 1; filter: saturate(1.2) brightness(1.25); font-size: max(10px, 0.72em); color: #fff1f2; }
  24% { opacity: 0.5; font-size: max(8px, 0.52em); }
  36% { opacity: 0.95; filter: saturate(1.15); font-size: max(9px, 0.64em); color: #fb7185; }
  50% { opacity: 0.3; font-size: max(7px, 0.46em); }
}
/* Static soft glow on the wrap. */
.avatar-wrap.frame-bolt {
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.14), 0 0 10px 1px rgba(56, 189, 248, 0.22);
}
.avatar-wrap.frame-aura {
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.14), 0 0 10px 1px rgba(196, 181, 253, 0.22);
}
.avatar-wrap.frame-spark {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.14), 0 0 10px 1px rgba(251, 113, 133, 0.2);
}
.avatar-wrap.frame-plasma {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.14), 0 0 10px 1px rgba(168, 85, 247, 0.22);
}
.avatar-wrap.frame-hearts {
  box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.16), 0 0 10px 1px rgba(244, 114, 182, 0.22);
}
.avatar-wrap.frame-bolt::after,
.avatar-wrap.frame-aura::after,
.avatar-wrap.frame-spark::after,
.avatar-wrap.frame-hearts::after {
  content: none;
  display: none;
  animation: none;
}
.avatar-wrap.frame-bolt > .avatar,
.avatar-wrap.frame-aura > .avatar,
.avatar-wrap.frame-spark > .avatar,
.avatar-wrap.frame-plasma > .avatar,
.avatar-wrap.frame-hearts > .avatar {
  position: relative;
  z-index: 1;
  animation: none;
}
@keyframes avatar-frame-chase {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes avatar-frame-chase-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes avatar-frame-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes avatar-frame-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
/* Contour rings with soft pulse (no spin) — rainbow→vortex. */
.avatar-wrap.frame-rainbow::before,
.avatar-wrap.frame-comet::before,
.avatar-wrap.frame-halo::before,
.avatar-wrap.frame-stardust::before,
.avatar-wrap.frame-vortex::before,
.avatar-wrap.frame-cloud::before,
.avatar-wrap.frame-mist::before,
.avatar-wrap.frame-thunder::before,
.avatar-wrap.frame-storm::before,
.avatar-wrap.frame-capo::before,
.avatar-wrap.frame-cigar::before,
.avatar-wrap.frame-noir::before,
.avatar-wrap.frame-qubi::before,
.avatar-wrap.frame-qubi_glow::before,
.avatar-wrap.frame-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  will-change: filter, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--avatar-ring)),
    #000 calc(100% - var(--avatar-ring) + 0.5px)
  );
  animation: avatar-frame-pulse 1.8s ease-in-out infinite;
}
.avatar-wrap.frame-rainbow::before {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.45));
}
.avatar-wrap.frame-comet::before {
  background: conic-gradient(from 0deg, #fef08a, #facc15, #38bdf8, #a855f7, #fef08a);
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.5));
}
.avatar-wrap.frame-halo::before {
  background: conic-gradient(from 90deg, #67e8f9, #c4b5fd, #f9a8d4, #67e8f9);
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.55));
}
.avatar-wrap.frame-stardust::before {
  background: conic-gradient(from 180deg, #fff7ed, #fbbf24, #fb7185, #fff7ed);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.avatar-wrap.frame-vortex::before {
  background: conic-gradient(from 45deg, #22d3ee, #a855f7, #ec4899, #22d3ee);
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5));
}

/* Themed frames — match proposal mockups (puffy / gold / qubi / storm). */
.avatar-wrap.frame-cloud,
.avatar-wrap.frame-mist,
.avatar-wrap.frame-thunder,
.avatar-wrap.frame-storm,
.avatar-wrap.frame-capo,
.avatar-wrap.frame-cigar,
.avatar-wrap.frame-noir,
.avatar-wrap.frame-qubi,
.avatar-wrap.frame-qubi_glow,
.avatar-wrap.frame-bubble {
  --avatar-ring: 5px;
}
.avatar-wrap.frame-cloud::before {
  background:
    radial-gradient(circle at 12% 20%, #fff 0 42%, transparent 43%),
    radial-gradient(circle at 28% 8%, #f1f5f9 0 38%, transparent 40%),
    radial-gradient(circle at 48% 0%, #fff 0 40%, transparent 42%),
    radial-gradient(circle at 68% 10%, #e2e8f0 0 36%, transparent 38%),
    radial-gradient(circle at 88% 22%, #fff 0 40%, transparent 42%),
    radial-gradient(circle at 92% 50%, #f8fafc 0 36%, transparent 38%),
    radial-gradient(circle at 80% 78%, #fff 0 40%, transparent 42%),
    radial-gradient(circle at 55% 92%, #e2e8f0 0 38%, transparent 40%),
    radial-gradient(circle at 28% 88%, #fff 0 40%, transparent 42%),
    radial-gradient(circle at 8% 62%, #f1f5f9 0 36%, transparent 38%),
    conic-gradient(from 0deg, #f8fafc, #cbd5e1, #f8fafc);
  filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.7));
  animation: avatar-frame-pulse 2.2s ease-in-out infinite;
}
.avatar-wrap.frame-mist::before {
  background: conic-gradient(from 20deg, #c4b5fd, #93c5fd, #f9a8d4, #fde68a, #a5b4fc, #c4b5fd);
  filter: drop-shadow(0 0 10px rgba(196, 181, 253, 0.75)) drop-shadow(0 0 4px rgba(253, 230, 138, 0.45));
  animation: avatar-frame-pulse 2.4s ease-in-out infinite;
  opacity: 0.92;
}
.avatar-wrap.frame-thunder::before {
  background: conic-gradient(from 0deg,
    #1e1b4b 0deg, #4c1d95 60deg, #facc15 75deg, #7c3aed 110deg,
    #1e1b4b 180deg, #c4b5fd 210deg, #7c3aed 260deg, #1e1b4b 360deg);
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.75)) drop-shadow(0 0 3px rgba(250, 204, 21, 0.55));
  animation: avatar-frame-pulse 1.6s ease-in-out infinite;
}
.avatar-wrap.frame-storm::before {
  background:
    repeating-linear-gradient(125deg, transparent 0 6px, rgba(165,180,252,0.35) 6px 7px),
    conic-gradient(from 90deg, #312e81, #4338ca, #a5b4fc, #1e1b4b, #6366f1, #312e81);
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.7));
  animation: avatar-frame-pulse 1.9s ease-in-out infinite;
}
.avatar-wrap.frame-capo::before {
  background: conic-gradient(from 0deg, #0a0a0a 0 220deg, #fde68a 230deg, #d97706 250deg, #fde68a 270deg, #0a0a0a 280deg 360deg);
  box-shadow: inset 0 0 0 1.5px #fbbf24;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.65));
  animation: avatar-frame-pulse 2.6s ease-in-out infinite;
}
.avatar-wrap.frame-cigar::before {
  background: conic-gradient(from 30deg, #451a03, #78350f, #fbbf24, #92400e, #451a03);
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
  animation: avatar-frame-pulse 2.3s ease-in-out infinite;
}
.avatar-wrap.frame-noir::before {
  background: conic-gradient(from 0deg, #171717 0 200deg, #e5e5e5 210deg, #facc15 230deg, #a3a3a3 250deg, #171717 260deg 360deg);
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.45));
  animation: avatar-frame-pulse 2.5s ease-in-out infinite;
}
.avatar-wrap.frame-qubi::before {
  background: conic-gradient(from 0deg, #14b8a6, #2dd4bf, #99f6e4, #5eead4, #14b8a6);
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.75));
  animation: avatar-frame-pulse 2s ease-in-out infinite;
}
.avatar-wrap.frame-qubi_glow::before {
  background: conic-gradient(from 45deg, #2dd4bf, #67e8f9, #a7f3d0, #5eead4, #2dd4bf);
  filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.85)) drop-shadow(0 0 4px rgba(45, 212, 191, 0.7));
  animation: avatar-frame-pulse 1.8s ease-in-out infinite;
}
.avatar-wrap.frame-bubble::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.95) 0 18%, transparent 19%),
    radial-gradient(circle at 42% 8%, rgba(165,243,252,0.9) 0 16%, transparent 17%),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,0.85) 0 15%, transparent 16%),
    radial-gradient(circle at 88% 48%, rgba(125,211,252,0.9) 0 17%, transparent 18%),
    radial-gradient(circle at 72% 82%, rgba(255,255,255,0.9) 0 16%, transparent 17%),
    radial-gradient(circle at 35% 88%, rgba(165,243,252,0.85) 0 15%, transparent 16%),
    radial-gradient(circle at 10% 60%, rgba(255,255,255,0.85) 0 14%, transparent 15%),
    conic-gradient(from 0deg, #67e8f9, #a5f3fc, #fff, #7dd3fc, #67e8f9);
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.65));
  animation: avatar-frame-pulse 2.1s ease-in-out infinite;
}
.avatar-wrap.frame-qubi::after,
.avatar-wrap.frame-cloud::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.avatar-wrap.frame-qubi::after {
  background:
    radial-gradient(circle at 38% 6%, #14b8a6 0 7px, transparent 8px),
    radial-gradient(circle at 62% 6%, #14b8a6 0 7px, transparent 8px),
    radial-gradient(circle at 38% 5%, #fda4af 0 3px, transparent 4px),
    radial-gradient(circle at 62% 5%, #fda4af 0 3px, transparent 4px),
    radial-gradient(circle at 50% 94%, #5eead4 0 8px, transparent 9px),
    radial-gradient(circle at 46% 94%, #fda4af 0 2.5px, transparent 3px),
    radial-gradient(circle at 54% 94%, #fda4af 0 2.5px, transparent 3px);
}
.avatar-wrap.frame-capo::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 8%;
  top: -2%;
  width: 34%;
  height: 18%;
  border-radius: 40% 40% 10% 10%;
  background: linear-gradient(180deg, #111 0%, #111 55%, #fbbf24 55%, #fbbf24 68%, #111 68%);
  box-shadow: 0 2px 0 #fde68a;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-18deg);
}
.avatar-wrap.frame-rainbow::before {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.45));
}
.avatar-wrap.frame-comet::before {
  background: conic-gradient(from 0deg, #fef08a, #facc15, #38bdf8, #a855f7, #fef08a);
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.5));
}
.avatar-wrap.frame-halo::before {
  background: conic-gradient(from 90deg, #67e8f9, #c4b5fd, #f9a8d4, #67e8f9);
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.55));
}
.avatar-wrap.frame-stardust::before {
  background: conic-gradient(from 180deg, #fff7ed, #fbbf24, #fb7185, #fff7ed);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.avatar-wrap.frame-vortex::before {
  background: conic-gradient(from 45deg, #22d3ee, #a855f7, #ec4899, #22d3ee);
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5));
}
.avatar-wrap.frame-cloud::before {
  background: conic-gradient(from 0deg, #f8fafc, #e2e8f0, #94a3b8, #f8fafc);
  filter: drop-shadow(0 0 5px rgba(226, 232, 240, 0.55));
}
.avatar-wrap.frame-mist::before {
  background: conic-gradient(from 40deg, #cbd5e1, #a5b4fc, #e0e7ff, #cbd5e1);
  filter: drop-shadow(0 0 6px rgba(165, 180, 252, 0.55));
}
.avatar-wrap.frame-thunder::before {
  background: conic-gradient(from 0deg, #7c3aed, #1e1b4b, #facc15, #7c3aed);
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));
}
.avatar-wrap.frame-storm::before {
  background: conic-gradient(from 90deg, #64748b, #38bdf8, #1e293b, #64748b);
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.5));
}
.avatar-wrap.frame-capo::before {
  background: conic-gradient(from 0deg, #fde68a, #0f0f0f, #d97706, #fde68a);
  filter: drop-shadow(0 0 5px rgba(217, 119, 6, 0.55));
}
.avatar-wrap.frame-cigar::before {
  background: conic-gradient(from 20deg, #78350f, #fbbf24, #451a03, #78350f);
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}
.avatar-wrap.frame-noir::before {
  background: conic-gradient(from 0deg, #e5e5e5, #525252, #facc15, #e5e5e5);
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4));
}
.avatar-wrap.frame-qubi::before {
  background: conic-gradient(from 0deg, #5eead4, #2dd4bf, #99f6e4, #5eead4);
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.55));
}
.avatar-wrap.frame-qubi_glow::before {
  background: conic-gradient(from 45deg, #2dd4bf, #a7f3d0, #67e8f9, #2dd4bf);
  filter: drop-shadow(0 0 7px rgba(103, 232, 249, 0.6));
}
.avatar-wrap.frame-bubble::before {
  background: conic-gradient(from 0deg, #67e8f9, #a5f3fc, #ffffff, #67e8f9);
  filter: drop-shadow(0 0 5px rgba(165, 243, 252, 0.55));
}
.avatar-wrap.frame-rainbow,
.avatar-wrap.frame-comet,
.avatar-wrap.frame-halo,
.avatar-wrap.frame-stardust,
.avatar-wrap.frame-vortex {
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 0 10px 1px rgba(56, 189, 248, 0.18);
}
.avatar-wrap.frame-rainbow::after,
.avatar-wrap.frame-comet::after,
.avatar-wrap.frame-halo::after,
.avatar-wrap.frame-stardust::after,
.avatar-wrap.frame-vortex::after,
.avatar-wrap.frame-cloud::after,
.avatar-wrap.frame-mist::after,
.avatar-wrap.frame-thunder::after,
.avatar-wrap.frame-storm::after,
.avatar-wrap.frame-capo::after,
.avatar-wrap.frame-cigar::after,
.avatar-wrap.frame-noir::after,
.avatar-wrap.frame-qubi::after,
.avatar-wrap.frame-qubi_glow::after,
.avatar-wrap.frame-bubble::after {
  content: none;
  display: none;
}
.avatar-wrap.frame-rainbow > .avatar,
.avatar-wrap.frame-comet > .avatar,
.avatar-wrap.frame-halo > .avatar,
.avatar-wrap.frame-stardust > .avatar,
.avatar-wrap.frame-vortex > .avatar,
.avatar-wrap.frame-cloud > .avatar,
.avatar-wrap.frame-mist > .avatar,
.avatar-wrap.frame-thunder > .avatar,
.avatar-wrap.frame-storm > .avatar,
.avatar-wrap.frame-capo > .avatar,
.avatar-wrap.frame-cigar > .avatar,
.avatar-wrap.frame-noir > .avatar,
.avatar-wrap.frame-qubi > .avatar,
.avatar-wrap.frame-qubi_glow > .avatar,
.avatar-wrap.frame-bubble > .avatar {
  position: relative;
  z-index: 1;
  animation: none;
}
.avatar-wrap[class*="frame-"] > .avatar {
  /* Thin inner edge — keep ring readable without a heavy double border. */
  box-shadow: none;
  border: 1px solid var(--bg-elevated, #0e1621);
  box-sizing: border-box;
}
/* Profile picker: thicker ring so each frame swatch is obviously different. */
.avatar-frame-pick .avatar-wrap[class*="frame-"] {
  padding: 0;
  --avatar-ring: 3.5px;
}
.avatar-frame-pick .avatar-wrap.frame-gold,
.avatar-frame-pick .avatar-wrap.frame-neon,
.avatar-frame-pick .avatar-wrap.frame-pulse,
.avatar-frame-pick .avatar-wrap.frame-ember,
.avatar-frame-pick .avatar-wrap.frame-ice {
  /* Static swatches: slight pad so conic colors read clearly vs photo. */
  padding: 3px;
  background: var(--avatar-frame);
}
.avatar-frame-pick .avatar-wrap.frame-gold::before,
.avatar-frame-pick .avatar-wrap.frame-neon::before,
.avatar-frame-pick .avatar-wrap.frame-pulse::before,
.avatar-frame-pick .avatar-wrap.frame-ember::before,
.avatar-frame-pick .avatar-wrap.frame-ice::before {
  /* Ring comes from padded background on the wrap in the picker. */
  content: none;
  display: none;
}
.avatar-frame-pick .avatar-wrap.frame-aura,
.avatar-frame-pick .avatar-wrap.frame-spark,
.avatar-frame-pick .avatar-wrap.frame-plasma,
.avatar-frame-pick .avatar-wrap.frame-hearts,
.avatar-frame-pick .avatar-wrap.frame-rainbow,
.avatar-frame-pick .avatar-wrap.frame-comet,
.avatar-frame-pick .avatar-wrap.frame-halo,
.avatar-frame-pick .avatar-wrap.frame-stardust,
.avatar-frame-pick .avatar-wrap.frame-vortex {
  padding: 0;
  background: transparent;
  --avatar-ring: 3.5px;
}
.avatar-frame-pick .frame-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand);
  text-transform: lowercase;
}
.profile-cosmetic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 12px 14px 8px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--text) 12%);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--bg-elevated) 92%, var(--brand) 8%),
      color-mix(in srgb, var(--surface) 88%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.profile-cosmetic-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-cosmetic-card-head strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}
.profile-cosmetic-card-head span {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.3;
}
.profile-cosmetic-card .name-color-row,
.profile-cosmetic-card .avatar-frame-row,
.profile-cosmetic-card .name-plate-row {
  margin: 0 -4px;
  padding-bottom: 6px;
}
.profile-cosmetic-card .avatar-frame-row {
  /* Give illustrated PNG frames room; avoid iOS clipping/explosion */
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 14px;
  padding-bottom: 14px;
}
.name-color-row, .avatar-frame-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.name-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw, var(--surface));
  flex: 0 0 auto;
  padding: 0;
  font-size: 9px;
  color: var(--text-2);
}
.name-color-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.avatar-frame-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 22px 8px 12px;
  color: var(--text-2);
  font-size: 10px;
  flex: 0 0 auto;
  width: 112px;
  min-height: 168px;
  box-sizing: border-box;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.avatar-frame-pick > span {
  position: relative;
  z-index: 4;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #1a2332) 88%, transparent);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
}
.avatar-frame-pick .avatar-wrap {
  --avatar-size: 64px;
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
}
.avatar-frame-pick .avatar-wrap.frame-cloud,
.avatar-frame-pick .avatar-wrap.frame-storm,
.avatar-frame-pick .avatar-wrap.frame-thunder,
.avatar-frame-pick .avatar-wrap.frame-bolt,
.avatar-frame-pick .avatar-wrap.frame-capo,
.avatar-frame-pick .avatar-wrap.frame-qubi,
.avatar-frame-pick .avatar-wrap.frame-mist,
.avatar-frame-pick .avatar-wrap.frame-cigar,
.avatar-frame-pick .avatar-wrap.frame-noir,
.avatar-frame-pick .avatar-wrap.frame-qubi_glow,
.avatar-frame-pick .avatar-wrap.frame-bubble {
  --avatar-size: 72px;
  --illust-pad: 42%;
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
}
.avatar-frame-pick .avatar {
  width: 100%;
  height: 100%;
}
.avatar-frame-pick.active {
  border-color: var(--brand);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}
.name-plate-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.name-plate-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 10px 8px;
  color: var(--text-2);
  font-size: 10px;
  flex: 0 0 auto;
  min-width: 108px;
}
.name-plate-pick.active { border-color: var(--brand); color: var(--text); }
.name-plate-pick-label {
  opacity: 0.85;
  position: relative;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #1a2332) 88%, transparent);
}
.name-plate-pick .name-plate {
  font-size: 12px;
  max-width: 160px;
}
.name-plate-pick .name-plate .name-text {
  max-width: 7.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-plate {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  line-height: 1.3;
  vertical-align: middle;
  flex: 0 1 auto;
  flex-shrink: 1;
  box-sizing: border-box;
  min-width: 0;
  align-self: flex-start;
}
.name-plate .name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Do NOT set max-width:100% here — parent sized by content; that collapses the name to 0. */
}
.name-plate-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  backdrop-filter: blur(8px);
}
.profile-hero-meta .name-plate-pill,
.profile-hero-overlay .name-plate-pill {
  background: color-mix(in srgb, #fff 14%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
}
.name-plate-ribbon {
  padding: 6px 14px;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background: linear-gradient(90deg, #e11d48, #fb7185, #e11d48);
  color: #1a1a1a !important;
}
.name-plate-ribbon .name-text { color: #1a1a1a !important; }
.name-plate-neon {
  padding: 6px 10px;
  border-radius: 8px;
  background: #0b1220;
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(#0b1220, #0b1220),
    linear-gradient(90deg, #22d3ee, #a855f7);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 14px color-mix(in srgb, #22d3ee 45%, transparent);
  color: #f8fafc !important;
}
.name-plate-neon .name-text { color: #f8fafc !important; }
.name-plate-gold {
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fde68a, #d97706 55%, #fbbf24);
  border: 1px solid #f59e0b;
  color: #1a1a1a !important;
}
.name-plate-gold .name-text { color: #1a1a1a !important; font-weight: 700; }
.name-plate-stamp {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px dashed #64748b;
}
.name-plate-aurora {
  padding: 6px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(34,211,238,.28), rgba(168,85,247,.28), rgba(251,113,133,.28));
  border: 1.2px solid transparent;
  border-image: linear-gradient(90deg, #22d3ee, #a855f7, #fb7185) 1;
}
.name-plate-ticket {
  padding: 6px 12px;
  border-radius: 6px;
  background: #1e293b;
  border: 1px solid #94a3b8;
  color: #f8fafc !important;
  position: relative;
}
.name-plate-ticket .name-text { color: #f8fafc !important; }
.name-plate-ticket::before,
.name-plate-ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg, #0f172a);
  transform: translateY(-50%);
}
.name-plate-ticket::before { left: -4px; }
.name-plate-ticket::after { right: -4px; }
.name-plate-pixel {
  padding: 6px 10px;
  background: #111827;
  color: #f8fafc !important;
  box-shadow:
    inset 0 0 0 3px #34d399;
  image-rendering: pixelated;
}
.name-plate-pixel .name-text { color: #f8fafc !important; font-family: ui-monospace, monospace; }

/* Contour chase around the nick (parity with avatar frames). */
.name-plate-bolt,
.name-plate-aura,
.name-plate-spark,
.name-plate-plasma,
.name-plate-hearts,
.name-plate-rainbow,
.name-plate-comet,
.name-plate-halo,
.name-plate-stardust,
.name-plate-vortex,
.name-plate-cloud,
.name-plate-mist,
.name-plate-thunder,
.name-plate-storm,
.name-plate-capo,
.name-plate-cigar,
.name-plate-noir,
.name-plate-qubi,
.name-plate-qubi_glow,
.name-plate-bubble {
  position: relative;
  isolation: isolate;
  padding: 7px 10px;
  border-radius: 999px;
  color: #f8fafc !important;
  background: transparent;
  overflow: visible;
}
.name-plate-bolt .name-text,
.name-plate-aura .name-text,
.name-plate-spark .name-text,
.name-plate-plasma .name-text,
.name-plate-hearts .name-text,
.name-plate-rainbow .name-text,
.name-plate-comet .name-text,
.name-plate-halo .name-text,
.name-plate-stardust .name-text,
.name-plate-vortex .name-text,
.name-plate-cloud .name-text,
.name-plate-mist .name-text,
.name-plate-thunder .name-text,
.name-plate-storm .name-text,
.name-plate-capo .name-text,
.name-plate-cigar .name-text,
.name-plate-noir .name-text,
.name-plate-qubi .name-text,
.name-plate-qubi_glow .name-text,
.name-plate-bubble .name-text {
  color: #f8fafc !important;
  position: relative;
  z-index: 1;
}
.name-plate-bolt::before,
.name-plate-aura::before,
.name-plate-spark::before,
.name-plate-plasma::before,
.name-plate-hearts::before,
.name-plate-rainbow::before,
.name-plate-comet::before,
.name-plate-halo::before,
.name-plate-stardust::before,
.name-plate-vortex::before,
.name-plate-cloud::before,
.name-plate-mist::before,
.name-plate-thunder::before,
.name-plate-storm::before,
.name-plate-capo::before,
.name-plate-cigar::before,
.name-plate-noir::before,
.name-plate-qubi::before,
.name-plate-qubi_glow::before,
.name-plate-bubble::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}
.name-plate-bolt::after,
.name-plate-aura::after,
.name-plate-spark::after,
.name-plate-plasma::after,
.name-plate-hearts::after,
.name-plate-rainbow::after,
.name-plate-comet::after,
.name-plate-halo::after,
.name-plate-stardust::after,
.name-plate-vortex::after,
.name-plate-cloud::after,
.name-plate-mist::after,
.name-plate-thunder::after,
.name-plate-storm::after,
.name-plate-capo::after,
.name-plate-cigar::after,
.name-plate-noir::after,
.name-plate-qubi::after,
.name-plate-qubi_glow::after,
.name-plate-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: rgba(14, 22, 33, 0.88);
  pointer-events: none;
}
.name-plate-bolt::before {
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.2) 0deg,
    rgba(56, 189, 248, 0.2) 255deg,
    #38bdf8 300deg,
    #fef08a 325deg,
    #fff 338deg,
    transparent 360deg
  );
  animation: name-plate-chase 1.45s linear infinite;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}
.name-plate-aura::before {
  background: conic-gradient(
    from 90deg,
    rgba(196, 181, 253, 0.18) 0deg,
    rgba(196, 181, 253, 0.18) 230deg,
    #67e8f9 290deg,
    #f9a8d4 330deg,
    #fff 345deg,
    transparent 360deg
  );
  animation: name-plate-chase 2.9s linear infinite;
  filter: drop-shadow(0 0 5px rgba(196, 181, 253, 0.5));
}
.name-plate-spark::before {
  background: conic-gradient(
    from 180deg,
    rgba(251, 191, 36, 0.14) 0deg,
    transparent 50deg,
    #fbbf24 210deg,
    #fff7ed 230deg,
    transparent 250deg,
    #fb7185 300deg,
    #fff 320deg,
    transparent 340deg,
    rgba(251, 191, 36, 0.14) 360deg
  );
  animation: name-plate-chase 1.85s linear infinite;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.45));
}
.name-plate-plasma::before {
  background: conic-gradient(
    from 45deg,
    rgba(168, 85, 247, 0.16) 0deg,
    rgba(168, 85, 247, 0.16) 250deg,
    #22d3ee 305deg,
    #fff 325deg,
    transparent 360deg
  );
  animation: name-plate-chase 2.1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.name-plate-hearts::before {
  background: conic-gradient(from 0deg, rgba(251, 113, 133, 0.35), rgba(244, 114, 182, 0.4), rgba(251, 113, 133, 0.35));
  animation: none;
}
/* Contour color rings + pulse (no rotate) for rainbow→vortex. */
.name-plate-rainbow::before {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.45));
}
.name-plate-comet::before {
  background: conic-gradient(from 0deg, #fef08a, #facc15, #38bdf8, #a855f7, #fef08a);
  animation: name-plate-glow-comet 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.5));
}
.name-plate-halo::before {
  background: conic-gradient(from 90deg, #67e8f9, #c4b5fd, #f9a8d4, #67e8f9);
  animation: name-plate-glow-halo 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.55));
}
.name-plate-stardust::before {
  background: conic-gradient(from 180deg, #fff7ed, #fbbf24, #fb7185, #fff7ed);
  animation: name-plate-glow-stardust 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.name-plate-vortex::before {
  background: conic-gradient(from 45deg, #22d3ee, #a855f7, #ec4899, #22d3ee);
  animation: name-plate-glow-vortex 1.75s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5));
}

.name-plate-cloud::before {
  background:
    radial-gradient(circle at 10% 50%, #fff 0 55%, transparent 56%),
    radial-gradient(circle at 30% 30%, #f1f5f9 0 50%, transparent 52%),
    radial-gradient(circle at 55% 20%, #fff 0 52%, transparent 54%),
    radial-gradient(circle at 80% 40%, #e2e8f0 0 50%, transparent 52%),
    radial-gradient(circle at 90% 70%, #fff 0 48%, transparent 50%),
    linear-gradient(90deg, #f8fafc, #cbd5e1, #f8fafc);
  animation: name-plate-glow-rainbow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(248,250,252,0.65));
}
.name-plate-mist::before {
  background: conic-gradient(from 20deg, #c4b5fd, #93c5fd, #f9a8d4, #fde68a, #a5b4fc, #c4b5fd);
  animation: name-plate-glow-halo 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(196,181,253,0.7));
}
.name-plate-thunder::before {
  background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #facc15, #4c1d95, #1e1b4b);
  animation: name-plate-glow-plasma 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(124,58,237,0.7));
}
.name-plate-storm::before {
  background: conic-gradient(from 90deg, #312e81, #6366f1, #a5b4fc, #1e1b4b, #312e81);
  animation: name-plate-glow-aura 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(99,102,241,0.65));
}
.name-plate-capo::before {
  background: linear-gradient(90deg, #0a0a0a, #fde68a, #d97706, #0a0a0a);
  animation: name-plate-glow-comet 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(251,191,36,0.6));
}
.name-plate-cigar::before {
  background: linear-gradient(90deg, #451a03, #fbbf24, #78350f);
  animation: name-plate-glow-comet 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(251,191,36,0.45));
}
.name-plate-noir::before {
  background: linear-gradient(90deg, #171717, #e5e5e5, #facc15, #171717);
  animation: name-plate-glow-stardust 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(250,204,21,0.4));
}
.name-plate-qubi::before {
  background: conic-gradient(from 0deg, #14b8a6, #2dd4bf, #99f6e4, #5eead4, #14b8a6);
  animation: name-plate-glow-aura 2s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(45,212,191,0.7));
}
.name-plate-qubi_glow::before {
  background: conic-gradient(from 45deg, #2dd4bf, #67e8f9, #a7f3d0, #2dd4bf);
  animation: name-plate-glow-halo 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(103,232,249,0.8));
}
.name-plate-bubble::before {
  background: conic-gradient(from 0deg, #67e8f9, #fff, #a5f3fc, #7dd3fc, #67e8f9);
  animation: name-plate-glow-rainbow 2.1s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(125,211,252,0.6));
}
.name-plate-bolt::after,
.name-plate-aura::after,
.name-plate-spark::after,
.name-plate-plasma::after,
.name-plate-hearts::after,
.name-plate-rainbow::after,
.name-plate-comet::after,
.name-plate-halo::after,
.name-plate-stardust::after,
.name-plate-vortex::after,
.name-plate-cloud::after,
.name-plate-mist::after,
.name-plate-thunder::after,
.name-plate-storm::after,
.name-plate-capo::after,
.name-plate-cigar::after,
.name-plate-noir::after,
.name-plate-qubi::after,
.name-plate-qubi_glow::after,
.name-plate-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: rgba(14, 22, 33, 0.88);
  pointer-events: none;
}
.name-plate-bolt::before {
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.2) 0deg,
    rgba(56, 189, 248, 0.2) 255deg,
    #38bdf8 300deg,
    #fef08a 325deg,
    #fff 338deg,
    transparent 360deg
  );
  animation: name-plate-chase 1.45s linear infinite;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}
.name-plate-aura::before {
  background: conic-gradient(
    from 90deg,
    rgba(196, 181, 253, 0.18) 0deg,
    rgba(196, 181, 253, 0.18) 230deg,
    #67e8f9 290deg,
    #f9a8d4 330deg,
    #fff 345deg,
    transparent 360deg
  );
  animation: name-plate-chase 2.9s linear infinite;
  filter: drop-shadow(0 0 5px rgba(196, 181, 253, 0.5));
}
.name-plate-spark::before {
  background: conic-gradient(
    from 180deg,
    rgba(251, 191, 36, 0.14) 0deg,
    transparent 50deg,
    #fbbf24 210deg,
    #fff7ed 230deg,
    transparent 250deg,
    #fb7185 300deg,
    #fff 320deg,
    transparent 340deg,
    rgba(251, 191, 36, 0.14) 360deg
  );
  animation: name-plate-chase 1.85s linear infinite;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.45));
}
.name-plate-plasma::before {
  background: conic-gradient(
    from 45deg,
    rgba(168, 85, 247, 0.16) 0deg,
    rgba(168, 85, 247, 0.16) 250deg,
    #22d3ee 305deg,
    #fff 325deg,
    transparent 360deg
  );
  animation: name-plate-chase 2.1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.name-plate-hearts::before {
  background: conic-gradient(from 0deg, rgba(251, 113, 133, 0.35), rgba(244, 114, 182, 0.4), rgba(251, 113, 133, 0.35));
  animation: none;
}
/* Contour color rings + pulse (no rotate) for rainbow→vortex. */
.name-plate-rainbow::before {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.45));
}
.name-plate-comet::before {
  background: conic-gradient(from 0deg, #fef08a, #facc15, #38bdf8, #a855f7, #fef08a);
  animation: name-plate-glow-comet 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.5));
}
.name-plate-halo::before {
  background: conic-gradient(from 90deg, #67e8f9, #c4b5fd, #f9a8d4, #67e8f9);
  animation: name-plate-glow-halo 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.55));
}
.name-plate-stardust::before {
  background: conic-gradient(from 180deg, #fff7ed, #fbbf24, #fb7185, #fff7ed);
  animation: name-plate-glow-stardust 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.name-plate-vortex::before {
  background: conic-gradient(from 45deg, #22d3ee, #a855f7, #ec4899, #22d3ee);
  animation: name-plate-glow-vortex 1.75s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5));
}
.name-plate-cloud::before {
  background: conic-gradient(from 0deg, #f8fafc, #e2e8f0, #94a3b8, #f8fafc);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(226, 232, 240, 0.55));
}
.name-plate-mist::before {
  background: conic-gradient(from 40deg, #cbd5e1, #a5b4fc, #e0e7ff, #cbd5e1);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(165, 180, 252, 0.55));
}
.name-plate-thunder::before {
  background: conic-gradient(from 0deg, #7c3aed, #1e1b4b, #facc15, #7c3aed);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));
}
.name-plate-storm::before {
  background: conic-gradient(from 90deg, #64748b, #38bdf8, #1e293b, #64748b);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.5));
}
.name-plate-capo::before {
  background: conic-gradient(from 0deg, #fde68a, #0f0f0f, #d97706, #fde68a);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(217, 119, 6, 0.55));
}
.name-plate-cigar::before {
  background: conic-gradient(from 20deg, #78350f, #fbbf24, #451a03, #78350f);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}
.name-plate-noir::before {
  background: conic-gradient(from 0deg, #e5e5e5, #525252, #facc15, #e5e5e5);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.4));
}
.name-plate-qubi::before {
  background: conic-gradient(from 0deg, #5eead4, #2dd4bf, #99f6e4, #5eead4);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.55));
}
.name-plate-qubi_glow::before {
  background: conic-gradient(from 45deg, #2dd4bf, #a7f3d0, #67e8f9, #2dd4bf);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(103, 232, 249, 0.6));
}
.name-plate-bubble::before {
  background: conic-gradient(from 0deg, #67e8f9, #a5f3fc, #ffffff, #67e8f9);
  animation: name-plate-glow-rainbow 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(165, 243, 252, 0.55));
}
.name-plate-hearts .name-fx-orbit {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  transform: rotate(calc(var(--i) * 45deg));
}
.name-plate-hearts .name-fx-heart {
  position: absolute;
  left: 50%;
  top: 0;
  color: #fb7185;
  font-size: 8px;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: avatar-heart-beat 1.35s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.15s);
  text-shadow: 0 0 4px rgba(251, 113, 133, 0.7);
}
@keyframes name-plate-chase {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes name-plate-glow-bolt {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.45)); }
  50% { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)); }
}
@keyframes name-plate-glow-aura {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.4)); }
  50% { filter: drop-shadow(0 0 10px rgba(196, 181, 253, 0.65)); }
}
@keyframes name-plate-glow-spark {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4)); }
  40% { filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.7)); }
}
@keyframes name-plate-glow-plasma {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.45)); }
  50% { filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.65)); }
}
@keyframes name-plate-glow-rainbow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.4)); opacity: 0.75; }
  50% { filter: drop-shadow(0 0 9px rgba(56, 189, 248, 0.7)); opacity: 1; }
}
@keyframes name-plate-glow-comet {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.4)); opacity: 0.75; }
  50% { filter: drop-shadow(0 0 9px rgba(168, 85, 247, 0.65)); opacity: 1; }
}
@keyframes name-plate-glow-halo {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.4)); opacity: 0.75; }
  50% { filter: drop-shadow(0 0 10px rgba(249, 168, 212, 0.7)); opacity: 1; }
}
@keyframes name-plate-glow-stardust {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4)); opacity: 0.75; }
  50% { filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.7)); opacity: 1; }
}
@keyframes name-plate-glow-vortex {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.4)); opacity: 0.75; }
  50% { filter: drop-shadow(0 0 9px rgba(236, 72, 153, 0.65)); opacity: 1; }
}

.online-dot {
  position: absolute; right: 1px; bottom: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--online); border: 2px solid var(--bg-elevated);
}
.secret-icon {
  margin-right: 4px;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--brand);
  vertical-align: -1px;
}
.secret-icon svg { width: 14px; height: 14px; display: block; }
.row-ticks {
  margin-right: 2px;
}
.row-ticks.read { color: var(--brand); }
.row-time {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  white-space: nowrap;
  justify-self: end;
  text-align: end;
}
.row-status {
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 0 2px;
}
.badge.muted { background: var(--text-2); }
.mute-icon {
  width: 18px;
  height: 18px;
  opacity: .75;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.mute-icon svg { width: 16px; height: 16px; display: block; }
.chat-row-swipe.swiping > .chat-row { background: var(--bg-elevated); }
.unread-chip {
  align-self: center;
  margin: 10px 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 18%, var(--bg-elevated));
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 700;
}
.scroll-down-fab {
  position: absolute; right: 14px; bottom: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 1.2rem; font-weight: 700;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .15s, transform .15s; z-index: 5;
  display: grid; place-items: center; padding: 0;
}
.scroll-down-fab svg { width: 22px; height: 22px; display: block; }
.scroll-down-fab.visible { opacity: 1; pointer-events: auto; transform: none; }
.scroll-down-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 18px;
}
/* Reply quote — match Android MessageBubble (solid chip, white bar, #8ECFFF name) */
.bubble .reply-quote,
.reply-quote {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  padding: 7px 10px 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(140, 190, 255, 0.28);
  background: rgba(18, 32, 52, 0.94);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.bubble .reply-quote::before,
.reply-quote::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
.reply-quote:active {
  transform: scale(0.985);
}
.bubble-wrap.mine .reply-quote {
  background: rgba(18, 32, 52, 0.94);
  border-color: rgba(140, 190, 255, 0.28);
}
.bubble-wrap.theirs .reply-quote {
  background: rgba(18, 32, 52, 0.94);
  border-color: rgba(140, 190, 255, 0.22);
}
html[data-theme="light"] .reply-quote,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .reply-quote {
  background: rgba(232, 240, 252, 0.96);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  color: #1a2433;
}
html[data-theme="light"] .bubble-wrap.mine .reply-quote,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .bubble-wrap.mine .reply-quote {
  background: rgba(220, 234, 250, 0.98);
}
html[data-theme="light"] .reply-quote::before,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .reply-quote::before {
  background: var(--brand);
}
.reply-quote-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reply-quote-thumb,
.banner-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.25);
  display: block;
}
.reply-quote-thumb.round,
.banner-thumb.round {
  border-radius: 50%;
}
.reply-quote-thumb.is-sticker,
.banner-thumb.is-sticker {
  object-fit: contain;
  background: transparent;
}
.bubble .reply-quote-name,
.reply-quote-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #8ecfff;
  letter-spacing: 0.01em;
  padding-left: 2px;
  line-height: 1.2;
}
.bubble .reply-quote-body,
.reply-quote-body {
  font-size: 0.81rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2px;
  opacity: 1;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: none;
}
html[data-theme="light"] .reply-quote-name,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .reply-quote-name {
  color: #1a6fb5;
}
html[data-theme="light"] .reply-quote-body,
html:not([data-theme="dark"]):not(.theme-dark):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .reply-quote-body {
  color: #152033;
  text-shadow: none;
}
.sticker-pack-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sticker-pack-tabs::-webkit-scrollbar { display: none; }
.sticker-pack-tabs .folder-chip {
  flex: 0 0 auto;
}
html[data-list-lines="3"] .chat-row .row-preview {
  -webkit-line-clamp: 1; line-clamp: 1;
}

.offline-banner {
  margin: 0;
  padding: 8px 14px;
  background: color-mix(in srgb, #f59e0b 22%, var(--bg-elevated));
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.bubble.pending .meta { opacity: .85; }

.profile-hero {
  position: relative;
  /* Leave list peeking under the fold so scroll is obvious on PWA. */
  height: min(78vw, 380px);
  min-height: 280px;
  max-height: min(48vh, 380px);
  background: #1a2330;
  overflow: hidden;
  touch-action: pan-y;
}
.profile-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Don't let <img> drag/gesture steal vertical scroll of the info screen. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: pan-y;
}
.profile-hero.no-photo {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
}
.profile-hero-initial { font-size: 4rem; font-weight: 800; color: #fff; z-index: 1; }
.profile-hero-camera {
  position: absolute;
  right: 14px;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5px solid color-mix(in srgb, #fff 35%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 28%, transparent), transparent 60%),
    color-mix(in srgb, var(--brand) 58%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #fff;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  cursor: pointer;
}
.profile-hero-camera:active { transform: scale(0.96); }
.profile-hero-expand {
  position: absolute;
  right: 14px;
  bottom: 118px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 48%, transparent);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.18)),
    color-mix(in srgb, #000 28%, transparent);
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  padding: 0;
}
.profile-hero-expand svg {
  width: 18px;
  height: 18px;
  display: block;
}
.profile-hero-expand:active { transform: scale(0.96); }
@media (min-width: 480px) {
  .profile-hero-expand { bottom: 128px; }
}
/* Telegram torpedo: transparent gradient over photo; solid icon pills on top */
.profile-hero-torpedo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Shorter veil — more of the photo stays readable above the pills. */
  padding: 40px 10px 10px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.28) 68%,
    rgba(0, 0, 0, 0.72) 100%
  );
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.profile-hero-torpedo * { pointer-events: auto; }
.profile-hero-meta {
  padding: 0 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-hero-meta .name-with-badges {
  color: #fff;
  max-width: 100%;
  /* Name plate only — status line is the subtitle under the name (Telegram). */
  flex-wrap: nowrap;
}
.profile-hero-meta .name-status-text {
  display: none;
}
.profile-hero-meta .name-plate {
  max-width: min(100%, 92vw);
  flex-shrink: 1;
  box-sizing: border-box;
}
.profile-hero-meta .name-plate .name-text {
  /* keep plate text visible over photo gradient */
  text-shadow: none;
  max-width: 100%;
}
.profile-hero-meta strong,
.profile-hero-meta .name-text {
  font-size: 1.35rem;
  font-weight: 800;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.profile-hero-meta strong {
  color: #fff;
}
/* Keep cosmetics inline color; default white only when unset. */
.profile-hero-meta .name-text:not([style*="color"]) {
  color: #fff;
}
.profile-hero-meta > span {
  opacity: .92;
  font-size: .9rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.profile-hero-meta .official-verified { color: #7dd3fc; }
.profile-hero-meta .official-chip {
  color: #e0f2fe;
  background: rgba(255,255,255,.22);
}
.profile-hero-meta .official-chip.system {
  background: rgba(255,255,255,.14);
  color: #bae6fd;
}
.profile-hero-actions-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.profile-hero-actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  padding-top: 2px;
  width: 100%;
}
.profile-action {
  flex: 0 0 auto;
  width: 64px;
  max-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.profile-action-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* Liquid glass — translucent enough to show the photo, opaque enough for contrast */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, #ffffff 26%, transparent);
  backdrop-filter: blur(16px) saturate(1.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.55);
  border: 1px solid color-mix(in srgb, #ffffff 48%, transparent);
  color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.22);
}
.profile-action-ico svg {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.profile-action-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.35);
}
.profile-action:active .profile-action-ico {
  transform: scale(0.96);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.2)),
    color-mix(in srgb, #ffffff 34%, transparent);
}

.profile-gallery-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 0 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 16px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.profile-gallery-cta.profile-gallery-cta-below {
  /* Below-hero plate — not over the avatar. */
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    var(--bg-elevated);
}
.profile-gallery-preview {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), color-mix(in srgb, #fff 4%, transparent) 55%),
    color-mix(in srgb, #17212b 42%, transparent);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.18);
}
.profile-gallery-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 2px 2px 4px;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.profile-gallery-preview-ico {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: inherit;
}
.profile-gallery-preview-ico svg { width: 20px; height: 20px; display: block; }
.profile-gallery-preview-hint {
  color: var(--text-2, #8b9bab);
  font-size: 0.82rem;
  padding: 4px 2px 0;
}
.profile-gallery-preview-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.profile-gallery-preview-photos.one {
  grid-template-columns: 1fr;
  justify-items: center;
}
.profile-gallery-preview-photos.one .profile-gallery-preview-tile {
  width: min(46%, 148px);
}
.profile-gallery-preview-photos.two {
  grid-template-columns: repeat(2, minmax(0, 132px));
  justify-content: center;
}
.profile-gallery-preview-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 14px;
  padding: 0;
  background: color-mix(in srgb, #000 25%, transparent);
  cursor: pointer;
}
.profile-gallery-preview-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-gallery-preview-tile .meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 8px;
  padding: 18px 6px 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58));
}
.profile-gallery-preview-all {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.profile-gallery-preview-all:active {
  transform: scale(0.985);
}
html[data-theme="light"] .profile-gallery-preview {
  border-color: color-mix(in srgb, #000 10%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 72%, transparent), color-mix(in srgb, #e8eef6 55%, transparent));
}
.profile-gallery-cta.gift-cta { display: none; } /* legacy — gifts moved to info-plate */
.profile-gallery-cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: none;
  color: inherit;
}
.profile-gallery-cta:active {
  transform: scale(0.985);
  background: color-mix(in srgb, var(--surface) 80%, var(--bg-elevated));
}
.profile-gallery-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
}
.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
}
.profile-gallery-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
  border: none;
  padding: 0;
  cursor: pointer;
}
.profile-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-gallery-tile .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  display: flex;
  gap: 8px;
}
.profile-gallery-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-2);
}
.profile-gallery-empty strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.profile-gallery-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.profile-gallery-toolbar .btn {
  flex: 1;
  min-width: 120px;
}
.profile-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,.92);
  display: flex;
  flex-direction: column;
  color: #fff;
}
.profile-gallery-viewer img {
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  margin: 12px auto;
  display: block;
}
.profile-gallery-viewer .viewer-body {
  flex: 1;
  overflow: auto;
  padding: 0 14px 20px;
}
.profile-gallery-viewer .viewer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0 12px;
}
.profile-gallery-viewer .comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-gallery-viewer .comment {
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.profile-gallery-viewer .comment strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.profile-gallery-viewer .comment-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.profile-gallery-viewer .comment-form input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 10px 12px;
}
.profile-gallery-privacy {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-gallery-privacy .seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-gallery-privacy .seg button {
  flex: 1;
  min-width: 90px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.profile-gallery-privacy .seg button.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  color: var(--brand);
}

/* Theme-tuned glass so icons stay readable on light / dark / QPay */
html[data-theme="light"] .profile-action-ico {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0.28)),
    color-mix(in srgb, #ffffff 34%, transparent);
  border-color: color-mix(in srgb, #ffffff 62%, transparent);
  color: var(--brand-deep);
}
html[data-theme="dark"] .profile-action-ico {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.14)),
    color-mix(in srgb, #ffffff 20%, transparent);
  border-color: color-mix(in srgb, #ffffff 38%, transparent);
  color: #e8f7ff;
}
html[data-theme="qpay"] .profile-action-ico,
html[data-theme="midnight"] .profile-action-ico,
html[data-theme="ocean"] .profile-action-ico,
html[data-theme="ember"] .profile-action-ico {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.32), rgba(134, 239, 172, 0.08) 55%, rgba(255, 255, 255, 0.14)),
    color-mix(in srgb, #ffffff 20%, transparent);
  border-color: color-mix(in srgb, #86efac 28%, rgba(255, 255, 255, 0.35));
  color: #bbf7d0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="qpay"]):not([data-theme="midnight"]):not([data-theme="ocean"]):not([data-theme="ember"]) .profile-action-ico {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.14)),
      color-mix(in srgb, #ffffff 20%, transparent);
    border-color: color-mix(in srgb, #ffffff 38%, transparent);
    color: #e8f7ff;
  }
}
.profile-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-hero-overlay .name-with-badges {
  color: #fff;
}
.profile-hero-overlay strong,
.profile-hero-overlay .name-text {
  font-size: 1.35rem;
  font-weight: 800;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.profile-hero-overlay strong {
  color: #fff;
}
.profile-hero-overlay .name-text:not([style*="color"]) {
  color: #fff;
}
.profile-hero-overlay .official-verified { color: #7dd3fc; }
.profile-hero-overlay .official-chip {
  color: #e0f2fe;
  background: rgba(255,255,255,.18);
}
.profile-hero-overlay .official-chip.system {
  background: transparent;
  color: #bae6fd;
}
.profile-hero-overlay > span { opacity: .85; font-size: .9rem; }
.role-chip { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:.7rem; font-weight:700; background:var(--brand-soft); color:var(--brand-deep); vertical-align:middle; }
.role-chip.owner { background:color-mix(in srgb, #f59e0b 25%, transparent); color:#b45309; }
.search-hit-flash .bubble { outline:2px solid var(--brand); }
.fwd-list { max-height:50vh; overflow:auto; }
.fwd-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 10px;
}
.fwd-comment {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  box-sizing: border-box;
}
.fwd-hide-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
}
.fwd-hide-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.fwd-hide-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fwd-hide-text strong {
  font-size: 0.92rem;
  color: var(--text);
}
.fwd-hide-text span {
  font-size: 0.78rem;
  color: var(--text-2);
}
.fwd-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--brand) 70%, var(--text-2));
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.fwd-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }

/* Forward picker — glass capsule + contact bubbles (Telegram-like) */
.glass-capsule-sheet.fwd-sheet {
  width: min(520px, 100%);
  max-width: 520px;
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
.fwd-search-wrap {
  position: relative;
  padding: 0 14px 10px;
}
.fwd-search-ico {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-2);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.fwd-search-ico svg { width: 18px; height: 18px; display: block; }
.fwd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px 11px 40px;
  border-radius: 14px;
  border: 0.5px solid color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.fwd-search::placeholder { color: var(--text-2); }
.fwd-list {
  flex: 1;
  overflow: auto;
  padding: 0 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
}
.fwd-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 18px;
  border: 0.5px solid color-mix(in srgb, #fff 24%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  cursor: pointer;
}
html[data-theme="dark"] .fwd-bubble,
html[data-theme="qpay"] .fwd-bubble,
html.theme-dark .fwd-bubble {
  border-color: color-mix(in srgb, #fff 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-elevated) 68%, transparent);
}
.fwd-bubble:active { transform: scale(0.985); }
.fwd-bubble .avatar {
  width: 46px;
  height: 46px;
  font-size: 0.95rem;
}
.fwd-bubble .row-title {
  font-size: 0.98rem;
  font-weight: 700;
}
.fwd-bubble .row-preview {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-top: 2px;
}
.fwd-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.92rem;
}
.fwd-cancel {
  display: block;
  width: calc(100% - 24px);
  margin: 8px auto 4px;
  padding: 14px 16px;
  border: 0.5px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 55%),
    color-mix(in srgb, #fff 8%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
html[data-theme="light"] .fwd-cancel {
  border-color: color-mix(in srgb, #fff 70%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 55%),
    color-mix(in srgb, #fff 42%, transparent);
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
.fwd-cancel.fwd-share-ext {
  margin-top: 10px;
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 55%),
    color-mix(in srgb, var(--brand) 18%, transparent);
}
html[data-theme="light"] .fwd-cancel.fwd-share-ext {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 55%),
    color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
}
.fwd-cancel:active { opacity: 0.85; transform: scale(0.985); }

/* Message actions — glass torpedo menu */
.glass-capsule-sheet.msg-actions-sheet {
  width: min(340px, 100%);
  max-width: 340px;
  padding-bottom: 8px;
}
.msg-actions-preview {
  margin: 0 12px 6px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.3;
  color: #fff;
  word-break: break-word;
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.msg-actions-preview.mine { background: rgba(43, 82, 120, 0.92); }
.msg-actions-preview.theirs { background: rgba(24, 37, 51, 0.92); }
.msg-actions-reactions {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 4px 10px;
  margin: 0 10px 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 0.5px solid color-mix(in srgb, #fff 20%, var(--line));
}
.msg-actions-reactions .react-chip {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}
.msg-actions-reactions .react-chip.active {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}
.msg-actions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px 4px;
  max-height: min(46vh, 340px);
  overflow: auto;
}
.msg-action-torpedo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 14px;
  border: 0.5px solid color-mix(in srgb, #fff 28%, var(--glass-stroke));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), transparent 55%),
    var(--glass-pill-bg);
  backdrop-filter: blur(28px) saturate(1.65);
  -webkit-backdrop-filter: blur(28px) saturate(1.65);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: var(--text);
  font-size: 0.92rem;
}
html[data-theme="light"] .msg-action-torpedo {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elevated) 32%, transparent);
  border-color: color-mix(in srgb, #fff 70%, var(--line));
}
html[data-theme="dark"] .msg-action-torpedo,
html[data-theme="midnight"] .msg-action-torpedo,
html[data-theme="ocean"] .msg-action-torpedo,
html[data-theme="ember"] .msg-action-torpedo,
html.theme-dark .msg-action-torpedo {
  border-color: color-mix(in srgb, #fff 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 50%),
    var(--glass-pill-bg);
}
.msg-action-torpedo.danger { color: var(--danger); }
.msg-action-torpedo.danger .msg-action-ico { color: var(--danger); }
.msg-action-torpedo:active { transform: scale(0.985); }
.msg-action-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--brand);
}
.msg-action-ico svg { width: 22px; height: 22px; display: block; }
.msg-action-label {
  font-size: 0.95rem;
  font-weight: 600;
}
.msg-actions-cancel {
  display: block;
  width: calc(100% - 24px);
  margin: 4px auto 2px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Generic action sheet — same liquid glass as message actions */
.glass-capsule-sheet.action-glass-sheet {
  width: min(400px, 100%);
  max-width: 400px;
}
.glass-capsule-sheet.action-glass-sheet .msg-action-torpedo.danger {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ff8a95 22%, transparent), transparent 55%),
    color-mix(in srgb, #ff4d5e 16%, var(--glass-pill-bg));
  border-color: color-mix(in srgb, #ff6b7a 42%, transparent);
  box-shadow:
    0 8px 24px color-mix(in srgb, #ff4d5e 18%, transparent),
    0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset;
}
html[data-theme="light"] .glass-capsule-sheet.action-glass-sheet .msg-action-torpedo.danger {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 40%, transparent), transparent 55%),
    color-mix(in srgb, #ff5252 12%, transparent);
  border-color: color-mix(in srgb, #e53935 28%, transparent);
}

/* In-chat app update card (Android + PWA parity) */
.update-card-body { display: flex; flex-direction: column; gap: 10px; }
.update-banner {
  width: 100%;
  border-radius: 12px;
  display: block;
  aspect-ratio: 1080 / 640;
  object-fit: cover;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  cursor: pointer;
}
.update-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.update-card-status { font-size: 0.9rem; font-weight: 600; color: var(--text); }

/* Liquid-glass download panel */
.update-dl-glass {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 14%, transparent), color-mix(in srgb, #fff 4%, transparent)),
    color-mix(in srgb, var(--surface, #17212B) 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 8px 28px color-mix(in srgb, #000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}
.update-dl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.update-dl-meta { min-width: 0; flex: 1; }
.update-dl-label {
  font-size: 0.82rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.update-dl-sub {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--text) 48%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-dl-pct {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand, #2AABEE);
  line-height: 1;
  flex-shrink: 0;
}
.update-progress {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 10%, transparent);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 28%, transparent);
}
.update-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand, #2AABEE) 72%, #0D9488),
    var(--brand, #2AABEE),
    color-mix(in srgb, var(--brand, #2AABEE) 88%, #fff));
  transition: width 0.18s ease;
  position: relative;
  min-width: 2%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand, #2AABEE) 45%, transparent);
}
.update-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, #fff 55%, transparent) 45%,
    transparent 70%);
  background-size: 220% 100%;
  animation: update-dl-shine 1.4s linear infinite;
  pointer-events: none;
}
.update-dl-glass.is-paused .update-progress-fill::after { animation: none; opacity: 0; }
@keyframes update-dl-shine {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.update-dl-actions {
  display: flex;
  gap: 8px;
}
.update-dl-chip {
  flex: 1;
  height: 40px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent);
  color: color-mix(in srgb, var(--text) 90%, transparent);
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
}
.update-dl-chip:active { transform: scale(0.98); }
.update-dl-chip--primary {
  background: var(--brand, #2AABEE);
  border-color: color-mix(in srgb, var(--brand, #2AABEE) 55%, transparent);
  color: #fff;
}
.update-install-btn,
.update-cancel-btn {
  width: 100%;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 700;
}
.update-cancel-btn {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text-2);
  border: 0.5px solid color-mix(in srgb, #fff 18%, var(--line));
}

/* PWA / iOS home-screen: liquid-glass torpedo under chat topbar */
.pwa-shell-torpedo-wrap {
  flex-shrink: 0;
  padding: 8px 12px 6px;
  z-index: 20;
  animation: pwa-shell-torpedo-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pwa-shell-torpedo-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pwa-shell-torpedo {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  isolation: isolate;
  box-shadow:
    0 10px 28px color-mix(in srgb, #000 28%, transparent),
    0 0 0 0.5px color-mix(in srgb, #fff 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    inset 0 -10px 24px color-mix(in srgb, var(--brand) 12%, transparent);
  background:
    linear-gradient(
      125deg,
      color-mix(in srgb, #fff 22%, transparent) 0%,
      color-mix(in srgb, #fff 4%, transparent) 38%,
      color-mix(in srgb, var(--brand) 14%, transparent) 72%,
      color-mix(in srgb, #fff 8%, transparent) 100%
    ),
    color-mix(in srgb, var(--bg-elevated, #1c1c1e) 42%, transparent);
  backdrop-filter: blur(28px) saturate(1.85);
  -webkit-backdrop-filter: blur(28px) saturate(1.85);
}
.pwa-shell-torpedo-shine {
  pointer-events: none;
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, #fff 34%, transparent) 48%,
    transparent 62%
  );
  transform: translateX(-35%) rotate(8deg);
  animation: pwa-shell-shine 4.8s ease-in-out infinite;
  opacity: 0.75;
}
@keyframes pwa-shell-shine {
  0%, 55% { transform: translateX(-40%) rotate(8deg); opacity: 0.35; }
  70% { transform: translateX(35%) rotate(8deg); opacity: 0.85; }
  100% { transform: translateX(55%) rotate(8deg); opacity: 0.2; }
}
.pwa-shell-torpedo-liquid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, #fff 26%, transparent), transparent 55%),
    radial-gradient(90% 70% at 88% 110%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.pwa-shell-torpedo-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 8px 8px 12px;
}
.pwa-shell-torpedo-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent),
    color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 0 0 0.5px color-mix(in srgb, var(--brand) 35%, transparent);
}
.pwa-shell-torpedo-ico svg {
  width: 18px;
  height: 18px;
}
.pwa-shell-torpedo-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-shell-torpedo-title {
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.15;
}
.pwa-shell-torpedo-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-shell-torpedo-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 750;
  color: #fff;
  white-space: nowrap;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent),
    var(--brand);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--brand) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
}
.pwa-shell-torpedo-btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}
.pwa-shell-torpedo-x {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  background: color-mix(in srgb, #fff 8%, transparent);
}
.pwa-shell-torpedo-x svg {
  width: 16px;
  height: 16px;
}
.pwa-shell-torpedo-x:active {
  background: color-mix(in srgb, #fff 14%, transparent);
}
html[data-theme="light"] .pwa-shell-torpedo {
  background:
    linear-gradient(
      125deg,
      color-mix(in srgb, #fff 55%, transparent) 0%,
      color-mix(in srgb, #fff 18%, transparent) 40%,
      color-mix(in srgb, var(--brand) 10%, transparent) 100%
    ),
    color-mix(in srgb, #ffffff 55%, transparent);
  box-shadow:
    0 10px 26px color-mix(in srgb, #000 12%, transparent),
    0 0 0 0.5px color-mix(in srgb, #000 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}

.composer-banner.edit-mode {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent),
    color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 0.5px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-left: 3px solid var(--brand);
  border-radius: 16px 16px 0 0;
  margin: 0 8px;
}
.composer-banner.edit-mode .banner-label { color: var(--brand); }
.chat-search-nav { display:flex; align-items:center; gap:6px; }
.chat-search-nav .count { font-size:.8rem; color:var(--text-2); min-width:48px; text-align:center; }

/* ќќ Liquid glass polish (Telegram-like) ќќ */
.screen:has(> .tabs),
.screen:has(> .tabs-dock) {
  padding-bottom: 0;
}
.screen:has(> .tabs) > .list,
.screen:has(> .tabs) > .settings-list,
.screen:has(> .tabs) > .favorites-list,
.screen:has(> .tabs) > .clips-body,
.screen:has(> .tabs-dock) > .list,
.screen:has(> .tabs-dock) > .settings-list,
.screen:has(> .tabs-dock) > .favorites-list,
.screen:has(> .tabs-dock) > .clips-body,
.screen:has(> .tabs-dock) > .clips-invite-gate {
  padding-bottom: calc(var(--tabs-dock) + var(--safe-bottom) + 22px);
}
.screen:has(> .tabs) > .search + .list,
.screen:has(> .tabs-dock) > .search + .list {
  padding-bottom: calc(var(--tabs-dock) + var(--safe-bottom) + 22px);
}
body:has(.tabs) .toast,
body:has(.tabs-dock) .toast {
  bottom: calc(var(--tabs-dock) + 14px + var(--safe-bottom));
}
body:has(.composer):not(:has(.tabs)) .toast {
  bottom: calc(78px + var(--safe-bottom));
}

.card {
  background:
    linear-gradient(160deg, var(--glass-shine), transparent 42%),
    var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-stroke);
}

.settings-profile-card,
.settings-section-card {
  background:
    linear-gradient(160deg, var(--glass-shine), transparent 50%),
    var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-color: var(--glass-stroke);
}
.settings-section-card > .settings-item,
.settings-section-card > .theme-option,
.settings-section-card > label.settings-item {
  background: transparent;
}
.settings-section-card > .settings-item:active,
.settings-section-card > .theme-option:active {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.install-banner {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%),
    var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 0.5px solid var(--glass-stroke);
}

.pin-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 50%),
    color-mix(in srgb, var(--glass-pill-bg) 62%, transparent);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  border: 0.5px solid color-mix(in srgb, var(--brand) 40%, var(--glass-stroke));
  border-top: 0;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--brand) 26%, transparent),
    0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}

/* Never paint the inner attach grid as a full-bleed slab inside the glass capsule */
.attach-sheet:not(.glass-capsule-bubbles),
.composer-banner,
.rec-banner,
.chat-search-bar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-stroke) !important;
}
.screen.chat-screen > .multi-select-toolbar {
  background:
    linear-gradient(180deg, var(--glass-shine), transparent 40%),
    var(--glass-chrome-bg) !important;
  backdrop-filter: var(--glass-chrome-blur) !important;
  -webkit-backdrop-filter: var(--glass-chrome-blur) !important;
  border-top: 0.5px solid var(--glass-stroke) !important;
  border-color: var(--glass-stroke) !important;
}

.emoji-panel {
  /* Keep the liquid-glass recipe above — only reinforce stroke, never muddy fill. */
  border-color: color-mix(in srgb, #fff 16%, var(--glass-stroke)) !important;
  /* Do not re-apply glass-bg-strong here — that fought the panel fill and looked crooked. */
}

.folder-chip {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid var(--glass-stroke);
}
.folder-chip.active {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-color: transparent;
  color: var(--brand);
  box-shadow: none;
}

.offline-banner {
  background: color-mix(in srgb, #f59e0b 28%, var(--glass-bg));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--glass-stroke);
}

.icon-btn {
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.12s ease;
}
.icon-btn:active {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transform: scale(0.92);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--bg-elevated);
    --glass-bg-strong: var(--bg-elevated);
    --glass-chrome-bg: var(--bg-elevated);
    --glass-pill-bg: var(--bg-elevated);
    --glass-blur: none;
    --glass-chrome-blur: none;
  }
  .topbar, .tabs, .composer, .sheet, .toast, .fab,
  .card, .settings-profile-card, .settings-section-card,
  .attach-sheet, .emoji-panel, .mention-popup,
  .msg-action-torpedo, .pin-bar, .multi-select-toolbar,
  .profile-hero-camera {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .tabs button, .fab, .icon-btn { transition: none; }
}

/* ——— Клипы ——— */
.clips-screen { background: var(--bg); }
.clips-invite-gate {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  overflow: auto;
  /* Clear floating tabs-dock so «Обновить» stays tappable */
  padding: 12px 16px calc(var(--tabs-dock) + var(--safe-bottom) + 28px);
  background:
    radial-gradient(820px 420px at 50% -6%, color-mix(in srgb, var(--accent, #2aabee) 34%, transparent), transparent 62%),
    radial-gradient(560px 320px at 88% 18%, color-mix(in srgb, #8e24aa 18%, transparent), transparent 58%),
    var(--bg);
}
.clips-invite-hero {
  position: relative;
  width: min(360px, 100%);
  height: 214px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
}
.clips-invite-glow {
  position: absolute;
  inset: 12% 10% 8%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent, #2aabee) 32%, transparent), transparent 68%),
    radial-gradient(circle at 62% 40%, color-mix(in srgb, #8e24aa 16%, transparent), transparent 62%);
  filter: blur(18px);
  opacity: .95;
  pointer-events: none;
}
.clips-invite-mascot {
  position: relative;
  z-index: 2;
  width: min(148px, 42vw);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .28));
  pointer-events: none;
  user-select: none;
}
.clips-invite-mascot--sm {
  width: min(96px, 28vw);
  margin: 0 auto 8px;
}
.clips-invite-orbit-logo {
  position: absolute;
  z-index: 3;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
  padding: 0;
  animation: clips-invite-float 3.6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.clips-invite-orbit--shorts {
  top: 6px;
  left: 10px;
  border-color: color-mix(in srgb, #2aabee 70%, transparent);
  animation-delay: 0s;
}
.clips-invite-orbit--tv {
  top: 6px;
  right: 10px;
  border-color: color-mix(in srgb, #e53935 70%, transparent);
  animation-delay: .45s;
}
.clips-invite-orbit--radio {
  bottom: 10px;
  left: 18px;
  border-color: color-mix(in srgb, #8e24aa 70%, transparent);
  animation-delay: .9s;
}
.clips-invite-orbit--music {
  bottom: 10px;
  right: 18px;
  border-color: color-mix(in srgb, #00897b 70%, transparent);
  animation-delay: 1.35s;
}
@keyframes clips-invite-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.clips-invite-illustration {
  position: relative;
  z-index: 1;
  width: min(320px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .22));
}
.clips-invite-illustration--sm {
  width: min(220px, 72vw);
  margin-bottom: 10px;
}
.clips-invite-loading .clips-invite-glass--loading {
  opacity: .88;
  text-align: center;
}
.clips-invite-glass {
  width: min(420px, 100%);
  margin: 0 auto;
  text-align: center;
  padding: 20px 18px 16px;
  border-radius: 28px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .18),
    inset 0 1px 0 var(--glass-shine);
}
.clips-invite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent, #2aabee);
  background: color-mix(in srgb, var(--accent, #2aabee) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2aabee) 34%, transparent);
}
.clips-invite-glass h2 {
  margin: 14px 0 10px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.clips-invite-desc-capsule {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--text-2);
  line-height: 1.45;
  font-size: .92rem;
  text-align: center;
  background: color-mix(in srgb, var(--surface-2, #1c2433) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.clips-invite-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.clips-invite-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 6%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
}
.clips-invite-feature--shorts {
  background: color-mix(in srgb, #2aabee 10%, transparent);
  border-color: color-mix(in srgb, #2aabee 28%, transparent);
}
.clips-invite-feature--tv {
  background: color-mix(in srgb, #e53935 10%, transparent);
  border-color: color-mix(in srgb, #e53935 28%, transparent);
}
.clips-invite-feature--radio {
  background: color-mix(in srgb, #8e24aa 10%, transparent);
  border-color: color-mix(in srgb, #8e24aa 28%, transparent);
}
.clips-invite-feature--music {
  background: color-mix(in srgb, #00897b 10%, transparent);
  border-color: color-mix(in srgb, #00897b 28%, transparent);
}
.clips-invite-feature img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.clips-invite-feature span {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-2);
}
.clips-invite-feature--shorts span { color: #2aabee; }
.clips-invite-feature--tv span { color: #e53935; }
.clips-invite-feature--radio span { color: #ba68c8; }
.clips-invite-feature--music span { color: #26a69a; }
.clips-invite-progress-wrap {
  margin-bottom: 14px;
  text-align: left;
}
.clips-invite-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: .78rem;
  color: var(--text-2);
}
.clips-invite-progress-head strong {
  color: var(--accent, #2aabee);
  font-weight: 800;
}
.clips-invite-progress-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
}
.clips-invite-progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #2aabee), #5bc0ff);
  transition: transform .35s ease;
  will-change: transform;
}
.clips-invite-hint {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: .74rem;
  line-height: 1.35;
  text-align: center;
}
.clips-invite-err {
  margin: 0 0 10px;
  color: #ff8a80;
  font-size: .85rem;
}
.clips-glass-capsule.clips-invite-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  border-radius: 18px;
  padding: 12px 14px;
  font-size: .78rem;
  word-break: break-all;
  margin: 0 0 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
.clips-invite-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.clips-invite-btn-primary {
  width: 100%;
  border-radius: 18px;
  padding: 14px 12px;
  font-weight: 800;
  font-size: 1rem;
  border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
  background: linear-gradient(180deg, var(--accent, #2aabee), #1a8fd0);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent, #2aabee) 34%, transparent);
}
.clips-invite-btn-ghost {
  width: 100%;
  border-radius: 18px;
  padding: 13px 12px;
  font-weight: 700;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
.clips-invite-refresh {
  border: 0;
  background: transparent;
  color: var(--accent, #2aabee);
  font-weight: 650;
  font-size: .9rem;
  padding: 10px;
  cursor: pointer;
}
.clips-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 12px calc(72px + var(--safe-bottom));
  background: var(--bg, #0e1621);
}
.clips-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.clips-mascot {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}
.clips-empty-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: transparent;
  margin-bottom: 8px;
}
.clips-frame-loader[hidden] {
  display: none !important;
}
.clips-frame-loader::after {
  content: '';
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-top-color: var(--brand);
  animation: clips-spin .7s linear infinite;
}
.clips-frame-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  transition: opacity .35s ease;
}
.clips-frame-thumb.fade { opacity: 0; }
.clips-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  background: transparent;
}
.clips-quality-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 80;
  display: flex;
  align-items: flex-end;
}
.clips-quality-panel {
  width: 100%;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.clips-quality-panel h3 { margin: 0 0 4px; font-size: 1.1rem; }
.clips-quality-panel p { margin: 0 0 12px; font-size: .78rem; color: var(--text-2); }
.clips-quality-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 4px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.clips-quality-panel button.active {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--brand);
}
.clips-head-text { flex: 1; min-width: 0; }
.clips-head-text h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.clips-head-text p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--text-2);
}
.clips-refresh {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--brand);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.clips-refresh svg { width: 20px; height: 20px; }

.clips-svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  margin-bottom: 12px;
}
.clips-svc.clips-svc-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.clips-svc.clips-svc-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.clips-svc.clips-svc-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.clips-svc.clips-svc-5 button {
  font-size: 0.62rem;
  padding: 7px 1px 6px;
  gap: 3px;
  flex-direction: column;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  border: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.clips-svc.clips-svc-5 button.active {
  background: color-mix(in srgb, var(--svc, var(--brand)) 22%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--svc, var(--brand)) 55%, transparent),
    0 6px 16px color-mix(in srgb, var(--svc, var(--brand)) 28%, transparent);
}
.clips-svc.clips-svc-5 .clips-svc-logo-lg {
  width: 26px;
  height: 26px;
}
.clips-svc.clips-svc-3 button {
  font-size: 0.82rem;
  padding: 10px 4px;
  gap: 6px;
}
.clips-svc.clips-svc-glass {
  background: var(--bg-elevated, var(--surface));
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}
.clips-svc.clips-svc-4 button {
  font-size: 0.7rem;
  padding: 8px 2px 7px;
  gap: 5px;
  flex-direction: column;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  border: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.clips-svc.clips-svc-4 button.active {
  background: color-mix(in srgb, var(--svc, var(--brand)) 22%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--svc, var(--brand)) 55%, transparent),
    0 6px 16px color-mix(in srgb, var(--svc, var(--brand)) 28%, transparent);
}
.clips-svc-logo-lg {
  width: 32px;
  height: 32px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
}
.clips-svc-qubi-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  object-fit: contain;
}

.ent-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.ent-chips::-webkit-scrollbar { display: none; }
.ent-chip {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 48%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text-2);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 650;
  font-size: 0.82rem;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 4px 14px rgba(0,0,0,.12);
}
.ent-chip.active {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 25%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}
.clips-svc.clips-svc-2 {
  grid-template-columns: 1fr 1fr;
  margin-top: -4px;
}
.clips-svc button {
  border-radius: 11px;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.clips-svc-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
}
.clips-svc button.active {
  color: var(--svc, var(--brand));
  background: color-mix(in srgb, var(--svc, var(--brand)) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc, var(--brand)) 55%, transparent);
}

.clips-tv-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.clips-tv-cats {
  padding-top: 2px;
}
.clips-rubrics {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.clips-rubrics::-webkit-scrollbar { display: none; }
.clips-rubrics button {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  white-space: nowrap;
}
.clips-rubrics button.active {
  color: var(--text);
  font-weight: 650;
  background: color-mix(in srgb, var(--rub, var(--brand)) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rub, var(--brand)) 60%, transparent);
}

.clips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.clips-card {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-elevated);
  text-align: left;
  padding: 0;
}
.clips-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clips-card-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 55%, #0f0f23 100%);
}
.clips-card-ph--tiktok {
  background: linear-gradient(145deg, #0f0f23 0%, #1a1020 50%, #2d0a1a 100%);
}
.clips-card-ph-icon {
  width: 52px;
  height: 52px;
  opacity: 0.85;
  object-fit: contain;
}
.clips-card-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 10px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clips-card-meta strong {
  font-size: 0.78rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clips-card-meta span {
  font-size: 0.68rem;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clips-tv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-bottom: 16px;
}
.clips-tv-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 10px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, var(--bg-elevated)), var(--bg-elevated) 48%);
  text-align: left;
  color: var(--text);
}
.clips-tv-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.clips-tv-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.clips-tv-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clips-tv-fallback {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  opacity: 0.9;
}
.clips-tv-card strong {
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.clips-tv-card span {
  font-size: 0.7rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.clips-tv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: contain;
  background: #000;
  z-index: 2;
}
.clips-tv-err {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 28%;
  z-index: 4;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 22, 33, 0.88);
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}
.clips-live {
  color: #E53935;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.clips-player-tv .clips-frame {
  background: #000;
}
/* Absolute fill — avoid flex % height collapsing to 0 under absolute top chrome. */
.clips-player-tv .clips-snap {
  position: absolute;
  inset: 0;
  height: auto;
  flex: none;
  overflow: hidden;
}
.clips-snap-tv {
  overflow: hidden !important;
  scroll-snap-type: none !important;
}
.clips-player-tv .clips-slide {
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
}

.clips-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40vh;
  color: var(--text-2);
  text-align: center;
  padding: 24px;
}
.clips-empty-mascot { width: 72px; height: 72px; opacity: 0.9; }
.clips-retry {
  color: var(--brand);
  font-weight: 650;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.clips-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-top-color: var(--brand);
  animation: clips-spin .7s linear infinite;
}
@keyframes clips-spin { to { transform: rotate(360deg); } }

.clips-player {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  display: flex;
  flex-direction: column;
}
.clips-player-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(8px + var(--safe-top)) 12px 12px;
  background: linear-gradient(rgba(0,0,0,.72), transparent);
  pointer-events: none;
}
.clips-player-top > * { pointer-events: auto; }
.clips-player-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clips-player-brand .clips-mascot { width: 28px; height: 28px; }
.clips-player-brand .clips-head-text h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.clips-player-brand .clips-head-text p {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255,255,255,.65);
}
.clips-player-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clips-player-actions { display: flex; gap: 8px; margin-left: auto; }
.clips-page-count {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}
.clips-pill {
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 650;
  color: #fff;
  background: rgba(0,0,0,.45);
}
.clips-pill.clips-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1c1c1e;
  background: #fff;
  border: 1.5px solid var(--brand, #2AABEE);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.clips-pill.clips-close-btn:active {
  transform: scale(0.97);
  opacity: 0.92;
}
.clips-close-x {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
.clips-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0,0,0,.45);
}
.clips-ico svg { width: 20px; height: 20px; }

.clips-snap {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.clips-slide {
  position: relative;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
}
.clips-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.clips-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Full frame — no zoom/crop scale hacks; letterbox OK */
  transform: none;
  background: #000;
}
.clips-slide-meta {
  position: absolute;
  left: 0; right: 0; bottom: 52px;
  padding: 48px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.clips-seek {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.clips-seek-t {
  color: rgba(255,255,255,.8);
  font-size: 0.7rem;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
}
.clips-seek-range {
  flex: 1;
  accent-color: var(--brand, #2AABEE);
  height: 28px;
}
.clips-ch {
  color: var(--brand);
  font-weight: 650;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.clips-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clips-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  opacity: 0.7;
}

.clips-pill.clips-to-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand, #2AABEE) 48%, transparent), rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.clips-pill.clips-to-status:active {
  transform: scale(0.985);
  filter: brightness(1.05);
}
.clips-to-status-bar {
  width: 100%;
  margin-top: 2px;
}
.clips-to-status-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.clips-to-status-panel {
  width: min(100%, 480px);
  background: var(--bg-elevated, #1c1c1e);
  color: var(--text, #fff);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.clips-to-status-panel h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}
.clips-to-status-hint {
  margin: 6px 0 14px;
  font-size: 0.82rem;
  opacity: 0.72;
  line-height: 1.35;
}
.clips-to-status-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.12);
  margin-bottom: 12px;
}
.clips-to-status-thumb {
  width: 64px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  background: #111;
  flex-shrink: 0;
}
.clips-to-status-thumb-empty {
  background: #222;
}
.clips-to-status-ch {
  color: var(--brand, #2AABEE);
  font-weight: 650;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.clips-to-status-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clips-to-status-caption {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 8px;
}
.clips-to-status-status {
  min-height: 1.2em;
  font-size: 0.82rem;
  opacity: 0.85;
  flex: 1;
  min-width: 0;
}
.clips-to-status-progress {
  margin: 6px 0 12px;
}
.clips-to-status-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.clips-to-status-pct {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--accent, #2AABEE);
  flex-shrink: 0;
}
.clips-to-status-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
  overflow: hidden;
}
.clips-to-status-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent, #2AABEE);
  transition: width 0.28s ease;
}
.clips-to-status-actions {
  display: flex;
  gap: 10px;
}
.clips-to-status-actions .btn {
  flex: 1;
}

:root[data-theme="light"] .clips-to-status-panel,
html.light .clips-to-status-panel {
  background: #fff;
  color: #111;
}
:root[data-theme="light"] .clips-to-status-caption,
html.light .clips-to-status-caption {
  background: #f4f6f8;
  color: #111;
}

.publish-success-sheet {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.18s ease;
}
.publish-success-panel {
  width: min(340px, 100%);
  background: var(--surface, #17212b);
  color: var(--text, #fff);
  border-radius: 20px;
  padding: 28px 22px 20px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.publish-success-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--brand, #2AABEE);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 64px;
}
.publish-success-panel h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}
.publish-success-hint {
  margin: 0 0 20px;
  opacity: 0.72;
  font-size: 0.9rem;
  line-height: 1.35;
}
.publish-success-panel .btn {
  width: 100%;
}
:root[data-theme="light"] .publish-success-panel,
html.light .publish-success-panel {
  background: #fff;
  color: #111;
}

.tabs .tab-label { font-size: 0.58rem; }

/* Status video editor */
.sve-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0,0,0,.72);
  display: flex; align-items: stretch; justify-content: center;
}
.sve-panel {
  width: min(100%, 520px); height: 100%;
  background: #0B1220; color: #fff;
  display: flex; flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.sve-head h3 { margin: 0; font-size: 1.1rem; font-weight: 750; }
.sve-head p { margin: 4px 0 10px; font-size: .8rem; opacity: .65; }
.sve-preview {
  position: relative; flex: 1; min-height: 180px;
  border-radius: 18px; overflow: hidden; background: #000;
  margin: 0 auto; width: 100%;
}
.sve-preview[data-aspect="9:16"] {
  aspect-ratio: 9 / 16;
  max-height: min(46vh, 420px);
  width: min(100%, 260px);
  flex: 0 0 auto;
}
.sve-preview[data-aspect="1:1"] {
  aspect-ratio: 1;
  max-height: min(42vh, 360px);
  width: min(100%, 320px);
  flex: 0 0 auto;
}
.sve-preview[data-aspect="16:9"] {
  aspect-ratio: 16 / 9;
  max-height: min(36vh, 280px);
  width: 100%;
  flex: 0 0 auto;
}
.sve-preview[data-aspect="original"] {
  min-height: 200px;
}
.sve-preview[data-aspect="9:16"] .sve-media,
.sve-preview[data-aspect="1:1"] .sve-media,
.sve-preview[data-aspect="16:9"] .sve-media { object-fit: cover; }
.sve-preview[data-aspect="original"] .sve-media { object-fit: contain; }
.sve-media { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.sve-overlay-text {
  position: absolute; left: 16px; right: 16px;
  text-align: center; font-weight: 800; font-size: 1.25rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
  pointer-events: none;
}
.sve-pos-top { top: 14%; }
.sve-pos-center { top: 45%; }
.sve-pos-bottom { bottom: 16%; }
.sve-preview-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px; font-size: .72rem; color: rgba(255,255,255,.85);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.sve-preview-spin {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; margin: -18px;
  border-radius: 50%;
  border: 3px solid rgba(42,171,238,.25);
  border-top-color: #2AABEE;
  animation: sve-spin .7s linear infinite;
  z-index: 2; pointer-events: none;
}
.sve-preview-spin[hidden] { display: none; }
@keyframes sve-spin { to { transform: rotate(360deg); } }
.sve-preview-err {
  position: absolute; left: 12px; right: 12px; top: 50%;
  transform: translateY(-50%); z-index: 3;
  padding: 12px; border-radius: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .85rem; text-align: center;
}
.sve-thumb-fallback { z-index: 0; }
.sve-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; }
.sve-tab, .sve-chip {
  border: 0; border-radius: 999px; padding: 8px 14px;
  background: rgba(255,255,255,.08); color: #fff; font-weight: 650; white-space: nowrap;
}
.sve-tab.on, .sve-chip.on { background: var(--brand, #2AABEE); }
.sve-body { max-height: 200px; overflow-y: auto; padding-bottom: 8px; }
.sve-composer {
  flex-shrink: 0;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.sve-composer-row {
  display: flex; align-items: flex-end; gap: 8px;
}
.sve-composer-input {
  flex: 1; min-height: 42px; max-height: 96px; box-sizing: border-box;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22); color: #fff; padding: 10px 12px;
  font: inherit; resize: none; line-height: 1.35;
}
.sve-emoji-glass {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sve-emoji-cats {
  display: flex; gap: 4px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 2px;
}
.sve-emoji-cat {
  border: 0; border-radius: 10px; padding: 6px 8px; font-size: 1.1rem;
  background: rgba(255,255,255,.06); flex-shrink: 0;
}
.sve-emoji-cat.on { background: color-mix(in srgb, var(--brand, #2AABEE) 35%, transparent); }
.sve-panel {
  display: flex; flex-direction: column; max-height: min(92vh, 780px);
}
.sve-label { display: block; margin: 8px 0 4px; font-size: .78rem; opacity: .75; }
.sve-hint { margin: 4px 0 8px; font-weight: 650; }
.sve-caption {
  width: 100%; min-height: 64px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25); color: #fff; padding: 10px; font: inherit; resize: vertical;
}
.sve-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sve-colors { display: flex; gap: 10px; margin-top: 8px; }
.sve-color {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0;
}
.sve-color.on { border-color: var(--brand, #2AABEE); }
.sve-field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 8px 0 4px;
}
.sve-emoji-btn {
  border: 0; border-radius: 999px; padding: 6px 12px;
  background: rgba(255,255,255,.1); color: #fff; font-weight: 650; font-size: .78rem;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.sve-emoji-btn .ico-svg,
.sve-emoji-btn .ico-svg svg { width: 14px; height: 14px; display: block; }
.sve-emoji-btn.on { background: var(--brand, #2AABEE); }
.sve-emoji-host {
  max-height: 160px; overflow: auto;
  border-radius: 14px; background: rgba(255,255,255,.06);
  margin: 6px 0 8px; padding: 8px;
}
.sve-emoji-head { font-size: .75rem; opacity: .7; margin-bottom: 6px; font-weight: 650; }
.sve-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.sve-emoji-grid button {
  border: 0; background: transparent; font-size: 1.25rem; padding: 6px; border-radius: 10px;
}
.sve-emoji-grid button:active { background: rgba(255,255,255,.12); }
.sve-upload-row { margin: 8px 0; }
.sve-upload-music { background: rgba(42,171,238,.22) !important; }
.sve-switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 8px 0; font-size: .92rem;
}
.sve-track {
  display: block; width: 100%; text-align: left;
  margin: 6px 0; padding: 12px; border-radius: 12px;
  border: 0; background: rgba(255,255,255,.06); color: #fff; font-weight: 650;
}
.sve-track.on { background: color-mix(in srgb, var(--brand, #2AABEE) 28%, transparent); }
.sve-progress { margin: 8px 0; }
.sve-progress-row { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 6px; }
.sve-progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.sve-progress-fill { height: 100%; background: var(--brand, #2AABEE); width: 0; }
.sve-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sve-actions .btn { flex: 1; min-width: 110px; }
.sve-prepare-panel { max-width: 420px; margin: auto; padding: 20px; }
.clips-prepare-glass .clips-prepare-panel {
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(28, 34, 48, 0.96), rgba(18, 22, 32, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.clips-prepare-mascot {
  display: block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 4px 12px rgba(42, 171, 238, 0.25));
}
.clips-prepare-panel h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
}
.sve-prepare-label { color: var(--text-2); margin: 8px 0 12px; }
.sve-prepare-err { color: #ff8a80; margin: 10px 0; }
.sve-preview-retry { margin-top: 10px; }
.sve-body input[type="range"] { width: 100%; accent-color: var(--brand, #2AABEE); }

/* ===== Desktop / wide browser (Telegram-like two-pane) ===== */
@media (min-width: 800px) {
  .app {
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .app.desktop-layout {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
      var(--bg);
  }
  .desktop-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    border-left: 0.5px solid var(--line);
    border-right: 0.5px solid var(--line);
    background: var(--bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 40%, transparent);
  }
  .desktop-sidebar {
    width: min(400px, 36vw);
    min-width: 320px;
    max-width: 420px;
    flex-shrink: 0;
    border-right: 0.5px solid var(--line);
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
  }
  .desktop-sidebar > .list,
  .desktop-sidebar > .settings-list,
  .desktop-sidebar > .favorites-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .desktop-sidebar > .tabs,
  .desktop-sidebar > .tabs-dock {
    position: sticky;
    left: 0;
    transform: none;
    bottom: 0;
    width: 100%;
    pointer-events: auto;
    padding: 0;
    background: transparent;
  }
  .desktop-sidebar > .tabs-dock > .tabs,
  .desktop-sidebar > .tabs {
    position: relative;
    left: auto;
    transform: none;
    bottom: auto;
    width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
  }
  .desktop-sidebar .tabs .tab-label {
    font-size: 0.68rem;
  }
  .desktop-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }
  .desktop-main.screen.chat-screen {
    height: 100%;
    max-height: 100dvh;
  }
  .desktop-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-2);
    background:
      radial-gradient(600px 320px at 50% 40%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
      var(--bg);
  }
  .desktop-empty-inner {
    max-width: 320px;
    padding: 24px;
  }
  .desktop-empty-inner h2 {
    margin: 8px 0 6px;
    font-family: var(--display);
    font-size: 1.75rem;
    color: var(--text);
  }
  .desktop-empty-inner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  /* On desktop chat pane, back is less critical (list stays visible) */
  .desktop-main .topbar .icon-btn.desktop-back {
    opacity: 0.7;
  }
  .app.desktop-layout .tabs {
    width: 100%;
  }
  /* Full-width list screens (contacts/settings) still readable */
  .app.desktop-layout > .screen:not(.desktop-shell) {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Desktop sidebar screen height fill */
@media (min-width: 800px) {
  .desktop-sidebar.screen {
    height: 100%;
    max-height: 100dvh;
    padding-bottom: 0 !important;
  }
  .desktop-sidebar > .tabs,
  .desktop-sidebar > .tabs-dock {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    bottom: auto !important;
    flex-shrink: 0;
    z-index: 5;
    padding: 0 !important;
    pointer-events: auto;
  }
  .desktop-sidebar > .tabs-dock > .tabs {
    position: relative !important;
    width: 100%;
  }
  .desktop-main .messages {
    justify-content: flex-start;
  }
}

/* ===== Telegram-like voice lock + draft preview ===== */
.voice-rec-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 0 0 auto;
  order: -1;
  padding: 8px 12px 4px;
  box-sizing: border-box;
  color: var(--danger, #e53935);
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
}
.voice-rec-banner.locked { color: var(--brand); }
.voice-rec-banner .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--danger, #e53935);
  flex-shrink: 0;
  animation: voice-rec-pulse 1s ease infinite;
}
.voice-rec-banner.locked .dot { background: var(--brand); animation: none; }
.voice-rec-timer {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  min-width: 2.6em;
  flex-shrink: 0;
}
.voice-rec-banner .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-rec-wave {
  display: flex; align-items: center; gap: 2px; height: 28px; flex-shrink: 0;
}
.voice-rec-wave i {
  display: block; width: 3px; border-radius: 2px;
  background: currentColor; opacity: 0.85;
}
.voice-rec-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto;
}
.voice-rec-actions:empty { display: none; }
@keyframes voice-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.mic-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.voice-lock-badge {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #2a2a2e; color: #fff;
  margin-bottom: 6px;
  opacity: 0.85;
  pointer-events: none;
}
.voice-lock-badge.on { background: var(--brand); opacity: 1; }
.send.mic.locked {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 30%, transparent);
}
.voice-lock-trash,
.voice-lock-stop {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; display: grid; place-items: center;
  flex-shrink: 0; cursor: pointer;
}
.voice-lock-trash { background: #1c1c1e; color: #fff; }
.voice-lock-stop { background: var(--brand); color: #fff; }
.composer.voice-draft-composer {
  padding-top: 4px;
  padding-bottom: 4px;
}
.voice-draft-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 2px;
  box-sizing: border-box;
}
.voice-draft-trash,
.voice-draft-send {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; display: grid; place-items: center;
  flex-shrink: 0; cursor: pointer; color: #fff;
}
.voice-draft-trash { background: #1c1c1e; }
.voice-draft-send { background: var(--brand); }
.voice-draft-capsule {
  flex: 1; min-width: 0;
  height: 44px;
  border-radius: 22px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  box-sizing: border-box;
}
.voice-draft-play {
  width: 28px; height: 28px; border: none; background: transparent;
  color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; flex-shrink: 0;
}
.voice-draft-wave {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px; height: 28px;
  overflow: hidden;
}
.voice-draft-wave i {
  display: block; width: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,0.9); flex-shrink: 0;
}
.voice-draft-time {
  font-size: 0.85rem; font-variant-numeric: tabular-nums;
  flex-shrink: 0; opacity: 0.95;
}
html[data-theme="light"] .voice-draft-trash,
html[data-theme="light"] .voice-lock-trash {
  background: #3a3a3c;
}

/* ===== Telegram-like attach sheet (tabs + gallery) ===== */
.attach-tg-overlay .attach-tg-sheet {
  max-height: min(72vh, 640px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.attach-tg-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px 8px;
}
.attach-tg-pane.attach-tg-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
}
.attach-tg-pane.attach-tg-center p {
  color: var(--text-2);
  margin: 0;
  max-width: 260px;
}
.attach-tg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 10px;
}
.attach-tg-all {
  border: none;
  background: transparent;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 8px;
}
.attach-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.attach-gallery-open-all {
  grid-column: 1 / -1;
  min-height: 120px;
  border: 0.5px solid color-mix(in srgb, #fff 28%, var(--glass-stroke));
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent 55%),
    var(--glass-pill-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.attach-gallery-open-all strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
}
.attach-gallery-open-all > span:last-child {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-2);
  max-width: 28ch;
}
.attach-gallery-open-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand);
}
.attach-gallery-open-ico svg { width: 22px; height: 22px; display: block; }
.attach-gallery-thumb.is-audio {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand) 18%, #1c1c1e);
}
.attach-thumb-audio {
  display: grid;
  place-items: center;
  color: var(--brand);
}
.attach-thumb-audio svg { width: 32px; height: 32px; }
.attach-gallery-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 4px 0 10px;
  box-sizing: border-box;
}
.attach-gallery-actions .attach-gallery-cell {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: auto;
  min-height: 74px;
  border-radius: 14px;
}
.attach-gallery-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2, #2a2a2e) 88%, transparent);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px;
}
.attach-gallery-cell.cam { background: #2a2a2e; }
.attach-gallery-cell.vnote { background: #1e3a3a; color: #00cec9; }
.attach-gallery-cell.vidrec { background: #2a2438; color: #a29bfe; }
.attach-gallery-cell.sched { background: #2c2c30; color: #b2bec3; }
.attach-gallery-cell.pick { background: color-mix(in srgb, var(--brand) 22%, #1c1c1e); }
.attach-gallery-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.attach-gallery-thumb {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #1c1c1e;
  cursor: pointer;
}
.attach-gallery-thumb .attach-thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.attach-gallery-thumb.selected {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.attach-thumb-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 0;
}
.attach-thumb-check svg { width: 14px; height: 14px; display: block; }
.attach-thumb-dur:empty { display: none; }
.attach-thumb-dur {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}
.attach-thumb-vid {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 0;
}
.attach-thumb-vid svg { width: 14px; height: 14px; display: block; }
.attach-tg-pane { position: relative; }
.attach-caption-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 8px -4px 0;
  padding: 8px 4px 4px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent) 28%, var(--bg));
}
.attach-caption-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 23px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.attach-caption-input::placeholder { color: var(--text-2); }
.attach-caption-input:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
}
.attach-send-fab {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px var(--brand-glow);
  z-index: 3;
}
.attach-send-fab svg { width: 22px; height: 22px; display: block; }
.attach-send-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-deep);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 20px;
}
.mute-duration-sheet { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.mute-sheet-title {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 4px 20px 2px;
}
.mute-sheet-sub {
  font-size: 0.82rem;
  color: var(--text-2);
  padding: 0 20px 10px;
}
.mute-sheet-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}
.mute-opt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 1rem;
}
.mute-opt-row:active { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.mute-opt-row.accent { color: var(--brand); font-weight: 650; }
.mute-opt-ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  line-height: 0;
}
.mute-opt-row.accent .mute-opt-ico { color: var(--brand); }
.mute-opt-ico svg { width: 22px; height: 22px; display: block; }
.schedule-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 700;
}
.schedule-sheet-title .ico-svg { width: 18px; height: 18px; color: var(--brand); }
.scheduled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scheduled-badge .ico-svg { width: 12px; height: 12px; }
.attach-tg-hint {
  margin: 12px 4px 0;
  color: var(--text-2);
  font-size: 0.82rem;
  text-align: center;
}
.attach-tg-cta {
  border: none;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  cursor: pointer;
  margin-top: 6px;
}
.attach-tg-cta.ghost {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--brand);
}
.attach-tg-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 0;
  padding: 6px 2px 2px;
  border-top: 1px solid color-mix(in srgb, var(--text-2) 18%, transparent);
  flex-shrink: 0;
  width: 100%;
  overflow-x: hidden;
}
.attach-tg-tabs::-webkit-scrollbar { display: none; }
.attach-tg-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  border: none;
  background: transparent;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-tg-tab.on { color: var(--brand); }
.attach-tg-tab svg { display: block; }

/* —— Entertainment: Radio + Music —— */
.ent-radio, .ent-music { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.ent-search {
  width: 100%; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent); color: var(--text);
  padding: 10px 12px; font-size: 0.92rem;
}
.ent-empty { text-align: center; color: var(--text-2); padding: 28px 12px; font-size: 0.92rem; }
.ent-station-list, .ent-track-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 88px; }
.ent-station, .ent-track {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 8px; border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  color: var(--text); border: 1px solid transparent;
}
.ent-station.playing, .ent-track.playing {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-elevated));
}
.ent-station-logo, .ent-track-cover {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #222;
}
.ent-station-logo.placeholder, .ent-track-cover.placeholder {
  display: grid; place-items: center; color: var(--text-2);
}
.ent-station-logo.placeholder svg, .ent-track-cover.placeholder svg { width: 20px; height: 20px; }
.ent-station-meta, .ent-track-meta { flex: 1; min-width: 0; }
.ent-station-title, .ent-track-title { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-station-sub, .ent-track-sub { font-size: 0.75rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-station-wave { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand); flex-shrink: 0; }
.ent-station-wave svg, .ent-track-playico svg, .ent-track-like svg, .ent-track-share svg { width: 18px; height: 18px; }
.ent-station-share, .ent-track-like, .ent-track-share, .ent-track-add {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--text-2); flex-shrink: 0; background: transparent;
}
.ent-track-like.on { color: #E53935; }
.ent-track-cover-btn { position: relative; border: 0; padding: 0; background: transparent; border-radius: 12px; flex-shrink: 0; }
.ent-track-playico {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.28); color: #fff; border-radius: 12px;
}
.ent-music-actions { display: flex; gap: 6px; }
.ent-share-overlay {
  position: fixed; inset: 0; z-index: 12000; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.ent-share-panel {
  width: min(520px, 100%); max-height: 72vh; overflow: auto;
  background: var(--bg); border-radius: 18px 18px 0 0; padding: 14px 14px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.ent-share-head { display: flex; align-items: center; justify-content: space-between; }
.ent-share-head h3 { margin: 0; font-size: 1.05rem; }
.ent-share-close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); }
.ent-share-close svg { width: 18px; height: 18px; }
.ent-share-list { display: flex; flex-direction: column; gap: 4px; }
.ent-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 10px 10px;
  border-radius: 14px;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  color: var(--text);
  border: 0;
  width: 100%;
  cursor: pointer;
}
.ent-share-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 22%, var(--bg-elevated));
  color: var(--text);
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.95rem;
  overflow: hidden; flex-shrink: 0;
}
.ent-share-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ent-share-row-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ent-share-row-title { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-share-row-sub { font-size: 0.78rem; font-weight: 500; color: var(--text-2); }
.ent-share-section {
  margin: 8px 4px 2px; font-size: 0.75rem; font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em;
}
.ent-mini {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 16%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 35%, transparent);
}
.ent-mini-meta { flex: 1; min-width: 0; }
.ent-mini-label { font-size: 0.7rem; font-weight: 700; color: var(--accent, #3d8bfd); text-transform: uppercase; }
.ent-mini-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-mini-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: var(--accent, #3d8bfd); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.ent-mini-btn svg { width: 18px; height: 18px; }
.ent-nowplaying {
  position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 40%, transparent);
  box-shadow: 0 12px 36px rgba(0,0,0,.38), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.ent-nowplaying.dock-top {
  bottom: auto;
  top: calc(52px + env(safe-area-inset-top, 0px));
  left: 10px; right: 10px;
  z-index: 40;
}
body.ent-dock-top-active .ent-nowplaying-slot {
  height: 118px;
  flex-shrink: 0;
}
.ent-nowplaying.expanded { padding-bottom: 14px; }
.ent-nowplaying.minimized {
  left: auto; right: 14px; width: auto; padding: 0; border-radius: 999px;
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
}
.ent-nowplaying[hidden] { display: none !important; }
.ent-nowplaying-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 88%, #000);
  color: #fff; font-weight: 700; font-size: 0.82rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.ent-nowplaying-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7CFFB2;
  box-shadow: 0 0 0 4px rgba(124,255,178,.22); animation: entPulse 1.4s ease-in-out infinite;
}
@keyframes entPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: .7; }
}
.ent-nowplaying-cover {
  width: 42px; height: 42px; border-radius: 12px; overflow: hidden;
  background: var(--bg); display: grid; place-items: center; color: var(--accent, #3d8bfd);
  flex-shrink: 0; border: 0; padding: 0;
}
.ent-nowplaying-cover img { width: 100%; height: 100%; object-fit: cover; }
.ent-nowplaying-cover svg { width: 18px; height: 18px; }
.ent-nowplaying-meta { flex: 1; min-width: 0; cursor: pointer; }
.ent-nowplaying-kind { font-size: 0.68rem; font-weight: 700; color: var(--accent, #3d8bfd); }
.ent-nowplaying-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-nowplaying-sub { font-size: 0.78rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-nowplaying-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ent-nowplaying-pause,
.ent-nowplaying-like,
.ent-nowplaying-skip,
.ent-nowplaying-min,
.ent-nowplaying-close {
  width: 36px; height: 36px; border-radius: 12px; border: 0;
  display: grid; place-items: center; color: #fff;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 85%, #000);
}
.ent-nowplaying-min,
.ent-nowplaying-close {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text-2);
  font-weight: 800; font-size: 1.1rem;
}
.ent-nowplaying-like {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text-2);
}
.ent-nowplaying-like.on { color: #e53935; background: color-mix(in srgb, #e53935 22%, transparent); }
.ent-nowplaying-skip {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font-size: 0.85rem;
}
.ent-nowplaying-like svg,
.ent-nowplaying-pause svg,
.ent-nowplaying-close svg { width: 16px; height: 16px; }
.ent-nowplaying-extra { width: 100%; padding-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.ent-nowplaying-hint { font-size: 0.72rem; color: var(--text-2); line-height: 1.35; }
.ent-nowplaying-time {
  font-size: 0.72rem; font-weight: 650; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ent-nowplaying-seek {
  width: 100%; accent-color: var(--accent, #3d8bfd); height: 22px; cursor: pointer;
}
.ent-music-note {
  font-size: 0.72rem; color: var(--text-2); align-self: center; max-width: 55%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ent-share-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.ent-share-preview-cover {
  width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  background: #222; display: grid; place-items: center; color: var(--brand);
}
.ent-share-preview-cover.placeholder svg { width: 18px; height: 18px; }
.ent-share-preview-meta { min-width: 0; }
.ent-share-preview-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-share-preview-sub { font-size: 0.78rem; color: var(--text-2); }

.music-card {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 220px; max-width: 280px;
  padding: 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}
.music-card-top { display: flex; gap: 10px; align-items: center; }
.music-card-cover {
  width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: #1a1a1a; display: grid; place-items: center; color: var(--brand);
}
.music-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-card-cover svg { width: 20px; height: 20px; }
.music-card-info { min-width: 0; flex: 1; }
.music-card-title { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-card-artist { font-size: 0.75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-card-controls { display: flex; align-items: center; gap: 8px; }
.music-card-play {
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.music-card-play svg { width: 16px; height: 16px; }
.music-card-seek {
  flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, #fff 22%, transparent);
  overflow: hidden; cursor: pointer;
}
.music-card-bar { height: 100%; width: 0; background: #fff; border-radius: 999px; }
.music-card-time { font-size: 0.68rem; opacity: .85; font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.music-card-dl {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: inherit; text-decoration: none; font-size: 0.9rem; opacity: .9;
}
/* Phone sync / contact book */
/* Phone sync / contact book — liquid glass + soft accent shimmer */
.phone-sync-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 12px 16px 4px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 32%, transparent) 0%,
      color-mix(in srgb, #fff 10%, transparent) 48%,
      color-mix(in srgb, var(--accent) 18%, transparent) 100%);
  border: 1px solid color-mix(in srgb, #fff 42%, var(--accent));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
  text-align: left;
  width: calc(100% - 32px);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.phone-sync-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, #fff 34%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: phoneSyncGlassShine 3.2s ease-in-out infinite;
}
@keyframes phoneSyncGlassShine {
  0% { background-position: 120% 0; opacity: 0.35; }
  45% { opacity: 0.85; }
  100% { background-position: -120% 0; opacity: 0.35; }
}
.phone-sync-card:active { transform: scale(0.985); }
.phone-sync-card:disabled { opacity: 0.7; cursor: wait; }
.phone-sync-card:disabled::before { animation: none; opacity: 0.25; }
.phone-sync-card strong,
.phone-sync-card span { position: relative; z-index: 1; }
.phone-sync-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}
.phone-sync-card span {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.35;
}
.contacts-section-title {
  margin: 14px 16px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.phone-sync-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: phoneSyncFadeIn 0.28s ease;
}
@keyframes phoneSyncFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.phone-sync-sheet {
  width: min(420px, 100%);
  border-radius: 28px;
  padding: 26px 22px 18px;
  background: var(--surface, #121820);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  text-align: center;
  animation: phoneSyncRise 0.34s cubic-bezier(.2,.8,.2,1);
}
@keyframes phoneSyncRise {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.phone-sync-badge {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), #1fa2ff);
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.phone-sync-badge svg { width: 40px; height: 40px; }
.phone-sync-sheet h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.phone-sync-sheet p.lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.phone-sync-sheet .field {
  text-align: left;
  margin-bottom: 14px;
}
.phone-sync-sheet .field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.phone-sync-sheet .field input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg, rgba(0,0,0,0.2));
  color: var(--text);
  padding: 12px 14px;
  font-size: 1.05rem;
}
.phone-sync-sheet .hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}
.phone-sync-actions {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.phone-sync-actions .btn { width: 100%; border-radius: 14px; min-height: 48px; }
.phone-sync-actions .btn-ghost {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
}


/* —— Avatar gifts / collectibles (liquid glass + animated GIFs) —— */
.avatar-gift-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 4;
  width: 1.25em;
  height: 1.25em;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--gift-accent, #a855f7) 22%, var(--bg-elevated, #0e1621));
  border: 1.5px solid color-mix(in srgb, var(--gift-accent, #a855f7) 55%, #fff);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gift-accent, #a855f7) 35%, transparent);
  pointer-events: none;
}
.avatar-gift-anim { width: 90%; height: 90%; object-fit: contain; display: block; }
.gift-msg, .gift-msg-glass {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, #fff 22%, var(--gift-accent, #a855f7) 35%);
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gift-accent, #a855f7) 34%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-elevated, #0e1621) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 10px 28px color-mix(in srgb, var(--gift-accent, #a855f7) 22%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.gift-preview-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 20px 22px;
  max-width: min(420px, 100%);
  margin: 0 auto;
}
.gift-preview-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 68%, transparent);
  margin-bottom: 12px;
}
.gift-preview-visual {
  width: min(240px, 72vw);
  height: min(240px, 72vw);
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 18px 40px color-mix(in srgb, var(--gift-accent, #a855f7) 28%, transparent);
  margin-bottom: 16px;
}
.gift-preview-anim { width: 88%; height: 88%; object-fit: contain; display: block; }
.gift-preview-title {
  font-size: 1.45rem;
  font-weight: 850;
  color: #fff;
  margin-bottom: 6px;
}
.gift-preview-who {
  font-size: 0.9rem;
  color: color-mix(in srgb, #fff 78%, transparent);
  margin-bottom: 10px;
}
.gift-preview-cat {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  color: #fff;
  background: color-mix(in srgb, var(--gift-accent, #a855f7) 38%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  margin-bottom: 12px;
}
.gift-preview-desc {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 90%, transparent);
  max-width: 34ch;
}
.gift-preview-note {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  color: #fff;
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 0.5px solid color-mix(in srgb, #fff 16%, transparent);
}
.gift-preview-close {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  color: #0b1220;
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--gift-accent, #a855f7) 55%, #fff));
  min-width: 140px;
}
.gift-msg-visual {
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.gift-msg-anim { width: 52px; height: 52px; object-fit: contain; display: block; }
.gift-msg-emoji {
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.7rem;
  background: color-mix(in srgb, var(--gift-accent, #a855f7) 18%, transparent);
  flex-shrink: 0;
}
.gift-msg-copy { min-width: 0; }
.gift-msg-title { font-weight: 800; font-size: 1rem; color: #fff; }
.gift-msg-who { font-size: 0.78rem; color: color-mix(in srgb, #fff 70%, transparent); margin-top: 2px; }
.gift-msg-note {
  margin-top: 8px; font-size: 0.82rem;
  padding: 6px 10px; border-radius: 12px;
  color: color-mix(in srgb, #fff 92%, transparent);
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 0.5px solid color-mix(in srgb, #fff 16%, transparent);
}
.gift-glass-sheet {
  background: color-mix(in srgb, #121a24 78%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.gift-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  margin: 8px auto 4px;
  background: color-mix(in srgb, #fff 28%, transparent);
  flex-shrink: 0;
}
.gift-qubi-pulse {
  animation: gift-qubi-breathe 2.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes gift-qubi-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-qubi-pulse { animation: none; }
}

.gift-send-celebration {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.gift-send-celebration-show { opacity: 1; }
.gift-send-celebration-out { opacity: 0; transition-duration: 0.38s; }
.gift-send-celebration-burst {
  position: absolute;
  width: min(92vw, 420px);
  height: min(92vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gift-accent, #a855f7) 42%, transparent) 0%, transparent 68%);
  animation: gift-celebration-burst 1.1s ease-out forwards;
}
@keyframes gift-celebration-burst {
  0% { transform: scale(0.35); opacity: 0.15; }
  55% { transform: scale(1.05); opacity: 0.95; }
  100% { transform: scale(1.18); opacity: 0.55; }
}
.gift-send-celebration-card {
  position: relative;
  z-index: 1;
  width: min(88vw, 320px);
  padding: 22px 18px 18px;
  border-radius: 28px;
  text-align: center;
  border: 1px solid color-mix(in srgb, #fff 28%, var(--gift-accent, #a855f7) 35%);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gift-accent, #a855f7) 34%, transparent), transparent 55%),
    color-mix(in srgb, #0e1621 88%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--gift-accent, #a855f7) 28%, transparent);
  transform: scale(0.72) translateY(36px);
  opacity: 0;
  animation: gift-celebration-fly 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gift-celebration-fly {
  0% { transform: scale(0.72) translateY(36px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.gift-send-celebration-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 72%, transparent);
}
.gift-send-celebration-visual {
  width: 168px;
  height: 168px;
  margin: 12px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.gift-send-celebration-anim { width: 88%; height: 88%; object-fit: contain; display: block; }
.gift-send-celebration-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}
.gift-send-celebration-sub {
  margin-top: 4px;
  font-size: 0.88rem;
  color: color-mix(in srgb, #fff 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .gift-send-celebration-burst,
  .gift-send-celebration-card { animation: none; opacity: 1; transform: none; }
}

/* Channel post comments — flush under bubble (Android ChannelCommentsTorpedo parity) */
.channel-comments-torpedo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 360px);
  margin: 0;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), color-mix(in srgb, #fff 5%, transparent)),
    color-mix(in srgb, #1a2330 55%, transparent);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  color: var(--text, #f4f7fb);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  box-sizing: border-box;
}
/* Must come AFTER base torpedo so pill/gap never wins */
.bubble-wrap.channel-post-wrap > .channel-comments-torpedo {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-width: 0;
  box-shadow: none;
}
.bubble-wrap.channel-post-wrap > .bubble {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  padding-bottom: 8px;
}
html[data-theme="light"] .channel-comments-torpedo {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 70%, transparent), color-mix(in srgb, #e8eef6 55%, transparent));
  border-color: color-mix(in srgb, #000 10%, transparent);
  color: #1a2330;
}
.channel-comments-avatars {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}
.channel-comments-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.65rem; font-weight: 700;
  background: #3a4a5c; color: #fff;
  border: 1.5px solid color-mix(in srgb, #000 35%, transparent);
  margin-left: -8px; overflow: hidden;
}
.channel-comments-avatar:first-child { margin-left: 0; }
.channel-comments-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.channel-comments-label { flex: 1; text-align: left; min-width: 0; }
.channel-comments-chevron { opacity: 0.55; font-size: 1.2rem; line-height: 1; }
.channel-comments-sheet {
  display: flex; flex-direction: column;
  max-height: min(88vh, 720px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.channel-comments-title {
  font-weight: 800; font-size: 1.1rem; padding: 8px 16px 10px;
}
.channel-comments-list {
  flex: 1; overflow: auto; padding: 4px 14px 12px;
  min-height: 180px;
}
.channel-comments-row {
  display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start;
}
.channel-comments-row > .channel-comments-avatar {
  width: 36px; height: 36px; margin-left: 0; flex-shrink: 0;
}
.channel-comments-body { min-width: 0; flex: 1; }
.channel-comments-body > strong { font-size: 0.9rem; }
.channel-comments-text { margin-top: 2px; font-size: 0.95rem; line-height: 1.35; white-space: pre-wrap; }
.channel-comments-quote {
  margin: 4px 0; padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand, #2aabee) 12%, transparent);
  font-size: 0.8rem;
  display: flex; flex-direction: column; gap: 2px;
}
.channel-comments-actions { display: flex; gap: 12px; margin-top: 2px; }
.channel-comments-actions .linkish {
  background: none; border: 0; padding: 0; color: var(--brand, #2aabee);
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.channel-comments-actions .linkish.danger { color: #f87171; }
.channel-comments-reply-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: color-mix(in srgb, var(--brand, #2aabee) 12%, transparent);
}
.channel-comments-reply-bar.hidden { display: none; }
.channel-comments-reply-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 0.8rem;
}
.channel-comments-reply-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8;
}
.channel-comments-reply-cancel {
  border: 0; background: transparent; color: inherit; font-size: 1.3rem; cursor: pointer;
}
.channel-comments-emoji {
  display: flex; gap: 4px; overflow-x: auto; padding: 6px 10px;
}
.channel-comments-emoji-btn {
  border: 0; background: transparent; font-size: 1.35rem; cursor: pointer; padding: 4px;
}
.channel-comments-composer {
  display: flex; gap: 8px; padding: 8px 12px 4px; align-items: flex-end;
}
.channel-comments-input {
  flex: 1; min-height: 42px; max-height: 110px; resize: none;
  border-radius: 18px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
  color: inherit; font: inherit;
}
.channel-comments-send { flex-shrink: 0; border-radius: 16px; padding: 10px 14px; }

.gift-send-sheet, .gift-gallery-sheet { max-height: min(90vh, 720px); overflow: auto; }
.gift-send-head { padding: 4px 4px 12px; }
.gift-sheet-title-row {
  display: flex; align-items: center; gap: 10px;
}
.gift-sheet-title-icon {
  width: 28px; height: 28px; color: var(--brand, #2aabee);
  display: grid; place-items: center;
}
.gift-sheet-title-icon svg { width: 24px; height: 24px; }
.gift-send-title { font-size: 1.15rem; font-weight: 800; }
.gift-send-sub { font-size: 0.85rem; color: var(--text-2); margin-top: 2px; }
.gift-send-preview {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px 18px; margin: 0 2px 10px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, color-mix(in srgb, #fff 12%, transparent), transparent 50%),
    color-mix(in srgb, var(--gift-accent, #a855f7) 18%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
}
.gift-send-preview-anim { width: 112px; height: 112px; object-fit: contain; display: block; border-radius: 18px; }
.gift-send-preview-label { font-weight: 800; font-size: 0.95rem; }
.gift-catalog-sections { padding: 0 2px 8px; }
.gift-catalog-section { margin-bottom: 12px; }
.gift-catalog-section-title {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-2); padding: 4px 4px 8px;
}
.gift-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 0 4px;
}
.gift-catalog-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 10px;
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, #fff 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gift-accent, #a855f7) 28%, transparent), color-mix(in srgb, #fff 6%, transparent));
  color: var(--text);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.gift-catalog-item.active {
  border-color: color-mix(in srgb, var(--gift-accent, var(--brand)) 70%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gift-accent, var(--brand)) 40%, transparent),
    0 8px 20px color-mix(in srgb, var(--gift-accent, var(--brand)) 25%, transparent);
}
.gift-catalog-anim { width: 64px; height: 64px; object-fit: contain; display: block; border-radius: 14px; }
.gift-catalog-emoji { font-size: 1.8rem; line-height: 1; }
.gift-catalog-label { font-size: 0.72rem; font-weight: 700; opacity: 0.9; text-align: center; }
.gift-anon-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 8px; font-size: 0.92rem; font-weight: 600;
}
.gift-note-input {
  width: 100%; box-sizing: border-box;
  margin: 4px 0 12px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid color-mix(in srgb, #fff 14%, var(--line));
  background: color-mix(in srgb, #fff 6%, transparent); color: var(--text); font-size: 0.95rem;
}
.gift-send-btn { width: 100%; margin-bottom: 8px; }
.gift-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 2px 16px;
  min-height: 120px;
}
.gift-gallery-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--gift-accent, #a855f7) 32%, transparent), transparent 60%),
    color-mix(in srgb, #fff 5%, transparent);
  color: var(--text);
  cursor: pointer;
}
.gift-gallery-cell.pinned {
  border-color: color-mix(in srgb, var(--gift-accent, var(--brand)) 65%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gift-accent, var(--brand)) 35%, transparent);
}
.gift-gallery-cell-anim { width: 96px; height: 96px; object-fit: contain; display: block; border-radius: 16px; }
.gift-gallery-cell-title { font-weight: 800; font-size: 0.88rem; text-align: center; }
.gift-gallery-cell-who { font-size: 0.72rem; color: var(--text-2); text-align: center; }
.gift-gallery-cell-pin {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.65rem; font-weight: 800;
  padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--gift-accent, var(--brand)) 35%, #0e1621);
  border: 1px solid color-mix(in srgb, var(--gift-accent, var(--brand)) 50%, #fff);
}
.gift-gallery-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 28px 12px; color: var(--text-2); font-size: 0.95rem;
}
.gift-gallery-list { /* legacy */ padding: 4px 2px 12px; }
.gift-gallery-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--gift-accent, #a855f7) 14%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.gift-gallery-anim { width: 48px; height: 48px; object-fit: contain; }
.gift-gallery-meta { flex: 1; min-width: 0; }
.gift-gallery-title { font-weight: 700; }
.gift-gallery-who { font-size: 0.78rem; color: var(--text-2); }
.gift-pin-btn {
  border: 0; border-radius: 12px; padding: 8px 10px; font-weight: 700; font-size: 0.75rem;
  background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text); cursor: pointer;
}
.gift-send-btn { width: 100%; margin-bottom: 6px; }
.gift-gallery-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; min-height: 80px; }
.gift-gallery-empty { padding: 28px 12px; text-align: center; color: var(--text-2); }
.gift-gallery-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gift-accent, #a855f7) 22%, transparent), color-mix(in srgb, #fff 5%, transparent));
  border: 1px solid color-mix(in srgb, #fff 14%, var(--gift-accent, #a855f7) 25%);
  backdrop-filter: blur(12px);
}
.gift-gallery-row.pinned {
  border-color: color-mix(in srgb, var(--gift-accent, #a855f7) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gift-accent, #a855f7) 25%, transparent);
}
.gift-gallery-anim { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; display: block; }
.gift-gallery-emoji {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--gift-accent, #a855f7) 18%, transparent);
  flex-shrink: 0;
}
.gift-gallery-meta { min-width: 0; flex: 1; }
.gift-gallery-title { font-weight: 800; }
.gift-gallery-who { font-size: 0.78rem; color: var(--text-2); margin-top: 2px; }
.gift-pin-btn {
  flex-shrink: 0; border: 0; border-radius: 999px;
  padding: 8px 12px; font-size: 0.72rem; font-weight: 800;
  background: color-mix(in srgb, var(--gift-accent, var(--brand)) 22%, transparent);
  color: var(--text);
}
.profile-gallery-cta.gift-cta span:first-child { font-size: 1.1rem; }
.gift-anim-fallback { font-size: 1.6rem; line-height: 1; }


.profile-cosmetic-card-head { display: flex; align-items: flex-start; gap: 10px; }
.profile-cosmetic-card-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-cosmetic-gift-icon { width: 28px; height: 28px; color: var(--brand, #2aabee); flex-shrink: 0; display: grid; place-items: center; margin-top: 2px; }
.profile-cosmetic-gift-icon svg { width: 22px; height: 22px; }
.profile-gifts-open-icon { width: 20px; height: 20px; color: var(--brand, #2aabee); display: inline-grid; place-items: center; }
.profile-gifts-open-icon svg { width: 18px; height: 18px; }

/* —— Films / Series (entertainment hub) —— */
.films-panel { padding: 0 12px 24px; min-height: 40vh; }
.films-kind-bar { margin: 4px 0 10px; }
.films-search {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text);
  padding: 11px 14px;
  font-size: 0.95rem;
  margin-bottom: 10px;
  outline: none;
}
.films-search:focus {
  border-color: color-mix(in srgb, #ff6f00 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff6f00 22%, transparent);
}
.films-genres {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.films-genres::-webkit-scrollbar { display: none; }
.films-genre-chip {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 650;
}
.films-genre-chip.active {
  color: #fff;
  background: color-mix(in srgb, #ff6f00 55%, transparent);
  border-color: color-mix(in srgb, #ff6f00 70%, transparent);
}
.films-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
}
@media (min-width: 720px) {
  .films-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
}
.film-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.film-card--glass .film-card-poster {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow:
    0 12px 32px rgba(0,0,0,.34),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.film-card-glass {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 12%, transparent), transparent 38%, rgba(4,10,18,.55) 100%);
}
.film-card-fav-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: #fbbf24;
  background: color-mix(in srgb, #000 48%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.film-card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated) 80%, #000);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
}
.film-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-poster-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #ff6f00, #7b1fa2);
}
.film-rating {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0b1220;
  background: #fbbf24;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.film-rating--hot { background: #22c55e; color: #052e16; }
.film-rating--ok { background: #fbbf24; color: #0b1220; }
.film-rating--low { background: #94a3b8; color: #0f172a; }
.film-card-title {
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-card-sub {
  font-size: 0.68rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.films-status {
  text-align: center;
  padding: 28px 12px;
  color: var(--text-2);
}
.films-status--err { color: #f87171; }
.films-attr {
  margin-top: 14px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-2);
  opacity: .85;
}
.film-detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 10, 18, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: end center;
  padding: 12px;
}
.film-trailer-sheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(4, 10, 18, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 12px;
}
.film-detail-card {
  width: min(520px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 22px 22px 18px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 40%),
    color-mix(in srgb, var(--bg-elevated) 92%, #0b1220);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.film-detail-card--glass {
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  box-shadow:
    0 28px 70px rgba(0,0,0,.5),
    inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
}
.film-detail-hero {
  position: relative;
  min-height: 168px;
  background-size: cover;
  background-position: center top;
  padding: 14px 14px 0;
}
.film-detail-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,20,.15), rgba(8,12,20,.92) 78%);
  pointer-events: none;
}
.film-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 45%, transparent);
  color: #fff;
}
.film-detail-close svg { width: 18px; height: 18px; }
.film-detail-hero-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: 14px;
}
.film-detail-poster {
  width: 104px;
  flex-shrink: 0;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
}
.film-detail-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-detail-head { min-width: 0; flex: 1; padding-bottom: 4px; }
.film-detail-head h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.film-detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: color-mix(in srgb, #fff 82%, transparent);
  font-size: 0.82rem;
  font-weight: 600;
}
.film-detail-sub .film-rating { position: static; }
.film-detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.film-detail-genres span {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #fff;
}
.film-detail-body { padding: 4px 16px 18px; }
.film-detail-desc {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}
.film-detail-cast {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 14px;
}
.film-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.film-trailer-btn {
  flex: 1;
  min-width: 120px;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #0b1220;
  background: linear-gradient(135deg, #ffb74d, #ff6f00);
  box-shadow: 0 8px 22px color-mix(in srgb, #ff6f00 35%, transparent);
}
.film-trailer-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.film-trailer-btn-inner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.film-trailer-btn--ghost {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text-2);
  box-shadow: none;
}
.film-fav-btn {
  flex: 1;
  min-width: 120px;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 750;
  font-size: 0.9rem;
  color: var(--text);
  background: color-mix(in srgb, #fff 8%, transparent);
}
.film-fav-btn.on {
  color: #fbbf24;
  border-color: color-mix(in srgb, #fbbf24 45%, transparent);
  background: color-mix(in srgb, #fbbf24 16%, transparent);
}
.film-imdb-btn,
.film-share-btn {
  flex: 0 0 auto;
  min-width: 88px;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 750;
  font-size: 0.88rem;
  color: var(--text);
  background: color-mix(in srgb, #fff 8%, transparent);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.film-imdb-btn {
  color: #f5c518;
  border-color: color-mix(in srgb, #f5c518 35%, transparent);
  background: color-mix(in srgb, #f5c518 12%, transparent);
}
.film-seasons-label {
  margin: 14px 0 8px;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.film-seasons {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.film-seasons::-webkit-scrollbar { display: none; }
.film-episodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 8px;
}
.film-ep {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.film-ep-thumb {
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0b1220;
}
.film-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-ep-thumb--num {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #ff6f00, #7b1fa2);
}
.film-ep-meta { min-width: 0; flex: 1; }
.film-ep-title {
  font-size: 0.84rem;
  font-weight: 750;
  margin-bottom: 4px;
}
.film-ep-desc {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-ep-date {
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--text-2);
  opacity: .85;
}
.film-trailer-frame {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  align-self: center;
  margin: auto;
}
.film-trailer-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.film-trailer-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 600;
}
.film-trailer-open-yt {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.film-trailer-sheet {
  place-items: center;
}


/* Illustrated cosmetics (mockup parity) — PNG frames/plates.
   Critical for iOS PWA: wrap must have an explicit box; never size avatar via % of auto. */
.avatar-wrap.frame-cloud,
.avatar-wrap.frame-storm,
.avatar-wrap.frame-thunder,
.avatar-wrap.frame-bolt,
.avatar-wrap.frame-capo,
.avatar-wrap.frame-qubi,
.avatar-wrap.frame-mist,
.avatar-wrap.frame-cigar,
.avatar-wrap.frame-noir,
.avatar-wrap.frame-qubi_glow,
.avatar-wrap.frame-bubble,
.avatar-wrap.frame-hairdresser,
.avatar-wrap.frame-nails,
.avatar-wrap.frame-barber,
.avatar-wrap.frame-barista,
.avatar-wrap.frame-doctor,
.avatar-wrap.frame-auto {
  --avatar-ring: 0px;
  --illust-pad: 22%;
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  width: var(--avatar-size, 50px);
  height: var(--avatar-size, 50px);
  flex: 0 0 auto;
  isolation: isolate;
}
/* Kill legacy CSS vector rings/hats for illustrated PNG frames (capo etc.).
   Without this, older .frame-capo::before conic-gradient + ::after hat stack under the PNG. */
.avatar-wrap.frame-cloud::before,
.avatar-wrap.frame-storm::before,
.avatar-wrap.frame-thunder::before,
.avatar-wrap.frame-bolt::before,
.avatar-wrap.frame-capo::before,
.avatar-wrap.frame-qubi::before,
.avatar-wrap.frame-mist::before,
.avatar-wrap.frame-cigar::before,
.avatar-wrap.frame-noir::before,
.avatar-wrap.frame-qubi_glow::before,
.avatar-wrap.frame-bubble::before,
.avatar-wrap.frame-hairdresser::before,
.avatar-wrap.frame-nails::before,
.avatar-wrap.frame-barber::before,
.avatar-wrap.frame-barista::before,
.avatar-wrap.frame-doctor::before,
.avatar-wrap.frame-auto::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: calc(-1 * var(--illust-pad, 22%)) !important;
  top: calc(-1 * var(--illust-pad, 22%)) !important;
  width: calc(100% + 2 * var(--illust-pad, 22%)) !important;
  height: calc(100% + 2 * var(--illust-pad, 22%)) !important;
  inset: auto !important;
  border-radius: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  will-change: auto !important;
}
.avatar-wrap.frame-cloud::before { background-image: url('/app/img/cosmetics/frame_cloud.png') !important; }
.avatar-wrap.frame-storm::before { background-image: url('/app/img/cosmetics/frame_storm.png') !important; }
.avatar-wrap.frame-thunder::before { background-image: url('/app/img/cosmetics/frame_thunder.png') !important; }
.avatar-wrap.frame-bolt::before { background-image: url('/app/img/cosmetics/frame_bolt.png') !important; }
.avatar-wrap.frame-capo::before { background-image: url('/app/img/cosmetics/frame_capo.png') !important; }
.avatar-wrap.frame-qubi::before { background-image: url('/app/img/cosmetics/frame_qubi.png') !important; }
.avatar-wrap.frame-mist::before { background-image: url('/app/img/cosmetics/frame_mist.png') !important; }
.avatar-wrap.frame-cigar::before { background-image: url('/app/img/cosmetics/frame_cigar.png') !important; }
.avatar-wrap.frame-noir::before { background-image: url('/app/img/cosmetics/frame_noir.png') !important; }
.avatar-wrap.frame-qubi_glow::before { background-image: url('/app/img/cosmetics/frame_qubi_glow.png') !important; }
.avatar-wrap.frame-bubble::before { background-image: url('/app/img/cosmetics/frame_bubble.png') !important; }

.avatar-wrap.frame-hairdresser::before { background-image: url('/app/img/cosmetics/frame_hairdresser.png') !important; }
.avatar-wrap.frame-nails::before { background-image: url('/app/img/cosmetics/frame_nails.png') !important; }
.avatar-wrap.frame-barber::before { background-image: url('/app/img/cosmetics/frame_barber.png') !important; }
.avatar-wrap.frame-barista::before { background-image: url('/app/img/cosmetics/frame_barista.png') !important; }
.avatar-wrap.frame-doctor::before { background-image: url('/app/img/cosmetics/frame_doctor.png') !important; }
.avatar-wrap.frame-auto::before { background-image: url('/app/img/cosmetics/frame_auto.png') !important; }

.avatar-wrap.frame-cloud::after,
.avatar-wrap.frame-storm::after,
.avatar-wrap.frame-thunder::after,
.avatar-wrap.frame-bolt::after,
.avatar-wrap.frame-capo::after,
.avatar-wrap.frame-qubi::after,
.avatar-wrap.frame-mist::after,
.avatar-wrap.frame-cigar::after,
.avatar-wrap.frame-noir::after,
.avatar-wrap.frame-qubi_glow::after,
.avatar-wrap.frame-bubble::after,
.avatar-wrap.frame-hairdresser::after,
.avatar-wrap.frame-nails::after,
.avatar-wrap.frame-barber::after,
.avatar-wrap.frame-barista::after,
.avatar-wrap.frame-doctor::after,
.avatar-wrap.frame-auto::after {
  /* Motion ring ON TOP of illustrated PNG (#14553) — keep Marvel art on ::before. */
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3.5px),
    #000 calc(100% - 3.5px + 0.5px)
  ) !important;
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3.5px),
    #000 calc(100% - 3.5px + 0.5px)
  ) !important;
  will-change: filter, opacity, transform !important;
  animation: avatar-frame-pulse 1.85s ease-in-out infinite !important;
  filter: drop-shadow(0 0 5px rgba(148, 163, 184, 0.45)) !important;
}
.avatar-wrap.frame-cloud::after {
  background: conic-gradient(from 0deg, #f8fafc, #cbd5e1, #94a3b8, #f8fafc) !important;
  filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.65)) !important;
}
.avatar-wrap.frame-mist::after {
  background: conic-gradient(from 20deg, #c4b5fd, #93c5fd, #f9a8d4, #fde68a, #a5b4fc, #c4b5fd) !important;
  filter: drop-shadow(0 0 8px rgba(196, 181, 253, 0.7)) !important;
}
.avatar-wrap.frame-thunder::after {
  background: conic-gradient(from 0deg, #4c1d95, #facc15, #7c3aed, #c4b5fd, #4c1d95) !important;
  animation: avatar-frame-pulse 1.55s ease-in-out infinite !important;
  filter: drop-shadow(0 0 7px rgba(124, 58, 237, 0.7)) !important;
}
.avatar-wrap.frame-storm::after {
  background: conic-gradient(from 90deg, #312e81, #4338ca, #a5b4fc, #6366f1, #312e81) !important;
  filter: drop-shadow(0 0 7px rgba(99, 102, 241, 0.65)) !important;
}
.avatar-wrap.frame-bolt::after {
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.2) 0deg,
    rgba(56, 189, 248, 0.2) 255deg,
    rgba(56, 189, 248, 0.55) 290deg,
    #38bdf8 310deg,
    #fef08a 330deg,
    #ffffff 342deg,
    #a855f7 352deg,
    transparent 360deg
  ) !important;
  animation: avatar-frame-chase 1.55s linear infinite !important;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55)) !important;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px + 0.5px)
  ) !important;
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px + 0.5px)
  ) !important;
}
.avatar-wrap.frame-capo::after {
  background: conic-gradient(from 0deg, #0a0a0a 0 220deg, #fde68a 230deg, #d97706 250deg, #fde68a 270deg, #0a0a0a 280deg 360deg) !important;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6)) !important;
}
.avatar-wrap.frame-cigar::after {
  background: conic-gradient(from 30deg, #451a03, #78350f, #fbbf24, #92400e, #451a03) !important;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5)) !important;
}
.avatar-wrap.frame-noir::after {
  background: conic-gradient(from 0deg, #171717 0 200deg, #e5e5e5 210deg, #facc15 230deg, #a3a3a3 250deg, #171717 260deg 360deg) !important;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.45)) !important;
}
.avatar-wrap.frame-qubi::after {
  background: conic-gradient(from 0deg, #14b8a6, #2dd4bf, #99f6e4, #5eead4, #14b8a6) !important;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.7)) !important;
}
.avatar-wrap.frame-qubi_glow::after {
  background: conic-gradient(from 45deg, #2dd4bf, #67e8f9, #a7f3d0, #5eead4, #2dd4bf) !important;
  filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.8)) !important;
}
.avatar-wrap.frame-bubble::after {
  background: conic-gradient(from 0deg, #67e8f9, #a5f3fc, #fff, #7dd3fc, #67e8f9) !important;
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.6)) !important;
}
.avatar-wrap.frame-hairdresser::after {
  background: conic-gradient(from 0deg, #f9a8d4, #e8b86d, #f472b6, #f9a8d4) !important;
  filter: drop-shadow(0 0 5px rgba(244, 114, 182, 0.55)) !important;
}
.avatar-wrap.frame-nails::after {
  background: conic-gradient(from 0deg, #f472b6, #c084fc, #fb7185, #f472b6) !important;
  filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.55)) !important;
}
.avatar-wrap.frame-barber::after {
  background: conic-gradient(from 0deg, #0f0f0f, #fde68a, #525252, #0f0f0f) !important;
  filter: drop-shadow(0 0 5px rgba(253, 230, 138, 0.5)) !important;
}
.avatar-wrap.frame-barista::after {
  background: conic-gradient(from 0deg, #78350f, #f5e6d3, #92400e, #78350f) !important;
  filter: drop-shadow(0 0 5px rgba(120, 53, 15, 0.45)) !important;
}
.avatar-wrap.frame-doctor::after {
  background: conic-gradient(from 0deg, #2dd4bf, #67e8f9, #99f6e4, #2dd4bf) !important;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.55)) !important;
}
.avatar-wrap.frame-auto::after {
  background: conic-gradient(from 0deg, #64748b, #94a3b8, #e2e8f0, #64748b) !important;
  filter: drop-shadow(0 0 5px rgba(148, 163, 184, 0.5)) !important;
}
/* Picker grids: keep LIVE motion so preview matches applied frames (#14651). */
.avatar-frame-pick .avatar-wrap.frame-cloud::after,
.avatar-frame-pick .avatar-wrap.frame-storm::after,
.avatar-frame-pick .avatar-wrap.frame-thunder::after,
.avatar-frame-pick .avatar-wrap.frame-bolt::after,
.avatar-frame-pick .avatar-wrap.frame-capo::after,
.avatar-frame-pick .avatar-wrap.frame-qubi::after,
.avatar-frame-pick .avatar-wrap.frame-mist::after,
.avatar-frame-pick .avatar-wrap.frame-cigar::after,
.avatar-frame-pick .avatar-wrap.frame-noir::after,
.avatar-frame-pick .avatar-wrap.frame-qubi_glow::after,
.avatar-frame-pick .avatar-wrap.frame-bubble::after,
.avatar-frame-pick .avatar-wrap.frame-hairdresser::after,
.avatar-frame-pick .avatar-wrap.frame-nails::after,
.avatar-frame-pick .avatar-wrap.frame-barber::after,
.avatar-frame-pick .avatar-wrap.frame-barista::after,
.avatar-frame-pick .avatar-wrap.frame-doctor::after,
.avatar-frame-pick .avatar-wrap.frame-auto::after {
  /* was animation:none — preview must match chat (#14651) */
  opacity: 1;
}
.avatar-wrap.frame-cloud > .avatar,
.avatar-wrap.frame-storm > .avatar,
.avatar-wrap.frame-thunder > .avatar,
.avatar-wrap.frame-bolt > .avatar,
.avatar-wrap.frame-capo > .avatar,
.avatar-wrap.frame-qubi > .avatar,
.avatar-wrap.frame-mist > .avatar,
.avatar-wrap.frame-cigar > .avatar,
.avatar-wrap.frame-noir > .avatar,
.avatar-wrap.frame-qubi_glow > .avatar,
.avatar-wrap.frame-bubble > .avatar,
.avatar-wrap.frame-hairdresser > .avatar,
.avatar-wrap.frame-nails > .avatar,
.avatar-wrap.frame-barber > .avatar,
.avatar-wrap.frame-barista > .avatar,
.avatar-wrap.frame-doctor > .avatar,
.avatar-wrap.frame-auto > .avatar {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  margin: 0 auto !important;
  display: block;
  border: none !important;
  box-shadow: none !important;
  place-self: center;
}
.avatar-frame-pick .avatar-wrap.frame-cloud > .avatar,
.avatar-frame-pick .avatar-wrap.frame-storm > .avatar,
.avatar-frame-pick .avatar-wrap.frame-thunder > .avatar,
.avatar-frame-pick .avatar-wrap.frame-bolt > .avatar,
.avatar-frame-pick .avatar-wrap.frame-capo > .avatar,
.avatar-frame-pick .avatar-wrap.frame-qubi > .avatar,
.avatar-frame-pick .avatar-wrap.frame-mist > .avatar,
.avatar-frame-pick .avatar-wrap.frame-cigar > .avatar,
.avatar-frame-pick .avatar-wrap.frame-noir > .avatar,
.avatar-frame-pick .avatar-wrap.frame-qubi_glow > .avatar,
.avatar-frame-pick .avatar-wrap.frame-bubble > .avatar,
.avatar-frame-pick .avatar-wrap.frame-hairdresser > .avatar,
.avatar-frame-pick .avatar-wrap.frame-nails > .avatar,
.avatar-frame-pick .avatar-wrap.frame-barber > .avatar,
.avatar-frame-pick .avatar-wrap.frame-barista > .avatar,
.avatar-frame-pick .avatar-wrap.frame-doctor > .avatar,
.avatar-frame-pick .avatar-wrap.frame-auto > .avatar {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
}
.name-plate-cloud,
.name-plate-storm,
.name-plate-thunder,
.name-plate-bolt,
.name-plate-capo,
.name-plate-qubi,
.name-plate-mist,
.name-plate-cigar,
.name-plate-noir,
.name-plate-qubi_glow,
.name-plate-bubble,
.name-plate-hairdresser,
.name-plate-nails,
.name-plate-barber,
.name-plate-barista,
.name-plate-doctor,
.name-plate-auto {
  position: relative;
  isolation: isolate;
  /* Hug the nick — not avatar-tall (#11594). Wings still scale with the box. */
  padding: 6px 14px !important;
  min-height: 0;
  line-height: 1.25;
  border-radius: 12px;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: visible;
  min-width: 0;
  width: max-content;
  max-width: min(100%, 92vw);
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  color: #0f172a !important;
  border: none !important;
  box-shadow: none !important;
  align-self: center;
}
.chat-row .row-title .name-plate-cloud,
.chat-row .row-title .name-plate-storm,
.chat-row .row-title .name-plate-thunder,
.chat-row .row-title .name-plate-bolt,
.chat-row .row-title .name-plate-capo,
.chat-row .row-title .name-plate-qubi,
.chat-row .row-title .name-plate-mist,
.chat-row .row-title .name-plate-cigar,
.chat-row .row-title .name-plate-noir,
.chat-row .row-title .name-plate-qubi_glow,
.chat-row .row-title .name-plate-bubble,
.chat-row .row-title .name-plate-hairdresser,
.chat-row .row-title .name-plate-nails,
.chat-row .row-title .name-plate-barber,
.chat-row .row-title .name-plate-barista,
.chat-row .row-title .name-plate-doctor,
.chat-row .row-title .name-plate-auto,
.calls-row .name-plate-cloud,
.calls-row .name-plate-storm,
.calls-row .name-plate-thunder,
.calls-row .name-plate-bolt,
.calls-row .name-plate-capo,
.calls-row .name-plate-qubi,
.calls-row .name-plate-mist,
.calls-row .name-plate-cigar,
.calls-row .name-plate-noir,
.calls-row .name-plate-qubi_glow,
.calls-row .name-plate-bubble,
.calls-row .name-plate-hairdresser,
.calls-row .name-plate-nails,
.calls-row .name-plate-barber,
.calls-row .name-plate-barista,
.calls-row .name-plate-doctor,
.calls-row .name-plate-auto,
.topbar-name .name-plate-cloud,
.topbar-name .name-plate-storm,
.topbar-name .name-plate-thunder,
.topbar-name .name-plate-bolt,
.topbar-name .name-plate-capo,
.topbar-name .name-plate-qubi,
.topbar-name .name-plate-mist,
.topbar-name .name-plate-cigar,
.topbar-name .name-plate-noir,
.topbar-name .name-plate-qubi_glow,
.topbar-name .name-plate-bubble,
.topbar-name .name-plate-hairdresser,
.topbar-name .name-plate-nails,
.topbar-name .name-plate-barber,
.topbar-name .name-plate-barista,
.topbar-name .name-plate-doctor,
.topbar-name .name-plate-auto {
  max-width: min(100%, 78vw);
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 12px !important;
  min-height: 0;
  line-height: 1.2;
  /* Match chat-list: full plate art, not a clipped strip. */
  overflow: visible !important;
  background-size: 100% 100% !important;
  align-self: center;
}
.name-plate-cloud { background-image: url('/app/img/cosmetics/plate_cloud.png'); color: #2563eb !important; }
.name-plate-storm { background-image: url('/app/img/cosmetics/plate_storm.png'); color: #0891b2 !important; }
.name-plate-thunder { background-image: url('/app/img/cosmetics/plate_thunder.png'); color: #7e22ce !important; }
.name-plate-bolt { background-image: url('/app/img/cosmetics/plate_bolt.png'); color: #22d3ee !important; }
.name-plate-capo { background-image: url('/app/img/cosmetics/plate_capo.png'); color: #b45309 !important; }
.name-plate-qubi { background-image: url('/app/img/cosmetics/plate_qubi.png'); color: #0f766e !important; }
.name-plate-mist { background-image: url('/app/img/cosmetics/plate_mist.png'); color: #4338ca !important; }
.name-plate-cigar { background-image: url('/app/img/cosmetics/plate_cigar.png'); color: #fde68a !important; }
.name-plate-noir { background-image: url('/app/img/cosmetics/plate_noir.png'); color: #e5e5e5 !important; }
.name-plate-qubi_glow { background-image: url('/app/img/cosmetics/plate_qubi_glow.png'); color: #0f766e !important; }
.name-plate-bubble { background-image: url('/app/img/cosmetics/plate_bubble.png'); color: #0e7490 !important; }

.name-plate-hairdresser { background-image: url('/app/img/cosmetics/plate_hairdresser.png'); color: #9a3412 !important; }
.name-plate-nails { background-image: url('/app/img/cosmetics/plate_nails.png'); color: #9d174d !important; }
.name-plate-barber { background-image: url('/app/img/cosmetics/plate_barber.png'); color: #fde68a !important; }
.name-plate-barista { background-image: url('/app/img/cosmetics/plate_barista.png'); color: #78350f !important; }
.name-plate-doctor { background-image: url('/app/img/cosmetics/plate_doctor.png'); color: #0f766e !important; }
.name-plate-auto { background-image: url('/app/img/cosmetics/plate_auto.png'); color: #e2e8f0 !important; }

.name-plate-cloud::before,
.name-plate-storm::before,
.name-plate-thunder::before,
.name-plate-bolt::before,
.name-plate-capo::before,
.name-plate-qubi::before,
.name-plate-mist::before,
.name-plate-cigar::before,
.name-plate-noir::before,
.name-plate-qubi_glow::before,
.name-plate-bubble::before,
.name-plate-hairdresser::before,
.name-plate-nails::before,
.name-plate-barber::before,
.name-plate-barista::before,
.name-plate-doctor::before,
.name-plate-auto::before,
.name-plate-cloud::after,
.name-plate-storm::after,
.name-plate-thunder::after,
.name-plate-bolt::after,
.name-plate-capo::after,
.name-plate-qubi::after,
.name-plate-mist::after,
.name-plate-cigar::after,
.name-plate-noir::after,
.name-plate-qubi_glow::after,
.name-plate-bubble::after,
.name-plate-hairdresser::after,
.name-plate-nails::after,
.name-plate-barber::after,
.name-plate-barista::after,
.name-plate-doctor::after,
.name-plate-auto::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.name-plate-cloud .name-text,
.name-plate-storm .name-text,
.name-plate-thunder .name-text,
.name-plate-bolt .name-text,
.name-plate-capo .name-text,
.name-plate-qubi .name-text,
.name-plate-mist .name-text,
.name-plate-cigar .name-text,
.name-plate-noir .name-text,
.name-plate-qubi_glow .name-text,
.name-plate-bubble .name-text,
.name-plate-hairdresser .name-text,
.name-plate-nails .name-text,
.name-plate-barber .name-text,
.name-plate-barista .name-text,
.name-plate-doctor .name-text,
.name-plate-auto .name-text {
  position: relative;
  z-index: 2;
  color: inherit !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  display: inline !important;
  -webkit-line-clamp: unset !important;
  max-width: none !important;
}

/* User-picked nick color beats plate default FG (#12034). */
.name-plate .name-text.name-color-set,
.name-plate-cloud .name-text.name-color-set,
.name-plate-storm .name-text.name-color-set,
.name-plate-thunder .name-text.name-color-set,
.name-plate-bolt .name-text.name-color-set,
.name-plate-capo .name-text.name-color-set,
.name-plate-qubi .name-text.name-color-set,
.name-plate-mist .name-text.name-color-set,
.name-plate-cigar .name-text.name-color-set,
.name-plate-noir .name-text.name-color-set,
.name-plate-qubi_glow .name-text.name-color-set,
.name-plate-bubble .name-text.name-color-set,
.name-plate-hairdresser .name-text.name-color-set,
.name-plate-nails .name-text.name-color-set,
.name-plate-barber .name-text.name-color-set,
.name-plate-barista .name-text.name-color-set,
.name-plate-doctor .name-text.name-color-set,
.name-plate-auto .name-text.name-color-set,
.name-plate-gold .name-text.name-color-set,
.name-plate-neon .name-text.name-color-set,
.name-plate-ribbon .name-text.name-color-set,
.name-plate-ticket .name-text.name-color-set,
.name-plate-pixel .name-text.name-color-set {
  color: var(--qchat-name-color, inherit) !important;
}

.ios-large-title {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  padding: 6px 4px !important;
  line-height: 1.15 !important;
  -webkit-line-clamp: 1 !important;
}

.btn.btn-glass-save {
  width: 100%;
  margin-top: 8px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), color-mix(in srgb, #fff 6%, transparent)),
    color-mix(in srgb, var(--brand, #5b9dff) 55%, rgba(20, 28, 40, 0.55));
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.btn.btn-glass-save:active {
  transform: scale(0.985);
}

.cosmetic-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.cosmetic-section-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, #fff 24%, transparent), color-mix(in srgb, #fff 6%, transparent));
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
}
.cosmetic-shop-card.glass-liquid {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, #fff 18%, transparent),
      color-mix(in srgb, var(--surface, #0f172a) 48%, transparent) 55%);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.cosmetic-shop-card.glass-liquid::before {
  content: '';
  position: absolute;
  inset: -50% -30%;
  background: linear-gradient(
    115deg,
    transparent 32%,
    color-mix(in srgb, #fff 32%, transparent) 50%,
    transparent 68%
  );
  transform: translateX(-120%);
  animation: cosmetic-glass-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cosmetic-glass-shimmer {
  0%, 100% { transform: translateX(-120%); opacity: 0.45; }
  50% { transform: translateX(120%); opacity: 1; }
}
.cosmetic-open-all.glass-liquid {
  margin-top: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 52%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 20%, transparent), color-mix(in srgb, #fff 6%, transparent)),
    color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: var(--accent, #3b82f6);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), 0 8px 22px color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent);
}
.cosmetic-open-all.glass-liquid:active {
  transform: scale(0.99);
}


.cosmetic-category-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.cosmetic-category-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--outline, #64748b) 35%, transparent);
  background: color-mix(in srgb, var(--surface-2, #1e293b) 55%, transparent);
  color: var(--text, #e2e8f0);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
}
.cosmetic-category-chip.active {
  border-color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
  color: var(--accent, #3b82f6);
  font-weight: 600;
}

.cosmetic-shop-color-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #94a3b8);
  margin: 4px 0 2px;
}
.cosmetic-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.cosmetic-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--outline, #64748b) 28%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, #fff 8%, transparent),
      color-mix(in srgb, var(--surface, #0f172a) 70%, transparent) 42%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  color: var(--text, #e2e8f0);
  cursor: pointer;
  text-align: center;
  min-width: 0;
  min-height: 168px;
  overflow: visible; /* meme frames overhang (#15961) */
}
.cosmetic-shop-card.active {
  border-color: var(--accent, #3b82f6);
  border-width: 2px;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent),
      color-mix(in srgb, var(--surface, #0f172a) 65%, transparent) 50%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent),
    0 10px 26px rgba(37, 99, 235, 0.22);
}
.cosmetic-shop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.cosmetic-shop-card-head strong {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cosmetic-shop-crown {
  color: #f5c542;
  font-size: 12px;
  flex-shrink: 0;
}
.cosmetic-shop-card .avatar-wrap {
  --avatar-size: 84px;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.cosmetic-shop-plate {
  max-width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
  min-height: 28px;
}

.cosmetic-shop-root { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.cosmetic-none-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.cosmetic-none-row.active {
  border-color: var(--accent, #3b82f6);
  border-width: 2px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
}
.cosmetic-none-row .avatar-wrap { --avatar-size: 44px; width: 44px; height: 44px; }
.cosmetic-section.glass-liquid,
.profile-cosmetic-card.glass-liquid {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, #fff 16%, transparent),
      color-mix(in srgb, var(--surface, #0f172a) 50%, transparent) 55%);
  box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  padding: 12px;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.profile-cosmetics-entry.glass-liquid {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 13px 14px;
  border: 2px solid color-mix(in srgb, var(--brand, #2aabee) 52%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--brand, #2aabee) 24%, transparent),
      color-mix(in srgb, #fff 8%, transparent) 58%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand, #2aabee) 18%, transparent);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.profile-cosmetics-entry.glass-liquid::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, #fff 28%, transparent) 50%, transparent 65%);
  animation: profileCosmeticsShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes profileCosmeticsShimmer {
  0%, 100% { transform: translateX(-30%) rotate(8deg); opacity: 0.35; }
  50% { transform: translateX(35%) rotate(8deg); opacity: 0.85; }
}
.profile-cosmetics-entry .avatar-wrap { --avatar-size: 52px; width: 52px; height: 52px; flex-shrink: 0; }
.profile-cosmetics-entry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.profile-cosmetics-entry-text strong {
  font-size: 1rem;
  color: var(--brand, #2aabee);
}
.profile-cosmetics-entry-text span {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}
.profile-cosmetics-entry-hint {
  font-size: 0.72rem !important;
  opacity: 0.88;
}
.profile-cosmetics-entry-chevron {
  width: 22px;
  height: 22px;
  color: var(--brand, #2aabee);
  flex-shrink: 0;
}
.profile-cosmetics-preview-btn.glass-liquid {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 4px;
  padding: 14px;
  border: 2px solid color-mix(in srgb, #7c5cff 48%, var(--brand, #2aabee) 52%);
  border-radius: 18px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #7c5cff 22%, transparent),
      color-mix(in srgb, var(--brand, #2aabee) 20%, transparent) 45%,
      color-mix(in srgb, #fff 8%, transparent) 70%);
  box-shadow: 0 10px 28px color-mix(in srgb, #7c5cff 16%, transparent);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.profile-cosmetics-preview-btn.glass-liquid::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, #fff 30%, transparent) 50%, transparent 65%);
  animation: profileCosmeticsShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
.profile-cosmetics-preview-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand, #2aabee) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #2aabee) 45%, transparent);
  color: var(--brand, #2aabee);
  flex-shrink: 0;
}
.profile-cosmetics-preview-ico svg { width: 22px; height: 22px; }
.profile-cosmetics-preview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.profile-cosmetics-preview-text strong {
  font-size: 1rem;
  color: var(--brand, #2aabee);
}
.profile-cosmetics-preview-text span {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}
.profile-cosmetics-preview-hint {
  font-size: 0.72rem !important;
  opacity: 0.88;
}
.profile-peer-preview-sheet {
  max-height: min(92vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
.profile-peer-preview-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 52px 10px 16px;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.profile-peer-preview-head strong { font-size: 1.05rem; }
.profile-peer-preview-head span { font-size: 0.78rem; color: var(--muted, #94a3b8); }
.profile-peer-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.profile-peer-preview-host .profile-hero {
  height: min(92vw, 460px);
  min-height: 360px;
  max-height: min(56vh, 460px);
}
.profile-peer-preview-bio {
  padding: 12px 16px 0;
  font-size: 0.9rem;
  color: var(--text, #e2e8f0);
  line-height: 1.45;
}
.profile-peer-preview-music {
  padding: 12px 16px 20px;
}
.profile-style-preview-compact {
  margin-bottom: 8px;
}
.profile-style-preview-compact .profile-style-preview-hint:last-child {
  display: none;
}
.cosmetic-section-head {
  margin-bottom: 10px;
}
.cosmetic-section-head strong {
  font-size: 15px;
  font-weight: 600;
}
.cosmetic-open-all {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
}

/* Moderator panel (support operators) */
.moderator-panel {
  padding: 12px 16px 24px;
}
.moderator-lead {
  margin: 0 0 12px;
  color: var(--muted, #9aa8bc);
  font-size: 14px;
  line-height: 1.45;
}
.moderator-search-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text);
  font-size: 16px;
}
.moderator-results {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moderator-hint {
  margin: 8px 4px;
  color: var(--muted, #9aa8bc);
  font-size: 14px;
}
.moderator-hint.error { color: #ff6b6b; }
.moderator-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.moderator-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.moderator-user-meta strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moderator-user-meta span {
  font-size: 13px;
  color: var(--muted, #9aa8bc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moderator-readonly-bar {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 13px;
  color: var(--muted, #9aa8bc);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* Profile theme song — glass player under avatar (Android ↔ PWA) */
.profile-music-host {
  margin: 0 0 12px;
  padding: 0 4px;
}
.chat-info-music.profile-music-host {
  margin: 4px 12px 10px;
  padding: 0;
}
.profile-music--skeleton {
  min-height: 64px;
  padding: 12px;
}
.profile-music.glass-liquid {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, #fff 14%, transparent),
      color-mix(in srgb, var(--surface, #0f172a) 58%, transparent) 55%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.profile-music--empty .profile-music-play {
  opacity: 0.45;
  box-shadow: none;
}
.profile-music-empty {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #9aa8bc);
}
.btn.btn-glass,
.profile-music-upload.btn-glass {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), color-mix(in srgb, #fff 5%, transparent)),
    color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text, #e2e8f0);
  font-weight: 600;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}
.btn.btn-glass:active,
.profile-music-upload.btn-glass:active {
  transform: scale(0.98);
}
.profile-music.uploading {
  position: relative;
}
.profile-music-upload-overlay.glass-liquid {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 42%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), color-mix(in srgb, #fff 6%, transparent)),
    color-mix(in srgb, var(--accent, #3b82f6) 16%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.profile-music-upload-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent, #3b82f6);
  margin-bottom: 8px;
}
.profile-music-upload-track {
  position: relative;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 28%, transparent);
}
.profile-music-upload-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #3b82f6), color-mix(in srgb, var(--accent, #3b82f6) 55%, #fff));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  transition: width 0.15s ease;
}
.profile-music-upload-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.profile-music {
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-music-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.profile-music-play {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, #3b82f6) 88%, #fff);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
}
.profile-music-play .ico-svg { width: 20px; height: 20px; }
.profile-music-meta {
  flex: 1;
  min-width: 0;
}
.profile-music-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-music-times {
  font-size: 0.78rem;
  color: var(--muted, #9aa8bc);
  margin-top: 2px;
}
.profile-music-seek-wrap { width: 100%; }
.profile-music-seek {
  width: 100%;
  accent-color: var(--accent, #3b82f6);
  height: 4px;
}
.profile-music.expanded .profile-music-seek-wrap { display: block; }
.profile-music:not(.expanded) .profile-music-seek-wrap { display: none; }
.profile-music.playing .profile-music-seek-wrap,
.profile-music.expanded .profile-music-seek-wrap { display: block; }
.profile-music-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-music-edit .btn {
  flex: 1;
  min-width: 120px;
  font-size: 0.85rem;
  padding: 8px 12px;
}
.profile-music-remove {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #fca5a5;
}

/* Qubi 2.0 peer profile (Android parity) */
.profile-qubi2 {
  --qubi2-cyan: #38bdf8;
  --qubi2-glass-bg: rgba(10, 22, 40, 0.88);
  --qubi2-glass-border: rgba(56, 189, 248, 0.38);
}
.chat-info-body.chat-info-qubi2 {
  padding-top: 0;
  gap: 8px;
  background: #060912;
}
.chat-info-qubi2 .info-plate {
  background:
    linear-gradient(165deg, rgba(255,255,255,.1), rgba(10,22,40,.92) 58%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.chat-info-qubi2 .info-plate-row {
  border-bottom-color: rgba(255,255,255,.08);
}
.chat-info-qubi2 .info-plate-row-ico svg {
  color: var(--qubi2-cyan, #38bdf8);
}
.chat-info-qubi2 .info-plate-row-text span {
  color: rgba(255,255,255,.55);
}
.profile-qubi2-host {
  margin: 0 -12px 12px;
}
.profile-qubi2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0 16px 8px;
}
.profile-qubi2-hero {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px 0;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
}
.profile-qubi2-hero-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(var(--safe-top, 0px) + 52px) 16px 16px;
  pointer-events: none;
}
.profile-qubi2-hero-main > * {
  pointer-events: auto;
}
.profile-qubi2-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a1018;
}
.profile-qubi2-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.08);
  transform: scale(1.01);
}
.profile-qubi2-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,6,18,.28) 0%, rgba(0,6,18,.55) 42%, rgba(6,9,18,.92) 78%, #060912 100%);
  pointer-events: none;
}
.profile-qubi2-avatar-wrap.tap { cursor: pointer; }
.profile-qubi2-back { z-index: 3; }
.profile-qubi2-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
  position: relative;
  z-index: 2;
}
.profile-qubi2-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: 0;
}
.profile-qubi2-avatar.avatar-wrap,
.profile-qubi2-avatar-wrap .avatar-wrap {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
  border: 3px solid rgba(56, 189, 248, 0.88);
  background: #0a1018;
  overflow: visible;
}
.profile-qubi2-avatar .avatar,
.profile-qubi2-avatar-wrap .avatar {
  width: 84px !important;
  height: 84px !important;
}
.profile-qubi2-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.profile-qubi2-name,
.profile-qubi2-meta .name-text {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}
.profile-qubi2-status {
  font-size: 0.95rem;
  color: rgba(255,255,255,.78);
}
.profile-qubi2-status.online { color: var(--qubi2-cyan, #38bdf8); }
.profile-qubi2-online {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--qubi2-cyan, #38bdf8);
  border: 2px solid #060912;
}
.profile-qubi2-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.profile-qubi2-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 16px;
  border: 1px solid var(--qubi2-glass-border, rgba(56, 189, 248, 0.42));
  background:
    linear-gradient(165deg, rgba(255,255,255,.14), rgba(10,22,40,.92) 58%);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff;
}
.profile-qubi2-action-ico svg { width: 22px; height: 22px; color: var(--qubi2-cyan, #38bdf8); }
.profile-qubi2-action-label { font-size: 0.75rem; }
.profile-qubi2-music { width: 100%; }
.profile-qubi2-music-card {
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--qubi2-glass-border, rgba(56, 189, 248, 0.38));
  background:
    linear-gradient(165deg, rgba(255,255,255,.12), rgba(10,22,40,.88) 55%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-qubi2-music-skeleton { min-height: 92px; }
.profile-qubi2-skel-line {
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  height: 10px;
}
.profile-qubi2-skel-line--lg { width: 72%; height: 14px; margin-bottom: 6px; }
.profile-qubi2-skel-line--sm { width: 40%; }
.profile-qubi2-skel-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(56,189,248,.35);
  flex-shrink: 0;
}
.profile-qubi2-skel-wave .profile-qubi2-music-bar,
.profile-qubi2-skel-wave::before {
  animation: none !important;
}
.profile-qubi2-skel-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 12px;
}
.profile-qubi2-skel-wave::before {
  content: '';
  display: block;
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: rgba(56,189,248,.2);
  box-shadow: 11px 0 0 rgba(56,189,248,.2), 22px 0 0 rgba(56,189,248,.2);
}
.profile-qubi2-music-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.profile-qubi2-music-cover {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1e3a5f, #0a1628);
}
.profile-qubi2-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-qubi2-music-meta {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.profile-qubi2-music-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-qubi2-music-artist {
  font-size: 0.75rem;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}
.profile-qubi2-music-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--qubi2-cyan, #38bdf8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.profile-qubi2-music-play .ico-svg { width: 20px; height: 20px; }
.profile-qubi2-music-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.profile-qubi2-music-wave {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 16px;
}
.profile-qubi2-music-bar {
  flex: 1;
  border-radius: 2px;
  background: rgba(56, 189, 248, 0.35);
  min-width: 2px;
  transform-origin: bottom center;
}
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar {
  background: rgba(56, 189, 248, 0.85);
  animation: qubi2-wave 0.75s ease-in-out infinite;
}
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(1) { animation-delay: 0s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(2) { animation-delay: .06s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(3) { animation-delay: .12s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(4) { animation-delay: .18s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(5) { animation-delay: .24s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(6) { animation-delay: .3s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(7) { animation-delay: .12s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(8) { animation-delay: .18s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(9) { animation-delay: .24s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(10) { animation-delay: .3s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(11) { animation-delay: .06s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(12) { animation-delay: .12s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(13) { animation-delay: .18s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(14) { animation-delay: .24s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(15) { animation-delay: .3s; }
.profile-qubi2-music-card.playing.is-ready .profile-qubi2-music-bar:nth-child(16) { animation-delay: .36s; }
@keyframes qubi2-wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.profile-qubi2-music-dur {
  font-size: 0.75rem;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
}
.profile-qubi2-glass {
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--qubi2-glass-border, rgba(56, 189, 248, 0.38));
  background:
    linear-gradient(165deg, rgba(255,255,255,.12), rgba(10,22,40,.88) 55%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18);
  text-align: left;
}
.profile-qubi2-bio-title {
  display: block;
  color: var(--qubi2-cyan, #38bdf8);
  margin-bottom: 6px;
}
.profile-qubi2-bio p {
  margin: 0;
  color: rgba(255,255,255,.88);
  line-height: 1.45;
  font-size: 0.9rem;
}
.profile-qubi2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.profile-qubi2-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background:
    linear-gradient(165deg, rgba(255,255,255,.1), rgba(10,22,40,.88) 55%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}
button.profile-qubi2-stat {
  width: 100%;
  text-align: left;
}
.profile-qubi2-stat-ico svg { width: 20px; height: 20px; color: var(--qubi2-cyan, #38bdf8); }
.profile-qubi2-stat-val { font-size: 1.1rem; font-weight: 800; }
.profile-qubi2-stat-lbl { font-size: 0.75rem; color: rgba(255,255,255,.6); margin-left: auto; }
.profile-qubi2-username {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.profile-qubi2-username-ico svg { width: 22px; height: 22px; color: var(--qubi2-cyan, #38bdf8); }
.profile-qubi2-username-hint {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,.55);
}
.profile-layout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-layout-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-align: center;
}
.profile-layout-chip.active {
  border: 2px solid var(--accent, #65aadd);
  background: rgba(59,130,246,.18);
}
.profile-layout-chip strong { font-size: 0.9rem; }
.profile-layout-chip span:last-child { font-size: 0.72rem; color: rgba(255,255,255,.65); }
.profile-layout-chip-preview {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a2330, #0b0f14);
  position: relative;
  overflow: hidden;
}
.profile-layout-chip:not(.qubi20) .profile-layout-chip-preview::before {
  content: 'Q';
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  background: #2a3544;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.profile-layout-chip:not(.qubi20) .profile-layout-chip-preview::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 52px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 0 rgba(255,255,255,.32);
}
.profile-layout-chip.qubi20 .profile-layout-chip-preview {
  height: 88px;
  background: linear-gradient(180deg, #1e3a5f 0%, #243b55 45%, #060912 100%);
}
.profile-layout-chip.qubi20 .profile-layout-chip-preview::before {
  content: '';
  position: absolute;
  left: 10px;
  bottom: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  background: #334155;
  box-shadow: 0 0 10px rgba(56,189,248,.35);
}
.profile-layout-chip.qubi20 .profile-layout-chip-preview::after {
  content: '';
  position: absolute;
  left: 44px;
  bottom: 36px;
  width: 48px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 0 rgba(56,189,248,.55);
}
.profile-layout-chip.qubi20.active {
  border: 2px solid #38bdf8;
  background: rgba(56,189,248,.14);
}
.profile-layout-chip.qubi20 .profile-layout-chip-preview span {
  display: none;
}
.profile-layout-chip-pills {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.profile-layout-chip-pills span {
  display: block !important;
  height: 12px;
  border-radius: 6px;
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(255,255,255,.08);
}
.profile-qubi2-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}
.profile-qubi2-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.profile-qubi2-menu-row + .profile-qubi2-menu-row {
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile-qubi2-menu-row.static { cursor: default; }
.profile-qubi2-menu-ico svg { width: 22px; height: 22px; color: var(--qubi2-cyan, #38bdf8); flex-shrink: 0; }
.profile-qubi2-menu-title { flex: 1; font-size: 0.95rem; color: rgba(255,255,255,.92); }
.profile-qubi2-menu-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qubi2-cyan, #38bdf8);
  flex-shrink: 0;
}
.profile-qubi2-menu-value { font-size: 0.88rem; color: rgba(255,255,255,.55); }
.profile-qubi2-menu-chev svg { width: 18px; height: 18px; color: rgba(255,255,255,.35); }
.profile-qubi2-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.profile-qubi2-status-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 52%;
  font-size: 0.88rem;
  color: rgba(255,255,255,.55);
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
}
.profile-qubi2-status-value .status-emoji-inline {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.profile-qubi2-status-value span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-status-preview-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted, #94a3b8);
  font-size: 0.9rem;
}
.profile-status-preview-line .status-emoji-inline {
  width: 22px;
  height: 22px;
}

.profile-cover-card { margin-top: 10px; }
.profile-cover-preview {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #0a1018;
  border: 1px solid rgba(255,255,255,.12);
  margin: 10px 0 12px;
}
.profile-cover-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.profile-cover-preview-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6,9,18,.82) 100%);
  pointer-events: none;
}
.profile-cover-preview-meta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.profile-cover-preview-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
}
.profile-cover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-cover-actions .btn {
  min-height: 42px;
  border-radius: 14px;
  font-weight: 600;
}
.profile-cover-reset:disabled {
  opacity: 0.45;
}

/* Profile vitrina + themes + Qubi Glass */
.profile-layout-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-layout-chip.qubi-glass .profile-layout-chip-preview {
  height: 88px;
  background: linear-gradient(180deg, rgba(56,189,248,.18) 0%, #0b1220 55%, #060912 100%);
}
.profile-layout-chip.qubi-glass.active {
  border: 2px solid #7dd3fc;
  background: rgba(125,211,252,.12);
}
.profile-theme-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-theme-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-align: left;
}
.profile-theme-chip.active {
  border: 2px solid var(--accent, #65aadd);
  background: rgba(59,130,246,.18);
}
.profile-theme-chip strong { font-size: 0.9rem; }
.profile-theme-chip span:last-child { font-size: 0.72rem; color: rgba(255,255,255,.65); }
.profile-theme-chip-neon { background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(15,23,42,.9)); }
.profile-theme-chip-midnight { background: linear-gradient(135deg, rgba(30,58,138,.35), rgba(2,6,23,.95)); }
.profile-theme-chip-ember { background: linear-gradient(135deg, rgba(251,146,60,.22), rgba(28,15,8,.92)); }
.chat-info-body.profile-theme-neon .info-plate,
.chat-info-body.profile-theme-neon .profile-showcase-block {
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 24px rgba(34,211,238,.08);
}
.chat-info-body.profile-theme-midnight {
  background: linear-gradient(180deg, #060b16 0%, #0a1224 100%);
}
.chat-info-body.profile-theme-ember .info-plate,
.chat-info-body.profile-theme-ember .profile-showcase-block {
  border-color: rgba(251,146,60,.28);
}
.chat-info-qubi-glass .info-plate,
.chat-info-qubi-glass .profile-showcase-block,
.chat-info-qubi-glass .profile-gifts-showcase {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
}
.chat-info-qubi-glass .profile-hero {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}
.profile-showcase-editor-host { margin-top: 12px; }
.profile-showcase-edit-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.profile-showcase-edit-card {
  padding: 12px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-showcase-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.profile-showcase-type,
.profile-showcase-title,
.profile-showcase-body,
.profile-showcase-link {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: 10px 12px;
  font: inherit;
}
.profile-showcase-photo-wrap { display: flex; flex-direction: column; gap: 8px; }
.profile-showcase-photo-thumb {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 12px;
}
.profile-showcase-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.profile-showcase-peer { margin: 12px 0; }
.profile-showcase-peer-title {
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0 4px;
}
.profile-showcase-peer-blocks { display: flex; flex-direction: column; gap: 10px; }
.profile-showcase-block {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.profile-showcase-block img {
  width: 100%;
  border-radius: 12px;
  margin-top: 8px;
  max-height: 220px;
  object-fit: cover;
}
.profile-showcase-block-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.profile-showcase-link-url { font-size: 0.78rem; color: var(--accent, #65aadd); word-break: break-all; }
.profile-gifts-showcase {
  margin: 12px 0;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.profile-gifts-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.profile-gifts-showcase-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.profile-gifts-showcase-item {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--gift-accent, rgba(168,85,247,.45)) 55%, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--gift-accent, rgba(168,85,247,.35)) 18%, rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.profile-gifts-showcase-item.pinned {
  border-color: rgba(251,191,36,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(251,191,36,.25), 0 4px 16px rgba(251,191,36,.12);
}
.profile-gifts-showcase-anim {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
.profile-gifts-showcase-label {
  font-size: 0.68rem;
  line-height: 1.15;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.92;
}
.profile-gifts-showcase-emoji { font-size: 1.6rem; line-height: 1; }
@media (max-width: 520px) {
  .profile-layout-row { grid-template-columns: 1fr; }
}

/* ===== Comic-book frames / plates (category Комиксы) ===== */
.avatar-wrap.frame-comic_boom,
.avatar-wrap.frame-comic_dots,
.avatar-wrap.frame-comic_panel,
.avatar-wrap.frame-comic_hero,
.avatar-wrap.frame-comic_speed,
.avatar-wrap.frame-comic_ink {
  --avatar-ring: 0px;
  --illust-pad: 22%;
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border: none !important;
  width: var(--avatar-size, 50px);
  height: var(--avatar-size, 50px);
  flex: 0 0 auto;
  isolation: isolate;
}
.avatar-wrap.frame-comic_boom::before,
.avatar-wrap.frame-comic_dots::before,
.avatar-wrap.frame-comic_panel::before,
.avatar-wrap.frame-comic_hero::before,
.avatar-wrap.frame-comic_speed::before,
.avatar-wrap.frame-comic_ink::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: calc(-1 * var(--illust-pad, 22%)) !important;
  top: calc(-1 * var(--illust-pad, 22%)) !important;
  width: calc(100% + 2 * var(--illust-pad, 22%)) !important;
  height: calc(100% + 2 * var(--illust-pad, 22%)) !important;
  inset: auto !important;
  border-radius: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  animation: none !important;
  filter: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.avatar-wrap.frame-comic_boom::before { background-image: url('/app/img/cosmetics/frame_comic_boom.png') !important; }
.avatar-wrap.frame-comic_dots::before { background-image: url('/app/img/cosmetics/frame_comic_dots.png') !important; }
.avatar-wrap.frame-comic_panel::before { background-image: url('/app/img/cosmetics/frame_comic_panel.png') !important; }
.avatar-wrap.frame-comic_hero::before { background-image: url('/app/img/cosmetics/frame_comic_hero.png') !important; }
.avatar-wrap.frame-comic_speed::before { background-image: url('/app/img/cosmetics/frame_comic_speed.png') !important; }
.avatar-wrap.frame-comic_ink::before { background-image: url('/app/img/cosmetics/frame_comic_ink.png') !important; }

/* ===== Meme frames — PNG only, NO pulse glow (#15652) ===== */
.avatar-wrap.frame-meme_party,
.avatar-wrap.frame-meme_pasta,
.avatar-wrap.frame-meme_fire,
.avatar-wrap.frame-meme_space,
.avatar-wrap.frame-meme_sweet,
.avatar-wrap.frame-meme_dev,
.avatar-wrap.frame-meme_gamer,
.avatar-wrap.frame-meme_music,
.avatar-wrap.frame-meme_cats,
.avatar-wrap.frame-meme_travel,
.avatar-wrap.frame-meme_food,
.avatar-wrap.frame-meme_net {
  --avatar-ring: 0px;
  /* Frame overhang ≈ (1.42-1)/2 so hole~0.74 matches full-size photo (#16228) */
  --illust-pad: 21%;
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border: none !important;
  width: var(--avatar-size, 50px);
  height: var(--avatar-size, 50px);
  flex: 0 0 auto;
  isolation: isolate;
}
.avatar-wrap.frame-meme_party::before,
.avatar-wrap.frame-meme_pasta::before,
.avatar-wrap.frame-meme_fire::before,
.avatar-wrap.frame-meme_space::before,
.avatar-wrap.frame-meme_sweet::before,
.avatar-wrap.frame-meme_dev::before,
.avatar-wrap.frame-meme_gamer::before,
.avatar-wrap.frame-meme_music::before,
.avatar-wrap.frame-meme_cats::before,
.avatar-wrap.frame-meme_travel::before,
.avatar-wrap.frame-meme_food::before,
.avatar-wrap.frame-meme_net::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: calc(-1 * var(--illust-pad, 21%)) !important;
  top: calc(-1 * var(--illust-pad, 21%)) !important;
  width: calc(100% + 2 * var(--illust-pad, 21%)) !important;
  height: calc(100% + 2 * var(--illust-pad, 21%)) !important;
  inset: auto !important;
  border-radius: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.avatar-wrap.frame-meme_party::before { background-image: url('/app/img/cosmetics/frame_meme_party.png') !important; }
.avatar-wrap.frame-meme_pasta::before { background-image: url('/app/img/cosmetics/frame_meme_pasta.png') !important; }
.avatar-wrap.frame-meme_fire::before { background-image: url('/app/img/cosmetics/frame_meme_fire.png') !important; }
.avatar-wrap.frame-meme_space::before { background-image: url('/app/img/cosmetics/frame_meme_space.png') !important; }
.avatar-wrap.frame-meme_sweet::before { background-image: url('/app/img/cosmetics/frame_meme_sweet.png') !important; }
.avatar-wrap.frame-meme_dev::before { background-image: url('/app/img/cosmetics/frame_meme_dev.png') !important; }
.avatar-wrap.frame-meme_gamer::before { background-image: url('/app/img/cosmetics/frame_meme_gamer.png') !important; }
.avatar-wrap.frame-meme_music::before { background-image: url('/app/img/cosmetics/frame_meme_music.png') !important; }
.avatar-wrap.frame-meme_cats::before { background-image: url('/app/img/cosmetics/frame_meme_cats.png') !important; }
.avatar-wrap.frame-meme_travel::before { background-image: url('/app/img/cosmetics/frame_meme_travel.png') !important; }
.avatar-wrap.frame-meme_food::before { background-image: url('/app/img/cosmetics/frame_meme_food.png') !important; }
.avatar-wrap.frame-meme_net::before { background-image: url('/app/img/cosmetics/frame_meme_net.png') !important; }
.avatar-wrap.frame-meme_party::after,
.avatar-wrap.frame-meme_pasta::after,
.avatar-wrap.frame-meme_fire::after,
.avatar-wrap.frame-meme_space::after,
.avatar-wrap.frame-meme_sweet::after,
.avatar-wrap.frame-meme_dev::after,
.avatar-wrap.frame-meme_gamer::after,
.avatar-wrap.frame-meme_music::after,
.avatar-wrap.frame-meme_cats::after,
.avatar-wrap.frame-meme_travel::after,
.avatar-wrap.frame-meme_food::after,
.avatar-wrap.frame-meme_net::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  filter: none !important;
}
.profile-style-preview-avatar .avatar-wrap.frame-meme_party,
.profile-style-preview-avatar .avatar-wrap.frame-meme_pasta,
.profile-style-preview-avatar .avatar-wrap.frame-meme_fire,
.profile-style-preview-avatar .avatar-wrap.frame-meme_space,
.profile-style-preview-avatar .avatar-wrap.frame-meme_sweet,
.profile-style-preview-avatar .avatar-wrap.frame-meme_dev,
.profile-style-preview-avatar .avatar-wrap.frame-meme_gamer,
.profile-style-preview-avatar .avatar-wrap.frame-meme_music,
.profile-style-preview-avatar .avatar-wrap.frame-meme_cats,
.profile-style-preview-avatar .avatar-wrap.frame-meme_travel,
.profile-style-preview-avatar .avatar-wrap.frame-meme_food,
.profile-style-preview-avatar .avatar-wrap.frame-meme_net,
.cosmetic-shop-card .avatar-wrap.frame-meme_party,
.cosmetic-shop-card .avatar-wrap.frame-meme_pasta,
.cosmetic-shop-card .avatar-wrap.frame-meme_fire,
.cosmetic-shop-card .avatar-wrap.frame-meme_space,
.cosmetic-shop-card .avatar-wrap.frame-meme_sweet,
.cosmetic-shop-card .avatar-wrap.frame-meme_dev,
.cosmetic-shop-card .avatar-wrap.frame-meme_gamer,
.cosmetic-shop-card .avatar-wrap.frame-meme_music,
.cosmetic-shop-card .avatar-wrap.frame-meme_cats,
.cosmetic-shop-card .avatar-wrap.frame-meme_travel,
.cosmetic-shop-card .avatar-wrap.frame-meme_food,
.cosmetic-shop-card .avatar-wrap.frame-meme_net {
  --illust-pad: 21%;
}
.profile-style-preview-avatar .avatar-wrap.frame-meme_party > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_pasta > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_fire > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_space > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_sweet > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_dev > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_gamer > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_music > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_cats > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_travel > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_food > .avatar,
.profile-style-preview-avatar .avatar-wrap.frame-meme_net > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_party > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_pasta > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_fire > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_space > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_sweet > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_dev > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_gamer > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_music > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_cats > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_travel > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_food > .avatar,
.cosmetic-shop-card .avatar-wrap.frame-meme_net > .avatar,
.avatar-wrap.frame-meme_party > .avatar,
.avatar-wrap.frame-meme_pasta > .avatar,
.avatar-wrap.frame-meme_fire > .avatar,
.avatar-wrap.frame-meme_space > .avatar,
.avatar-wrap.frame-meme_sweet > .avatar,
.avatar-wrap.frame-meme_dev > .avatar,
.avatar-wrap.frame-meme_gamer > .avatar,
.avatar-wrap.frame-meme_music > .avatar,
.avatar-wrap.frame-meme_cats > .avatar,
.avatar-wrap.frame-meme_travel > .avatar,
.avatar-wrap.frame-meme_food > .avatar,
.avatar-wrap.frame-meme_net > .avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  justify-self: center;
  align-self: center;
}

.avatar-wrap.frame-comic_boom::after,
.avatar-wrap.frame-comic_dots::after,
.avatar-wrap.frame-comic_panel::after,
.avatar-wrap.frame-comic_hero::after,
.avatar-wrap.frame-comic_speed::after,
.avatar-wrap.frame-comic_ink::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px + 0.5px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px + 0.5px)) !important;
  animation: avatar-frame-pulse 1.7s ease-in-out infinite !important;
}
.avatar-wrap.frame-comic_boom::after {
  background: conic-gradient(from 0deg, #ffd60a, #dc1e28, #ffd60a) !important;
  filter: drop-shadow(0 0 6px rgba(220, 30, 40, 0.65)) !important;
}
.avatar-wrap.frame-comic_dots::after {
  background: conic-gradient(from 0deg, #ffd60a, #1a1a1a, #ffd60a) !important;
  filter: drop-shadow(0 0 5px rgba(255, 214, 10, 0.55)) !important;
}
.avatar-wrap.frame-comic_panel::after {
  background: conic-gradient(from 0deg, #28b4ff, #ff3250, #28b4ff) !important;
  filter: drop-shadow(0 0 6px rgba(40, 180, 255, 0.55)) !important;
}
.avatar-wrap.frame-comic_hero::after {
  background: conic-gradient(from 0deg, #c81024, #143caa, #ffdc28, #c81024) !important;
  filter: drop-shadow(0 0 6px rgba(200, 16, 36, 0.6)) !important;
}
.avatar-wrap.frame-comic_speed::after {
  background: conic-gradient(from 0deg, #ffe628, #ff5028, #50c8ff, #ffe628) !important;
  animation: avatar-frame-chase 1.4s linear infinite !important;
  filter: drop-shadow(0 0 5px rgba(255, 230, 40, 0.55)) !important;
}
.avatar-wrap.frame-comic_ink::after {
  background: conic-gradient(from 0deg, #fff8e6, #141414, #00c8ff, #fff8e6) !important;
  filter: drop-shadow(0 0 5px rgba(0, 200, 255, 0.4)) !important;
}
.avatar-wrap.frame-comic_boom > .avatar,
.avatar-wrap.frame-comic_dots > .avatar,
.avatar-wrap.frame-comic_panel > .avatar,
.avatar-wrap.frame-comic_hero > .avatar,
.avatar-wrap.frame-comic_speed > .avatar,
.avatar-wrap.frame-comic_ink > .avatar {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  margin: 0 auto !important;
  place-self: center;
  border: none !important;
  box-shadow: none !important;
}
.avatar-frame-pick .avatar-wrap.frame-comic_boom::after,
.avatar-frame-pick .avatar-wrap.frame-comic_dots::after,
.avatar-frame-pick .avatar-wrap.frame-comic_panel::after,
.avatar-frame-pick .avatar-wrap.frame-comic_hero::after,
.avatar-frame-pick .avatar-wrap.frame-comic_speed::after,
.avatar-frame-pick .avatar-wrap.frame-comic_ink::after {
  /* match live motion in picker (#14651) */
  opacity: 1;
}

.name-plate-comic_boom,
.name-plate-comic_dots,
.name-plate-comic_panel,
.name-plate-comic_hero,
.name-plate-comic_speed,
.name-plate-comic_ink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.35em 1.1em;
  min-height: 1.85em;
}
.name-plate-comic_boom { background-image: url('/app/img/cosmetics/plate_comic_boom.png'); color: #7f1d1d !important; }
.name-plate-comic_dots { background-image: url('/app/img/cosmetics/plate_comic_dots.png'); color: #1a1a1a !important; }
.name-plate-comic_panel { background-image: url('/app/img/cosmetics/plate_comic_panel.png'); color: #0c4a6e !important; }
.name-plate-comic_hero { background-image: url('/app/img/cosmetics/plate_comic_hero.png'); color: #fff7ed !important; }
.name-plate-comic_speed { background-image: url('/app/img/cosmetics/plate_comic_speed.png'); color: #ffe628 !important; }
.name-plate-comic_ink { background-image: url('/app/img/cosmetics/plate_comic_ink.png'); color: #1a1a1a !important; }
.name-plate-comic_boom::before,
.name-plate-comic_dots::before,
.name-plate-comic_panel::before,
.name-plate-comic_hero::before,
.name-plate-comic_speed::before,
.name-plate-comic_ink::before,
.name-plate-comic_boom::after,
.name-plate-comic_dots::after,
.name-plate-comic_panel::after,
.name-plate-comic_hero::after,
.name-plate-comic_speed::after,
.name-plate-comic_ink::after {
  content: none !important;
  display: none !important;
}