/* ============================================================
   Zallixor — ui.css
   Visual refresh layer. Loads AFTER style.css / gifts.css /
   market.css / programs.css and re-tunes the surface only:
   colour, type, spacing, chrome, motion.

   It changes no markup contract and no behaviour. Every rule
   here targets a class the app already renders, so removing
   this file returns the app to its previous look exactly.

   Direction — "Obsidian & Signal":
     · Near-black base so photos and video are the only light
       in the frame (the old ink-navy tinted every thumbnail).
     · Borders become white alphas, which resolve as true 1px
       hairlines at any pixel density instead of muddy navy.
     · Chrome goes flat and quiet. Glow is spent in exactly two
       places — the create button and a liked heart.
     · Counts are tabular so they don't jitter as they tick up.
   ============================================================ */

/* ── 1. Tokens ───────────────────────────────────────────── */

:root {
  --bg:        #05070c;
  --bg-2:      #02040a;
  --panel:     #0e131d;
  --panel-2:   #151b28;
  --panel-3:   #1e2637;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.13);
  --text:      #f5f7fb;
  --muted:     #98a2b8;
  --muted-2:   #6b7488;
  --accent-a:  #7c5cff;
  --accent-b:  #22d3ee;
  --accent-soft: rgba(124,92,255,.16);
  --hot:       #ff3b6b;               /* likes, hearts, live   */
  --danger:    #ff4f6b;
  --ok:        #2ee6a8;
  --amber:     #fbbf3c;

  /* Chrome on glass: the exact fill used by the top bar, the
     bottom nav and every floating overlay pill. */
  --glass:     rgba(8,11,18,.72);
  --glass-2:   rgba(8,11,18,.55);
  --on-glass:  #ffffff;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 24px;

  --shadow:    0 20px 50px -12px rgba(0,0,0,.72);
  --shadow-nav: 0 -1px 0 rgba(255,255,255,.05);
  --glow:      0 6px 20px rgba(124,92,255,.30);

  --nav-h:     60px;
  --top-h:     54px;

  --dur-fast:  .12s;
  --dur-med:   .2s;
  --dur-slow:  .34s;
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

:root[data-theme="light"] {
  --bg:        #ffffff;
  --bg-2:      #f5f6f9;
  --panel:     #ffffff;
  --panel-2:   #f2f4f8;
  --panel-3:   #e7eaf1;
  --line:      rgba(10,14,24,.09);
  --line-2:    rgba(10,14,24,.16);
  --text:      #0b0e17;
  --muted:     #5c6478;
  --muted-2:   #8d95a8;
  --accent-soft: rgba(124,92,255,.12);
  --glass:     rgba(255,255,255,.82);
  --glass-2:   rgba(255,255,255,.66);
  --on-glass:  #0b0e17;
  --shadow:    0 20px 50px -14px rgba(16,22,40,.18);
  --shadow-nav: 0 -1px 0 rgba(10,14,24,.06);
}

/* The aurora wash was strong enough to read as a purple haze over
   the whole top of the app. Kept, but at a level you notice only
   when you look for it. */
:root {
  --aurora: radial-gradient(ellipse at 22% -10%, rgba(124,92,255,.13), transparent 60%),
            radial-gradient(ellipse at 88% 0%,  rgba(34,211,238,.07), transparent 55%);
}
:root[data-theme="light"] {
  --aurora: radial-gradient(ellipse at 22% -10%, rgba(124,92,255,.07), transparent 60%),
            radial-gradient(ellipse at 88% 0%,  rgba(34,211,238,.05), transparent 55%);
}

/* ── 2. Base + type ──────────────────────────────────────── */

body {
  font-size: 15px;
  line-height: 1.48;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h2 { letter-spacing: -.032em; font-weight: 700; }
h3 { letter-spacing: -.024em; font-weight: 650; }
h4 { letter-spacing: .085em; font-size: .72rem; color: var(--muted-2); }

.small { font-size: .795rem; letter-spacing: -.002em; }
.muted { color: var(--muted); }

/* Every number in the product — like counts, follower counts, coin
   balances, timers — sits on a fixed-width figure so it can't shuffle
   its neighbours when it changes. */
.react-summary, .post-summary, .reel-rail-label, .nav-badge, .bell-badge,
.points-bar, .count, .trend-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Names carry the weight; handles and timestamps recede. This split is
   what makes a feed scan quickly. */
.name-row { font-weight: 650; letter-spacing: -.017em; }
.name-row.big { font-weight: 720; letter-spacing: -.028em; }

a { color: var(--accent-b); }

/* Keyboard focus was invisible against the dark panels. */
:focus-visible {
  outline: 2px solid var(--accent-b);
  outline-offset: 2px;
  border-radius: 8px;
}
.btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible {
  outline-offset: 3px;
}

/* ── 3. Top bar ──────────────────────────────────────────── */

.topbar {
  height: calc(var(--top-h) + var(--safe-top));
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  padding-left: 14px;
  padding-right: 6px;
}
.wordmark { letter-spacing: -.045em; font-weight: 700; }
.wordmark.sm { font-size: 1.22rem; }

/* Six actions in one row needs even rhythm more than it needs size.
   Uniform 36px targets, uniform 20px glyphs, 2px between. */
.topbar-right { gap: 2px; }
.topbar-right .icon-btn { width: 36px; height: 36px; border-radius: 12px; }
.icon-btn { color: var(--text); transition: background var(--dur-fast), transform var(--dur-fast); }
.icon-btn svg { width: 21px; height: 21px; stroke-width: 1.9; }
.icon-btn:active { background: var(--panel-2); transform: scale(.92); }
.icon-btn.tb { background: var(--panel-2); border: 1px solid var(--line); }

/* Unread markers: a small solid pip, not a bordered chip. */
.bell-badge, .nav-badge {
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--hot); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 1;
  border-radius: 999px; border: 2px solid var(--bg);
  box-shadow: none;
}
.bell-badge { top: 2px; right: 2px; }

/* ── 4. Bottom nav — flush bar + the create button ───────── */

/* The floating pill read as a component sitting on the app rather
   than part of it. Every phone-native social app anchors this bar to
   the bottom edge, which also gives the feed ~14px more height. */
.bottom-nav {
  left: 0; right: 0; bottom: 0;
  transform: none;
  width: 100%; max-width: none;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding: 0 max(6px, calc((100vw - var(--maxw)) / 2)) var(--safe-bottom);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.nav-item {
  gap: 3px; padding: 4px 0 3px;
  color: var(--muted-2);
  transition: color var(--dur-med) var(--ease-out);
}
.nav-item .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.9; }
/* Labels are back on. With six destinations the icons alone were
   guesswork — "Explore" and "Watch" both read as generic shapes. */
.nav-item .nav-label {
  display: block;
  font-size: .61rem; font-weight: 600; letter-spacing: .004em;
  line-height: 1; opacity: .95;
}
.nav-item.active { color: var(--text); }
.nav-item.active .nav-icon { transform: none; }
.nav-item.active .nav-icon svg { stroke-width: 2.4; }
.nav-item.active .nav-label { font-weight: 700; }
/* The glowing dot fought the labels for the same 4px of space. */
.nav-item.active::after { display: none; }
.nav-item:active .nav-icon { transform: scale(.88); }
.nav-item .nav-icon { transition: transform var(--dur-fast) var(--ease-spring); }

/* ── Signature: the create button ──
   Two chroma slabs — brand violet and brand cyan — offset behind a
   solid core, so the plus reads as slightly out of register. It is
   the one loud object in the shell, and it points at the thing this
   whole product runs on: someone making something. Press pushes the
   slabs further apart, then they snap back. */
/* ── Signature: the create button ──
   The one gradient fill anywhere in the chrome, running the same
   violet→cyan axis as the wordmark, the story rings and avatar
   fallbacks. Because nothing else in the shell is filled with a
   gradient, this button carries the emphasis on its own — no glow,
   no outline, no raised pedestal needed.

   The fullwidth ＋ in the markup is a thin glyph that reads soft at
   this size, so the button hides it and draws a crisp plus instead.
   The button keeps its aria-label, so nothing changes for a screen
   reader. */
.nav-create {
  position: relative;
  flex: 0 0 44px;
  width: 44px; height: 34px;
  margin-top: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #8b6cff 0%, #6d5cff 45%, #22d3ee 100%);
  color: #fff;
  box-shadow: none;
  display: grid; place-items: center;
  font-size: 0;
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast);
}
.nav-create::before {
  content: "+";
  font-family: "Inter", system-ui, sans-serif;
  font-size: 23px; font-weight: 500; line-height: 1;
}
.nav-create:active { transform: scale(.92); filter: brightness(1.1); }

/* "Create" is one object across the app: the composer's pen button
   carries the same gradient so the action is recognisable wherever
   it appears. */
.composer-pen {
  background: linear-gradient(135deg, #8b6cff 0%, #6d5cff 45%, #22d3ee 100%);
  box-shadow: none;
}

/* ── 5. Buttons, chips, fields ───────────────────────────── */

/* Primary buttons had the violet glow on every instance, which made
   nothing look important because everything did. Flat fill now; the
   glow is reserved for the create button and a liked heart. */
.btn {
  border-radius: 12px; padding: 11px 16px;
  font-weight: 650; font-size: .9rem; letter-spacing: -.008em;
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast), background var(--dur-fast);
}
.btn:active { transform: scale(.965); }
.btn-primary { background: var(--accent-a); color: #fff; box-shadow: none; }
.btn-primary:active { filter: brightness(1.12); }
.btn-ghost { background: var(--panel-2); border: 1px solid var(--line); }
.btn-danger { background: rgba(255,79,107,.12); color: var(--danger); border: 1px solid rgba(255,79,107,.26); }
.btn-sm { padding: 7px 14px; font-size: .8rem; border-radius: 999px; }
.btn-google { border-radius: 12px; font-weight: 650; }

.chip {
  border-radius: 999px; padding: 7px 14px;
  font-size: .82rem; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.chip.active { background: var(--text); color: var(--bg); border-color: transparent; font-weight: 700; }

.seg {
  border-radius: 12px; font-weight: 650; font-size: .86rem;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.seg.active { background: var(--text); color: var(--bg); border-color: transparent; }

.field input, .field-input, .search-input, .comment-input, .chat-input, textarea, select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .94rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.field input:focus, .field-input:focus, textarea:focus, select:focus, .search-input:focus {
  border-color: var(--accent-a);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--panel);
}
.field label { font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); }

.composer { border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.composer-pen { border-radius: 14px; }
.composer-btn { font-size: .8rem; font-weight: 650; border-radius: 10px; }

/* ── 6. Stories ──────────────────────────────────────────── */

.stories-row { gap: 14px; padding: 4px 2px 2px; }
.story-tile { width: 68px; gap: 7px; }
/* A conic sweep starting at the brand violet — it reads as a ring
   rather than the diagonal wash a linear gradient gives, and the
   seam lands at the bottom where the avatar's shadow hides it. */
.story-ring {
  padding: 2.5px;
  background: conic-gradient(from 200deg,
    #7c5cff 0deg, #22d3ee 95deg, #2ee6a8 160deg,
    #fbbf3c 235deg, #ff3b6b 300deg, #7c5cff 360deg);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.story-tile:active .story-ring { transform: scale(.93); }
.story-ring .avatar { border: 2.5px solid var(--bg); }
/* Seen stories keep the ring's shape but drop all colour, so "new"
   is legible at a glance without reading names. */
.story-tile.seen .story-ring { background: var(--line-2); }
.story-name { font-size: .69rem; font-weight: 550; max-width: 68px; color: var(--muted); }
.story-tile:not(.seen) .story-name { color: var(--text); font-weight: 600; }
.story-tile.add .story-add-plus {
  width: 21px; height: 21px; bottom: 21px; right: 5px;
  background: var(--accent-a); border: 2.5px solid var(--bg); font-weight: 700;
}

/* Story viewer: progress bars sharpened to hairlines. */
.story-bar { background: rgba(255,255,255,.28); height: 2.5px; border-radius: 999px; overflow: hidden; }
.story-bar i { background: #fff; }

/* ── 7. Feed ─────────────────────────────────────────────── */

.feed { gap: 8px; }

.post-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px 8px;
}

/* On a phone the card frame is pure overhead: it steals 30px of width
   from every photo to draw a line the eye already infers from the gap.
   Below 700px the feed runs edge to edge and posts are divided by a
   single hairline. */
@media (max-width: 700px) {
  .feed { gap: 0; }
  .feed > .post-card {
    margin-inline: -14px;
    border-radius: 0;
    border-left: 0; border-right: 0; border-top: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 14px 6px;
  }
  /* Media inside a full-bleed card goes full-bleed too. */
  .feed > .post-card > .post-media-wrap {
    margin-inline: -14px;
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
}

.post-head { gap: 11px; align-items: center; }
.post-head-meta .muted.small { font-size: .755rem; letter-spacing: 0; color: var(--muted-2); }
.post-menu { color: var(--muted); }

.post-body { margin: 9px 0 10px; font-size: .945rem; line-height: 1.5; }
.hashtag, .mention { color: var(--accent-b); font-weight: 600; }

.post-media-wrap {
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 4px 0 2px;
  background: var(--bg-2);
}
.post-media { max-height: 560px; }

/* IG's most-copied detail: the like count as bold body text, not a
   caption. It's the social proof, so it gets the weight. */
.post-summary {
  padding: 9px 1px 8px;
  font-size: .82rem;
  border-bottom: 1px solid var(--line);
}
.react-summary { font-weight: 700; color: var(--text); gap: 5px; align-items: center; }
.react-summary.tappable { cursor: pointer; }
.post-summary .muted.small { font-weight: 550; }

.post-actions { gap: 0; padding-top: 2px; }
.post-action {
  font-size: .795rem; font-weight: 650; letter-spacing: -.005em;
  padding: 10px 4px; border-radius: 10px; color: var(--muted);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.post-action .icon.inline { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.post-action:active { transform: scale(.93); background: transparent; }
.post-action.active { color: var(--accent-b); }
.react-btn.active { color: var(--hot); }

.react-picker {
  border-radius: 999px; padding: 6px 8px;
  background: var(--panel-3); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.react-opt { transition: transform var(--dur-fast) var(--ease-spring); }

.post-card.sponsored { border-color: rgba(251,191,60,.24); }
.pinned-tag { color: var(--amber); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ── 8. Comments ─────────────────────────────────────────── */

.comment-thread { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.comment-bubble { background: var(--panel-2); border-radius: 14px; padding: 8px 12px 9px; }
.comment-author { font-weight: 650; font-size: .8rem; }
.comment-text { font-size: .89rem; line-height: 1.45; }
.comment-meta { font-size: .74rem; gap: 12px; color: var(--muted-2); margin-top: 5px; }
.comment-input { border-radius: 999px; padding-inline: 15px; }

/* ── 9. Zall Clips ───────────────────────────────────────── */

.reels-screen { bottom: calc(var(--nav-h) + var(--safe-bottom)); background: #000; }

/* The Live / Zall Clips switcher was rendered behind the fixed reels
   surface, so on the Clips tab there was no visible way back to Live.
   It now floats over the video as a glass pill — which is also where
   a viewer expects to find it. */
.watch-tabs {
  position: fixed;
  top: calc(var(--top-h) + var(--safe-top) + 10px);
  left: 50%; transform: translateX(-50%);
  z-index: 14;
  width: auto; padding: 3px; gap: 2px;
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.watch-tabs .seg {
  flex: 0 0 auto;
  padding: 6px 15px;
  border: 0; background: transparent;
  color: rgba(255,255,255,.72);
  border-radius: 999px; font-size: .82rem; font-weight: 650;
}
.watch-tabs .seg.active { background: #fff; color: #05070c; font-weight: 700; }
/* Live tab content scrolls under the floating pill — give it room. */
.watch-body { padding-top: 50px; }

/* Legibility scrims. Without these, white overlay text disappears the
   moment a clip cuts to a bright frame. Two gradients, no boxes. */
.reel::before, .reel::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 2;
}
.reel::before { top: 0; height: 130px; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
.reel::after  { bottom: 0; height: 260px; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.22) 42%, transparent); }
.reel-empty::before, .reel-empty::after { display: none; }

/* Action rail: the boxed, bordered buttons made a video look like a
   toolbar. Glyph and count only, sitting directly on the footage. */
.reel-rail { right: 6px; bottom: 86px; gap: 15px; }
.reel-rail-btn {
  background: transparent; border: 0; backdrop-filter: none;
  width: 46px; padding: 0; gap: 4px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform var(--dur-fast) var(--ease-spring);
}
.reel-rail-btn .icon { width: 27px; height: 27px; stroke-width: 1.9; }
.reel-rail-btn:active { transform: scale(.85); }
.reel-rail-label {
  font-size: .655rem; font-weight: 650; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.reel-rail-btn.liked {
  color: var(--hot); border: 0; box-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(255,59,107,.55));
}
.reel-rail-btn.liked .icon { fill: var(--hot); stroke: var(--hot); }
/* A like should feel like it landed. */
.reel-rail-btn.liked .icon { animation: likePop .34s var(--ease-spring); }
@keyframes likePop { 0% { transform: scale(.7); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }

.reel-heart-burst .icon { fill: var(--hot); filter: drop-shadow(0 8px 30px rgba(255,59,107,.6)); }

/* Caption block: name loud, handle quiet, caption clamped to two
   lines so it never creeps up the frame. */
.reel-meta { left: 14px; right: 62px; bottom: 16px; gap: 9px; text-shadow: none; }
.reel-author-name { font-size: 1rem; font-weight: 720; letter-spacing: -.02em; }
.reel-meta .muted.small { color: rgba(255,255,255,.66); font-size: .74rem; }
.reel-desc {
  font-size: .87rem; line-height: 1.4; color: rgba(255,255,255,.94);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: none;
}
.reel-follow { border-radius: 999px; padding: 6px 15px; font-size: .78rem; }

/* Music row: a real pill with a disc that turns while the clip runs. */
.reel-music {
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: .755rem; font-weight: 550;
  padding: 5px 13px 5px 7px; gap: 7px;
}
.reel-music-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  display: grid; place-items: center; flex: 0 0 auto;
  animation: discSpin 4s linear infinite;
}
.reel-music-icon .icon { width: 11px; height: 11px; color: #fff; }
@keyframes discSpin { to { transform: rotate(360deg); } }
.reel-music-title { max-width: 190px; }

.reel-progress { height: 2.5px; background: rgba(255,255,255,.16); }
.reel-progress-fill { background: #fff; box-shadow: none; }

.reels-create-btn {
  top: 10px; left: 12px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--glass-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  z-index: 15;
}
/* Clear of the floating Live / Zall Clips pill, which sits in the same
   horizontal band as the top-right watermark. */
.reel-watermark { top: 54px; }
.reel-watermark-app { letter-spacing: -.02em; }

.reel-comments-sheet { border-radius: 20px 20px 0 0; border-top: 1px solid var(--line-2); }

/* ── 10. Profile ─────────────────────────────────────────── */

.profile-cover { height: 176px; }
.profile-avatar-wrap {
  padding: 3px;
  background: conic-gradient(from 200deg, #7c5cff, #22d3ee 130deg, #7c5cff 360deg);
}
.profile-avatar-wrap .avatar { border: 3px solid var(--bg); }
.profile-head { gap: 14px; margin-top: -46px; }
.profile-bio { font-size: .92rem; line-height: 1.5; }

.profile-tabs {
  gap: 0; padding: 0 6px;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.ptab {
  padding: 13px 13px;
  font-size: .845rem; font-weight: 650; letter-spacing: -.012em;
  color: var(--muted-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
/* Active tab underlines in text colour, not accent — the accent line
   read as a second brand element competing with the create button. */
.ptab.active { color: var(--text); border-bottom-color: var(--text); }

/* ── 11. Messages ────────────────────────────────────────── */

.conv-list { gap: 0; }
.conv-row { padding: 10px 12px; border-radius: 14px; gap: 13px; }
.conv-row:active { background: var(--panel-2); }
.conv-top .name-row { font-weight: 600; font-size: .95rem; }
.conv-row.conv-unread .conv-top .name-row { font-weight: 750; }
.conv-preview .muted { font-size: .84rem; color: var(--muted); }
.conv-row.conv-unread .conv-preview .muted:first-of-type { color: var(--text); font-weight: 600; }
.conv-top .muted.small { font-size: .725rem; color: var(--muted-2); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.unread-badge {
  background: var(--accent-a); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 1;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
}
.conv-section-label { font-size: .68rem; letter-spacing: .1em; color: var(--muted-2); }

.chat-header {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.chat-name { font-weight: 650; letter-spacing: -.015em; }
.chat-messages { gap: 2px; padding: 14px 12px; }
.chat-composer { border-top: 1px solid var(--line); background: var(--glass); }
.chat-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.chat-pill .icon-btn { color: var(--accent-b); }
.typing-indicator { background: var(--panel-2); border: 1px solid var(--line); }

/* ── 12. Overlays: sheets, modals, toasts ────────────────── */

.sheet-overlay, .create-sheet-overlay, .modal-overlay {
  background: rgba(2,4,9,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sheet, .create-sheet {
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: sheetUp var(--dur-slow) var(--ease-out);
}
.create-sheet-handle { background: var(--line-2); width: 36px; height: 4px; }
.create-sheet-title { font-size: 1.1rem; letter-spacing: -.025em; }
.create-opt { border-radius: 14px; transition: background var(--dur-fast); }
.create-opt:active { background: var(--panel-2); }
.create-opt-title { font-weight: 650; }
.create-opt-sub { font-size: .78rem; color: var(--muted); }
.sheet-item { font-weight: 550; border-radius: 12px; }

.modal {
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.toast {
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--shadow);
}
.toast-error { background: #2a121c; border-color: rgba(255,79,107,.4); }
.refresh-hint {
  background: var(--text); color: var(--bg);
  font-weight: 700; font-size: .76rem; box-shadow: var(--shadow);
}

/* ── 13. Loading + empty states ──────────────────────────── */

.skel-block { background: var(--panel-2); }
.empty-state { padding: 52px 24px; gap: 10px; }
.empty-icon { opacity: .45; }
.empty-icon .icon { width: 36px; height: 36px; }
.empty-state h3 { font-size: 1.02rem; }
.empty-state p { font-size: .875rem; color: var(--muted); max-width: 30ch; }

.boot-logo { filter: drop-shadow(0 10px 28px rgba(124,92,255,.4)); }
.boot-word { letter-spacing: -.045em; }
.boot-spinner { border-color: var(--line-2); border-top-color: var(--accent-a); }

/* ── 14. Avatars ─────────────────────────────────────────── */

.avatar { background: var(--panel-2); }
.avatar-fallback { background: linear-gradient(140deg, var(--accent-a), var(--accent-b)); letter-spacing: -.02em; }

/* ── 15. Wider screens ───────────────────────────────────── */

@media (min-width: 701px) {
  .post-card { border-radius: var(--radius); }
  .feed { gap: 12px; }
  .icon-btn:hover { background: var(--panel-2); }
  .post-action:hover { color: var(--text); }
  .conv-row:hover { background: var(--panel-2); }
  .nav-item:hover { color: var(--text); }
}

/* ── 16. Motion preferences ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boot-logo { animation: none; }
  .reel-music-icon { animation: none; }
}

/* ── 17. Refinements from visual review ─────────────────── */

/* Home stacks greeting + composer + stories + trending before the first
   post. Tightening the rhythm buys roughly one more post above the fold
   without removing anything from the page. */
.page { padding: 12px 14px; gap: 12px; }
.greeting h2 { font-size: 1.3rem; line-height: 1.22; }
.greeting-name { font-weight: 750; }
.points-bar { font-size: .8rem; padding: 5px 11px; }
.composer { padding: 13px 14px; }
.composer-actions { margin-top: 11px; padding-top: 11px; }
.trending-label { font-size: .84rem; }
.trend-chip { padding: 8px 13px; border-radius: 14px; min-width: 108px; }
.trend-tag { font-size: .84rem; }
.trend-count { font-size: .69rem; color: var(--muted-2); }

/* The Live / Zall Clips pill was wide enough to collide with the
   watermark in the opposite corner. Text alone identifies both tabs. */
.watch-tabs .seg .icon { display: none; }
.watch-tabs .seg { padding: 6px 18px; }

/* Rail labels were sitting flush against the screen edge. */
.reel-rail { right: 8px; gap: 14px; }

/* Cyan at full brightness fails contrast on a white background. Link
   and hashtag colour darkens in light mode; the accent itself, which is
   only ever used as a fill behind white text, stays as it is. */
:root[data-theme="light"] a,
:root[data-theme="light"] .hashtag,
:root[data-theme="light"] .mention,
:root[data-theme="light"] .link-inline,
:root[data-theme="light"] .post-action.active,
:root[data-theme="light"] .cm-react-btn.active { color: #0b8ea8; }
:root[data-theme="light"] .chat-pill .icon-btn { color: #0b8ea8; }

/* The action row relied on inline layout, so "Comment" broke onto a
   second line under its own icon on narrow phones and knocked the whole
   row out of alignment. Each action is now a centred flex row that
   never wraps. */
.post-action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; white-space: nowrap; font-size: .775rem;
  min-width: 0;
}
.post-action .icon.inline {
  width: 16px; height: 16px;
  margin-right: 0; vertical-align: 0; flex: 0 0 auto;
}
@media (max-width: 360px) {
  .post-action { font-size: .715rem; gap: 4px; padding-inline: 2px; }
  .post-action .icon.inline { width: 15px; height: 15px; }
}

/* Six top-bar actions plus the wordmark do not fit a 320px screen at
   full size. style.css already shrank them there; this restores that
   fallback, which the sizing above would otherwise have cancelled. */
@media (max-width: 380px) {
  .topbar { padding-left: 10px; padding-right: 2px; }
  .topbar-left { gap: 6px; }
  .topbar .wordmark.sm { font-size: 1.02rem; }
  .topbar-right { gap: 0; }
  .topbar-right .icon-btn { width: 31px; height: 31px; border-radius: 10px; }
  .topbar-right .icon-btn svg { width: 18px; height: 18px; }
  .nav-item .nav-label { font-size: .585rem; }
}

/* ── 18. Profile QR code ───────────────────────────────────
   Entry point on Explore, the sheet itself, and the scan result. */

/* ── The sheet ── */
.qr-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2,4,9,.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
}
.qr-sheet {
  width: 100%; max-width: var(--maxw);
  background: var(--panel);
  border-top: 1px solid var(--line-2);
  border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(20px + var(--safe-bottom));
  max-height: 94dvh; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: sheetUp var(--dur-slow) var(--ease-out);
}
.qr-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.qr-tabs {
  flex: 1; display: flex; gap: 2px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px;
}
.qr-tab {
  flex: 1; padding: 8px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: .85rem; font-weight: 650; letter-spacing: -.01em;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.qr-tab.active { background: var(--text); color: var(--bg); font-weight: 700; }
.qr-close { flex: 0 0 auto; }

/* ── "My code" card ── */
.qr-card {
  background: linear-gradient(160deg, rgba(124,92,255,.16), rgba(34,211,238,.10)), var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.qr-person { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.qr-person-name {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 720;
  letter-spacing: -.025em; display: inline-flex; align-items: center; gap: 5px;
}
.qr-person-handle { font-size: .85rem; color: var(--muted); }
/* The code sits on white regardless of theme: inverted QR codes are read
   by fewer scanners, and a white field is what a camera expects. */
.qr-frame {
  background: #fff; border-radius: 20px; padding: 14px;
  width: 100%; max-width: 300px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.qr-canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.qr-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 34ch; }
.qr-actions { display: flex; gap: 10px; margin-top: 14px; }
.qr-actions .btn { flex: 1; }
.qr-privacy { display: block; margin: 12px 2px 0; text-align: center; line-height: 1.45; }

/* ── Scanner ── */
.qr-scan-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  max-height: 62dvh; margin: 0 auto;
  background: #000; border-radius: var(--radius-lg); overflow: hidden;
}
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Corner brackets rather than a full frame — they mark the target area
   without hiding any of the code the camera is trying to read. */
.qr-reticle { position: absolute; inset: 16%; pointer-events: none; }
.qr-reticle::before, .qr-reticle::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  border: 3px solid #fff; border-radius: 6px;
}
.qr-reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.qr-reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.qr-scan-stage + .qr-hint { margin-top: 14px; }

/* ── Scan result ── */
.qr-result {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 26px 20px 20px; max-width: 340px;
}
.qr-result-name {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 720;
  letter-spacing: -.025em; display: inline-flex; align-items: center; gap: 5px;
}
.qr-result-bio { margin: 4px 0 6px; line-height: 1.45; }
.qr-result .btn { width: 100%; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { .qr-sheet { animation: none; } }

/* ── 19. Explore ───────────────────────────────────────────
   The tab was ten stacked boxes of equal weight — a scroll of cards
   rather than a place to discover anything. It now has one hero (the
   mosaic), rails instead of stacks for topics and creators, and a
   header that stays put so you can always see what you're filtering by. */

.page-discover { padding-top: 0; gap: 22px; }
/* .page sets overflow-x:hidden, which silently makes the element a scroll
   container: position:sticky inside then resolves against .page's own
   scrollport instead of the viewport, so the header both refused to stick
   and sat 54px too low. body already clips horizontal overflow, so this
   element doesn't need to. */
.page-discover { overflow: visible; }

/* ── Sticky header ── */
.exp-head {
  position: sticky;
  top: calc(var(--top-h) + var(--safe-top));
  z-index: 12;
  margin: 0 -14px;
  padding: 12px 14px 10px;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 11px;
}
.exp-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exp-head-top h2 { font-size: 1.5rem; letter-spacing: -.038em; }

.exp-search-row { display: flex; gap: 8px; align-items: stretch; }
.disc-search {
  flex: 1; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 16px; gap: 9px;
  color: var(--muted);
}
.disc-search .icon { width: 18px; height: 18px; }
.disc-search-ph { font-size: .88rem; font-weight: 500; }
.exp-scan {
  flex: 0 0 46px; width: 46px; border-radius: 999px; border: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #8b6cff 0%, #6d5cff 45%, #22d3ee 100%);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.exp-scan:active { transform: scale(.92); }
.exp-scan .icon { width: 21px; height: 21px; }

.page-discover .chip-row { margin: 0 -14px; padding: 0 14px 2px; }

/* ── Section furniture ── */
.exp-section { display: flex; flex-direction: column; gap: 11px; }
.exp-h { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.028em; }
.exp-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-h-note {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 11px; font-weight: 650; color: var(--muted);
}

/* ── Trending rail ── */
.topic-rail {
  display: flex; gap: 10px; overflow-x: auto;
  scrollbar-width: none; margin: 0 -14px; padding: 2px 14px;
  scroll-snap-type: x proximity;
}
.topic-rail::-webkit-scrollbar { display: none; }
.topic-rail .topic-card {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 14px 12px;
  position: relative; overflow: hidden; cursor: pointer;
}
.topic-rail .topic-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(124,92,255,.20), transparent 62%);
  pointer-events: none;
}
/* Each card takes a different hue off the brand wheel, so a rail of six
   reads as six things rather than one thing repeated. */
.topic-rail .topic-card:nth-child(6n+2)::before { background: linear-gradient(140deg, rgba(34,211,238,.20), transparent 62%); }
.topic-rail .topic-card:nth-child(6n+3)::before { background: linear-gradient(140deg, rgba(255,59,107,.18), transparent 62%); }
.topic-rail .topic-card:nth-child(6n+4)::before { background: linear-gradient(140deg, rgba(46,230,168,.18), transparent 62%); }
.topic-rail .topic-card:nth-child(6n+5)::before { background: linear-gradient(140deg, rgba(251,191,60,.18), transparent 62%); }
.topic-rank {
  position: relative; font-size: .66rem; font-weight: 800;
  color: var(--muted-2); letter-spacing: .04em;
}
.topic-rail .topic-card strong {
  position: relative; font-family: var(--font-display);
  font-size: .96rem; font-weight: 700; letter-spacing: -.02em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-rail .topic-card span.muted { position: relative; font-size: .72rem; }

/* ── Hero mosaic ──
   Three columns, but every seventh tile runs 2x2. The grid stays a
   perfect rectangle because the double tile consumes exactly the four
   cells its neighbours would have filled. */
.popular-grid.mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: 4px;
  /* Dense is required, not cosmetic: once a big tile is pinned to the
     right-hand columns, sparse placement cannot go back and fill the cell
     to its left, so the grid grew an extra row with a hole in it. */
  grid-auto-flow: row dense;
  margin: 0 -14px; padding: 0;
}
.popular-grid.mosaic > .popular-cell { border-radius: 0; aspect-ratio: 1; }
/* Period of six: one 2x2 (four cells) plus five singles fills exactly
   three rows of three, so the grid never leaves a hole. A seven-item
   period does not divide evenly and left ragged gaps down the page. */
.popular-grid.mosaic > .popular-cell:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
/* Alternate which side the big tile sits on, so the rhythm reads as
   deliberate rather than as a column that happens to be wider. */
.popular-grid.mosaic > .popular-cell:nth-child(12n + 7) { grid-column: 2 / span 2; }
.popular-cell { position: relative; background: var(--panel-2); overflow: hidden; cursor: pointer; }
.popular-cell img, .popular-cell video { width: 100%; height: 100%; object-fit: cover; }
/* A text-only post still deserves a readable tile rather than a grey box. */
.popular-text {
  padding: 12px; font-size: .78rem; line-height: 1.4; color: var(--text);
  background: linear-gradient(150deg, var(--panel-3), var(--panel-2));
  height: 100%; display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}
.popular-likes {
  position: absolute; left: 7px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 700; color: #fff;
  background: none; padding: 0; border-radius: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums;
}
.popular-likes .icon { width: 13px; height: 13px; fill: #fff; }
/* Enough scrim to keep the count legible over a bright photo. */
.popular-cell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(to top, rgba(0,0,0,.42), transparent);
  pointer-events: none;
}
.popular-cell:has(.popular-text)::after { display: none; }

/* ── Creator rail ── */
.creator-rail {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 2px 14px; scroll-snap-type: x proximity;
}
.creator-rail::-webkit-scrollbar { display: none; }
.creator-card {
  flex: 0 0 auto; width: 138px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 12px 13px; cursor: pointer;
  text-align: center;
}
.creator-name {
  font-weight: 650; font-size: .86rem; letter-spacing: -.015em;
  display: inline-flex; align-items: center; gap: 3px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creator-handle { font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-card .btn { width: 100%; margin-top: 4px; }
.creator-card.skel-card { gap: 8px; align-items: center; }

/* ── Shortcuts ── */
.exp-shortcuts { display: flex; gap: 8px; }
.exp-shortcut {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 8px 12px;
  color: var(--text); font-size: .78rem; font-weight: 650;
  transition: background var(--dur-fast);
}
.exp-shortcut:active { background: var(--panel-2); }
.exp-shortcut-ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.exp-shortcut-ico .icon { width: 19px; height: 19px; }
.sc-pages  { background: linear-gradient(140deg, #6d5cff, #8b6cff); }
.sc-comms  { background: linear-gradient(140deg, #22d3ee, #2ee6a8); }
.sc-market { background: linear-gradient(140deg, #fbbf3c, #ff8a3c); }

/* ── Fresh media ── */
.explore-grid { gap: 4px; margin: 0 -14px; }
.explore-cell { border-radius: 0; }

/* ── Communities ── */
.comm-list { display: flex; flex-direction: column; gap: 6px; }
.mini-comm {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; align-items: center;
}
.mini-comm strong { font-weight: 650; letter-spacing: -.015em; }

@media (min-width: 701px) {
  .exp-head { margin: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .popular-grid.mosaic, .explore-grid { margin: 0; border-radius: var(--radius); overflow: hidden; }
  .creator-rail, .topic-rail, .page-discover .chip-row { margin: 0; padding-inline: 0; }
  .exp-shortcut:hover, .mini-comm:hover { background: var(--panel-2); }
}

/* Empty states and fallback messages are children of the grids and rails,
   so without this they inherit a 1:1 tile and get squeezed into a single
   column. Let them span the full width and size to their content. */
.popular-grid > .empty-state, .explore-grid > .empty-state,
.popular-grid > .muted, .explore-grid > .muted {
  grid-column: 1 / -1; aspect-ratio: auto; border-radius: 0;
}
.popular-grid > .empty-state::after, .explore-grid > .empty-state::after { display: none; }
.topic-rail > .muted, .creator-rail > .muted, .comm-list > .empty-state {
  flex: 1 1 auto; padding: 14px 2px;
}
.creator-rail > .empty-state, .topic-rail > .empty-state { flex: 1 1 100%; }

/* On white, a 20% alpha wash all but disappears. Light mode gets a solid
   tinted fill and a matching border instead, so the rail still reads as
   six distinct topics rather than six blank cards. */
:root[data-theme="light"] .topic-rail .topic-card { background: #f4f2ff; border-color: rgba(124,92,255,.22); }
:root[data-theme="light"] .topic-rail .topic-card::before { background: linear-gradient(140deg, rgba(124,92,255,.16), transparent 70%); }
:root[data-theme="light"] .topic-rail .topic-card:nth-child(6n+2) { background: #eafaff; border-color: rgba(14,165,190,.22); }
:root[data-theme="light"] .topic-rail .topic-card:nth-child(6n+3) { background: #fff0f4; border-color: rgba(255,59,107,.20); }
:root[data-theme="light"] .topic-rail .topic-card:nth-child(6n+4) { background: #eafaf3; border-color: rgba(16,185,129,.20); }
:root[data-theme="light"] .topic-rail .topic-card:nth-child(6n+5) { background: #fff7e8; border-color: rgba(217,146,17,.24); }
:root[data-theme="light"] .topic-rail .topic-card:nth-child(6n) { background: #f1f2ff; border-color: rgba(99,102,241,.20); }

/* Recovery link on the sign-in form. */
.auth-forgot { text-align: right; margin: -6px 2px 0; font-size: .82rem; }
.auth-forgot a { color: var(--muted); font-weight: 600; }
.auth-forgot a:hover { color: var(--accent-b); }

/* ── 20. Account switcher ──────────────────────────────────
   Sessions live in Firebase's own store, one per account; this is only
   the list that picks between them. */

.acc-overlay {
  position: fixed; inset: 0; z-index: 92;
  background: rgba(2,4,9,.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
}
.acc-sheet {
  width: 100%; max-width: var(--maxw);
  background: var(--panel);
  border-top: 1px solid var(--line-2);
  border-radius: 24px 24px 0 0;
  padding: 10px 14px calc(18px + var(--safe-bottom));
  box-shadow: var(--shadow);
  animation: sheetUp var(--dur-slow) var(--ease-out);
  max-height: 88dvh; overflow-y: auto;
}
.acc-handle-bar { width: 36px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 2px auto 12px; }
.acc-title { font-size: 1.08rem; letter-spacing: -.026em; margin: 0 4px 12px; }
.acc-list { display: flex; flex-direction: column; gap: 4px; }

.acc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast);
}
.acc-row:active { background: var(--panel-2); }
/* The account you're on is stated outright rather than implied — on a
   phone that has three of them, "which am I posting as" is the whole
   question this sheet exists to answer. */
.acc-row.active { background: var(--accent-soft); border-color: rgba(124,92,255,.28); }
.acc-meta { flex: 1; min-width: 0; }
.acc-name {
  font-weight: 650; letter-spacing: -.015em;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-handle { font-size: .78rem; }
.acc-current { flex: 0 0 auto; color: var(--accent-a); display: inline-flex; }
.acc-current .icon { width: 21px; height: 21px; }
.acc-switch-hint { flex: 0 0 auto; font-weight: 650; color: var(--muted-2); }

.acc-add-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 1px dashed var(--line-2);
  border-radius: 16px; padding: 13px 12px; margin-top: 10px;
  color: var(--text); font-size: .9rem; font-weight: 650;
}
.acc-add-btn:active { background: var(--panel-2); }
.acc-add-ico {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--accent-a);
  background: var(--panel-2); border: 1px solid var(--line);
}
.acc-add-ico .icon { width: 20px; height: 20px; }
.acc-note { display: block; margin: 12px 4px 0; line-height: 1.45; }

/* ── Add-account dialog ── */
.acc-add { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.acc-add h3 { margin: 0; }
.acc-add p.muted { margin: 0 0 4px; line-height: 1.45; }
.acc-error {
  margin: 0; font-size: .82rem; font-weight: 600; color: var(--danger);
  background: rgba(255,79,107,.10); border: 1px solid rgba(255,79,107,.26);
  border-radius: 10px; padding: 9px 12px;
}
.acc-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted-2); font-size: .76rem; margin: 2px 0;
}
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (prefers-reduced-motion: reduce) { .acc-sheet { animation: none; } }

/* ── 21. Menu (Settings) ───────────────────────────────────
   Fourteen sections of identical grey rows behind one flat profile row.
   The page now opens with a hero and the four things people actually
   come here to do, and every section carries its own colour so the list
   can be scanned instead of read. */

.page-settings { gap: 16px; }
.settings-title { font-size: 1.5rem; letter-spacing: -.038em; margin: 2px 2px 2px; }

/* ── Hero ── */
.settings-hero {
  position: relative; overflow: hidden;
  width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 16px;
  color: var(--text);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.settings-hero:active { transform: scale(.985); }
/* A single brand wash across the top, clipped by the card. Cheap to
   paint and it stops the card reading as one more grey row. */
.sh-wash {
  position: absolute; inset: 0 0 auto; height: 96px;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(124,92,255,.42), transparent 62%),
    radial-gradient(100% 120% at 88% 0%, rgba(34,211,238,.30), transparent 60%);
  pointer-events: none;
}
.sh-top { position: relative; display: flex; align-items: center; gap: 13px; }
.sh-id { flex: 1; min-width: 0; }
.sh-name {
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 720;
  letter-spacing: -.028em; display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-handle { font-size: .85rem; color: var(--muted); margin-top: 1px; }
.sh-chev { flex: 0 0 auto; color: var(--muted); display: inline-flex; }
.sh-chev .icon { width: 20px; height: 20px; }
.sh-stats {
  position: relative; display: flex; gap: 22px;
  padding-top: 13px; border-top: 1px solid var(--line);
}
.sh-stat { display: flex; align-items: baseline; gap: 5px; }
.sh-stat strong { font-size: 1.02rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Quick tiles ── */
.settings-quick { display: flex; gap: 8px; }
.settings-quick-tile {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 6px 11px;
  color: var(--text);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.settings-quick-tile:active { transform: scale(.94); background: var(--panel-2); }
.qt-ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.qt-ico .icon { width: 19px; height: 19px; }
.qt-label { font-size: .74rem; font-weight: 650; letter-spacing: -.005em; }
.qt-wallet .qt-ico { background: linear-gradient(140deg, #fbbf3c, #ff8a3c); }
.qt-saved  .qt-ico { background: linear-gradient(140deg, #6d5cff, #8b6cff); }
.qt-stats  .qt-ico { background: linear-gradient(140deg, #22d3ee, #2ee6a8); }
.qt-switch .qt-ico { background: linear-gradient(140deg, #ff3b6b, #b04cff); }

/* ── Sections ── */
.settings-section { margin: 0 0 6px; }
.settings-section-head { gap: 9px; margin: 0 4px 9px; }
.settings-section-icon {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.settings-section-icon .icon { width: 16px; height: 16px; }
.settings-section h4 { font-size: .7rem; letter-spacing: .1em; color: var(--muted-2); font-weight: 700; }

/* One hue per section. The tint is carried on the chip only, so the rows
   underneath stay quiet and the colour acts as a bookmark, not decoration. */
.ss-coin        { background: rgba(251,191,60,.14); border-color: rgba(251,191,60,.30); }
.ss-coin .icon  { color: #fbbf3c; }
.ss-gem         { background: rgba(176,76,255,.14); border-color: rgba(176,76,255,.30); }
.ss-gem .icon   { color: #c07cff; }
.ss-user        { background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.30); }
.ss-user .icon  { color: #9b83ff; }
.ss-sun         { background: rgba(255,138,60,.14); border-color: rgba(255,138,60,.30); }
.ss-sun .icon   { color: #ff9d55; }
.ss-lock        { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.30); }
.ss-lock .icon  { color: #3fdcf0; }
.ss-shield      { background: rgba(46,230,168,.14); border-color: rgba(46,230,168,.30); }
.ss-shield .icon{ color: #38e5ad; }
.ss-volume2     { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.32); }
.ss-volume2 .icon { color: #8b8dff; }
.ss-bell        { background: rgba(255,59,107,.14); border-color: rgba(255,59,107,.30); }
.ss-bell .icon  { color: #ff6b90; }
.ss-shieldAlert { background: rgba(255,79,107,.14); border-color: rgba(255,79,107,.30); }
.ss-shieldAlert .icon { color: #ff7590; }
.ss-ban         { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.30); }
.ss-ban .icon   { color: #a7b2c6; }
.ss-image       { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.30); }
.ss-image .icon { color: #3fdcf0; }
.ss-box         { background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.30); }
.ss-box .icon   { color: #9b83ff; }
.ss-info        { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.28); }
.ss-info .icon  { color: #a7b2c6; }
.ss-arrowLeft   { background: rgba(255,79,107,.14); border-color: rgba(255,79,107,.30); }
.ss-arrowLeft .icon { color: #ff7590; }

/* ── Rows ── */
.settings-section > :not(.settings-section-head) { background: var(--panel); }
.settings-section > :not(.settings-section-head):first-of-type { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.settings-section > :not(.settings-section-head):last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.settings-row {
  padding: 13px 14px; font-size: .92rem; font-weight: 550;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.settings-section > .settings-row:last-of-type,
.settings-section > .link-row:last-of-type { border-bottom: 0; }
.link-row:active { background: var(--panel-2); }
.settings-row .info-val, .settings-chevron { font-size: .86rem; }
.settings-chevron .icon { width: 16px; height: 16px; }
.settings-row .no-tap, .settings-row:disabled { opacity: 1; }

.settings-note { border-radius: 16px; padding: 13px 14px; }
.settings-note-icon .icon { color: var(--accent-a); }

/* The delete control is the one destructive thing on the page; give it
   room so it can't be hit while aiming for Sign out. */
.settings-section > .btn-danger { margin-top: 10px; }
.contacts { line-height: 1.5; padding: 12px 14px 4px; }

@media (min-width: 701px) {
  .settings-quick-tile:hover, .link-row:hover { background: var(--panel-2); }
}

/* ── Zallixor Plus upsell ──
   Was a single row of run-on comma-separated text that read as a setting
   rather than an offer. */
.plus-card {
  position: relative; overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid rgba(176,76,255,.30);
  padding: 16px;
  display: flex; flex-direction: column; gap: 13px;
}
.pc-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(176,76,255,.30), transparent 62%),
    radial-gradient(100% 120% at 5% 100%, rgba(251,191,60,.16), transparent 58%);
}
.pc-head { position: relative; display: flex; align-items: center; gap: 12px; }
.pc-crown {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(251,191,60,.14); border: 1px solid rgba(251,191,60,.32);
}
.pc-crown .plus-crown-icon { width: 22px; height: 22px; }
.pc-title { font-family: var(--font-display); font-size: 1.06rem; font-weight: 720; letter-spacing: -.026em; }
.pc-sub { font-size: .8rem; color: var(--muted); margin-top: 1px; }
.pc-perks { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-perks li { display: flex; align-items: flex-start; gap: 9px; font-size: .855rem; line-height: 1.35; }
.pc-tick { flex: 0 0 auto; display: inline-flex; color: var(--ok); margin-top: 1px; }
.pc-tick .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.pc-cta { position: relative; margin-top: 2px; }

/* ── 22. Profile ───────────────────────────────────────────
   The page had the right content in the wrong order of importance:
   a flat cover, an avatar the same size as a post avatar, and six
   stats crushed into one row. Rebuilt around a proper masthead. */

.page-profile { padding: 0 0 8px; gap: 0; }

/* ── Cover ──
   Taller, and when there's no photo it gets a branded mesh instead of a
   flat grey panel — an empty profile shouldn't look broken. */
.profile-cover {
  height: 196px;
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(124,92,255,.55), transparent 60%),
    radial-gradient(110% 120% at 85% 10%, rgba(34,211,238,.40), transparent 58%),
    radial-gradient(90% 110% at 60% 100%, rgba(255,59,107,.22), transparent 62%),
    var(--panel-2);
  background-size: cover; background-position: center;
  position: relative;
}
/* Two scrims: one to lift the buttons off a bright photo, one to hand the
   cover over to the page background so the avatar has something to sit on. */
.profile-cover::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 84px;
  background: linear-gradient(to bottom, rgba(0,0,0,.34), transparent);
  pointer-events: none;
}
.profile-cover::after {
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--bg) 62%, transparent) 72%, var(--bg) 100%);
}
.cover-edit, .profile-settings-btn {
  background: rgba(8,11,18,.46); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; border-radius: 999px; width: 38px; height: 38px;
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.cover-edit:active, .profile-settings-btn:active { transform: scale(.9); }
.cover-edit .icon, .profile-settings-btn .icon { width: 18px; height: 18px; }

/* ── Masthead ── */
.profile-head { align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -54px; }
.profile-avatar-wrap {
  padding: 3.5px; border-radius: 50%;
  background: conic-gradient(from 200deg, #7c5cff, #22d3ee 120deg, #ff3b6b 240deg, #7c5cff 360deg);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.6);
}
.profile-avatar-wrap .avatar { border: 3.5px solid var(--bg); }
.profile-id { padding-bottom: 2px; }
.name-row.big { font-size: 1.34rem; font-weight: 760; letter-spacing: -.034em; }
.profile-id > .muted { font-size: .88rem; margin-top: 1px; }
.level-badge {
  margin-top: 7px; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.18));
  border: 1px solid rgba(124,92,255,.34); color: var(--text);
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.level-badge .icon { width: 12px; height: 12px; color: var(--amber); }

/* ── Actions ── */
.profile-cta-row { padding: 14px 16px 0; }
.profile-cta { display: flex; gap: 8px; }
.profile-cta .btn, .profile-cta-row > .btn { flex: 1; }
.profile-cta-row .btn-sm { padding: 10px 14px; font-size: .85rem; border-radius: 12px; }
.profile-cta-row > .btn + .btn { margin-left: 8px; }

.profile-bio { padding: 14px 16px 0; font-size: .92rem; line-height: 1.5; }
.profile-links, .about-row { padding: 8px 16px 0; }
.profile-link { color: var(--accent-b); }

/* ── Stats ──
   Three headline figures in a card, the rest as chips underneath. */
.stats-wrap { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 14px 4px; gap: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px;
  justify-content: initial;
}
.stats-row .stat {
  gap: 3px; padding: 0 6px; border-radius: 0;
  border-right: 1px solid var(--line);
}
.stats-row .stat:last-child { border-right: 0; }
.stat strong { font-size: 1.3rem; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .655rem; letter-spacing: .09em; color: var(--muted-2); font-weight: 700; }
.stat.clickable:active { background: transparent; opacity: .55; }

.stats-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
}
.stat-chip strong { font-size: .86rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat-chip span { font-size: .74rem; color: var(--muted); font-weight: 550; }
.stat-chip.clickable { cursor: pointer; }
.stat-chip.clickable:active { background: var(--panel-3); }

/* ── Cards below the masthead ── */
.streak-box, .ach-section {
  margin: 0 16px 12px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px;
}
.streak-head strong { font-size: 1rem; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 6px; }
.streak-head strong .icon { color: #ff8a3c; }
.streak-day.on::before {
  background: linear-gradient(140deg, #8b6cff, #22d3ee);
  border-color: transparent; box-shadow: 0 0 12px rgba(124,92,255,.45);
}
.ach-section h4 { margin: 0 0 12px; font-size: .7rem; letter-spacing: .1em; color: var(--muted-2); }
.ach-badge.locked { opacity: .34; filter: grayscale(1); }
.ach-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.ach-badge:not(.locked) .ach-icon {
  background: linear-gradient(140deg, rgba(124,92,255,.20), rgba(34,211,238,.14));
  border-color: rgba(124,92,255,.32);
}
.ach-label { font-size: .66rem; font-weight: 650; }

.quick-tiles { padding: 0 16px 12px; gap: 8px; }

@media (min-width: 701px) {
  .stat.clickable:hover { opacity: .7; }
  .stat-chip.clickable:hover { background: var(--panel-3); }
}

/* ── Profile: fixes from the first render ── */

/* Both cover controls belong together at the top. Bottom-right put the
   camera in the same band as the avatar and name, which read as clutter
   attached to the person rather than a control on the photo. */
.cover-edit { top: 10px; right: 56px; bottom: auto; }

/* "Get verified" wrapped onto two lines and knocked the row out of
   alignment. Buttons keep their label on one line and wrap as whole
   buttons instead. */
.profile-cta { flex-wrap: wrap; gap: 8px; }
.profile-cta > * { flex: 1 1 auto; min-width: 104px; }
.profile-cta .btn, .profile-cta-row .btn {
  white-space: nowrap; font-size: .82rem; padding: 10px 12px;
}

/* Five achievements at a fixed 72px overflowed a 390px screen, so the
   last one sat off the edge looking cut off rather than scrollable.
   A five-column grid fits them all at any width. */
.ach-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; overflow: visible; }
.ach-badge { width: auto; gap: 7px; }
.ach-badge .ach-icon { width: 100%; max-width: 54px; aspect-ratio: 1; height: auto; border-radius: 15px; }
.ach-badge .ach-icon .icon { width: 24px; height: 24px; }
.ach-badge .ach-label { font-size: .63rem; text-align: center; line-height: 1.2; }

/* ── 23. Menu drawer ───────────────────────────────────────
   Slides in from the right so the hamburger, which lives at the top
   right, opens toward itself rather than across the screen. */

.menu-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(2,4,9,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end;
  animation: menuFade var(--dur-med) ease;
}
.menu-overlay.closing { animation: menuFade var(--dur-med) ease reverse forwards; }
@keyframes menuFade { from { opacity: 0; } to { opacity: 1; } }

.menu-panel {
  width: min(88vw, 380px); height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--line-2);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.7);
  padding: calc(10px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px;
  animation: menuIn var(--dur-slow) var(--ease-out);
}
.menu-panel.closing { animation: menuOut var(--dur-med) var(--ease-out) forwards; }
@keyframes menuIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes menuOut { from { transform: none; } to { transform: translateX(100%); } }

.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu-title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 750; letter-spacing: -.035em; }

/* ── Who you're acting as ── */
.menu-me { display: flex; gap: 8px; align-items: stretch; }
.menu-me-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 11px 13px; color: var(--text);
  position: relative; overflow: hidden;
}
.menu-me-main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 130% at 8% 0%, rgba(124,92,255,.20), transparent 62%);
}
.menu-me-main > * { position: relative; }
.menu-me-main:active { background: var(--panel-2); }
.menu-me-meta { flex: 1; min-width: 0; }
.menu-me-name {
  font-weight: 680; letter-spacing: -.018em;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-me-handle { margin-top: 1px; }
.menu-me-switch {
  flex: 0 0 52px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line-2);
  color: var(--accent-a); display: grid; place-items: center;
  transition: background var(--dur-fast);
}
.menu-me-switch:active { background: var(--panel-2); }
.menu-me-switch .icon { width: 21px; height: 21px; }

/* ── Shortcut grid ── */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 6px 11px;
  color: var(--text);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.menu-tile:active { transform: scale(.94); background: var(--panel-2); }
.menu-tile-ico {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.menu-tile-ico .icon { width: 18px; height: 18px; }
.menu-tile-label {
  font-size: .71rem; font-weight: 650; letter-spacing: -.005em;
  text-align: center; line-height: 1.2;
}
/* Four tones rather than twelve: the colour groups related destinations
   (money, selling, your stuff, community) instead of decorating each one. */
.mi-amber  { background: linear-gradient(140deg, #fbbf3c, #ff8a3c); }
.mi-violet { background: linear-gradient(140deg, #6d5cff, #8b6cff); }
.mi-cyan   { background: linear-gradient(140deg, #22d3ee, #3b9dff); }
.mi-mint   { background: linear-gradient(140deg, #2ee6a8, #22d3ee); }

/* ── List rows ── */
.menu-list {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
}
.menu-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text); font-size: .9rem; font-weight: 600; text-align: left;
  transition: background var(--dur-fast);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row:active { background: var(--panel-2); }
.menu-row-ico { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.menu-row-ico .icon { width: 19px; height: 19px; }
.menu-row-label { flex: 1; min-width: 0; }
.menu-row-chev { flex: 0 0 auto; color: var(--muted-2); display: inline-flex; }
.menu-row-chev .icon { width: 16px; height: 16px; }
.menu-row-danger { color: var(--danger); }
.menu-row-danger .menu-row-ico { color: var(--danger); }

.menu-foot { text-align: center; margin: auto 0 0; padding-top: 8px; }

@media (min-width: 701px) {
  .menu-tile:hover, .menu-row:hover, .menu-me-main:hover { background: var(--panel-2); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-overlay { animation: none !important; }
}

/* ── 24. Chat ──────────────────────────────────────────────
   Rebuilt on WhatsApp's structure: a patterned wallpaper instead of a
   flat panel, bubbles with real tails, the time and ticks tucked inside
   the bubble, and a circular send button outside the pill.

   The accent moves from Messenger blue (#0084ff, which the chat used
   throughout and which clashed with everything else in the app) to the
   brand violet. Copying WhatsApp's green would have made this one screen
   look borrowed from a different product. */

.chat-screen { background: var(--bg); }

/* ── Wallpaper ──
   Built from three tiny repeating gradients rather than an image: it
   costs no request, scales to any density, and stays under the text at
   ~3% contrast so it reads as texture, never as noise. */
.chat-messages {
  background-color: var(--bg-2);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.030) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 48%, rgba(255,255,255,.024) 0 2px, transparent 2px),
    radial-gradient(circle at 84% 78%, rgba(124,92,255,.045) 0 3px, transparent 3px);
  background-size: 92px 92px, 124px 124px, 156px 156px;
  padding: 14px 10px 16px;
  gap: 2px;
}
:root[data-theme="light"] .chat-messages {
  background-color: #efeae2;   /* the warm paper tone chat screens use */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(10,14,24,.030) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 48%, rgba(10,14,24,.022) 0 2px, transparent 2px),
    radial-gradient(circle at 84% 78%, rgba(124,92,255,.055) 0 3px, transparent 3px);
}

/* ── Bubbles ── */
.bubble {
  max-width: 82%; padding: 7px 10px 6px;
  border-radius: 14px; font-size: .935rem; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.bubble.mine {
  background: linear-gradient(180deg, #5b46e0, #4c39c9);
  color: #fff; border-bottom-right-radius: 4px;
}
.bubble.theirs {
  background: var(--panel); color: var(--text);
  border-bottom-left-radius: 4px;
}
:root[data-theme="light"] .bubble.theirs { background: #ffffff; }
:root[data-theme="light"] .bubble { box-shadow: 0 1px 1px rgba(10,14,24,.10); }

/* The tail. Only the last bubble in a run gets one — a tail on every
   bubble is what makes a stacked conversation look serrated. */
/* Drawn with borders, not clip-path: path() — that renders as a square
   nub in several engines and is not worth the risk on a screen this
   central. Two borders make a clean triangle everywhere. */
.bubble::after {
  content: ""; position: absolute; bottom: 0;
  width: 0; height: 0; pointer-events: none;
}
.bubble.mine::after {
  right: -7px;
  border-left: 8px solid #4c39c9;
  border-bottom: 7px solid transparent;
}
.bubble.theirs::after {
  left: -7px;
  border-right: 8px solid var(--panel);
  border-bottom: 7px solid transparent;
}
:root[data-theme="light"] .bubble.theirs::after { border-right-color: #ffffff; }
/* Hide the tail on any bubble immediately followed by one from the same
   side, so only the run's final bubble points at the speaker. */
.bubble.mine:has(+ .bubble.mine)::after,
.bubble.theirs:has(+ .bubble.theirs)::after { display: none; }
.bubble.mine:has(+ .bubble.mine) { border-bottom-right-radius: 14px; }
.bubble.theirs:has(+ .bubble.theirs) { border-bottom-left-radius: 14px; }
.bubble + .bubble { margin-top: 2px; }

.bubble-sender { font-size: .75rem; font-weight: 700; margin-bottom: 3px; color: var(--accent-b); }
.bubble-meta { font-size: .62rem; margin: 4px 0 -1px 10px; opacity: .68; }
.bubble.mine .bubble-meta { opacity: .82; }
.bubble-ticks .icon { width: 14px; height: 14px; }
.bubble-ticks.seen { color: #4fd6ff; opacity: 1; }
.bubble.mine .bubble-ticks.seen { color: #86e6ff; }
.bubble-img { border-radius: 9px; }
.bubble-media { padding: 3px 3px 4px; }
.bubble-pinned { box-shadow: 0 0 0 2px var(--accent-a); }
@keyframes bubble-flash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 3px var(--accent-a); } }

.bubble.mine .msg-reaction-chip { background: rgba(255,255,255,.22); }
.msg-reaction-chip.mine { border-color: var(--accent-a); }

/* ── Day divider ── */
.chat-day-divider span {
  background: var(--panel-3); color: var(--muted);
  border: 1px solid var(--line);
  font-size: .69rem; font-weight: 650; letter-spacing: .02em;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* ── Header ── */
.chat-header {
  padding: 8px 6px 8px 2px; gap: 4px;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
}
.chat-name { font-size: 1rem; font-weight: 680; letter-spacing: -.018em; }
.chat-presence { font-size: .73rem; }
.chat-presence.is-online { color: var(--ok); font-weight: 600; }

/* ── Composer ── */
.chat-composer { background: var(--bg); border-top: 1px solid var(--line); gap: 7px; }
.chat-pill {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 2px 4px;
}
.chat-pill .icon-btn { color: var(--muted); width: 38px; height: 38px; }
.chat-pill .icon-btn:active { color: var(--accent-a); }
.chat-input { font-size: .94rem; padding: 10px 4px; }
.send-btn { background: var(--accent-a); color: #fff; box-shadow: 0 4px 14px rgba(124,92,255,.35); }
.send-btn:active { transform: scale(.92); }
.mic-btn { background: var(--panel); border: 1px solid var(--line); color: var(--accent-a); }
.send-btn, .mic-btn { transition: transform var(--dur-fast) var(--ease-spring); }

.pin-banner { background: color-mix(in srgb, var(--accent-a) 12%, var(--panel)); }
.pin-banner .icon { color: var(--accent-a); }
.typing-indicator { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 1px rgba(0,0,0,.18); }

/* ── 25. Assistant floating button ── */
.ai-fab {
  position: fixed; right: 16px;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
  z-index: 38;
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #8b6cff 0%, #6d5cff 45%, #22d3ee 100%);
  color: #fff;
  box-shadow: 0 10px 26px -6px rgba(109,92,255,.62), 0 2px 8px rgba(0,0,0,.4);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-med);
}
.ai-fab:active { transform: scale(.9); }
.ai-fab-ico { display: grid; place-items: center; }
.ai-fab-ico .icon { width: 24px; height: 24px; }
/* A slow halo so the button reads as alive without animating constantly
   in the corner of the eye. Motion-reduced users get a static ring. */
.ai-fab-glow {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(139,108,255,.45);
  animation: aiPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aiPulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.14); opacity: 0; }
}

/* Out of the way where it would cover content or duplicate an action:
   full-screen video, and any open chat (which has its own composer). */
:root[data-route="watch"] .ai-fab,
:root.chat-open .ai-fab { opacity: 0; pointer-events: none; transform: scale(.7); }

@media (prefers-reduced-motion: reduce) {
  .ai-fab-glow { animation: none; opacity: .5; }
}

/* ── 26. Reaction picker ───────────────────────────────────
   Tap the Like button to like; press and hold to open this. */

/* Twelve reactions do not fit one row on a phone (12 x 40px = 480px), and
   scrolling sideways inside a popup you are still pressing is a gesture
   fight. Six per row, two rows, everything reachable without moving. */
.react-picker {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2px; padding: 8px 10px;
  bottom: 48px; left: 0;
  width: max-content; max-width: calc(100vw - 28px);
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: 0 14px 34px -8px rgba(0,0,0,.66);
  transform-origin: 20% bottom;
  animation: reactIn .22s var(--ease-spring);
  z-index: 20;
}
@keyframes reactIn {
  from { transform: scale(.6) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.react-opt {
  width: 40px; height: 40px; padding: 0;
  font-size: 1.6rem; line-height: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 0;
  transition: transform var(--dur-fast) var(--ease-spring);
}
/* Each emoji lands a beat after the one before it, so the row unfurls
   instead of appearing all at once. */
.react-picker .react-opt { animation: reactPop .26s var(--ease-spring) backwards; }
.react-picker .react-opt:nth-child(1) { animation-delay: .00s; }
.react-picker .react-opt:nth-child(2) { animation-delay: .02s; }
.react-picker .react-opt:nth-child(3) { animation-delay: .04s; }
.react-picker .react-opt:nth-child(4) { animation-delay: .06s; }
.react-picker .react-opt:nth-child(5) { animation-delay: .08s; }
.react-picker .react-opt:nth-child(6) { animation-delay: .10s; }
.react-picker .react-opt:nth-child(7)  { animation-delay: .12s; }
.react-picker .react-opt:nth-child(8)  { animation-delay: .14s; }
.react-picker .react-opt:nth-child(9)  { animation-delay: .16s; }
.react-picker .react-opt:nth-child(10) { animation-delay: .18s; }
.react-picker .react-opt:nth-child(11) { animation-delay: .20s; }
.react-picker .react-opt:nth-child(n+12) { animation-delay: .22s; }
@keyframes reactPop {
  from { transform: scale(.3) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.react-opt:hover, .react-opt:active { transform: scale(1.32) translateY(-4px); background: transparent; }

/* The picker on a comment is smaller and opens just below the link. */
.cm-react-wrap .react-picker { bottom: auto; top: 24px; left: -6px; padding: 5px 7px; }
.cm-react-wrap .react-opt { width: 34px; height: 34px; font-size: 1.32rem; }

/* The button keeps whatever colour its reaction carries (set inline from
   the REACTIONS table), so the class must not override it. */
.react-btn.active, .cm-react-btn.active { color: inherit; }
.react-btn { transition: color var(--dur-fast); }
/* Long-press shouldn't select the label text on the way. */
.react-btn, .cm-react-btn, .react-opt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (prefers-reduced-motion: reduce) {
  .react-picker, .react-picker .react-opt { animation: none; }
}

/* ── 27. Friends on the profile ────────────────────────────
   users/{uid}.friends is owner-read only, so this rail exists on your
   own profile only; other people's profiles keep the count they always
   had. */

.friends-section {
  margin: 0 16px 12px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px;
}
.fr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fr-head h4 { margin: 0; font-size: .7rem; letter-spacing: .1em; color: var(--muted-2); font-weight: 700; }
.fr-all {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-b); font-size: .8rem; font-weight: 650;
}
.fr-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.fr-rail::-webkit-scrollbar { display: none; }
.fr-card {
  flex: 0 0 auto; width: 62px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.fr-card:active { transform: scale(.93); }
.fr-name {
  font-size: .71rem; font-weight: 600; text-align: center;
  max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px; justify-content: center;
}
.fr-name .verified-badge { width: 11px; height: 11px; }
/* The overflow card counts what the rail can't show, so the rail never
   silently hides friends. */
.fr-more-ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px dashed var(--line-2);
  color: var(--accent-a); font-weight: 750; font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.fr-empty { margin: 0; line-height: 1.45; }
.fr-card.skel-card { gap: 8px; align-items: center; }

/* ── 28. Viewport stability ────────────────────────────────
   Switching from Zall Clips to a tab made the whole shell jump.

   Cause: the Clips surface is position:fixed, so the document has no
   scrollable content while it is up (scrollHeight == viewport). Opening
   a tab makes the document scrollable again. On a phone that flips the
   browser's dynamic viewport as the URL bar collapses, and 100dvh —
   which the shell's height is measured in — re-resolves underneath
   everything. On desktop a scrollbar appears and narrows the page. Both
   read as the layout shuddering. */

/* svh is the SMALL viewport height: the value with the URL bar showing.
   Unlike dvh it does not change as the bar hides, so the shell keeps one
   height for the whole session. */
.view {
  min-height: calc(100svh - var(--top-h) - var(--safe-top) - var(--nav-h) - var(--safe-bottom));
}
/* Reserve the scrollbar's width whether or not one is showing, so a page
   becoming scrollable can't shove the layout sideways. */
html { scrollbar-gutter: stable; }

/* content-visibility:auto skips off-screen cards and sizes them from
   contain-intrinsic-size — a flat 200px guess. As you scrolled, each card
   resolved to its real height and moved everything below it, which is the
   second half of the judder. The `auto` keyword makes the browser
   remember each element's last real size and reuse it, so a card that has
   been measured once never guesses again. */
.post-card, .conv-row, .user-row, .group-card, .notif-row {
  contain-intrinsic-size: auto 200px;
}

/* The Clips surface is fixed and self-contained; nothing behind it should
   scroll or bounce while it is up. */
:root[data-route="watch"] { overscroll-behavior-y: none; }

/* ── 29. Desktop hover hints ───────────────────────────────
   Only ever created on a mouse device — see js/tooltip.js. */

.tooltip {
  position: fixed; z-index: 200;
  /* max-content sizes to one line whenever the label fits, and only wraps
     once it exceeds max-width — so short hints never break awkwardly and
     long ones never run off the screen. */
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  padding: 6px 10px;
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  font-size: .76rem; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.35;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.7);
  pointer-events: none;            /* never intercept the hover it describes */
  opacity: 0; transform: translateY(3px);
  transition: opacity .13s ease, transform .13s ease;
}
.tooltip.show { opacity: 1; transform: none; }
/* A small pointer so it reads as attached to the control rather than
   floating near it. Flips with the tooltip when it opens downward. */
.tooltip::after {
  content: ""; position: absolute; left: 50%; margin-left: -5px;
  border: 5px solid transparent;
}
.tooltip:not(.below)::after { top: 100%; border-top-color: var(--panel-3); }
.tooltip.below::after { bottom: 100%; border-bottom-color: var(--panel-3); }

/* NB: `text-wrap: balance` must NOT be set here. `white-space` is a
   shorthand that includes text-wrap-mode, so any later text-wrap
   declaration silently re-enables wrapping and breaks short labels
   across two lines. max-content sizing above handles this instead. */
@media (max-width: 380px) { .tooltip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: none; }
}

/* ── 30. Media loading ─────────────────────────────────────
   The feed should never show a hole where a picture is about to be. */

.post-media-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--panel-2);
  background-size: cover;
  background-position: center;
  /* The blurred placeholder is a 32px image stretched over the whole box;
     without this it looks like low-res pixels rather than an out-of-focus
     photo. Scaling slightly past the edges hides the soft border blur
     leaves behind. */
  background-repeat: no-repeat;
}
.post-media-wrap::before {
  content: ""; position: absolute; inset: -6%;
  background: inherit; background-size: cover; background-position: center;
  filter: blur(12px) saturate(1.15);
  transform: scale(1.06);
  transition: opacity .4s ease;
}
/* Once the real picture is up, drop the placeholder so it isn't sitting
   underneath costing compositing work on every scroll. */
.post-media-wrap.media-ready::before { opacity: 0; }

.post-media-wrap > .post-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-height: none;
  opacity: 0;
  transition: opacity .32s ease;
  animation: none;              /* overrides the global lazy-img fade */
}
.post-media-wrap.media-ready > .post-media { opacity: 1; }

/* Videos keep their own intrinsic sizing — a video element reports its
   dimensions from metadata, so it never collapsed the way an image did. */
.post-video-wrap { aspect-ratio: auto !important; background-image: none !important; }
.post-video-wrap::before { display: none; }
.post-video-wrap > .post-video { position: static; height: auto; }

/* Grid cells reserve their square up front for the same reason. */
.explore-cell, .popular-cell { background-color: var(--panel-2); }
.explore-cell img, .popular-cell img { opacity: 0; transition: opacity .28s ease; }
.explore-cell img.loaded, .popular-cell img.loaded,
.explore-cell img[src]:not([src=""]), .popular-cell img[src]:not([src=""]) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .post-media-wrap::before, .post-media-wrap > .post-media { transition: none; }
}

/* ── 31. Share sheet ───────────────────────────────────────
   Share now means more than "copy a link": a chat, a community you're
   in, or a page you run. */

.share-sheet { padding: 10px 14px calc(18px + var(--safe-bottom)); }
.share-title { margin: 2px 4px 12px; font-size: 1.08rem; letter-spacing: -.026em; }
.share-list { display: flex; flex-direction: column; }
.share-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 10px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
.share-row:last-child { border-bottom: 0; }
.share-row:active { background: var(--panel-2); }
.share-row-ico {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent-a);
}
.share-row-ico .icon { width: 20px; height: 20px; }
.share-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.share-row-meta strong { font-weight: 650; letter-spacing: -.015em; }
.share-row-chev { flex: 0 0 auto; color: var(--muted-2); display: inline-flex; }
.share-row-chev .icon { width: 16px; height: 16px; }

/* ── Destination picker ── */
.share-picker { max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.share-picker h3 { margin: 0; }
.share-picker-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 46dvh; overflow-y: auto;
}
.share-target {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px; border-radius: 14px;
  background: transparent; border: 0; color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
.share-target:active { background: var(--panel-2); }
.share-target:disabled { opacity: .5; }
.share-target-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-b);
}
.share-target-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.share-target-meta strong {
  font-weight: 650; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-send {
  flex: 0 0 auto; font-size: .78rem; font-weight: 700;
  color: var(--accent-a); padding: 5px 12px;
  border: 1px solid rgba(124,92,255,.34); border-radius: 999px;
}
.share-empty { padding: 16px 4px; line-height: 1.5; }

@media (min-width: 701px) {
  .share-row:hover, .share-target:hover { background: var(--panel-2); }
}

/* ── 32. From Zallixor Team ────────────────────────────────
   Company identity at the foot of the menu: who makes the app, and the
   other app they make. */

.menu-brand { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.menu-brand-head {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
  margin: 4px 4px 2px;
}
.menu-brand-card {
  display: block; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; color: var(--text); text-decoration: none;
  transition: background var(--dur-fast);
}
.menu-brand-card:active { background: var(--panel-2); }
/* The banner is the brand's own artwork, so it is shown at its real
   aspect rather than cropped to a strip — but capped in height so it
   introduces the company without taking over the menu. */
.menu-brand-banner {
  /* Taller, and biased down the artwork: at 96px centred, `cover` cut the
     ZALLIXOR wordmark clean in half. The logo and wordmark sit slightly
     below centre in the source, so the frame follows them. */
  height: 118px;
  background-size: cover; background-position: center 58%;
  background-color: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.menu-brand-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
.menu-brand-logo {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  object-fit: cover; background: var(--panel-2);
}
.menu-brand-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-brand-meta strong { font-weight: 680; letter-spacing: -.018em; }
.menu-brand-meta .muted {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-brand-go { flex: 0 0 auto; color: var(--muted-2); display: inline-flex; }
.menu-brand-go .icon { width: 17px; height: 17px; }

@media (min-width: 701px) {
  .menu-brand-card:hover { background: var(--panel-2); }
}

/* ── 33. Report a group ────────────────────────────────────
   A 1:1 chat has always had a report control; a group chat had none, so
   the only way to flag abuse in a group was to leave it. */

.report-group { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.report-group h3 { margin: 0; }
.report-group p.muted { margin: 0 0 2px; line-height: 1.45; }
.report-group-people { display: flex; flex-direction: column; gap: 2px; max-height: 34dvh; overflow-y: auto; }
.rg-label { display: block; padding: 8px 2px 4px; }
.report-group-person {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 12px;
  background: transparent; border: 0; color: var(--text); text-align: left;
  transition: background var(--dur-fast);
}
.report-group-person:active { background: var(--panel-2); }
.rg-name {
  flex: 1; min-width: 0; font-weight: 600; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-flag { flex: 0 0 auto; font-weight: 650; color: var(--danger); }
@media (min-width: 701px) { .report-group-person:hover { background: var(--panel-2); } }