/* ============================================================
   Zallixor — style.css
   MAIN build: the stable, general-release build of the app.
   Mobile-first; tuned to stay light on low-spec Android browsers.
   ============================================================ */

:root {
  /* ── Flagship palette — mature ink-navy, restrained violet + cyan ──
     Deeper and less saturated than a typical purple social app, so it
     reads sophisticated rather than childish. Surfaces are matte, the
     accent is used sparingly, and depth comes from soft borders. */
  --bg:        #0a0e17;   /* ink navy base            */
  --bg-2:      #070a11;   /* deeper wells (nav, wells)*/
  --panel:     #111725;   /* cards                    */
  --panel-2:   #161d2e;   /* raised chips / inputs    */
  --panel-3:   #1e2739;   /* pressed / hover          */
  --line:      #1f2839;   /* hairline borders         */
  --line-2:    #2a3550;   /* stronger dividers        */
  --text:      #eef1f7;
  --muted:     #8792a8;
  --muted-2:   #5c6579;
  --accent-a:  #7c5cff;   /* electric violet (primary)*/
  --accent-b:  #22c7e0;   /* restrained cyan          */
  --accent-soft: rgba(124,92,255,.14);
  --grad:      linear-gradient(135deg, #7c5cff 0%, #6d5cff 45%, #22c7e0 100%);
  --aurora:    radial-gradient(ellipse at 28% 0%, rgba(124,92,255,.20), transparent 62%),
               radial-gradient(ellipse at 82% 6%, rgba(34,199,224,.12), transparent 58%);
  --bubble-mine: linear-gradient(135deg, #6d5cff, #5b46e0);
  --bubble-mine-text: #f3f1ff;
  --danger:    #ff5d73;
  --ok:        #2fd8a4;
  --amber:     #f6b545;
  --main:  #7c5cff;
  --radius:    20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --shadow:    0 14px 40px rgba(0,0,0,.5);
  --shadow-nav: 0 10px 30px rgba(0,0,0,.55);
  --glow:      0 8px 24px rgba(124,92,255,.38);
  --nav-h:     72px;
  --top-h:     58px;
  --maxw:      680px;
  --dur-fast:  .1s;
  --dur-med:   .18s;
  --dur-slow:  .32s;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Light mode ── */
:root[data-theme="light"] {
  --bg:        #f4f5fa;
  --bg-2:      #eceef6;
  --panel:     #ffffff;
  --panel-2:   #f2f3f9;
  --panel-3:   #e7e9f2;
  --line:      #e3e5ef;
  --line-2:    #d4d7e6;
  --text:      #141727;
  --muted:     #5f6577;
  --muted-2:   #9298ab;
  --accent-soft: rgba(124,92,255,.12);
  --shadow:    0 14px 40px rgba(20,20,40,.12);
  --shadow-nav: 0 10px 30px rgba(30,30,60,.14);
  --bubble-mine: linear-gradient(135deg, #7c5cff, #6d5cff);
  --bubble-mine-text: #ffffff;
  --aurora:    radial-gradient(ellipse at 28% 0%, rgba(124,92,255,.10), transparent 62%),
               radial-gradient(ellipse at 82% 6%, rgba(34,199,224,.08), transparent 58%);
}

/* Lazy-loaded media: fade in once the real bytes are attached (perf: avoids
   layout jank from pop-in and gives a lighter first paint on slow networks). */
.bg-lazy { background-color: var(--panel-2); }
.bg-lazy.bg-loaded { animation: bgfade var(--dur-slow) ease; }
@keyframes bgfade { from { filter: brightness(.4) blur(6px); } to { filter: none; } }
img[loading="lazy"] { background: var(--panel-2); }
img[loading="lazy"].loaded, img[loading="lazy"]:not([src=""]) { animation: imgfade var(--dur-slow) ease; }
@keyframes imgfade { from { opacity: 0; } to { opacity: 1; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-b); text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
img, video { max-width: 100%; display: block; }
h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; margin: 0; }
h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.02em; }
h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .6rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.center { text-align: center; padding: 2rem 1rem; }
.hidden { display: none !important; }

/* ── Boot loader ── */
#boot { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 999;
  opacity: 1; transition: opacity .38s ease; }
#boot.boot-hide { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; animation: bootIn .7s ease both; }

/* Ring + logo */
.boot-ring-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto; display: grid; place-items: center; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 260deg, #22c7e0 300deg, #a78bfa 340deg, transparent 360deg),
              radial-gradient(closest-side, transparent 0 92%, rgba(139,92,246,.5) 93% 96%, transparent 97%);
  -webkit-mask: radial-gradient(closest-side, transparent 0 84%, #000 85% 100%);
          mask: radial-gradient(closest-side, transparent 0 84%, #000 85% 100%);
  animation: bootRingSpin 2.6s linear infinite; filter: drop-shadow(0 0 10px rgba(124,92,255,.55)); }
.boot-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(139,92,246,.28); }

.logo-mark { border-radius: 26%; object-fit: cover; display: block; }
.boot-logo { border-radius: 26%; object-fit: cover; display: block; position: relative; z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(139,92,246,.5)); animation: floaty 1.6s ease-in-out infinite; }

.boot-status { margin-top: .55rem; font-size: .82rem; color: var(--muted-2, #8a90a6); letter-spacing: .01em; }

.boot-progress { margin: .85rem auto 0; width: 148px; height: 4px; border-radius: 999px;
  background: var(--panel-3, rgba(255,255,255,.08)); overflow: hidden; }
.boot-progress-fill { height: 100%; width: 4%; border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa 0%, #22c7e0 100%);
  transition: width .35s ease-out; }

@keyframes bootRingSpin { to { transform: rotate(360deg); } }
@keyframes bootIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── MAIN badge (purple, per spec) — used in the top bar, profile header, and Settings ── */
.main-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--main); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; box-shadow: 0 2px 8px rgba(139,92,246,.5); }
.main-badge.lg { font-size: .72rem; padding: 3px 9px; }
.main-banner { display: flex; align-items: flex-start; gap: 10px; background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.4); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 14px; }
.main-banner .main-banner-icon { font-size: 1.3rem; line-height: 1; }
.main-banner strong { color: var(--text); }
.boot-word { margin-top: .8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em;
  background: linear-gradient(120deg, #a78bfa 0%, #22c7e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── App shell ── */
#app { max-width: var(--maxw); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--top-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 12px;
  background: rgba(10,14,23,.86); backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
/* Signature aurora wash behind the top bar. */
.topbar::before { content: ""; position: absolute; inset: 0; background: var(--aurora); pointer-events: none; z-index: -1; }
.topbar-left { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; font-size: 1.4rem;
  background: linear-gradient(120deg, #a78bfa 0%, #22c7e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark.sm { font-size: 1.25rem; }
.topbar-right { display: flex; align-items: center; gap: 5px; }
/* Six icon-buttons now live here (settings, search, live, notifications,
   messages, AI assistant) instead of the original three — trim size and
   the left/right padding so they all still fit next to the wordmark.
   Bumped ~5% up from 34px and given real gap between them (was 1px,
   basically touching) so each tap target reads as its own button. */
/* 44px: Apple's minimum tap target, Google's is 48. These are the most
   tapped controls in the app and they were 36 - small enough to mis-hit
   without anyone being able to say why the app felt fiddly. */
.topbar-right .icon-btn { width: 44px; height: 44px; font-size: 1.1rem; }
.topbar { padding-left: 12px; padding-right: 6px; }
.icon-btn { background: transparent; border: 0; color: var(--text); font-size: 1.15rem;
  /* 44, not 40 - see the note above. The icon inside is unchanged; only
     the hit area grows, so nothing looks bigger, it just stops missing. */
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; position: relative;
  transition: background var(--dur-fast); }
.icon-btn:active { background: var(--panel-2); }
.icon-btn.tb { background: var(--panel-2); border: 1px solid var(--line); }
.icon-btn.loading { opacity: .5; pointer-events: none; }
/* Small "+" quick-share button — profile/page/community headers use this
   same control so a link to any of them is always in the same place. */
.link-share-btn { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-a); }
.link-share-btn .icon { width: 15px; height: 15px; }
.bell-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent-b); color: #04222a; font-size: .66rem; font-weight: 800; border-radius: 9px;
  display: grid; place-items: center; border: 2px solid var(--bg); }

/* Content area: reserve space for the top bar (incl. status bar) and the bottom
   nav (incl. gesture bar) so nothing is ever hidden under them while scrolling. */
.view {
  min-height: calc(100dvh - var(--top-h) - var(--safe-top) - var(--nav-h) - var(--safe-bottom));
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 32px);
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
/* Cached bottom-nav tab pages (Home/Discover/Messages/Profile) live inside
   .view side by side; only the active one is shown. Kept off-screen instead
   of destroyed so switching tabs back and forth doesn't reload anything. */
.view-page[hidden] { display: none !important; }
.muted.center { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.page { padding: 14px; display: flex; flex-direction: column; gap: 14px; max-width: 100%; overflow-x: clip; }
/* Cheap paint containment so long feeds stay smooth on low-spec phones. */
.post-card, .conv-row, .user-row, .group-card, .notif-row { content-visibility: auto; contain-intrinsic-size: 200px; }
.chat-messages { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
/* Heart burst for double-tap like */
.like-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
  font-size: 5rem; pointer-events: none; z-index: 5; animation: burst .45s ease-out forwards; }
@keyframes burst { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  25% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.refresh-hint { position: fixed; top: calc(var(--top-h) + var(--safe-top) + 6px); left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: .78rem; font-weight: 600; padding: 6px 14px;
  border-radius: 999px; z-index: 45; box-shadow: var(--shadow); animation: dropin var(--dur-slow) ease; }
@keyframes dropin { from { transform: translate(-50%,-14px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
.receipt { display: block; font-size: .6rem; opacity: .7; margin-top: 2px; text-align: right; }
.chat-presence::first-letter { text-transform: uppercase; }
.conv-seen { flex: 0 0 auto; }
.typing-indicator { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px; border-bottom-left-radius: 5px; padding: 12px 14px; display: flex; gap: 4px; }
.typing-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: typing .9s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
/* Pull-to-refresh spinner */
.ptr { text-align: center; overflow: hidden; height: 0; transition: height var(--dur-med); color: var(--muted); font-size: .8rem; }
.ptr.show { height: 40px; line-height: 40px; }
.ptr .icon.spin { animation: ptr-spin .6s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Bottom nav — floating pill that lifts off the screen ── */
.bottom-nav {
  position: fixed; bottom: calc(12px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 440px; z-index: 40;
  height: 62px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(17,23,37,.9); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow-nav);
  padding: 0 6px;
}
.nav-item { background: transparent; border: 0; color: var(--muted-2); display: flex; flex-direction: column;
  align-items: center; gap: 3px; flex: 1 1 0; padding: 6px 0; border-radius: 14px; position: relative; }
.nav-item .nav-icon { display: flex; position: relative; transition: transform var(--dur-med); }
.nav-item .nav-icon svg { display: block; width: 24px; height: 24px; }
.nav-item .nav-label { display: none; }
.nav-badge { position: absolute; top: -4px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--danger); color: #fff; font-size: .58rem; font-weight: 700; border-radius: 8px;
  display: grid; place-items: center; border: 2px solid var(--panel); line-height: 1; }
.nav-item.active { color: var(--accent-a); }
.nav-item.active .nav-icon { transform: translateY(-2px); }
/* Glowing dot under the active tab. */
.nav-item.active::after { content: ""; position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-b); box-shadow: 0 0 8px var(--accent-b); }
.nav-create {
  width: 54px; height: 54px; border-radius: 18px; border: 0; margin-top: -22px; flex: 0 0 auto;
  background: var(--grad); color: #fff; font-size: 1.7rem; font-weight: 300;
  box-shadow: var(--glow); display: grid; place-items: center;
  transition: transform var(--dur-fast);
}
.nav-create:active { transform: scale(.92); }

/* ── Buttons ── */
.btn { border: 0; border-radius: 14px; padding: 11px 16px; font-weight: 600; font-size: .92rem;
  background: var(--panel-2); color: var(--text); transition: transform .06s, filter var(--dur-fast); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.btn-ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: rgba(255,93,115,.14); color: var(--danger); border: 1px solid rgba(255,93,115,.3); }
.btn-google { background: #fff; color: #1f1f1f; display: flex; align-items: center; justify-content: center; gap: 10px; }
/* Apple's guidelines allow black, white or outlined. Black stays black in
   both themes on purpose — the mark is part of a branded button, not a
   surface that should follow ours. */
.btn-apple { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-block { width: 100%; display: flex; align-items: center; justify-content: center; }
.btn-sm { padding: 7px 13px; font-size: .82rem; border-radius: 11px; }
.btn.busy { opacity: .6; pointer-events: none; }
.gicon { display: inline-flex; }

/* ── Shared form primitives ── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .78rem; color: var(--muted); font-weight: 600; padding-left: 2px; }
.field input, .field-input, .search-input, .comment-input, .chat-input, textarea, select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 13px; padding: 12px 14px; font-size: .95rem; width: 100%; outline: none;
}
.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); }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); padding: 2px; }
.checkbox-row input { margin-top: 3px; accent-color: var(--accent-a); width: 16px; height: 16px; }

/* Visually hidden but still read aloud. The auth fields move their caption
   into the placeholder, and a placeholder is not a label — it vanishes the
   moment someone types, which would leave the input unnamed for anyone on a
   screen reader. The real <label> stays, just off-screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── Auth screens ─────────────────────────────────────────────────────
   Full-bleed, no card. The sign-in screen is the first thing anyone sees,
   so it gets the one piece of real art in the product: a lit backdrop the
   form floats on.

   Everything here is scoped under .auth-screen on purpose. ui.css loads
   after this file and flattens .btn-primary, retunes .field input and so
   on for the in-app chrome, which is right everywhere except here — the
   two-class selectors below outrank it without needing !important and
   without touching how those components look anywhere else.

   Restraint is the brief: one flare, a thin scatter of points, five
   contour lines. Glow is spent on the logo, the badge and the primary
   button, and nowhere else. */

.auth-screen {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100dvh; display: grid; place-items: center;
  padding: calc(30px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));
  background: var(--bg);
}

/* Backdrop. Decorative only — inert to pointers so it can never eat a tap
   meant for the form, and hidden from assistive tech.

   position:fixed, not absolute: #app is capped at --maxw and centred, so an
   absolutely-positioned layer would paint as a 680px-wide strip with the
   glow and the mesh visibly clipped either side on a desktop monitor. Fixed
   escapes that box without needing a 100vw breakout (which would add a
   horizontal scrollbar whenever a vertical one is present). Nothing on
   .auth-screen sets transform or filter, so there is no ancestor to trap it. */
.auth-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.auth-glow {
  position: absolute; inset: -12% -12% auto -12%; height: 74%;
  background:
    radial-gradient(46% 34% at 50% -12%, rgba(124,92,255,.24), transparent 72%),
    radial-gradient(40% 30% at 10% 6%,  rgba(167,139,250,.22), transparent 72%),
    radial-gradient(42% 32% at 94% 4%,  rgba(34,211,238,.11), transparent 72%);
}

/* The single bright point in the top-left corner, with the two faint
   streaks crossing it. Masked to a circle so the streaks fade out
   instead of ending on a hard box edge. */
.auth-glow::after {
  content: ""; position: absolute; left: 13%; top: 15%;
  width: 240px; height: 240px; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0, rgba(216,180,254,.42) 9%, transparent 46%),
    linear-gradient(58deg,  transparent 47.9%, rgba(216,180,254,.42) 50%, transparent 52.1%),
    linear-gradient(148deg, transparent 48.6%, rgba(196,181,253,.24) 50%, transparent 51.4%);
  -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 62%);
  mask-image: radial-gradient(circle, #000 6%, transparent 62%);
}

/* Sparse point field, upper half only. Ten points, none brighter than
   55% white — enough to give the dark a sense of depth, far short of a
   twinkling starfield. */
.auth-dust {
  position: absolute; inset: 0 0 40% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 31% 9%,  rgba(199,210,254,.42), transparent),
    radial-gradient(1px   1px   at 7%  34%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.4px 1.4px at 62% 6%,  rgba(255,255,255,.30), transparent),
    radial-gradient(1px   1px   at 79% 19%, rgba(165,243,252,.38), transparent),
    radial-gradient(1.2px 1.2px at 89% 33%, rgba(255,255,255,.26), transparent),
    radial-gradient(1px   1px   at 44% 27%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.3px 1.3px at 24% 46%, rgba(216,180,254,.30), transparent),
    radial-gradient(1px   1px   at 68% 41%, rgba(255,255,255,.20), transparent),
    radial-gradient(1.1px 1.1px at 95% 12%, rgba(255,255,255,.28), transparent);
  background-repeat: no-repeat;
}

/* Contour lines along the bottom edge, faded upward so they emerge from
   the dark rather than being pasted onto it. */
.auth-mesh {
  position: absolute; left: -5%; right: -5%; bottom: -8px; height: 210px;
  opacity: .68;
  -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 96%);
  mask-image: linear-gradient(to top, #000 34%, transparent 96%);
}
.auth-mesh svg { display: block; width: 100%; height: 100%; }

/* The form column. No panel on a phone — the design is full-bleed. On a
   wide screen a bare column floating in the middle of a desktop monitor
   reads as unfinished, so it picks up a quiet glass panel there. */
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: none; border: 0; box-shadow: none; padding: 0;
  animation: authIn .46s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}
.auth-card.has-back { padding-top: 54px; }
@keyframes authIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

@media (min-width: 701px) {
  .auth-card {
    max-width: 432px; padding: 36px 34px 30px;
    background: rgba(14,19,29,.6);
    border: 1px solid var(--line-2); border-radius: 30px;
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
    box-shadow: 0 34px 90px -34px rgba(0,0,0,.85);
  }
  .auth-card.has-back { padding-top: 36px; }
  .auth-card.has-back .auth-back { top: 18px; left: 18px; }
}

.auth-back {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 42px; height: 42px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.auth-back:active { transform: scale(.94); background: var(--panel-3); }
.auth-back .icon { width: 20px; height: 20px; }

/* Brand lockup */
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-bottom: 26px; }
.auth-screen .auth-logo .logo-mark { border-radius: 50%; filter: drop-shadow(0 10px 28px rgba(124,92,255,.5)); }
.auth-screen .auth-logo .wordmark { font-size: 2.1rem; line-height: 1.1; letter-spacing: -.04em; }
.wordmark-tm { font-size: .38em; font-weight: 600; letter-spacing: 0; top: -.85em; }
.auth-screen .auth-logo .main-badge.lg {
  font-size: .74rem; letter-spacing: .13em; padding: 5px 17px;
  background: var(--grad); box-shadow: 0 8px 24px -4px rgba(124,92,255,.7);
}

/* Form column */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form h2 { text-align: center; }
.auth-screen .auth-form h2 { font-size: 1.74rem; letter-spacing: -.038em; margin: 0; }
.auth-form .muted { text-align: center; margin: -4px 0 6px; }
.auth-sub { text-align: center; color: var(--muted); font-size: .95rem; margin: -7px 0 8px; }
.auth-note { text-align: center; margin: -6px 0 2px; }

/* Fields: one tall pill, caption inside as placeholder, glyph on the left. */
.auth-screen .field { gap: 0; }
.auth-screen .field-shell { position: relative; display: block; }
.auth-screen .field-ico {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  display: grid; color: var(--muted-2); pointer-events: none;
  transition: color var(--dur-fast);
}
.auth-screen .field-ico .icon { width: 19px; height: 19px; }
.auth-screen .field input {
  width: 100%; height: 58px; padding: 0 16px 0 49px;
  border-radius: 16px; font-size: .98rem; color: var(--text);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-2);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.auth-screen .field input::placeholder { color: var(--muted-2); opacity: 1; }
.auth-screen .field input:focus {
  border-color: var(--accent-a); background: rgba(124,92,255,.07);
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}
.auth-screen .field-shell:focus-within .field-ico { color: var(--accent-a); }
/* Chrome paints its own pale-yellow autofill background, which is jarring
   against near-black. A long inset shadow repaints the field instead. */
.auth-screen .field input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px #151b28 inset;
  caret-color: var(--text);
}

.auth-screen .pw-wrap input { padding-right: 54px; }
.auth-screen .pw-toggle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.auth-screen .pw-toggle .icon { width: 20px; height: 20px; }
.auth-screen .pw-toggle:active { background: rgba(124,92,255,.16); color: var(--text); }

/* Date of birth. Only the background colour is set — .dob-row select draws
   its dropdown caret with background-image, and the shorthand would erase it. */
.auth-screen .dob-field { gap: 9px; }
.auth-screen .dob-field > label { font-size: .88rem; font-weight: 650; color: var(--text); padding-left: 2px; }
.auth-screen .dob-row { gap: 9px; }
.auth-screen .dob-row select {
  height: 54px; border-radius: 15px; font-size: .95rem; color: var(--text);
  background-color: rgba(255,255,255,.035); border: 1px solid var(--line-2);
  padding: 0 28px 0 15px;
}
.auth-screen .dob-hint { padding-left: 2px; }

/* Remember me / Forgot password */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3px 2px 5px; }
.auth-remember { display: inline-flex; align-items: center; gap: 11px; font-size: .89rem; color: var(--text);
  cursor: pointer; user-select: none; -webkit-user-select: none; }
.auth-screen .auth-remember input,
.auth-screen .checkbox-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.auth-box {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: rgba(255,255,255,.04);
  display: grid; place-items: center; color: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.auth-box .icon { width: 14px; height: 14px; stroke-width: 3; }
.auth-remember input:checked + .auth-box,
.checkbox-row input:checked + .auth-box { background: var(--grad); border-color: transparent; color: #fff; }
.auth-remember input:focus-visible + .auth-box,
.checkbox-row input:focus-visible + .auth-box { outline: 2px solid var(--accent-a); outline-offset: 2px; }
.auth-screen .checkbox-row { gap: 11px; align-items: flex-start; font-size: .85rem; line-height: 1.45; margin: 2px 0; }
.auth-screen .checkbox-row .auth-box { margin-top: 1px; }
.auth-screen .checkbox-row a { color: var(--accent-a); font-weight: 600; cursor: pointer; }
.auth-forgot-link { font-size: .89rem; font-weight: 600; color: var(--accent-a); cursor: pointer; }

/* Primary call to action */
.auth-screen .btn-cta {
  position: relative; height: 58px; padding: 0 24px; border-radius: 16px;
  background: var(--grad); color: #fff; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.01em; box-shadow: 0 12px 32px -10px rgba(124,92,255,.75);
  margin-top: 4px;
}
.auth-screen .btn-cta:active { filter: brightness(1.06); }
.btn-cta-arrow {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  transition: transform var(--dur-med) var(--ease-out, ease);
}
.btn-cta-arrow .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.auth-screen .btn-cta:active .btn-cta-arrow { transform: translate(4px, -50%); }
.auth-screen .btn.busy .btn-cta-arrow { opacity: 0; }

/* "or continue with" */
.auth-or { display: flex; align-items: center; gap: 15px; margin: 8px 0 2px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line-2); }
.auth-or span { font-size: .82rem; color: var(--muted-2); white-space: nowrap; }

.auth-screen .btn-google {
  height: 56px; border-radius: 16px; border: 0;
  background: #fff; color: #1f1f1f; font-size: .98rem; font-weight: 650;
}
.auth-screen .btn-google .gicon svg { width: 21px; height: 21px; }
.auth-screen .btn-apple {
  height: 56px; border-radius: 16px; border: 0;
  background: #000; color: #fff; font-size: .98rem; font-weight: 650;
}
.auth-screen .btn-apple .gicon svg { width: 21px; height: 21px; }
/* Verify / reset screens stack ghost buttons under the CTA — match the
   height so the column doesn't step down halfway. */
.auth-screen .btn-ghost { height: 54px; border-radius: 16px; font-size: .95rem; }

.auth-switch { text-align: center; font-size: .85rem; color: var(--muted); }
.auth-screen .auth-switch { margin-top: 17px; font-size: .92rem; }
.auth-screen .auth-switch a {
  color: var(--accent-b); font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 1px;
}
.auth-switch-arrow { display: grid; place-items: center; }
.auth-switch-arrow .icon { width: 15px; height: 15px; stroke-width: 2.4; }

/* Trust footer */
.auth-trust {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  margin-top: 36px; font-size: .8rem; color: var(--muted-2);
}
.auth-trust-badge {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #c4b5fd; border: 1px solid rgba(124,92,255,.36);
  background: radial-gradient(circle at 50% 26%, rgba(124,92,255,.38), rgba(124,92,255,.08));
  box-shadow: 0 10px 26px -10px rgba(124,92,255,.75);
}
.auth-trust-badge .icon { width: 22px; height: 22px; }

.verify-icon { font-size: 2.6rem; text-align: center; }
.verify-icon .icon { width: 40px; height: 40px; }
.auth-screen .verify-icon { color: var(--accent-a); margin-bottom: 2px; }

/* Light theme: the same layout, but the wash and the field fills have to
   invert or the whole screen turns into grey-on-grey. */
:root[data-theme="light"] .auth-glow {
  background:
    radial-gradient(46% 34% at 50% -12%, rgba(124,92,255,.16), transparent 72%),
    radial-gradient(40% 30% at 10% 6%,  rgba(167,139,250,.14), transparent 72%),
    radial-gradient(42% 32% at 94% 4%,  rgba(34,211,238,.09), transparent 72%);
}
:root[data-theme="light"] .auth-glow::after,
:root[data-theme="light"] .auth-dust { display: none; }
:root[data-theme="light"] .auth-mesh { opacity: .38; }
:root[data-theme="light"] .auth-screen .field input,
:root[data-theme="light"] .auth-screen .dob-row select,
:root[data-theme="light"] .auth-box { background-color: var(--panel-2); }
:root[data-theme="light"] .auth-screen .field input:focus { background: #fff; }
:root[data-theme="light"] .auth-screen .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #f2f4f8 inset; }
:root[data-theme="light"] .auth-screen .btn-google { border: 1px solid var(--line-2); }
/* No light-mode variant for Apple: a black button on white is one of
   Apple's own permitted forms and needs no outline to separate it. */
/* On white the lilac shield all but vanishes inside its own halo. */
:root[data-theme="light"] .auth-trust-badge {
  color: #6d28d9;
  background: radial-gradient(circle at 50% 26%, rgba(124,92,255,.20), rgba(124,92,255,.05));
  box-shadow: 0 10px 26px -12px rgba(124,92,255,.5);
}
@media (min-width: 701px) {
  :root[data-theme="light"] .auth-card { background: rgba(255,255,255,.78); }
}

/* Short screens (landscape phones, small windows): the trust footer and the
   brand lockup are the first things that can afford to give up room. */
@media (max-height: 700px) {
  .auth-screen .auth-logo .logo-mark { width: 56px; height: 56px; }
  .auth-screen .auth-logo .wordmark { font-size: 1.8rem; }
  .auth-logo { gap: 10px; margin-bottom: 20px; }
  .auth-trust { margin-top: 24px; }
}

/* ── Greeting + points ── */
.greeting { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.greeting h2 { font-size: 1.55rem; line-height: 1.15; }
.greeting-name { background: linear-gradient(120deg, #4c9aff, #a78bfa 50%, #ff5d9e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.points-bar { display: inline-flex; align-items: center; gap: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .84rem; }
.points-bar .diamond { filter: drop-shadow(0 0 6px rgba(79,124,255,.6)); }
.points-bar strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Composer ── */
.composer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.composer-top { display: flex; align-items: center; gap: 12px; }
.composer-fake { flex: 1; text-align: left; background: transparent; border: 0;
  color: var(--muted); padding: 4px 0; font-size: 1rem; }
.composer-pen { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; border: 0;
  background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--glow); }
.composer-pen .icon { width: 20px; height: 20px; }
.composer-actions { display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.composer-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; color: var(--text); font-size: .82rem; font-weight: 600; padding: 8px 4px; border-radius: 12px; }
.composer-btn:active { background: var(--panel-2); }
.composer-btn .icon { width: 18px; height: 18px; }
.cb-photo .icon { color: #4c9aff; }
.cb-video .icon { color: #ff5d73; }
.cb-ai .icon { color: #a78bfa; }
.cb-poll .icon { color: #f6b545; }

/* ── Stories ── */
.stories-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.stories-row::-webkit-scrollbar { display: none; }
.story-tile { flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; cursor: pointer; }
.story-ring { padding: 2.5px; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #22c7e0); }
.story-ring .avatar { border: 2.5px solid var(--bg); }
.story-tile.seen .story-ring { background: var(--panel-3); }
.story-name { font-size: .7rem; color: var(--text); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-tile.add .story-add-plus { position: absolute; bottom: 20px; right: 8px; width: 20px; height: 20px;
  background: var(--accent-a); border: 2px solid var(--bg); border-radius: 50%; color: #fff; font-size: .8rem;
  display: grid; place-items: center; line-height: 1; }

/* ── Friends row (Messages tab) ── */
.friends-row-wrap { margin-bottom: 10px; }
.friends-row-label { margin: 4px 2px 6px; font-weight: 600; }
.friends-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.friends-row::-webkit-scrollbar { display: none; }
.friend-tile { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; cursor: pointer; }

/* ── Trending strip ── */
.trending-strip { display: flex; gap: 10px; overflow-x: auto; align-items: stretch; scrollbar-width: none; padding: 2px 0; }
.trending-strip::-webkit-scrollbar { display: none; }
.trending-label { font-size: .9rem; font-weight: 700; color: var(--text); flex: 0 0 auto; align-self: center;
  font-family: var(--font-display); display: inline-flex; align-items: center; gap: 5px; }
.trend-chip { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.trend-tag { font-size: .9rem; font-weight: 700; color: var(--accent-a); }
.trend-count { font-size: .72rem; color: var(--muted); }
.trend-chip:nth-child(4n+2) .trend-tag { color: #7c5cff; }
.trend-chip:nth-child(4n+3) .trend-tag { color: #ff5d9e; }
.trend-chip:nth-child(4n+0) .trend-tag { color: #22c7e0; }
.trend-chip:nth-child(4n+1) .trend-tag { color: #4c9aff; }

/* ── Feed / post card ── */
.feed { display: flex; flex-direction: column; gap: 14px; }
.post-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; position: relative; }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-repost-credit { color: var(--muted); font-size: .8rem; font-weight: 600; margin: 6px 0 -2px; cursor: pointer; }
.post-repost-credit strong { color: var(--text); font-weight: 700; }
.post-repost-credit .icon { width: 13px; height: 13px; vertical-align: -2px; }
.post-head-clickable { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.post-head-meta { flex: 1; min-width: 0; }
.name-row { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-family: var(--font-display); letter-spacing: -.01em; }
.name-row.clickable { cursor: pointer; }
.name-row.big { font-size: 1.25rem; font-weight: 780; }
.name-row.small { font-size: .82rem; }
.verified-badge { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; }
.verified-badge-tap { display: inline-flex; cursor: pointer; }
.post-view-count { display: inline-flex; align-items: center; gap: 3px; }
.post-view-count .icon { width: 13px; height: 13px; }
.plus-badge { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; margin-left: 1px; }
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.icon.inline { width: 13px; height: 13px; vertical-align: -2px; }
.plus-crown-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex: 0 0 auto;
  filter: drop-shadow(0 0 3px rgba(245,180,41,.5)); }
.plus-crown-icon.inline { width: 14px; height: 14px; vertical-align: -2px; }
.name-row.big .verified-badge { width: 19px; height: 19px; }
.name-row.big .plus-badge { width: 19px; height: 19px; }
.post-body { margin: 10px 0; white-space: pre-wrap; word-break: break-word; }
.read-more-btn { display: block; background: none; border: 0; padding: 4px 0 0; margin: 0;
  color: var(--accent-b); font-weight: 600; font-size: .88rem; cursor: pointer; }
.post-body.post-bg { border-radius: 14px; padding: 36px 20px; margin: 10px 0; display: grid; place-items: center;
  min-height: 180px; }
.post-bg-text { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 700; text-align: center;
  line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: pre-wrap; word-break: break-word; }
.hashtag, .mention { color: var(--accent-b); font-weight: 600; }
.post-media-wrap { border-radius: var(--radius-sm); overflow: hidden; margin: 6px 0; border: 1px solid var(--line); }
.post-media { width: 100%; max-height: 520px; object-fit: cover; }
/* Videos must never collapse to 0 height before metadata loads, and must not
   be cropped. Give them a floor height, a dark backdrop, and contain fit. */
.post-video-wrap { position: relative; background: #000; min-height: 220px; display: flex; }
.post-video { width: 100%; max-height: 560px; min-height: 220px; object-fit: contain; background: #000; display: block; }
.post-summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px;
  font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.react-summary { display: inline-flex; gap: 4px; }
.post-actions { display: flex; gap: 2px; padding-top: 6px; position: relative; }
.post-action { flex: 1; background: transparent; border: 0; color: var(--muted); font-weight: 600;
  font-size: .82rem; padding: 9px 4px; border-radius: 10px; }
.post-action:active { background: var(--panel-2); }
.post-action.active { color: var(--accent-b); }
.react-wrap { flex: 1; position: relative; display: flex; }
.react-btn { width: 100%; }
.react-picker { position: absolute; bottom: 46px; left: 0; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 18px; padding: 8px;
  box-shadow: var(--shadow); z-index: 6; width: 232px; max-width: calc(100vw - 40px); }
.react-opt { background: transparent; border: 0; font-size: 1.5rem; padding: 4px; transition: transform var(--dur-fast);
  border-radius: 10px; display: grid; place-items: center; }
.react-opt:active, .react-opt:hover { transform: scale(1.25) translateY(-2px); background: var(--panel-2); }

/* ── Comments ── */
.comment-thread { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.comment-composer { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.comment-input { flex: 1; border-radius: 999px; }
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment-row { display: flex; gap: 8px; }
.comment-avatar-click { cursor: pointer; flex: 0 0 auto; height: fit-content; }
.comment-bubble { background: var(--panel-2); border-radius: 14px; padding: 8px 12px; flex: 1; }
.comment-text { word-break: break-word; }
.comment-meta { margin-top: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.cm-del { color: var(--danger); }

/* Reply + reaction controls on a comment, and indented reply threads. */
.cm-reply-link, .comment-reply { color: var(--muted); font-weight: 600; cursor: pointer; }
.cm-react-wrap { position: relative; display: inline-flex; }
.cm-react-btn { background: transparent; border: 0; color: var(--muted); font-weight: 600; font-size: .82rem;
  padding: 0; cursor: pointer; }
.cm-react-btn.active { color: var(--accent-b); }
.cm-react-wrap .react-picker { bottom: auto; top: 26px; left: -8px; }
.cm-react-count { color: var(--muted); }
.cm-reply-composer { margin-top: 6px; }
.cm-reply-row { margin-bottom: 0; }
.cm-replies { display: flex; flex-direction: column; gap: 10px; margin-left: 40px; margin-top: 10px; }
.comment-row.cm-reply .comment-bubble { padding: 6px 10px; }

/* ── Avatars ── */
.avatar { border-radius: 50%; position: relative; flex: 0 0 auto; background: var(--panel-3); }
.avatar-media { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; }
.avatar-media img, .avatar-media video { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 700;
  color: #fff; background: var(--grad); font-size: .9em; }
.avatar-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px transparent; border: 2px solid transparent;
  background-image: linear-gradient(var(--panel), var(--panel)), var(--grad);
  background-origin: border-box; background-clip: content-box, border-box; padding: 2px; }
.online-dot { position: absolute; bottom: 0; right: 0; border-radius: 50%; z-index: 2;
  background: var(--ok); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 6px 1px rgba(34,197,94,.65);
  animation: online-pulse 2.2s ease-in-out infinite; }
@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 6px 1px rgba(34,197,94,.65); }
  50% { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 9px 3px rgba(34,197,94,.85); }
}
@media (prefers-reduced-motion: reduce) { .online-dot { animation: none; } }

/* ── Empty states ── */
.empty-state { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 100%; }
.empty-icon { font-size: 2.6rem; opacity: .8; }
.empty-icon .icon { width: 40px; height: 40px; }
.big-status-icon { margin-bottom: 8px; }
.big-status-icon .icon { width: 42px; height: 42px; }
.big-status-icon.sm .icon { width: 36px; height: 36px; }
.empty-state h3 { margin: 0; }
.empty-state p { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.empty-state .btn { margin-top: 8px; }

/* ── User rows / search ── */
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.user-row.selected { border-color: var(--accent-a); background: rgba(139,92,246,.1); }
.bubble-sender { margin-bottom: 2px; font-weight: 600; }
.request-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.request-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.req-row-actions { display: flex; gap: 8px; margin-top: 6px; }
.user-row-meta { flex: 1; min-width: 0; }
.page-search { padding-top: 0; }
.search-head { position: sticky; top: calc(var(--top-h) + var(--safe-top)); z-index: 10; background: var(--bg);
  padding-top: 6px; padding-bottom: 10px; margin-top: -14px; display: flex; flex-direction: column; gap: 12px; }

/* ── Search bar — glass pill with a gradient hairline border. The border
   is a padding trick (gradient background peeking out 1.5px on every
   edge); focus swaps in a brighter gradient + lifts the glow so typing
   feels like it "wakes up" the bar rather than just outlining it. ── */
.search-input-wrap { position: relative; border-radius: 999px; padding: 1.5px;
  background: var(--grad); background-size: 200% 200%; background-position: 0% 50%;
  box-shadow: var(--shadow); transition: box-shadow var(--dur-med), background-position var(--dur-med); }
.search-input-wrap:focus-within { box-shadow: var(--glow), 0 0 0 5px rgba(124,92,255,.12);
  background-position: 100% 50%; }
.search-input-wrap .search-input-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--accent-b); display: grid; place-items: center; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 0 6px rgba(34,199,224,.45)); transition: color var(--dur-med); }
.search-input-wrap:focus-within .search-input-icon { color: var(--accent-a); }
.search-input-wrap .search-input-icon .icon { width: 18px; height: 18px; }
.search-input-wrap .search-input {
  width: 100%; border-radius: 999px; padding: 14px 44px 14px 46px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel-2)); background-color: var(--panel-2);
  border: none; font-weight: 500; font-size: .93rem; letter-spacing: .002em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02); transition: background-color var(--dur-med); }
.search-input-wrap .search-input:focus { background-color: var(--panel-3); }
.search-input-wrap .search-input::placeholder { color: var(--muted-2); font-weight: 500; }
.search-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--panel-3); color: var(--muted); border: none; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.search-clear-btn .icon { width: 13px; height: 13px; }
.search-clear-btn:hover { color: var(--text); background: var(--line-2); }
.search-clear-btn:active { transform: translateY(-50%) scale(.88); }
.search-clear-btn.hidden { display: none; }

.msg-tabs { display: flex; gap: 6px; }
.msg-tabs-row { display: flex; align-items: center; gap: 8px; }
.msg-tabs-row .msg-tabs { flex: 1; overflow-x: auto; scrollbar-width: none; }
.msg-tabs-row .msg-tabs::-webkit-scrollbar { display: none; }
.new-group-btn { flex: 0 0 auto; }
.seg { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 9px; font-size: .82rem; font-weight: 600; }
.seg.active { background: var(--accent-a); color: #fff; border-color: transparent; }

/* Search tabs get their own premium treatment: a frosted pill track with
   a gradient "liquid" active state, instead of the flat accent fill the
   shared .seg uses elsewhere (messages/watch tabs are left untouched). */
.search-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: 0 -3px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.search-tabs::-webkit-scrollbar { display: none; }
.search-tabs .seg { flex: 0 0 auto; padding: 8px 16px; background: transparent; border: none;
  color: var(--muted); font-size: .81rem; transition: color var(--dur-fast), background var(--dur-med); }
.search-tabs .seg.active { background: var(--grad); color: #fff; box-shadow: var(--glow); font-weight: 700; }
.search-results { display: flex; flex-direction: column; gap: 10px; }
.tag-result { display: flex; justify-content: space-between; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; }

/* ── Search suggestions (typeahead dropdown) ── */
.search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.suggest-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  transition: background var(--dur-fast); }
.suggest-row:hover, .suggest-row:active { background: var(--panel-2); }
.suggest-row + .suggest-row { border-top: 1px solid var(--line); }
.suggest-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--accent-b);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700; flex: 0 0 auto; }
.suggest-meta { flex: 1; min-width: 0; }
.suggest-name { font-size: .87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-sub { font-size: .72rem; color: var(--muted); }

/* ── Chips ── */
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 8px 15px; font-size: .82rem; font-weight: 600; }
.chip.active { background: var(--accent-soft); color: var(--accent-a); border-color: rgba(124,92,255,.4); }

/* ── Discover ── */
.discover-section h3, .explore-title { margin-bottom: 10px; }
.topic-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.topic-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 15px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; position: relative; overflow: hidden; }
.topic-card::before { content: ""; position: absolute; inset: 0; background: var(--aurora); opacity: .8; pointer-events: none; }
.topic-card strong { color: var(--accent-b); position: relative; font-family: var(--font-display); font-size: 1.05rem; }
.topic-card span { position: relative; }
.discover-columns { display: flex; flex-direction: column; gap: 16px; }
.popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.popular-cell { aspect-ratio: 1; background: var(--panel-2); border-radius: 10px; overflow: hidden;
  position: relative; cursor: pointer; }
.popular-cell img, .popular-cell video { width: 100%; height: 100%; object-fit: cover; }
.popular-text { padding: 8px; font-size: .74rem; color: var(--muted); }
.popular-likes { position: absolute; bottom: 4px; left: 4px; font-size: .68rem; background: rgba(0,0,0,.5);
  padding: 2px 6px; border-radius: 6px; }
.discover-side { display: flex; flex-direction: column; gap: 8px; }
.mini-comm { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.explore-cell { aspect-ratio: 1; background: var(--panel-2); border-radius: 10px; overflow: hidden; cursor: pointer; }
.explore-cell img, .explore-cell video { width: 100%; height: 100%; object-fit: cover; }

/* ── Profile ── */
.page-profile { padding: 0 0 20px; gap: 0; }
.profile-cover { height: 168px; background:
    radial-gradient(circle at 20% 30%, rgba(168,139,250,.5), transparent 40%),
    radial-gradient(circle at 75% 20%, rgba(124,92,255,.45), transparent 45%),
    radial-gradient(circle at 90% 60%, rgba(34,199,224,.3), transparent 50%),
    linear-gradient(160deg, #1a1140, #0a0e17 70%);
  background-size: cover; background-position: center; position: relative; }
.profile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--bg) 100%); pointer-events: none; }
.cover-edit, .avatar-edit { position: absolute; background: rgba(0,0,0,.5); border: 0; color: #fff;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.cover-edit { bottom: 10px; right: 10px; }
.profile-settings-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.4); border: 0;
  color: #fff; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; z-index: 2;
  backdrop-filter: blur(6px); }
.profile-settings-btn:active { background: rgba(0,0,0,.7); }
.profile-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -48px; position: relative; z-index: 1; }
.profile-avatar-wrap { position: relative; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #22c7e0); }
.profile-avatar-wrap .avatar { border: 3px solid var(--bg); }
.avatar-edit { bottom: 0; right: 0; width: 30px; height: 30px; border: 2px solid var(--panel); }
.cover-edit .icon, .avatar-edit .icon, .profile-settings-btn .icon { width: 17px; height: 17px; }
.message-btn { display: inline-flex; align-items: center; gap: 5px; }
.message-btn .icon { width: 15px; height: 15px; }
.profile-id { flex: 1; padding-bottom: 4px; }
.level-badge { display: inline-block; margin-top: 4px; font-size: .72rem; background: var(--accent-soft);
  border: 1px solid rgba(124,92,255,.3); padding: 2px 9px; border-radius: 999px; color: var(--amber); }
/* Row holding the level badge + the (i) "About this account" button —
   keeps the button clear of the name/handle text above it. */
.profile-id-row2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.profile-id-row2 .level-badge { margin-top: 0; }
.about-info-btn { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--muted); }
.about-info-btn .icon { width: 15px; height: 15px; }
/* "About this account" sheet (js/profile.js openAccountInfo) */
.acct-info-card { display: flex; align-items: flex-start; gap: 10px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 4px 4px 10px; }
.acct-info-card-ico { color: var(--accent-a); flex: 0 0 auto; margin-top: 1px; }
.acct-info-card-ico .icon { width: 20px; height: 20px; }
.acct-info-list { display: flex; flex-direction: column; gap: 2px; margin: 0 4px; }
.acct-info-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: .9rem; }
.acct-info-row:last-child { border-bottom: 0; }
.acct-info-row .acct-info-ico { color: var(--muted); flex: 0 0 auto; }
.acct-info-row .acct-info-ico .icon { width: 18px; height: 18px; }
.acct-info-sheet { padding-bottom: 14px; }
.profile-head .btn { margin-bottom: 6px; }

.profile-cta-row { padding: 12px 16px 0; }
.profile-bio { padding: 12px 16px 0; }
.profile-links { padding: 4px 16px 0; }
.profile-link { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; font-weight: 600; }
.profile-link .icon { width: 14px; height: 14px; }
.about-row { padding: 6px 16px 0; }
.stats-row { display: flex; justify-content: space-between; padding: 16px; gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 4px; }
.stat.clickable { cursor: pointer; }
.stat.clickable:active { background: var(--panel-2); }
.stat strong { font-size: 1.15rem; font-family: var(--font-display); }
.stat span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.streak-box, .ach-section, .ai-about { margin: 8px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
/* About-the-Assistant card (assistantAbout in js/profile.js). Shares the
   card chrome above; these rules only lay out its rows. */
.ai-about h4 { margin: 0 0 12px; }
.ai-about-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.ai-about-row + .ai-about-row { border-top: 1px solid var(--line); }
.ai-about-ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 10px; background: var(--panel-2); color: var(--muted-2); }
.ai-about-ico .icon { width: 16px; height: 16px; }
.ai-about-title { font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.ai-about-body { line-height: 1.45; }

.streak-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.streak-head strong { font-family: var(--font-display); font-size: 1.05rem; }
/* Connected dot track (like the mockup's M-T-W-T-F-S-S row) */
.streak-dots { display: flex; justify-content: space-between; gap: 0; position: relative; }
.streak-dots::before { content: ""; position: absolute; top: 11px; left: 6%; right: 6%; height: 2px; background: var(--line-2); z-index: 0; }
.streak-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1;
  font-size: .72rem; color: var(--muted); background: transparent; border: 0; }
.streak-day::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-3);
  border: 2px solid var(--line-2); box-sizing: border-box; }
.streak-day.on::before { background: var(--accent-a); border-color: var(--accent-a); box-shadow: 0 0 10px rgba(124,92,255,.5); }
.streak-day.on { color: var(--text); }
.streak-day > span { order: 2; }

/* Achievements — glossy hex-ish badges on a shelf */
.ach-section h4 { display: flex; align-items: center; justify-content: space-between; }
.ach-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-top: 4px; }
.ach-row::-webkit-scrollbar { display: none; }
.ach-badge { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; background: transparent; border: 0; }
.ach-badge .ach-icon { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, var(--panel-3), var(--panel-2));
  border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35); }
.ach-badge .ach-icon .icon { width: 30px; height: 30px; color: var(--accent-a);
  filter: drop-shadow(0 2px 4px rgba(124,92,255,.5)); }
.ach-icon-badge { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ach-icon-badge .icon { width: 46px !important; height: 46px !important; }
.ach-badge.locked { opacity: .45; filter: grayscale(.7); }
.ach-badge.locked .ach-icon .icon { color: var(--muted); filter: none; }
.ach-label { font-size: .68rem; color: var(--muted); text-align: center; font-weight: 500; }

/* Quick tiles — 2-row grid, left-aligned icon + label + sub (mockup style) */
.quick-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; margin: 8px 16px; }
.quick-tile { background: transparent; border: 0; border-radius: 14px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text); font-size: .7rem; font-weight: 500; }
.quick-tile:active { background: var(--panel-2); }
.qt-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-a); font-size: 1.1rem; }
.qt-icon .icon { width: 20px; height: 20px; }

/* ── Drafts ── */
.draft-card { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px; }
.draft-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.draft-thumb img, .draft-thumb video { width: 100%; height: 100%; object-fit: cover; }
.draft-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.draft-text { margin: 0; overflow-wrap: break-word; word-break: break-word; }
.draft-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* ── Analytics ── */
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.stat-tile-icon { font-size: 1.15rem; }
.stat-tile strong { font-size: 1.05rem; }
.analytics-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.chart-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.chart-bar-fill { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--grad); min-height: 4px;
  transition: height var(--dur-slow) ease; }
.chart-bar-label { position: absolute; bottom: -18px; font-size: .62rem; color: var(--muted); }
.type-breakdown { display: flex; flex-direction: column; gap: 8px; }
.type-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.type-row > span:first-child { flex: 0 0 110px; }
.type-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.type-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; }
.interests-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; }
.interests-row .chip { background: transparent; border: 1px solid var(--line-2); color: var(--accent-b); font-weight: 500; }
.interests-row .chip:nth-child(5n+1) { color: #7c5cff; border-color: rgba(124,92,255,.5); }
.interests-row .chip:nth-child(5n+2) { color: #22c7e0; border-color: rgba(34,199,224,.5); }
.interests-row .chip:nth-child(5n+3) { color: #2fd8a4; border-color: rgba(47,216,164,.5); }
.interests-row .chip:nth-child(5n+4) { color: #ff5d9e; border-color: rgba(255,93,158,.5); }
.interests-row .chip:nth-child(5n+5) { color: #f6b545; border-color: rgba(246,181,69,.5); }
.profile-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); position: sticky;
  top: calc(var(--top-h) + var(--safe-top)); background: var(--bg); z-index: 10; overflow-x: auto; scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.ptab { background: transparent; border: 0; color: var(--muted); padding: 13px 12px; font-weight: 600;
  font-size: .88rem; border-bottom: 2px solid transparent; white-space: nowrap; font-family: var(--font-display); }
.ptab.active { color: var(--text); border-bottom-color: var(--accent-a); }
.profile-tab-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* Following/Followers/Suggested full page (js/profile.js renderUserList) —
   a lightweight header row ahead of the same .profile-tabs/.ptab pattern
   used elsewhere, so it reads as part of the same design system. The
   global .topbar is itself sticky at top:0, so this sticks right below it
   (same offset .profile-tabs already uses elsewhere), and the tab bar
   below that sticks below both. */
.sub-page-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  min-height: 52px; box-sizing: border-box;
  border-bottom: 1px solid var(--line); position: sticky;
  top: calc(var(--top-h) + var(--safe-top)); background: var(--bg); z-index: 11; }
.sub-page-head h3 { margin: 0; font-size: 1.05rem; font-family: var(--font-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-userlist .profile-tabs { top: calc(var(--top-h) + var(--safe-top) + 52px); }
.page-userlist .profile-tab-body { padding: 0; gap: 0; }
.page-userlist .user-row { padding: 12px 14px; border-radius: 0; }

/* ── Messages ── */
.assistant-card { display: flex; flex-direction: column; gap: 14px; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 20px; padding: 16px; cursor: pointer; position: relative;
  overflow: hidden; }
.assistant-card::before { content: ""; position: absolute; inset: 0; background: var(--aurora); opacity: .8; pointer-events: none; }
.assistant-card-top { display: flex; align-items: center; gap: 14px; position: relative; }
.assistant-card-top .avatar { box-shadow: 0 0 0 3px rgba(124,92,255,.35), 0 0 24px rgba(124,92,255,.4); }
.assistant-avatar { width: 48px; height: 48px; border-radius: 14px; background: var(--grad); display: grid;
  place-items: center; font-size: 1.5rem; position: relative; flex: 0 0 auto; }
.assistant-avatar.sm { width: 36px; height: 36px; border-radius: 10px; font-size: 1.1rem; }
.assistant-meta { flex: 1; position: relative; min-width: 0; }
.assistant-meta .name-row { font-family: var(--font-display); font-size: 1.05rem; }
.ai-tag { background: var(--accent-a); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.assistant-chat-now { flex: 0 0 auto; align-self: flex-start; }
.assistant-chips { display: flex; gap: 8px; overflow-x: auto; width: 100%; scrollbar-width: none; position: relative; }
.assistant-chips::-webkit-scrollbar { display: none; }
.assistant-chips .chip { flex: 0 0 auto; font-size: .78rem; }
.link-inline { color: var(--accent-b); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.conv-list { display: flex; flex-direction: column; gap: 2px; }
.conv-section-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 12px 12px 4px; }
.conv-section-label:first-child { padding-top: 2px; }
.conv-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.conv-row:active { background: var(--panel); }
.conv-row.conv-pinned { background: color-mix(in srgb, #0084ff 6%, transparent); }
.conv-meta { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-top .name-row { font-family: var(--font-display); font-weight: 600; }
.conv-row.conv-unread .conv-top .name-row, .conv-row.conv-unread .conv-preview .muted:first-of-type { color: var(--text); font-weight: 700; }
.conv-preview { display: flex; align-items: center; gap: 6px; }
.conv-preview .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { background: #0084ff; color: #fff; font-size: .68rem; font-weight: 700; min-width: 19px;
  height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.conv-preview .pin { flex: 0 0 auto; color: var(--muted); display: inline-flex; }
.conv-preview .pin .icon { width: 13px; height: 13px; }
/* Small pin badge sitting on the avatar's corner, Messenger-style */
.avatar.has-pin::after { content: ""; position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
  border-radius: 50%; background: #0084ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5M9 3h6l1 6 3 2v2H5v-2l3-2 1-6Z'/%3E%3C/svg%3E") center/9px no-repeat;
  border: 2px solid var(--bg); z-index: 3; }

/* ── Chat screen (overlay) ── */
.chat-screen { position: fixed; top: var(--vv-top, 0px); left: 0; right: 0;
  height: 100dvh;
  z-index: 60; background: var(--bg); display: flex; flex-direction: column;
  max-width: var(--maxw); margin: 0 auto; padding-top: var(--safe-top); }
.chat-header { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 4px;
  border-bottom: 1px solid var(--line); background: var(--panel); position: relative; z-index: 2; }
.chat-header .icon-btn { flex: 0 0 auto; }
.chat-title { flex: 1; min-width: 0; }
.chat-name { font-weight: 600; font-size: .98rem; line-height: 1.15; }
.chat-header-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.chat-presence { font-size: .74rem; color: var(--muted); line-height: 1.2; margin-top: 1px; }
.chat-presence.is-online { color: var(--ok); }
.chat-presence::first-letter { text-transform: uppercase; }

/* Messages area with a subtle chat wallpaper (flat, theme-aware) */
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 3px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent-a) 5%, transparent) 0, transparent 42%),
                    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-b) 5%, transparent) 0, transparent 42%); }

/* Day divider chip */
.chat-day-divider { align-self: center; margin: 10px 0 6px; }
.chat-day-divider span { background: var(--panel-2); color: var(--muted); font-size: .72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Bubbles — Messenger style: solid colour fill, fully rounded corners */
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 18px; font-size: .93rem; line-height: 1.35;
  word-break: break-word; position: relative; }
.bubble.mine { align-self: flex-end; background: linear-gradient(135deg, #0084ff, #0068d6); color: #fff;
  border-bottom-right-radius: 6px; }
.bubble.theirs { align-self: flex-start; background: var(--panel-2); color: var(--text); border-bottom-left-radius: 6px; }
/* consecutive bubbles from same side sit tighter */
.bubble + .bubble { margin-top: 2px; }
.bubble-sender { font-size: .76rem; font-weight: 700; margin-bottom: 2px; color: var(--accent-a); }
.bubble-text { white-space: pre-wrap; }
/* Assistant answers are typed in as plain text/span nodes (not the
   .bubble-text wrapper real chat messages use), so without this a
   troubleshooting answer's blank-line paragraph breaks would collapse
   into one run-on line. */
.assistant-log .bubble { white-space: pre-wrap; }

/* Inline meta: time + delivery ticks, floated to the trailing edge */
.bubble-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 8px;
  font-size: .64rem; opacity: .7; user-select: none; white-space: nowrap; }
.bubble.mine .bubble-meta { opacity: .85; }
.bubble-ticks .icon { width: 15px; height: 15px; vertical-align: middle; }
.bubble-ticks.seen { color: #34b7f1; opacity: 1; }
.bubble.mine .bubble-ticks { color: rgba(255,255,255,.75); }
.bubble.mine .bubble-ticks.seen { color: #fff; }

.bubble-media { padding: 3px 3px 4px; }
.bubble-img-wrap { position: relative; }
.bubble-img { border-radius: 11px; display: block; max-height: 300px; max-width: 100%; cursor: pointer; }
.bubble-media .bubble-img-wrap .bubble-meta { position: absolute; right: 8px; bottom: 6px; float: none; margin: 0;
  background: rgba(0,0,0,.45); color: #fff; padding: 2px 7px; border-radius: 999px; opacity: 1; }
.bubble-media .bubble-img-wrap .bubble-ticks { color: #fff; }
.bubble-caption { margin: 4px 4px 0; font-size: .9rem; line-height: 1.4; }

.bubble-pinned { box-shadow: 0 0 0 2px #0084ff; }
.bubble-flash { animation: bubble-flash 1.2s ease; }
@keyframes bubble-flash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 3px #0084ff; } }

.msg-reactions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; clear: both; }
.msg-reaction-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  font-size: .74rem; padding: 1px 7px; }
.bubble.mine .msg-reaction-chip { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.msg-reaction-chip.mine { border-color: #0084ff; }
.msg-react-row { display: flex; justify-content: space-around; padding: 14px 10px; border-bottom: 1px solid var(--line); }
.msg-react-opt { background: transparent; border: 0; font-size: 1.6rem; padding: 4px; border-radius: 12px;
  transition: transform var(--dur-fast); }
.msg-react-opt.active { background: var(--panel-2); }
.msg-react-opt:active { transform: scale(1.2); }

.pin-banner { display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: color-mix(in srgb, #0084ff 10%, var(--panel)); border-bottom: 1px solid var(--line); }
.pin-banner .icon { color: #0084ff; width: 15px; height: 15px; }
.pin-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .8rem; font-weight: 600; cursor: pointer; }

/* Composer — pill input + circular blue send button, Messenger style */
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line);
  background: var(--panel); flex-wrap: wrap; padding-bottom: calc(8px + var(--safe-bottom));
  margin-bottom: var(--kb, 0px); }
.chat-pill { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 120px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 2px 4px; }
/* 44px, was 38. This sits in the chat composer - one of the most tapped
   places in the product, and where a mis-tap is most annoying because
   you are mid-sentence. NOTE: the same selector is declared again in
   ui.css, which loads later and wins - both were changed together. */
.chat-pill .icon-btn { flex: 0 0 auto; width: 44px; height: 44px; color: #0084ff; border-radius: 50%; }
.chat-pill .icon-btn:active { color: #0068d6; }
.chat-input { flex: 1; border: 0; background: transparent; min-width: 60px; padding: 9px 4px; font-size: .95rem; }
.chat-input:focus { outline: none; box-shadow: none; }
.send-btn, .mic-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; }
.send-btn { background: #0084ff; color: #fff; }
.send-btn .icon { width: 20px; height: 20px; }
.mic-btn { background: var(--panel-2); color: #0084ff; }
.mic-btn:active { background: var(--danger); color: #fff; }
.hidden { display: none !important; }

.chat-img-preview { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.chat-img-preview img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.chat-img-preview .muted { flex: 1; }
.chat-img-preview #img-preview-cancel { flex: 0 0 auto; }

.rec-ui { display: flex; align-items: center; gap: 10px; flex: 1; padding: 4px 6px; }
.rec-dot { width: 11px; height: 11px; background: var(--danger); border-radius: 50%; animation: pulse .7s infinite; flex: 0 0 auto; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-ui #rec-cancel { margin-left: auto; }
@keyframes pulse { 50% { opacity: .3; } }

/* Voice note player */
.voice-player { display: flex; align-items: center; gap: 9px; min-width: 168px; padding: 2px 0; }
.voice-play { background: #0084ff; border: 0; color: #fff; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.voice-play .icon { width: 16px; height: 16px; }
.bubble.mine .voice-play { background: rgba(255,255,255,.25); }
.voice-bar { flex: 1; height: 4px; background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 2px;
  overflow: hidden; min-width: 60px; }
.voice-bar i { display: block; height: 100%; width: 0; background: #0084ff; }
.bubble.mine .voice-bar i { background: #fff; }
.voice-time { font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* ── Assistant chat ── */
/* Capability list shown when the assistant finds nothing — turns a dead end
   into a next step. Compact so it reads as a hint, not a wall of text. */
.assistant-caps { margin: 6px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.5; }
.assistant-caps li { margin-bottom: 4px; }
.assistant-caps em { opacity: .85; }

.ai-disclaimer { font-size: .72rem; color: var(--muted); text-align: center; padding: 6px 12px;
  background: var(--panel); border-top: 1px solid var(--line); }
.assistant-quickrow { display: flex; gap: 6px; overflow-x: auto; width: 100%; scrollbar-width: none; }
.assistant-quickrow::-webkit-scrollbar { display: none; }
.assistant-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.assistant-result { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.ar-text { margin: 2px 0; }
.bubble.typing { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block;
  animation: typingBounce 1.1s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Custom logo spinner shown while the assistant is retrieving/composing —
   behaves like Claude's own thinking indicator: a continuous smooth spin
   plus a gentle "breathing" pulse. Split into two elements because a
   single element can't run two different transform animations (rotate +
   scale) independently without them overwriting each other — the outer
   .ai-spinner handles the pulse/glow, the inner .ai-spinner-inner handles
   the spin. */
.ai-spinner { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block;
  animation: aiPulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(79,124,255,.55)); }
.ai-spinner-inner { display: block; width: 100%; height: 100%;
  background: url("icons/ai-thinking.png") center / contain no-repeat;
  animation: aiSpin 1.6s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiPulse { 0%, 100% { transform: scale(.92); opacity: .82; } 50% { transform: scale(1.06); opacity: 1; } }
.typing-label { font-size: .78rem; color: var(--muted); }
.reveal-in { animation: revealIn .18s ease-out; }
@keyframes revealIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Groups ── */
.page-head-row { display: flex; justify-content: space-between; align-items: center; }
.group-grid { display: flex; flex-direction: column; gap: 12px; }
.group-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.group-cover { height: 90px; background: var(--grad); background-size: cover; background-position: center; }
.group-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.group-body .name-row { font-family: var(--font-display); font-weight: 600; }
.group-body .btn { margin-top: 8px; align-self: flex-start; }

/* ── Notifications ── */
/* ── Notifications ── */
.page-notifs { padding-top: 4px; }
.notifs-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.notifs-head h2 { margin: 0; }
.notifs-readall { color: var(--muted); }
.notifs-readall:active { color: var(--accent-b); }

.notifs-tabs { display: flex; gap: 6px; margin: 0 0 12px; position: sticky; top: 0; z-index: 3;
  background: var(--bg); padding: 2px 0 6px; }
.notif-tab { border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 7px 15px; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.notif-tab:active { transform: scale(.97); }
.notif-tab.active { background: var(--accent-soft); border-color: rgba(124,92,255,.4); color: var(--accent-a); }
.notif-tab-hidden { margin-left: auto; }
.notif-tab-hidden .icon { width: 14px; height: 14px; }

.notif-section-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; margin: 14px 4px 6px; }
.notif-section-head:first-child { margin-top: 2px; }

.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid transparent; position: relative;
  transition: background var(--dur-fast); cursor: pointer; }
.notif-row:active { background: var(--panel-2); }
.notif-row.unread { background: color-mix(in srgb, var(--accent-b) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--accent-b) 22%, transparent); }
/* Unread accent dot on the far edge */
.notif-row.unread::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-b); }
.notif-row.security.unread::after { background: #ffb420; }

.notif-avatar-wrap { position: relative; flex: 0 0 auto; }
.notif-avatar-wrap.clickable { cursor: pointer; }
.notif-emoji { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); display: grid;
  place-items: center; }
.notif-emoji .icon { width: 20px; height: 20px; color: var(--muted); }
.notif-meta { flex: 1; min-width: 0; padding-right: 6px; }
.notif-text { line-height: 1.35; font-size: .92rem; }
.notif-text strong { font-weight: 700; }

/* Colored type badge on the avatar corner */
.notif-type-badge { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--panel);
  background: var(--panel-3); }
.notif-row.unread .notif-type-badge { border-color: color-mix(in srgb, var(--accent-b) 9%, var(--panel)); }
.notif-type-badge .icon { width: 11px; height: 11px; color: #fff; }
.notif-type-badge.t-like { background: #ff5d73; }
.notif-type-badge.t-comment { background: #4c9aff; }
.notif-type-badge.t-follow { background: #7c5cff; }
.notif-type-badge.t-mention { background: #2fd8a4; }
.notif-type-badge.t-message { background: #22c7e0; }
.notif-type-badge.t-security { background: #f6b545; }
.notif-type-badge.t-boost { background: #f59f00; }

/* Grouping ("5 new likes") */
.notif-avatar-stack { display: flex; flex: 0 0 auto; }
.notif-avatar-stack .avatar { margin-left: -16px; border: 2px solid var(--panel); }
.notif-avatar-stack .avatar:first-child { margin-left: 0; }
.notif-row.unread .notif-avatar-stack .avatar { border-color: color-mix(in srgb, var(--accent-b) 9%, var(--panel)); }
.notif-count-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: #fff;
  background: var(--accent-b); border-radius: 999px; padding: 2px 8px; min-width: 20px; text-align: center; }

/* Per-row options menu (Hide / Unhide / Delete) */
.notif-menu-btn { flex: 0 0 auto; color: var(--muted); width: 34px; height: 34px; }
.notif-menu-btn:active { color: var(--text); }
.notif-menu { position: fixed; z-index: 500;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); min-width: 156px; display: flex; flex-direction: column; }
.notif-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; color: var(--text); font-size: .88rem; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; }
.notif-menu-item:active { background: var(--panel-2); }
.notif-menu-item .icon { width: 16px; height: 16px; color: var(--muted); }
.notif-menu-item.danger { color: var(--danger); }
.notif-menu-item.danger .icon { color: var(--danger); }

/* "Who" sheet for grouped notifications */
.notif-people-sheet { max-width: 460px; }
.notif-people-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }

/* ── Swipe-left-to-delete / swipe-right-to-hide (kept as a secondary gesture) ── */
.notif-swipe-wrap { position: relative; overflow: hidden; border-radius: 14px; }
.notif-swipe-wrap .notif-swipe-content { position: relative; z-index: 1; transition: transform .18s ease; touch-action: pan-y; }
.notif-delete-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 84px; border: 0; cursor: pointer;
  background: var(--danger); color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.notif-delete-btn:disabled { opacity: .6; }
.notif-hide-btn { position: absolute; top: 0; left: 0; bottom: 0; width: 84px; border: 0; cursor: pointer;
  background: #64748b; color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.notif-hide-btn:disabled { opacity: .6; }

/* ── Settings ── */
.settings-section { margin: 0 0 18px; }
.page-settings { padding: 16px 14px calc(28px + var(--safe-bottom)); }
.settings-title { margin: 2px 2px 14px; }

/* Profile header card */
.settings-profile-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px;
  margin: 0 0 18px; cursor: pointer; transition: background var(--dur-fast); position: relative; overflow: hidden; }
.settings-profile-card::before { content: ""; position: absolute; inset: 0; background: var(--aurora); opacity: .7; pointer-events: none; }
.settings-profile-card:active { background: var(--panel-2); }
.settings-profile-card > * { position: relative; }
.settings-profile-meta { flex: 1; min-width: 0; }
.settings-profile-name { font-weight: 600; font-size: 1.1rem; font-family: var(--font-display); }
.settings-profile-handle { font-size: .85rem; color: var(--accent-b); }
.settings-profile-sub { margin-top: 2px; }
.settings-profile-chev { flex: 0 0 auto; color: var(--muted); }
.settings-profile-chev .icon { width: 20px; height: 20px; }

/* Section = grouped card with an icon header (iOS/Android style) */
.settings-section-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; }
.settings-section-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--accent-soft); flex: 0 0 auto; }
.settings-section-icon .icon { width: 16px; height: 16px; color: var(--accent-a); }
.settings-section h4 { margin: 0; font-size: .74rem; letter-spacing: .08em; }
.settings-section > .settings-row,
.settings-section > .link-row,
.settings-section > label.settings-row { display: flex; }
.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-section > .settings-note,
.settings-section > .btn-block { border-radius: 16px; }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; 
  border-bottom: 1px solid var(--line); width: 100%; background: var(--panel); border-left: 0; border-right: 0;
  border-top: 0; color: var(--text); font-size: .93rem; text-align: left; transition: background var(--dur-fast); }
.settings-section > .settings-row:last-of-type { border-bottom: 0; }
.link-row { cursor: pointer; }
.link-row:active { background: var(--panel-2); }
.settings-row .info-val, .settings-chevron { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

/* Blocked users — its own page (see js/settings.js renderBlockedUsers),
   so the rows need their own rounded card instead of borrowing corner
   radius from an enclosing .settings-section. */
#blocked-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
#blocked-list .settings-row:last-child { border-bottom: 0; }
.blocked-row-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.blocked-row-name { font-weight: 600; font-size: .93rem; }

.switch { width: 46px; height: 27px; appearance: none; -webkit-appearance: none; background: var(--panel-3); border-radius: 999px;
  position: relative; transition: background var(--dur-med); flex: 0 0 auto; cursor: pointer; }
.switch:checked { background: var(--accent-a); }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; transition: transform var(--dur-med); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch:checked::after { transform: translateX(19px); }

/* In-section note (safety / info callout) */
.settings-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.settings-note-icon { flex: 0 0 auto; margin-top: 1px; }
.settings-note-icon .icon { width: 20px; height: 20px; color: var(--accent-a); }
.settings-note strong { font-size: .9rem; }

.contacts { padding: 10px 14px; }

/* ── Modals / sheets / toast / lightbox ── */
.modal-overlay { position: fixed; top: var(--vv-top, 0px); left: 0; right: 0; height: var(--vvh, 100dvh);
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 80;
  display: grid; place-items: center; padding: 16px; }
.modal { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .btn { flex: 1; }
.composer-modal { gap: 10px; }
.composer-textarea { resize: none; }
.composer-textarea-bg { color: #fff; border-radius: 12px; padding: 24px 16px; min-height: 160px;
  font-size: 1.3rem; font-weight: 600; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.composer-textarea-bg::placeholder { color: rgba(255,255,255,.85); }
.composer-bg-picker { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.composer-bg-picker.hidden { display: none; }
.bg-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.bg-swatch.active { border-color: var(--text); }
.bg-swatch-none { background: var(--panel-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.bg-swatch-none .icon { width: 16px; height: 16px; }
.composer-preview img, .composer-preview video { border-radius: 12px; max-height: 260px; width: 100%; object-fit: cover; }
.composer-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.composer-modal-actions .btn-primary { flex: 1; min-width: 100px; }
.composer-safety-note { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.4;
  color: var(--muted); background: color-mix(in srgb, var(--accent-a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, transparent); border-radius: 10px; padding: 8px 10px; }
.composer-safety-icon .icon { width: 16px; height: 16px; color: var(--accent-a); flex: 0 0 auto; }
.composer-safety-icon { flex: 0 0 auto; margin-top: 1px; }
.composer-adult-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .82rem;
  background: color-mix(in srgb, #ff4d4d 8%, transparent);
  border: 1px solid color-mix(in srgb, #ff4d4d 24%, transparent); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.composer-adult-toggle input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; }
.composer-adult-toggle.hidden { display: none; }
.composer-views-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .82rem;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.composer-views-toggle input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; }

/* ── About-this-profile sheet (opened by tapping the green verified badge) ── */
.about-profile-body { display: flex; flex-direction: column; gap: 14px; }
.about-profile-head { display: flex; align-items: center; gap: 12px; }
.about-profile-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); }
.about-profile-row-title { font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.about-profile-icon { flex: 0 0 auto; margin-top: 1px; }
.about-profile-icon .icon, .about-profile-icon .verified-badge { width: 20px; height: 20px; }
.about-profile-icon.muted { color: var(--muted); }
.poll-fields { display: flex; flex-direction: column; gap: 8px; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.post-modal { padding: 12px; position: relative; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.4); }
.legal-modal { max-width: 560px; }
.legal-text { white-space: pre-wrap; font-family: inherit; font-size: .82rem; color: var(--muted);
  line-height: 1.6; margin: 0; }
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80; display: flex; align-items: flex-end; }
.sheet { width: 100%; max-width: var(--maxw); margin: 0 auto; background: var(--panel); border-radius: 20px 20px 0 0;
  padding: 8px; border-top: 1px solid var(--line); }
.sheet-item { width: 100%; background: transparent; border: 0; color: var(--text); text-align: left;
  padding: 14px 16px; border-radius: 12px; font-size: .95rem; }
.sheet-item:active { background: var(--panel-2); }
.sheet-item.danger { color: var(--danger); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 90; display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
#toast-host { position: fixed; bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); left: 50%; transform: translateX(-50%);
  /* 600, not 100. The toast is the app's error channel - it must never be
     covered. At 100 it sat UNDER .notif-menu (500), .gift-play-layer (120,
     full-screen) and the announcement banner (140), so an error fired in any
     of those states was invisible. Below #boot (999) so it cannot cover the
     loading screen. */
  z-index: 600; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: 90vw; }
.toast { background: var(--panel-3); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 16px; font-size: .85rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-med), transform var(--dur-med); }
.toast.show { opacity: 1; transform: translateY(0); }
/* ── Error toast ──
   `color` is PINNED here on purpose. .toast sets `color: var(--text)`,
   which flips with the theme, while this rule pins a dark background
   that does not. In light mode that put near-black text on a dark
   maroon fill: contrast 1.10, where 1.00 is the same colour exactly.
   The error was rendering the whole time and could only be read by
   selecting it with the cursor.

   An element that pins its own background must pin its own text
   colour too, and needs a light-theme pair. Measured after this fix:
   13.52 dark, 8.45 light, against a 4.50 minimum. */
.toast-error {
  background: #2a121c;
  border-color: rgba(255, 79, 107, .45);
  color: #ffd9df;
}
[data-theme="light"] .toast-error {
  background: #fdecef;
  border-color: rgba(214, 45, 73, .35);
  color: #8a1024;
}
.toast-info { }

/* Offline banner — slides down from the top while the device has no network */
.offline-banner { position: fixed; top: var(--safe-top, 0px); left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #b45309; color: #fff; font-size: .82rem; font-weight: 600;
  padding: 8px 12px; transform: translateY(-110%); transition: transform var(--dur-med, .2s) ease; }
.offline-banner.show { transform: translateY(0); }
.offline-banner .icon { width: 16px; height: 16px; }

/* ── Story viewer ── */
.story-viewer { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; }
.story-bars { display: flex; gap: 4px; padding: calc(10px + var(--safe-top)) 12px 4px; }
.story-bar { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.story-bar i { display: block; height: 100%; width: 0; background: #fff; }
.story-vhead { display: flex; align-items: center; gap: 10px; padding: 6px 14px; color: #fff; }
.story-vhead span { flex: 1; font-weight: 600; font-size: .9rem; }
.story-vhead .icon-btn { color: #fff; }
.story-stage { flex: 1; display: grid; place-items: center; overflow: hidden; }
.story-stage img, .story-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── Focus visibility + reduced motion ── */
:focus-visible { outline: 2px solid var(--accent-b); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* Manual override for the same effect — Settings → Accessibility →
   "Reduce motion" — for people whose OS-level setting is on but who
   still want the app-level control (or vice versa: the OS query above
   already covers the device-level case; this covers the in-app one). */
html.force-reduce-motion * { animation: none !important; transition: none !important; }

/* ── Bold text — Settings → Accessibility → "Bold text" ── */
html.bold-text body,
html.bold-text .name-row,
html.bold-text .settings-row,
html.bold-text h1, html.bold-text h2, html.bold-text h3, html.bold-text h4 {
  font-weight: 650;
}

/* ── Larger screens: keep it phone-width, centered ── */
@media (min-width: 700px) {
  .discover-columns { flex-direction: row; }
  .discover-main { flex: 2; }
  .discover-side { flex: 1; }
  body { background: var(--bg); }
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100dvh; }
  /* The auth screen is full-bleed art, so the phone-column frame that
     brackets the app shell has to come off here — otherwise two hairlines
     run straight down the middle of the backdrop. If a browser doesn't
     support :has() the rule is simply dropped and the frame stays, which
     is exactly what the screen looked like before. */
  #app:has(.auth-screen) { border-left: 0; border-right: 0; }
}

/* ── Poll widget ── */
.poll-widget { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.poll-opt-row { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text); font-size: .9rem; overflow: hidden; text-align: left; }
.poll-opt-row.voted { cursor: default; }
.poll-opt-row:not(.voted):active { background: var(--panel-3); }
.poll-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(192,38,211,.28), rgba(79,124,255,.28));
  transition: width var(--dur-slow) ease; z-index: 0; }
.poll-opt-row.mine .poll-fill { background: linear-gradient(90deg, rgba(192,38,211,.5), rgba(79,124,255,.5)); }
.poll-label, .poll-pct { position: relative; z-index: 1; }
.poll-pct { font-weight: 700; font-size: .82rem; }
.poll-total { padding-left: 2px; }

/* ── Profile CTA (follow + friend) ── */
.profile-cta { display: flex; gap: 6px; }
.profile-cta > * { flex: 1; }
.profile-cta .message-btn { justify-content: center; }

/* ── Pinned posts ── */
.pinned-section { margin: 14px 16px 0; }
.pinned-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--muted);
  font-size: .82rem; }
.pinned-head .icon { width: 15px; height: 15px; }
.pinned-list { display: flex; flex-direction: column; gap: 14px; }
.post-pinned { border-color: var(--accent-a); }
.pinned-tag { display: flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700;
  color: var(--accent-a); margin-bottom: 2px; }
.pinned-tag .icon { width: 12px; height: 12px; }

/* ── Friend request actions in notifications ── */
.notif-actions { display: flex; gap: 6px; margin-left: auto; }

/* ── Group detail screen ── */
.group-screen { background: var(--bg); }
.group-detail { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
.group-cover.big { height: 130px; }
.group-detail-head { padding: 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.group-detail-head .btn { align-self: flex-start; }
.group-composer-zone { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  border-bottom: 1px solid var(--line); }
.group-composer-zone .composer-fake { width: 100%; }
.group-detail .feed { padding: 14px; }
.group-card-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ── Settings extras ── */
.mini-select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 7px 10px; font-size: .82rem; max-width: 55%; }
.settings-row.link-row .info-val { font-size: .84rem; }
.settings-chevron .icon, .info-val .icon { width: 15px; height: 15px; vertical-align: -3px; opacity: .7; }
.settings-row.no-tap { opacity: .9; }
.session-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.session-row:last-child { border-bottom: 0; }
.session-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; font-size: 1rem; }
.session-meta { flex: 1; min-width: 0; }

/* ── Security notification accent ── */
.notif-row.security .notif-emoji { background: rgba(255,180,32,.15); }

/* ── Group/page avatar + cover ── */
.group-avatar-wrap { position: relative; width: 72px; height: 72px; margin-top: -40px; }
.group-avatar { width: 72px; height: 72px; border-radius: 22px; background: var(--grad); background-size: cover;
  background-position: center; display: grid; place-items: center; font-weight: 700; font-size: 1.6rem; color: #fff;
  font-family: var(--font-display); border: 3px solid var(--bg); }
.group-head-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.group-card-title { display: flex; align-items: center; gap: 8px; }
.group-card-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); background-size: cover;
  background-position: center; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .9rem; flex: 0 0 auto; }

/* ── Create community photo pickers ── */
.create-cover { height: 90px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line);
  overflow: hidden; cursor: pointer; margin-bottom: 8px; }
.create-cover-prev { width: 100%; height: 100%; background-size: cover; background-position: center; display: grid; place-items: center; }
.create-avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.create-photo { width: 56px; height: 56px; flex: 0 0 auto; cursor: pointer; }
.create-photo-prev { width: 56px; height: 56px; border-radius: 16px; background: var(--panel-2); border: 1px dashed var(--line);
  background-size: cover; background-position: center; display: grid; place-items: center; font-size: 1.4rem; color: var(--muted); }

/* ── Accent variants (synced appearance setting) ── */
:root[data-accent="magenta"] { --grad: linear-gradient(135deg, #c026d3 0%, #e0459b 100%); --accent-b: #e0459b; }
:root[data-accent="blue"] { --grad: linear-gradient(135deg, #4f7cff 0%, #22d3ee 100%); --accent-a: #4f7cff; }

/* ── Reaction breakdown modal ── */
.react-summary.tappable { cursor: pointer; }
.react-summary.tappable:active { opacity: .7; }
.reaction-modal { max-height: 80vh; }
.react-filter-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.react-filter-row::-webkit-scrollbar { display: none; }
.react-filter { flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; }
.react-filter.active { background: var(--grad); color: #fff; border-color: transparent; }
.react-people { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; overflow-y: auto; }
.react-person { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 12px; cursor: pointer; }
.react-person:active { background: var(--panel-2); }
.react-person-meta { flex: 1; min-width: 0; }
.react-person-emoji { font-size: 1.3rem; }

/* ── Composer audience selector ── */
.composer-audience-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 0 8px; }
.audience-select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font-size: .84rem; font-weight: 600; }

/* ── Contact & Payment modal ── */
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact-info { min-width: 0; }
.contact-label { margin-bottom: 1px; }
.contact-value { font-weight: 600; word-break: break-all; }
.copy-btn { flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-b);
  border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; }
.copy-btn:active { background: var(--panel-3); }
.pay-block { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; }
.pay-block strong { display: block; margin-bottom: 4px; }
.pay-block .contact-row:last-child { border-bottom: 0; }
.social-links { display: flex; flex-direction: column; gap: 2px; }
.social-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 4px; color: var(--text); }
.social-link span:first-child { font-weight: 600; }
.legal-modal h4 { margin-top: 16px; }

/* ============================================================
   Pages tab + Reels tab (added feature) — keeps the existing
   purple/black neon theme, radii, glow and motion tokens.
   ============================================================ */

/* ── Bottom nav: 7 slots (Home · Discover · Pages · ＋ · Reels · Messages · Profile).
   Items flex instead of the old fixed 60px so everything fits on 320–420px
   phones without changing the bar's height, blur, or glow. ── */
.bottom-nav { padding-left: 4px; padding-right: 4px; }
.nav-item { width: auto; flex: 1 1 0; min-width: 0; }
.nav-item .nav-label { font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-create { flex: 0 0 50px; width: 50px; height: 50px; }

/* ── Pages tab ── */
.fp-head { display: flex; align-items: center; justify-content: space-between; }
.fp-section-title { margin: 4px 0 2px; font-size: 1rem; color: var(--muted); font-weight: 700; }
#fp-mine, #fp-all { display: flex; flex-direction: column; gap: 12px; }
.fp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-owner-chip { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--accent-a);
  background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.35); border-radius: 999px; padding: 4px 10px; }
.fp-owner-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* Create/edit page image pickers */
.fp-pick-row { display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.fp-pick-row:active { filter: brightness(1.15); }
.fp-pick-thumb { background: var(--panel-3) center/cover; border: 1px solid var(--line); flex: 0 0 auto; }
.fp-pick-thumb.cover { width: 84px; height: 44px; border-radius: 10px; }
.fp-pick-thumb.avatar { width: 44px; height: 44px; border-radius: 50%; }

/* Analytics modal */
.fp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fp-stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fp-stat-icon { color: var(--accent-a); }
.fp-stat-icon .icon { width: 22px; height: 22px; }
.fp-stat-num { font-size: 1.3rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Reels tab ── */
/* Fixed layer that fills the space between the top bar and bottom nav —
   independent of the outer view scroll, so snapping is buttery. */
.reels-screen {
  position: fixed; z-index: 10;
  top: calc(var(--top-h) + var(--safe-top));
  bottom: calc(var(--nav-h) + var(--safe-bottom));
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw);
  background: #000; overflow: hidden;
}
.reels-scroller {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reels-scroller::-webkit-scrollbar { display: none; }
.reels-sentinel { height: 2px; }
.feed-sentinel { height: 2px; }

.reel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  background: #000; overflow: hidden; display: grid; place-items: center; }
.reel-empty { place-items: center; padding: 24px; }
.reel-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-tapzone { position: absolute; inset: 0 76px 90px 0; }

/* Big play badge when paused */
.reel-pause-badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-med); filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.reel-pause-badge.show { opacity: .9; }

/* Double-tap heart burst */
.reel-heart-burst { position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; color: #ff4d6d; opacity: 0; }
.reel-heart-burst .icon { width: 84px; height: 84px; stroke-width: 0; fill: #ff4d6d;
  filter: drop-shadow(0 6px 24px rgba(255,77,109,.6)); }
.reel-heart-burst.pop { animation: reelHeart .8s ease forwards; }
@keyframes reelHeart {
  0% { opacity: 0; transform: scale(.4); }
  20% { opacity: 1; transform: scale(1.15); }
  45% { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25) translateY(-14px); }
}

/* Right-side action rail — kept compact so it never crowds the video;
   sizes tuned down from the original 52px/22px buttons. */
.reel-rail { position: absolute; right: 8px; bottom: 96px; display: flex; flex-direction: column;
  gap: 11px; align-items: center; z-index: 3; }
.reel-rail-btn { background: rgba(17,23,37,.5); border: 1px solid rgba(124,92,255,.28);
  color: #fff; border-radius: 12px; width: 40px; padding: 6px 0 5px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; backdrop-filter: blur(8px);
  transition: transform var(--dur-fast), background var(--dur-med); }
.reel-rail-btn:active { transform: scale(.9); }
.reel-rail-btn .icon { width: 17px; height: 17px; }
.reel-rail-btn.liked { color: #ff5d73; border-color: rgba(255,93,115,.5);
  box-shadow: 0 0 18px rgba(255,93,115,.35); }
.reel-rail-btn.liked .icon { fill: #ff5d73; }
.reel-rail-label { font-size: .54rem; font-weight: 700; color: #fff; }

/* Creator + caption overlay */
/* On-video watermark — app name + creator handle. Sits top-right, clear of
   the action rail (right, bottom) and the meta block (left, bottom). Kept
   deliberately low-contrast so it reads as attribution rather than clutter,
   but stays legible over both bright and dark footage thanks to the shadow.
   pointer-events:none so it never intercepts a tap meant for the video. */
.reel-watermark { position: absolute; top: 14px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  pointer-events: none; user-select: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.reel-watermark-logo { width: 24px; height: 24px; border-radius: 7px;
  box-shadow: 0 1px 6px rgba(0,0,0,.55); flex: 0 0 auto; }
.reel-watermark-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.reel-watermark-app { font-family: var(--font-display); font-weight: 800;
  font-size: .82rem; letter-spacing: .02em; color: rgba(255,255,255,.92); }
.reel-watermark-handle { font-size: .68rem; font-weight: 600;
  color: rgba(255,255,255,.72); }
@media (max-width: 380px) {
  .reel-watermark-logo { width: 20px; height: 20px; border-radius: 6px; }
  .reel-watermark-app { font-size: .74rem; }
  .reel-watermark-handle { font-size: .62rem; }
  /* Six topbar icon-buttons is tight on the smallest phones — keep the
     wordmark visible (it's part of the brand identity) but shrink it and
     the buttons a bit further so everything still fits on one row. */
  .topbar .wordmark.sm { font-size: 1.05rem; }
  .topbar-left { gap: 6px; }
  .topbar-right { gap: 2px; }
  /* Was 32px. A narrow screen is the case where a mis-tap is MOST likely,
     so shrinking the target there was backwards. The icon still scales
     down; the tappable area does not. */
  .topbar-right .icon-btn { width: 44px; height: 44px; font-size: 0.98rem; }
}

.reel-meta { position: absolute; left: 12px; right: 76px; bottom: 18px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.reel-repost-credit { font-size: .78rem; font-weight: 600; opacity: .9; cursor: pointer; }
.reel-repost-credit strong { font-weight: 800; }
.reel-repost-credit .icon { width: 12px; height: 12px; vertical-align: -1px; }
.reel-author { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.reel-author-name { font-weight: 700; font-family: var(--font-display); font-size: .98rem; display: flex; align-items: center; gap: 4px; }
.reel-follow { margin-left: 6px; }
.reel-desc { font-size: .88rem; line-height: 1.35; max-height: 4.2em; overflow: hidden; }
.reel-music { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #d6dbe7;
  background: rgba(17,23,37,.55); border: 1px solid rgba(124,92,255,.3); border-radius: 999px;
  padding: 4px 12px; width: fit-content; max-width: 100%; backdrop-filter: blur(8px); }
.reel-music-icon .icon { width: 14px; height: 14px; }
.reel-music-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-views { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.reel-views .icon { width: 13px; height: 13px; vertical-align: -2px; opacity: .85; }

/* Progress indicator */
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.14); z-index: 4; }
.reel-progress-fill { height: 100%; width: 0%; background: var(--grad);
  box-shadow: 0 0 10px rgba(124,92,255,.8); }

/* Floating create-reel button — top-LEFT of the reels screen. Was
   top-right, sitting directly on top of the watermark/creator-attribution
   corner (also top-right, see .reel-watermark) on every single clip.
   Moved to the opposite corner so it no longer blocks that area. */
.reels-create-btn { position: absolute; top: 12px; left: 12px; z-index: 5;
  width: 42px; height: 42px; border-radius: 14px; border: 0; color: #fff;
  background: var(--grad); box-shadow: var(--glow);
  display: grid; place-items: center; }
.reels-create-btn:active { transform: scale(.92); }
.reels-create-btn .icon { width: 20px; height: 20px; }
.reel-create-preview video { max-height: 320px; object-fit: contain; background: #000; }

/* Reel comments bottom sheet */
.reel-comments-overlay { place-items: end center; padding: 16px 0 0; }
.reel-comments-sheet { width: 100%; max-width: var(--maxw); margin: 0; border-radius: 22px 22px 0 0;
  max-height: 72dvh; display: flex; flex-direction: column;
  animation: sheetUp var(--dur-slow) cubic-bezier(.2,.9,.3,1); }
@keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.reel-comment-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 10px 0; min-height: 160px; }
.comment-author { font-weight: 700; font-size: .82rem; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.comment-del { color: var(--danger); cursor: pointer; }

/* ── Friend-request notification: answered state (replaces Accept/Decline) ── */
.notif-req-status { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 5px 12px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-2); }
.notif-req-status .icon { width: 14px; height: 14px; }
.notif-req-status.accepted { color: var(--ok); border-color: rgba(41,192,147,.4); background: rgba(41,192,147,.1); }
.notif-req-status.declined { color: var(--danger); border-color: rgba(255,84,112,.35); background: rgba(255,84,112,.08); }

/* ── Full-screen image/video preview: X close button + tappable hints ── */
.lightbox video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.lightbox-close { position: absolute; top: calc(12px + var(--safe-top)); right: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(139,92,246,.35);
  background: rgba(20,12,46,.6); color: #fff; backdrop-filter: blur(8px);
  display: grid; place-items: center; transition: transform var(--dur-fast); }
.lightbox-close:active { transform: scale(.9); }
.lightbox-close .icon { width: 20px; height: 20px; }
.profile-cover.previewable, .avatar.previewable { cursor: zoom-in; }
.avatar.previewable:active { filter: brightness(1.15); }

/* ============================================================
   Monetization: Boost / Sponsored / Get Verified / Admin panel
   ============================================================ */

/* "Sponsored" label on injected feed cards and reels */
.sponsored-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #ffd76b;
  background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.35);
  border-radius: 999px; padding: 4px 11px; margin: 10px 14px 0; width: fit-content; }
.sponsored-chip .icon { width: 12px; height: 12px; }
.post-card.sponsored { border-color: rgba(255,176,32,.28); }

/* ── Skeleton loading cards (shown while the feed/lists are fetching) ──
   Mirrors the real .post-card layout so there's no layout shift on swap-in. */
.skel-card { pointer-events: none; }
.skel-head { display: flex; align-items: center; gap: 10px; }
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.skel-body { margin: 12px 0; display: flex; flex-direction: column; gap: 7px; }
.skel-actions { display: flex; gap: 8px; padding-top: 10px; }
.skel-block { border-radius: 999px; background: var(--panel-2); position: relative; overflow: hidden; }
.skel-block::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel-block::after { animation: none; } }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 10px; }
.sponsored-chip.on-reel { margin: 0 0 2px; backdrop-filter: blur(8px); background: rgba(20,12,46,.6); }

/* Boost plan picker */
.promo-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.promo-plan { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); padding: 12px 6px; display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: transform var(--dur-fast), border-color var(--dur-med), box-shadow var(--dur-med); }
.promo-plan:active { transform: scale(.96); }
/* Price list shown while payments are switched off — visible, not tappable. */
.promo-plan.disabled { opacity: .55; cursor: default; pointer-events: none; }
.promo-plan.disabled:active { transform: none; }
.promo-plan.active { border-color: var(--accent-a); box-shadow: 0 0 18px rgba(139,92,246,.35); background: var(--panel-3); }
.promo-price { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Manual payment box */
.promo-pay { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.promo-pay.hidden { display: none; }
.promo-pay-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.promo-pay-title { font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 6px; }
.promo-pay-line { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.promo-pay-method { display: flex; flex-direction: column; gap: 6px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.promo-pay-method:first-of-type { border-top: none; }
.promo-ref-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px dashed var(--line); padding-top: 8px; }
.promo-ref { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: .08em; font-size: 1.05rem;
  color: var(--accent-a); }
.promo-status { text-align: center; padding: 16px 6px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.promo-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted, #8a8f98); font-size: 12px; }
.promo-divider::before, .promo-divider::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(255,255,255,0.08)); }

/* Get Verified — intro screen (badge preview, benefits, eligibility) */
.verify-intro { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; }
.verify-hero-badge { width: 72px; height: 72px; margin: 4px auto 2px; }
.verify-hero-badge svg { width: 100%; height: 100%; }
.verify-intro-title { margin: 0 0 2px; font-size: 1.15rem; }
.verify-benefits { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; text-align: left; }
.verify-benefit-row { display: flex; gap: 12px; align-items: flex-start; }
.verify-benefit-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent-a); }
.verify-benefit-icon .icon { width: 18px; height: 18px; }
.verify-benefit-title { font-weight: 700; font-size: .92rem; }
.verify-reqs { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.verify-reqs-title { font-weight: 700; font-size: .9rem; }
.verify-reqs-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; color: var(--text); }
.verify-reqs-list li { line-height: 1.35; }
.verify-form-head { display: flex; align-items: flex-start; gap: 10px; }
.verify-form-head .icon-btn { flex: 0 0 auto; margin-top: 1px; }

/* Admin panel */
.adm-section { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.adm-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.adm-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.adm-ref { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--accent-a); font-weight: 700; }
.adm-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

/* ── Create sheet (from the raised center nav button) ── */
.create-sheet-overlay { position: fixed; inset: 0; height: 100dvh; background: rgba(4,6,12,.6);
  backdrop-filter: blur(4px); z-index: 90; display: flex; align-items: flex-end; }
.create-sheet { width: 100%; max-width: var(--maxw); margin: 0 auto; background: var(--panel);
  border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding: 10px 16px calc(24px + var(--safe-bottom)); animation: sheetup var(--dur-med) ease; }
@keyframes sheetup { from { transform: translateY(30px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
.create-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 4px auto 12px; }
.create-sheet-title { font-family: var(--font-display); margin: 0 4px 12px; }
.create-opts { display: flex; flex-direction: column; gap: 8px; }
.create-opt { display: flex; align-items: center; gap: 14px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px; text-align: left; color: var(--text); }
.create-opt:active { background: var(--panel-3); }
.create-opt-ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-a); }
.create-opt-ico .icon { width: 23px; height: 23px; }
.create-opt-meta { display: flex; flex-direction: column; gap: 1px; }
.create-opt-title { font-weight: 600; font-family: var(--font-display); }
.create-opt-sub { font-size: .78rem; color: var(--muted); }

/* ── Discover quick links (Pages / Communities) ── */
.disc-quick { display: flex; gap: 10px; }
.disc-quick-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 13px;
  color: var(--text); font-weight: 600; font-family: var(--font-display); font-size: .92rem; }
.disc-quick-btn:active { background: var(--panel-2); }
.dq-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-a); }
.dq-ico .icon { width: 17px; height: 17px; }

/* ── Saved Collections (main-only upgrade) ── */
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.collections-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.collections-row::-webkit-scrollbar { display: none; }
.col-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: .85rem; font-weight: 600; font-family: var(--font-display); }
.col-chip.active { background: var(--accent-soft); color: var(--accent-a); border-color: rgba(124,92,255,.4); }
.col-chip-count { font-size: .72rem; background: var(--panel-2); color: var(--muted); border-radius: 999px;
  min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; }
.col-chip.active .col-chip-count { background: rgba(124,92,255,.2); color: var(--accent-a); }
#saved-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }

/* Save-to-collection picker */
.col-picker-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; max-height: 46vh; overflow-y: auto; }
.col-picker-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); text-align: left; }
.col-picker-row:active { background: var(--panel-3); }
.col-picker-row.on { border-color: rgba(124,92,255,.4); }
.cp-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-a); flex: 0 0 auto; }
.cp-ico .icon { width: 18px; height: 18px; }
.cp-name { flex: 1; font-weight: 600; }
.cp-check { color: var(--accent-a); }
.cp-check .icon { width: 20px; height: 20px; }

/* ── Discover / Explore header ── */
.disc-sub { margin: 2px 0 0; font-size: .82rem; max-width: 240px; }
.disc-search { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; color: var(--muted); text-align: left; }
.disc-search .icon { width: 19px; height: 19px; }
.disc-search-ph { font-size: .92rem; }

/* Password show/hide toggle on the auth screens. The button sits inside the
   field rather than beside it, so the layout is unchanged on narrow phones. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 62px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px 8px;
  color: var(--accent-a, #a68cff); font-size: .78rem; font-weight: 700;
  letter-spacing: .01em; border-radius: 8px; cursor: pointer;
}
.pw-toggle:active { background: rgba(124, 92, 255, .16); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 1px; }


/* ── Date of birth picker ───────────────────────────────────────────
   Three selects on one row. Day is narrowest, month widest (it holds
   "September"), year in between — matching the natural width of the
   content so nothing truncates on a small phone. */
.dob-row { display: flex; gap: 8px; }
.dob-row select {
  flex: 1 1 0; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 51%, calc(100% - 10px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.dob-day   { flex-grow: 0.7; }
.dob-month { flex-grow: 1.5; }
.dob-year  { flex-grow: 1; }
.dob-hint { margin-top: 6px; min-height: 1.1em; font-size: .78rem; }
.dob-hint.dob-error { color: var(--danger, #ff5d73); }

@media (max-width: 340px) {
  /* Very narrow phones: stack rather than squeeze three selects. */
  .dob-row { flex-wrap: wrap; }
  .dob-month { flex-basis: 100%; order: -1; }
}

/* ── Coming Soon pages (Watch → Live, Explore → Marketplace) ──
   No mock data ever lives here — this placeholder IS the feature until
   the real backend ships. */
.coming-soon-page { align-items: center; text-align: center; padding: 52px 24px 24px; gap: 12px; flex: 1; }
.cs-icon { width: 72px; height: 72px; border-radius: 22px; background: var(--grad); box-shadow: var(--glow);
  display: grid; place-items: center; color: #fff; }
.cs-icon .icon { width: 32px; height: 32px; }
.cs-title { font-family: var(--font-display); font-size: 1.32rem; margin: 6px 0 0;
  background: linear-gradient(120deg, #a78bfa 0%, #22c7e0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-tagline { font-weight: 700; margin: 0; }
.cs-desc { max-width: 320px; margin: 0; font-size: .87rem; line-height: 1.55; }
.cs-badge { margin-top: 8px; display: inline-block; background: var(--accent-soft); color: var(--accent-a);
  border: 1px solid rgba(124,92,255,.35); border-radius: 999px; padding: 7px 18px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* ── Watch (Live / Zall Clips tabs) ── */
.watch-screen { display: flex; flex-direction: column; min-height: 100%; }
.watch-tabs { display: flex; gap: 8px; padding: 12px 14px 0; flex: 0 0 auto; }
.watch-tabs .seg { display: flex; align-items: center; justify-content: center; gap: 6px; }
.watch-tabs .seg .icon { width: 15px; height: 15px; }
.watch-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Marketplace card (Explore) ── */
.marketplace-card { display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid rgba(124,92,255,.35); border-radius: 18px; padding: 14px 16px;
  position: relative; overflow: hidden; text-align: left; width: 100%; }
.marketplace-card::before { content: ""; position: absolute; inset: 0; background: var(--aurora); opacity: .5; pointer-events: none; }
.mp-ico { position: relative; width: 42px; height: 42px; border-radius: 13px; background: var(--grad);
  box-shadow: var(--glow); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.mp-ico .icon { width: 21px; height: 21px; }
.mp-meta { position: relative; flex: 1; min-width: 0; }
.mp-meta strong { font-family: var(--font-display); font-size: .96rem; }
.mp-meta p { margin: 2px 0 0; font-size: .8rem; }
.mp-badge { position: relative; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-a);
  border-radius: 999px; padding: 5px 11px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }


/* ── Verification tiers ──
   Colour is baked into the SVG fill (see VERIFIED_TIERS in js/util.js),
   so these classes exist for targeting, not for colouring. The grey tier
   gets a touch more presence because a flat grey tick against a muted
   name row is easy to miss entirely. */
.verified-badge.vb-grey { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)); }
[data-theme="light"] .verified-badge.vb-grey { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .2)); }

/* Why a suggested account is being suggested. Only ever rendered on the
   Suggested tab (see userRow's showReason option) - a mutual-follow count
   is the one thing that makes a suggestion feel chosen rather than random. */
.user-row-reason { margin-top: 1px; opacity: .85; }

/* ── Empty chat thread ──
   Shown on a brand-new conversation instead of the old
   "Couldn't load messages." error, which was a race: the messages
   listener attached before the conversation document existed, so the
   security rule could not resolve and returned permission-denied. */
.chat-empty-state { padding: 40px 24px; }
.chat-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.chat-empty-sub { font-size: 13px; line-height: 1.5; }

/* ============================================================
   Assistant cover - the hero on the Help & Support screen.

   No image file anywhere in here. The whole thing is one inline SVG
   plus gradients: roughly 2 KB, sharp at any size, and it re-themes
   itself for free. A cover photo on a support screen would have cost
   a quarter of a megabyte to say less.
   ============================================================ */

.assistant-cover {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 0 0 14px;
  padding: 22px 20px 24px;
  isolation: isolate;                 /* keeps the sweep's blend local */
  color: var(--text);
  /* Same violet -> cyan family as .profile-cover, so the Assistant reads
     as part of Zallixor rather than a different product bolted on. */
  background:
    radial-gradient(120% 90% at 8% 15%, rgba(124, 92, 255, .40), transparent 55%),
    radial-gradient(90% 80% at 92% 85%, rgba(34, 211, 238, .22), transparent 60%),
    linear-gradient(155deg, #1a1140 0%, #0a0e17 72%);
}

/* The glyph field: @ handles, # topics, post-card shapes. currentColor
   so it inherits the text colour and needs no second light-mode copy. */
.ac-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: #cdd6ff;
}
.ac-field { width: 100%; height: 100%; display: block; }
.ac-glyphs text {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}

/* The one bold element: a soft band of light crossing the field.
   Wider than the cover and skewed, so the leading edge arrives before
   the trailing edge leaves - it reads as a pass, not a wipe. */
.ac-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-14deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(167, 139, 250, .14) 35%,
    rgba(125, 232, 250, .26) 52%,
    rgba(167, 139, 250, .12) 68%,
    transparent 100%);
  animation: ac-sweep 5.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes ac-sweep {
  0%        { left: -45%; opacity: 0; }
  12%       { opacity: 1; }
  /* The long pause is the point. A sweep every five seconds is a search
     finding something; a sweep every second is a loading spinner. */
  62%, 100% { left: 108%; opacity: 0; }
}

.ac-copy { position: relative; z-index: 2; max-width: 30ch; }

.ac-copy h2 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: #f6f7ff;
}
.ac-copy p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(226, 232, 255, .72);
}

/* Light theme: same composition, inverted. The glyph field goes dark on
   a pale wash rather than keeping a dark panel that would sit in the
   page like a hole. */
[data-theme="light"] .assistant-cover {
  background:
    radial-gradient(120% 90% at 8% 15%, rgba(124, 92, 255, .20), transparent 55%),
    radial-gradient(90% 80% at 92% 85%, rgba(34, 211, 238, .16), transparent 60%),
    linear-gradient(155deg, #efeaff 0%, #f7f9ff 72%);
}
[data-theme="light"] .ac-art { color: #2a2050; }
[data-theme="light"] .ac-copy h2 { color: #171436; }
[data-theme="light"] .ac-copy p { color: rgba(35, 32, 66, .70); }
[data-theme="light"] .ac-sweep {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 92, 255, .10) 35%,
    rgba(34, 211, 238, .16) 52%,
    rgba(124, 92, 255, .08) 68%,
    transparent 100%);
}

/* Budget hardware and anyone who has asked for less motion: park the
   sweep mid-frame instead of removing it. The composition was designed
   with the light in it, so stopping it still looks finished - whereas
   deleting it leaves a flat rectangle. */
html.low-end .ac-sweep,
.ac-sweep.is-static {
  animation: none;
  left: 26%;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .ac-sweep { animation: none; left: 26%; opacity: .55; }
}

/* Narrow phones: the copy needs the room more than the padding does. */
@media (max-width: 360px) {
  .assistant-cover { padding: 18px 16px 20px; }
  .ac-copy h2 { font-size: 1.1rem; }
}

/* Automated-account label. Sized with the badges but shaped differently
   on purpose - it is a statement of fact about the account, not a rank,
   and it must not read as a fourth verification tier. */
.auto-badge { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; margin-left: 2px; }
.name-row.big .auto-badge { width: 19px; height: 19px; }

.cs-sheet { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px 20px; }
.cs-sheet-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft, rgba(124, 92, 255, .14)); color: var(--accent-a, #7c5cff); margin-bottom: 2px; }
.cs-sheet-pill { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--accent-soft, rgba(124, 92, 255, .14)); color: var(--accent-a, #7c5cff); }
.cs-sheet-title { margin: 2px 0 0; font-size: 1.15rem; }
.cs-sheet-text { margin: 0 0 8px; line-height: 1.5; max-width: 320px; }

.comment-text, .profile-bio, .fp-desc, .qr-result-bio, .mk-listing-row, .about-profile-body {
  white-space: pre-line; overflow-wrap: anywhere; }

.tf-sheet { display: flex; flex-direction: column; gap: 10px; }
.tf-qr { align-self: center; padding: 10px; background: #fff; border-radius: 12px; line-height: 0; }
.tf-key { display: block; text-align: center; font-size: .95rem; letter-spacing: .08em; padding: 8px; border-radius: 8px;
  background: var(--panel-2, rgba(127,127,127,.12)); user-select: all; overflow-wrap: anywhere; }
.tf-code { text-align: center; font-size: 1.25rem; letter-spacing: .3em; }
.tf-error { color: var(--danger, #e5484d); margin: 0; font-size: .9rem; }
.tf-error.hidden { display: none; }
.tf-backup-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tf-backup-list code { text-align: center; padding: 6px; border-radius: 6px; background: var(--panel-2, rgba(127,127,127,.12)); }
.tf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.tf-row-text { display: flex; flex-direction: column; gap: 2px; }
.tf-row-actions { display: flex; gap: 6px; }

.post-stats { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.post-stat { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.post-stat .icon { width: 15px; height: 15px; opacity: .85; }
#open-comments.post-stat { cursor: pointer; }
#open-comments.post-stat:active { opacity: .7; }
.post-stat + .post-stat { position: relative; padding-left: 12px; }
.post-stat + .post-stat::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px;
  margin-top: -1.5px; border-radius: 50%; background: currentColor; opacity: .5; }