@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0a0a1f;
  --bg2:        #141433;
  --bg3:        #1c1c42;
  --bg4:        #252554;
  --border:     rgba(255,255,255,0.05);
  --border2:    rgba(255,255,255,0.1);
  --purple:     #8b5cf6;
  --purple-dk:  #5b21b6;
  --purple-lt:  #a78bfa;
  --purple-grad: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
  --pink:       #ec4899;
  --red:        #ef4444;
  --text:       #ffffff;
  --text2:      #b8b8d4;
  --text3:      #6b6b8f;
  --accent:     #fbbf24;
  --success:    #10b981;
  --info:       #3b82f6;
  --font:       'Poppins', sans-serif;
  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  20px;
  --sidebar-w:  220px;
  --header-h:   70px;
  
}

body.light {
  --bg:         #f7f8fc;
  --bg2:        #ffffff;
  --bg3:        #f1f2f7;
  --bg4:        #e8eaf2;
  --border:     rgba(0,0,0,0.06);
  --border2:    rgba(0,0,0,0.12);
  --text:       #1a1a2e;
  --text2:      #4a4a6a;
  --text3:      #8b8ba8;
}
body.light .post-card,
body.light .compose,
body.light .stories-row,
body.light .auth-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
body.light .comment-bubble {
  background: var(--bg3);
  color: var(--text);
}
/* Note: light-mode .topbar / .topbar-search input / .topbar-icon-btn /
   .topbar-avatar overrides now live next to their respective dark-mode
   rules further down (the "Purple-glass premium" block) so each pair
   is co-located and easier to keep in sync. */

html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }

/* ── TOP HEADER ──
   Purple-glass premium (May 2026 redesign).
   Layers:
     · A translucent purple gradient base (keeps the brand color saturated
       so the logo's mix-blend-mode multiply still resolves correctly)
     · backdrop-filter: blur(20px) saturate(180%) — the actual glass
     · An inner radial highlight at the top-left for dimensional sheen
     · A glowing 1px bottom border shimmer (mirrors the .quests-panel
       accent at its top edge) for the premium-tier finish
   Falls back to the prior solid gradient on browsers without backdrop-
   filter support — graceful degradation, no broken UI.
   ───────────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  /* Deeper purple base — pushed both the alpha (0.78 → 0.92) and the
     hue (slightly darker, more saturated indigo-violet) so the bar reads
     as a rich, near-solid material rather than a translucent wash. The
     radial accents got a small bump too so they still register against
     the richer base. */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(167, 139, 250, 0.32) 0%, transparent 55%),
    radial-gradient(80% 100% at 100% 100%, rgba(91, 33, 182, 0.50) 0%, transparent 60%),
    linear-gradient(135deg, rgba(35, 10, 80, 0.92) 0%, rgba(14, 8, 42, 0.95) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* No hard border / shimmer line — the bottom edge fades softly via
     the ::after gradient panel below. Keeps the inset highlight at the
     top for the glass sheen, drops the harsh outer shadow that would
     have read as a "line" too. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  display: flex; align-items: center; padding: 0 1.5rem;
  z-index: 100; gap: 1.5rem;
}
/* Bottom-edge fade — a 24px-tall gradient panel that extends below
   the topbar, fading from the bar's deep-violet tone down to fully
   transparent. Replaces the previous 1px shimmer line so the topbar
   feels like it dissolves into the content below rather than sitting
   above a hard rule. Pointer-events disabled so it doesn't block
   clicks on whatever is underneath. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(180deg,
    rgba(14, 8, 42, 0.55) 0%,
    rgba(14, 8, 42, 0.22) 45%,
    transparent 100%);
  pointer-events: none;
}
body.light .topbar {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(167, 139, 250, 0.20) 0%, transparent 55%),
    radial-gradient(80% 100% at 100% 100%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, rgba(245, 240, 255, 0.85) 0%, rgba(232, 222, 252, 0.85) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}
body.light .topbar::after {
  background: linear-gradient(180deg,
    rgba(232, 222, 252, 0.65) 0%,
    rgba(232, 222, 252, 0.22) 45%,
    transparent 100%);
}
/* Premium SELE logo — clickable button that returns to home + scroll-to-top */
.topbar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  border-radius: 16px;
  font: inherit;
  color: inherit;
  letter-spacing: 0;
  line-height: 0;
  min-width: auto;
  filter: drop-shadow(0 4px 14px rgba(76, 29, 149, 0.35));
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), filter 0.22s ease;
}
.topbar-logo img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 10px;
  user-select: none;
  -webkit-user-drag: none;
  /* Drops the white background of the PNG so it blends into the purple topbar.
     For a 100% clean version long-term, re-export logo.png with a transparent
     background — but this works perfectly against any solid colored topbar. */
  mix-blend-mode: multiply;
}
.topbar-logo:hover {
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 8px 24px rgba(167, 139, 250, 0.65));
}
.topbar-logo:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}
.topbar-logo:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.topbar-search { flex: 1; max-width: 560px; position: relative; }
/* Glassy dark input — translucent purple-tinted fill, soft purple border,
   focus ring grows the border to a luminous violet (matches the topbar's
   bottom shimmer accent). The submit button on the right gets a brand-
   purple gradient + glow. */
.topbar-search input {
  width: 100%;
  background: rgba(15, 8, 36, 0.40);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 99px;
  padding: 0.7rem 3rem 0.7rem 1.4rem;
  font-family: var(--font);
  font-size: 0.9rem;
  color: #fff;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topbar-search input::placeholder {
  color: rgba(196, 181, 253, 0.55);
  font-weight: 400;
}
.topbar-search input:hover {
  border-color: rgba(167, 139, 250, 0.38);
  background: rgba(15, 8, 36, 0.55);
}
.topbar-search input:focus {
  border-color: rgba(196, 181, 253, 0.72);
  background: rgba(15, 8, 36, 0.65);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), 0 0 24px -4px rgba(167, 139, 250, 0.35);
}
body.light .topbar-search input {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(124, 58, 237, 0.18);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.06);
}
body.light .topbar-search input::placeholder { color: #9ca3af; }
body.light .topbar-search input:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(124, 58, 237, 0.28);
}
body.light .topbar-search input:focus {
  background: #fff;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 4px 16px rgba(124, 58, 237, 0.18);
}
.topbar-search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.topbar-search-btn:hover {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 18px -2px rgba(167, 139, 250, 0.7);
}
.topbar-search-btn:active { transform: translateY(-50%) scale(0.96); }
.topbar-search-btn svg { width: 16px; height: 16px; }

.topbar-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius);
  max-height: 400px; overflow-y: auto; box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  z-index: 200; display: none;
}
.topbar-results.visible { display: block; }
.search-section-title { font-size: 0.7rem; text-transform: uppercase; color: var(--text3); padding: 0.75rem 1rem 0.4rem; letter-spacing: 0.08em; font-weight: 600; }
.search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; cursor: pointer; transition: background 0.15s; }
.search-result-item:hover { background: var(--bg3); }
.search-result-item .avatar { width: 36px; height: 36px; }
.search-result-item .srtext { flex: 1; min-width: 0; }
.search-result-item .srtitle { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item .srsub { font-size: 0.72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
/* Icon buttons — glassy circles with a soft purple border. Hover bumps
   the violet glow + lifts slightly. Matches the search input's frosted
   panel treatment so the whole top bar reads as one material. */
.topbar-icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15, 8, 36, 0.40);
  border: 1px solid rgba(167, 139, 250, 0.22);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.topbar-icon-btn:hover {
  background: rgba(139, 92, 246, 0.20);
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(167, 139, 250, 0.55);
}
.topbar-icon-btn:active { transform: translateY(0) scale(0.97); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
body.light .topbar-icon-btn {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 58, 237, 0.18);
  color: var(--text);
}
body.light .topbar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.35);
}

/* ── NOTIFICATION BELL ── */
.topbar-bell-wrap { position: relative; }
.topbar-quests-wrap { position: relative; }

/* ════════════════════════════════════════════════════════════════════════════
 * Daily Quests — header button + drop-down panel. Premium purple feel.
 * Brainstorming surface, web-only (mobile comes after we settle the UX).
 * Mirrors the notifications-panel positioning/animation so visually
 * the two panels feel like siblings.
 * ════════════════════════════════════════════════════════════════════════════ */

.topbar-quests {
  position: relative;
}
.topbar-quests-streak {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg, #0d0719);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  letter-spacing: -0.02em;
}
body.light .topbar-quests-streak { border-color: #fff; }

.quests-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: 72vh;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(100% 50% at 100% 100%, rgba(168, 85, 247, 0.10), transparent 50%),
    linear-gradient(180deg, #1a1138 0%, #0f0824 100%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  box-shadow:
    0 30px 70px rgba(15, 8, 36, 0.7),
    0 0 0 1px rgba(167, 139, 250, 0.12),
    0 0 40px rgba(124, 58, 237, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 600;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: notifPanelIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
body.light .quests-panel {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(196, 181, 253, 0.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow:
    0 24px 60px rgba(76, 29, 149, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.08),
    0 0 40px rgba(167, 139, 250, 0.10);
}
.quests-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.7), rgba(167, 139, 250, 0.9), rgba(196, 181, 253, 0.7), transparent);
  pointer-events: none;
}

/* Two-row header: title row (h3 + reset button) on top, then a compact
   meta row (streak chip + countdown) below. Replaces the previous
   left/right split which crowded everything onto one line and forced
   "Weekly Quests" + "7-day streak" to wrap awkwardly inside the 400px
   panel. */
.quests-header {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.10);
  flex-shrink: 0;
}
.quests-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.quests-header-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}
.quests-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.light .quests-header h3 {
  background: linear-gradient(135deg, #4c1d95, #6d28d9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quests-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(124, 58, 237, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.32);
  color: #c4b5fd;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.18);
}
body.light .quests-streak-pill {
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.28);
}
.quests-reset-demo {
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.16);
  color: var(--text2);
  font-size: 0.9rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
}
.quests-reset-demo:hover {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.4);
  transform: rotate(90deg);
  background: rgba(167, 139, 250, 0.12);
}

/* .quests-header-right removed — header restructured into title row +
   meta row (.quests-header-row + .quests-header-meta defined above). */
.quests-countdown {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -0.01em;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.12);
  white-space: nowrap;
}
body.light .quests-countdown {
  background: rgba(243, 232, 255, 0.6);
  border-color: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
}

/* ── Featured "Quest of the Day" treatment ── */
.quest-item.is-featured {
  background:
    linear-gradient(90deg, rgba(251, 191, 36, 0.08) 0%, rgba(167, 139, 250, 0.10) 50%, rgba(251, 146, 60, 0.06) 100%);
  border-bottom-color: rgba(251, 191, 36, 0.18);
  position: relative;
}
.quest-item.is-featured::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.45);
}
.quest-item.is-featured .quest-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.30), rgba(124, 58, 237, 0.18));
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
body.light .quest-item.is-featured .quest-icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}

.quest-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.quest-label-row .quest-label { margin-bottom: 0; }
.quest-featured-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.4);
}

/* ── Floating "+N ⭐" reward animation ── */
.quest-fly-reward {
  position: fixed;
  z-index: 9999;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.95));
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  box-shadow:
    0 6px 20px rgba(124, 58, 237, 0.55),
    0 0 24px rgba(167, 139, 250, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.32, 0.72, 0.28, 1),
    opacity 0.7s ease-out;
}
.quest-fly-reward.is-poppin {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}
.quest-fly-reward.is-coin {
  background: linear-gradient(135deg, rgba(196, 181, 253, 0.95), rgba(91, 33, 182, 0.95));
  color: #fff;
  box-shadow:
    0 6px 20px rgba(91, 33, 182, 0.55),
    0 0 24px rgba(167, 139, 250, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Coin-currency reward pill (variant for the in-list reward badge). */
.quest-item.is-coin-reward .quest-reward-pill {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22) 0%, rgba(91, 33, 182, 0.10) 100%);
  border-color: rgba(124, 58, 237, 0.35);
  color: #c4b5fd;
}
body.light .quest-item.is-coin-reward .quest-reward-pill {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
}
.quest-item.is-coin-reward .quest-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.20), rgba(124, 58, 237, 0.10));
  border-color: rgba(167, 139, 250, 0.32);
  color: #c4b5fd;
}

/* Topbar pill bumps when reward lands. */
#topbarStarBalance.is-just-bumped,
#topbarCoinBalance.is-just-bumped {
  animation: questsPillBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes questsPillBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); color: #fde68a; }
  100% { transform: scale(1); }
}

/* ── Tabs (Daily / Weekly / Monthly) ── */
.quests-tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0.55rem 0.85rem 0;
  border-bottom: 1px solid rgba(167, 139, 250, 0.08);
  flex-shrink: 0;
}
.quests-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  padding: 0.55rem 0.95rem;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  position: relative;
  letter-spacing: -0.01em;
  transition: color 0.22s ease, background 0.22s ease;
}
.quests-tab:hover {
  color: #c4b5fd;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), transparent);
}
body.light .quests-tab:hover { color: #6d28d9; background: linear-gradient(180deg, rgba(167, 139, 250, 0.10), transparent); }
.quests-tab.active {
  color: #c4b5fd;
}
body.light .quests-tab.active { color: #6d28d9; }
.quests-tab.active::after {
  content: '';
  position: absolute;
  left: 18%; right: 18%; bottom: -1px;
  height: 2.5px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}

/* ── Day-progress strip ── */
.quests-day-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.08);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06), transparent);
}
/* Weekly + monthly tabs override the grid to flex (variable count). */
.quests-day-strip.is-flex { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.quests-day-strip.is-flex::-webkit-scrollbar { display: none; }
.quests-day-strip.is-flex .quest-day-pip { min-width: 56px; flex-shrink: 0; }

.quest-day-pip {
  height: 52px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.06), rgba(124, 58, 237, 0.02)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(167, 139, 250, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 600;
  color: var(--text2);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
body.light .quest-day-pip {
  background: linear-gradient(180deg, rgba(245, 243, 255, 1), rgba(237, 233, 254, 0.5));
  border-color: rgba(124, 58, 237, 0.12);
}
.quest-day-pip-label { font-size: 0.55rem; opacity: 0.55; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
.quest-day-pip-num { font-size: 0.92rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.quest-day-pip-mark { font-size: 0.7rem; font-weight: 700; line-height: 1; margin-top: 1px; }

/* Complete: deep purple gradient with checkmark — feels "earned". */
.quest-day-pip.is-complete {
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.32), rgba(91, 33, 182, 0.20)),
    rgba(124, 58, 237, 0.10);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 10px rgba(124, 58, 237, 0.18);
}
body.light .quest-day-pip.is-complete {
  background: linear-gradient(180deg, #ddd6fe, #c4b5fd);
  border-color: rgba(124, 58, 237, 0.35);
  color: #4c1d95;
}
.quest-day-pip.is-complete .quest-day-pip-mark { color: #c4b5fd; }
body.light .quest-day-pip.is-complete .quest-day-pip-mark { color: #6d28d9; }

/* Today: signature purple glow — the "you are here" moment. */
.quest-day-pip.is-today {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.35) 0%, rgba(124, 58, 237, 0.30) 100%),
    rgba(124, 58, 237, 0.20);
  border-color: rgba(167, 139, 250, 0.55);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 0.18),
    0 0 20px rgba(167, 139, 250, 0.40),
    0 4px 16px rgba(124, 58, 237, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
}
body.light .quest-day-pip.is-today {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-color: rgba(124, 58, 237, 0.4);
  color: #5b21b6;
  box-shadow:
    0 0 0 2px rgba(124, 58, 237, 0.12),
    0 0 18px rgba(167, 139, 250, 0.30),
    0 4px 14px rgba(124, 58, 237, 0.20);
}
.quest-day-pip.is-today.is-complete {
  /* Today + already-claimed = layered purple emphasis. */
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.40), rgba(91, 33, 182, 0.30)),
    rgba(91, 33, 182, 0.20);
  border-color: rgba(167, 139, 250, 0.6);
}

.quest-day-pip.is-missed {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.5);
}
.quest-day-pip.is-future {
  opacity: 0.55;
  background: rgba(167, 139, 250, 0.03);
  border-style: dashed;
  border-color: rgba(167, 139, 250, 0.15);
}

.quests-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0 0.5rem;
}
.quests-list::-webkit-scrollbar { width: 6px; }
.quests-list::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.18); border-radius: 3px; }
.quests-list::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.32); }

.quest-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.78rem 1.1rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.06);
  transition: background 0.22s ease, border-color 0.22s ease;
  position: relative;
}
body.light .quest-item { border-bottom-color: rgba(124, 58, 237, 0.06); }
.quest-item:last-child { border-bottom: none; }
.quest-item:hover {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.05), transparent);
}
.quest-item.is-claimable {
  background:
    linear-gradient(90deg, rgba(167, 139, 250, 0.10) 0%, rgba(124, 58, 237, 0.06) 100%);
  border-bottom-color: rgba(167, 139, 250, 0.14);
}
.quest-item.is-claimable::before {
  /* Subtle left-edge accent line for ready-to-claim quests. */
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 2.5px;
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}
.quest-item.is-claimed { opacity: 0.5; }

.quest-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.20), rgba(124, 58, 237, 0.10));
  border: 1px solid rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.light .quest-icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color: rgba(124, 58, 237, 0.18);
  color: #6d28d9;
}
.quest-icon svg { width: 19px; height: 19px; }
.quest-item.is-claimable .quest-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.30), rgba(124, 58, 237, 0.18));
  border-color: rgba(167, 139, 250, 0.55);
  color: #c4b5fd;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.quest-item.is-claimed .quest-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(124, 58, 237, 0.10));
  border-color: rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.quest-body {
  flex: 1;
  min-width: 0;
}
.quest-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.quest-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.quest-progress-bar {
  flex: 1;
  height: 5px;
  background: rgba(167, 139, 250, 0.08);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.06);
}
body.light .quest-progress-bar { background: rgba(124, 58, 237, 0.08); }
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.45);
}
.quest-item.is-claimable .quest-progress-fill,
.quest-item.is-claimed .quest-progress-fill {
  background: linear-gradient(90deg, #c4b5fd 0%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}
.quest-progress-label {
  font-size: 0.7rem;
  color: var(--text2);
  font-weight: 600;
  min-width: 38px;
  text-align: right;
  letter-spacing: -0.01em;
}

.quest-action {
  flex-shrink: 0;
  min-width: 68px;
  text-align: center;
}
.quest-currency-icon {
  /* Inline currency SVG (replaces ⭐ / 🪙 emoji). Sized to sit
     visually balanced inside the reward pill, inherits the pill's
     text color via fill="currentColor". */
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
}
.quest-streak-icon {
  /* Lightning-bolt streak indicator inside the streak pill. Same
     sizing principles as the currency icon — inherits color so it
     paints purple inside the pill. */
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -1px;
  margin-right: 0.15em;
}

/* ─── Pool reward header (daily tab) ──────────────────────────────────
   Sits above the quest list. Shows the bundled reward (4⭐ + 1🪙) and
   the user's progress toward the threshold (X/4 quests). Morphs into
   a CLAIM button when the threshold is reached. */
.quest-pool-header {
  margin: 0.55rem 1.1rem 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.14) 0%, rgba(124, 58, 237, 0.10) 100%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
body.light .quest-pool-header {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border-color: rgba(124, 58, 237, 0.18);
}
.quest-pool-header.is-claimable {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.28) 0%, rgba(124, 58, 237, 0.18) 100%);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.25);
}
.quest-pool-header.is-claimed { opacity: 0.55; }
.quest-pool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.quest-pool-meta { min-width: 0; flex: 1; }
.quest-pool-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.quest-pool-subtitle {
  font-size: 0.72rem;
  color: var(--text2);
  letter-spacing: -0.01em;
}
.quest-pool-reward {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35);
}
.quest-pool-reward .quest-currency-icon {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -1.5px;
}
.quest-pool-action { display: flex; }
.quest-pool-progress {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.15);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.light .quest-pool-progress {
  background: rgba(243, 232, 255, 0.7);
  border-color: rgba(124, 58, 237, 0.18);
}
.quest-pool-claim-btn {
  flex: 1;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.14s ease, box-shadow 0.22s ease;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.quest-pool-claim-btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 7px 20px rgba(124, 58, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.quest-pool-claim-btn:active { transform: translateY(0); }
.quest-pool-claimed {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #4ade80;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.22);
  letter-spacing: 0.02em;
}

/* ─── Per-quest bonus tag (daily, e.g. invite_friend +1🪙) ─────────── */
.quest-bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #c4b5fd, #a78bfa);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(167, 139, 250, 0.4);
}
.quest-bonus-tag .quest-currency-icon {
  width: 0.85em;
  height: 0.85em;
  vertical-align: -1px;
}
.quest-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, rgba(124, 58, 237, 0.10) 100%);
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(167, 139, 250, 0.32);
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.light .quest-reward-pill {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.35);
}
.quest-claim-btn {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 3px 12px rgba(124, 58, 237, 0.45),
    0 0 18px rgba(167, 139, 250, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.14s ease, box-shadow 0.22s ease;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.quest-claim-btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    0 6px 18px rgba(124, 58, 237, 0.55),
    0 0 24px rgba(167, 139, 250, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.quest-claim-btn:active { transform: translateY(0); }
.quest-claimed-mark {
  color: #4ade80;
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.quests-footer {
  border-top: 1px solid rgba(167, 139, 250, 0.12);
  padding: 0.85rem 1.1rem;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.08));
}
.quests-bonus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text2);
  letter-spacing: -0.01em;
}
.quests-bonus-reward {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.light .quests-bonus-reward {
  background: linear-gradient(135deg, #c2410c, #6d28d9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quests-footer.is-bonus-earned {
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.16));
  animation: questsBonusPulse 1.4s ease;
}
@keyframes questsBonusPulse {
  0%   { background-color: rgba(34, 197, 94, 0.30); }
  100% { background-color: transparent; }
}
.quests-footer.is-bonus-earned .quests-bonus-reward {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-bell { position: relative; }
.topbar-bell.has-unread svg {
  animation: bellShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top center;
}
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); }
  20%, 40%, 60%, 80% { transform: rotate(8deg); }
}
.topbar-bell-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2, #1a1428);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.45);
  animation: badgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
body.light .topbar-bell-badge { border-color: #ffffff; }
@keyframes badgePop {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── NOTIFICATIONS DROPDOWN ── */
.notifications-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  background: linear-gradient(180deg, var(--bg2, #1a1428) 0%, #120c20 100%);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 600;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: notifPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
body.light .notifications-panel {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.08);
}
@keyframes notifPanelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notifications-panel::before {
  /* Glow accent on top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.7), rgba(124, 58, 237, 0.7), rgba(167, 139, 250, 0.7), transparent);
  pointer-events: none;
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.10);
  flex-shrink: 0;
}
.notifications-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #c4b5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.light .notifications-header h3 {
  background: linear-gradient(135deg, #4c1d95, #1f2937);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notifications-mark-all {
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.notifications-mark-all:hover {
  background: rgba(139, 92, 246, 0.10);
  color: #c4b5fd;
}

/* Header actions cluster — wraps the sound toggle + mark-all. */
.notifications-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Sound toggle — same hit area + hover treatment as mark-all,
   icon-only. aria-pressed swaps the speaker-on/off icons. */
.notifications-sound-toggle {
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: background 0.15s, color 0.15s;
}
.notifications-sound-toggle:hover {
  background: rgba(139, 92, 246, 0.10);
  color: #c4b5fd;
}
.notifications-sound-toggle[aria-pressed="true"] {
  color: #f87171; /* red-ish when muted — quick visual cue */
}
.notifications-sound-toggle[aria-pressed="true"]:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
}

/* Time-bucket headers (May 2026) — section labels between
   notification rows. Sticky to the top of the scroll container so
   long lists keep context as the user scrolls. */
.notif-bucket-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.42rem 1rem 0.32rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  background: linear-gradient(180deg, rgba(20, 12, 35, 0.96), rgba(20, 12, 35, 0.88));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(139, 92, 246, 0.10);
}
body.light .notif-bucket-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 255, 0.88));
  color: #6b7280;
  border-bottom-color: rgba(139, 92, 246, 0.12);
}

.notif-filter-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.55rem 0.85rem 0.4rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.10);
  flex-shrink: 0;
}
.notif-filter-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text2);
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s ease;
  letter-spacing: 0.01em;
}
.notif-filter-tab:hover {
  background: rgba(139, 92, 246, 0.10);
  color: var(--text);
}
.notif-filter-tab:active { transform: scale(0.96); }
.notif-filter-tab.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(167, 139, 250, 0.10));
  color: #c4b5fd;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25);
}
body.light .notif-filter-tab.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.06));
  color: #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.20);
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
  /* Top padding zeroed (May 2026) — the sticky bucket header
     (.notif-bucket-header) is positioned at `top: 0` of this scroll
     container; any top padding here becomes a visible gap above the
     first header (no notification sits there to fill the padding).
     Bottom padding kept so the last row has breathing room. */
  padding: 0 0 0.35rem;
}
.notifications-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--text3);
  font-size: 0.85rem;
}

.notification-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  border-left: 2px solid transparent;
}
.notification-item:hover { background: rgba(139, 92, 246, 0.08); }
body.light .notification-item:hover { background: rgba(124, 58, 237, 0.06); }
.notification-item.unread {
  background: rgba(139, 92, 246, 0.06);
  border-left-color: #a78bfa;
}
.notification-item.unread:hover {
  background: rgba(139, 92, 246, 0.13);
}
.notification-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple, #7c3aed), #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
}
.notification-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notification-body { flex: 1; min-width: 0; }
.notification-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text);
}
.notification-text strong { font-weight: 600; color: var(--text); }
.notification-snippet {
  font-size: 0.78rem;
  color: var(--text2);
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notification-time {
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 0.25rem;
}
.notification-dot {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
  transform: translateY(-50%);
  display: none;
}
.notification-item.unread .notification-dot { display: block; }

/* Resource thumbnail — 48px square on the right of every card.
   Shows the post image / video thumbnail / book cover / chapter
   cover so the bell card has visual context. Mobile parity:
   components/NotificationCard.jsx ~L468-485. Hidden by default if
   the row's target type doesn't have an openable resource (follow,
   mention with no parent, etc.). */
.notification-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(139, 92, 246, 0.08);
  margin-right: 14px; /* breathing room from the unread dot */
}
.notification-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Skeleton rows shown during cold-load. Same shape as the real
   item so the panel doesn't jump when data arrives. */
.notification-skeleton { pointer-events: none; }
.notification-skeleton .skel-block {
  background: linear-gradient(90deg, rgba(139,92,246,0.10) 25%, rgba(139,92,246,0.18) 37%, rgba(139,92,246,0.10) 63%);
  background-size: 400% 100%;
  animation: notifSkelShimmer 1.4s ease infinite;
  border-radius: 8px;
}
.notification-skeleton .skel-line {
  height: 9px;
  border-radius: 4px;
  margin-top: 4px;
  background: linear-gradient(90deg, rgba(139,92,246,0.10) 25%, rgba(139,92,246,0.18) 37%, rgba(139,92,246,0.10) 63%);
  background-size: 400% 100%;
  animation: notifSkelShimmer 1.4s ease infinite;
}
.notification-skeleton .skel-line-1 { width: 78%; }
.notification-skeleton .skel-line-2 { width: 42%; height: 8px; }
@keyframes notifSkelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Load-more footer — sits at the very bottom of the list while a
   load-more fetch is in flight. */
.notif-loadmore-footer {
  padding: 0.6rem 1rem;
  text-align: center;
}
.notif-loadmore-spinner {
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 500;
}

/* ── @MENTION AUTOCOMPLETE ── */
.mention-dropdown {
  position: fixed;
  z-index: 700;
  min-width: 240px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg2, #1a1428);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 12px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.10);
  padding: 4px;
  animation: mentionIn 0.15s ease both;
}
body.light .mention-dropdown {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.10);
}
@keyframes mentionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.mention-item:hover,
.mention-item.active {
  background: rgba(139, 92, 246, 0.14);
}
body.light .mention-item:hover,
body.light .mention-item.active {
  background: rgba(124, 58, 237, 0.10);
}
.mention-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple, #7c3aed), #4c1d95);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.72rem; font-weight: 600;
  flex-shrink: 0;
}
.mention-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
}
.mention-name strong { color: #c4b5fd; font-weight: 600; }
body.light .mention-name strong { color: #7c3aed; }

/* ── VIDEO ACTION BAR (Like / Repost / Share) ── */
.video-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  margin: 0.5rem 0 1rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  position: relative;
  flex-wrap: wrap;
}

/* Override the post-style centered picker — for the video action bar we
   left-align the picker to the trigger so it never clips off-screen. */
.video-actions .reaction-picker {
  left: 0 !important;
  transform: translateY(6px) scale(0.95);
}
.video-actions .reaction-picker.visible {
  transform: translateY(0) scale(1);
}

/* Secondary info block — uploader + description, after the actions bar */
.video-info-secondary {
  margin-bottom: 1.25rem;
}

/* Uploader row: avatar/name on left, Follow button on right */
.video-uploader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.video-uploader-row .video-uploader { margin-bottom: 0; flex: 1; min-width: 0; }

/* Premium purple Follow button */
.btn-follow-creator {
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #ffffff;
  border: none;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-follow-creator:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}
.btn-follow-creator:active { transform: scale(0.97); }
.btn-follow-creator:disabled { opacity: 0.6; cursor: progress; }

/* Following state — flat, with red accent on hover (suggesting "click to unfollow") */
.btn-follow-creator.following {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(167, 139, 250, 0.30);
  box-shadow: none;
}
.btn-follow-creator.following:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
  transform: none;
}
body.light .btn-follow-creator.following {
  background: #f9fafb;
  color: #1f2937;
  border-color: rgba(124, 58, 237, 0.25);
}
body.light .btn-follow-creator.following:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}

/* Description with 4-line clamp + "Show more" toggle */
.video-description-wrap {
  position: relative;
}
.video-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 0.92rem;
  color: var(--text2);
  word-break: break-word;
}
.video-description.expanded {
  -webkit-line-clamp: unset;
  display: block;
}
.video-description:empty { display: none; }
.video-description-toggle {
  background: transparent;
  border: none;
  color: #c4b5fd;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0;
  margin-top: 0.2rem;
  letter-spacing: 0.01em;
}
.video-description-toggle:hover { color: #a78bfa; text-decoration: underline; }
body.light .video-description-toggle { color: #7c3aed; }
body.light .video-description-toggle:hover { color: #4c1d95; }

/* ── VIDEO COMMENTS SECTION ── */
.video-comments-wrap {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 16px;
}
body.light .video-comments-wrap {
  background: #ffffff;
  border-color: #e5e7eb;
}
.video-comments-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.10);
}
.video-comments-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.video-comments-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text2);
  background: rgba(139, 92, 246, 0.10);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
}

/* Subtle styling for @mentions inside rendered comments */
.mention-token {
  color: #c4b5fd;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s;
}
.mention-token:hover { color: #a78bfa; text-decoration: underline; }
body.light .mention-token { color: #7c3aed; }
body.light .mention-token:hover { color: #4c1d95; }
/* Avatar — glowing purple ring like the reference deck.
   Uses a 2px solid violet border + box-shadow stack for the bloom:
     outer  shadow = soft falloff halo
     middle shadow = brighter inner ring
     inset  shadow = subtle dark vignette inside the ring for depth
   Hover intensifies the bloom so the avatar reads as the "you are
   here" anchor in the corner. */
.topbar-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--purple-dk);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 0.8rem;
  border: 2px solid rgba(196, 181, 253, 0.85);
  box-shadow:
    0 0 0 1px rgba(15, 8, 36, 0.6),
    0 0 16px 2px rgba(167, 139, 250, 0.55),
    0 4px 16px -2px rgba(124, 58, 237, 0.55),
    inset 0 0 0 1px rgba(15, 8, 36, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.topbar-avatar:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(221, 214, 254, 1);
  box-shadow:
    0 0 0 1px rgba(15, 8, 36, 0.6),
    0 0 22px 4px rgba(196, 181, 253, 0.75),
    0 8px 24px -2px rgba(167, 139, 250, 0.7),
    inset 0 0 0 1px rgba(15, 8, 36, 0.35);
}
.topbar-avatar:active { transform: translateY(0) scale(0.98); }
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.light .topbar-avatar {
  border-color: rgba(124, 58, 237, 0.75);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 16px 2px rgba(124, 58, 237, 0.35),
    0 4px 12px -2px rgba(124, 58, 237, 0.30);
}
body.light .topbar-avatar:hover {
  border-color: rgba(76, 29, 149, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 22px 4px rgba(124, 58, 237, 0.5),
    0 8px 22px -2px rgba(124, 58, 237, 0.5);
}

/* ── LEFT SIDEBAR — floating premium glass (May 2026 redesign) ──
   Pulled inset from the viewport edges so it reads as a floating
   panel rather than a flush column. Glass material identical in
   spirit to the topbar:
     · translucent purple-tinted gradient base
     · radial highlight at the top-left for sheen
     · backdrop-filter: blur(20px) saturate(180%) — the actual glass
     · soft violet border, rounded corners
     · stacked box-shadow for the float (close drop + softer glow halo)
   The main-wrap's left margin (var(--sidebar-w)) is unchanged; the
   sidebar is INSET inside that reserved width, leaving an organic
   gap between its right edge and the start of the main content. */
.sidebar {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 12px;
  bottom: 12px;
  width: calc(var(--sidebar-w) - 24px);
  /* See-through glass — base alpha dropped from ~0.80 to ~0.18 so the
     panel reads as nearly transparent. Whatever sits behind (the body
     bg, the home mosaic, scrolling posts) shows through as a softly
     blurred watercolor underlayer. The blur radius is bumped to 32px
     to compensate — without strong blur, see-through glass just looks
     like a tinted window and visually competes with the content. */
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(167, 139, 250, 0.18) 0%, transparent 60%),
    radial-gradient(100% 40% at 100% 100%, rgba(91, 33, 182, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(35, 10, 80, 0.18) 0%, rgba(14, 8, 42, 0.28) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 22px;
  box-shadow:
    /* inset top highlight — adds glass-sheen on the upper edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* close drop — anchors the panel to the surface */
    0 14px 36px -12px rgba(0, 0, 0, 0.45),
    /* soft purple halo — premium glow bleed */
    0 24px 60px -20px rgba(124, 58, 237, 0.40),
    /* outer 1px violet line — ties it to the topbar's bottom-edge fade */
    0 0 0 1px rgba(167, 139, 250, 0.10);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1rem 0.65rem;
  gap: 0.2rem;
  z-index: 90;
  overflow: hidden; /* keeps the rounded corners crisp + clips any item hover bleed */
}
/* Subtle right-edge sheen — a 1px luminous violet gradient hugging
   the inside of the right border. Mirrors the topbar's bottom-fade
   technique so the two glass surfaces feel like siblings. */
.sidebar::after {
  content: '';
  position: absolute;
  top: 16px; bottom: 16px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(196, 181, 253, 0.18) 30%,
    rgba(167, 139, 250, 0.32) 50%,
    rgba(196, 181, 253, 0.18) 70%,
    transparent 100%);
  pointer-events: none;
}
body.light .sidebar {
  /* Same see-through treatment in light mode — the white base drops
     to ~0.30 alpha so the page content shows through softly, then
     the 32px backdrop blur smooths it into a watercolor. */
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(167, 139, 250, 0.14) 0%, transparent 60%),
    radial-gradient(100% 40% at 100% 100%, rgba(124, 58, 237, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(250, 245, 255, 0.42) 100%);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 36px -12px rgba(124, 58, 237, 0.18),
    0 24px 60px -20px rgba(124, 58, 237, 0.22),
    0 0 0 1px rgba(124, 58, 237, 0.06);
}
body.light .sidebar::after {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(124, 58, 237, 0.18) 30%,
    rgba(124, 58, 237, 0.32) 50%,
    rgba(124, 58, 237, 0.18) 70%,
    transparent 100%);
}
.sidebar-item {
  position: relative;
  width: 100%; height: 44px;
  border-radius: 12px;
  background: transparent; border: none;
  color: var(--text2);
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.85rem; padding: 0 0.95rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  font-family: inherit;
  text-align: left;
  overflow: hidden;
}
.sidebar-item:hover {
  background: rgba(139, 92, 246, 0.10);
  color: var(--text);
}
.sidebar-item:active { transform: scale(0.98); }

.sidebar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: inherit;
  transition: color 0.18s ease, transform 0.18s ease;
}
.sidebar-icon svg { width: 20px; height: 20px; }

.sidebar-label {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state — purple gradient + glowing left-edge stripe */
.sidebar-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(167, 139, 250, 0.10) 100%);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.20);
}
body.light .sidebar-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(167, 139, 250, 0.06) 100%);
  color: #4c1d95;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.20);
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 50%, #7c3aed 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.7), 0 0 4px rgba(167, 139, 250, 0.9);
}
.sidebar-item.active .sidebar-icon {
  color: #c4b5fd;
}
body.light .sidebar-item.active .sidebar-icon {
  color: #7c3aed;
}
.sidebar-item.active .sidebar-label {
  font-weight: 600;
}

/* Logout — red hover (destructive cue) */
.sidebar-item-logout:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
}
.sidebar-item-logout:hover .sidebar-icon {
  color: #fca5a5;
}
body.light .sidebar-item-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}
body.light .sidebar-item-logout:hover .sidebar-icon {
  color: #b91c1c;
}

.sidebar-divider {
  width: calc(100% - 1.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.18), transparent);
  margin: 0.55rem auto;
  border: 0;
}

/* ── SIDEBAR THEME TOGGLE — premium segmented radio (May 2026) ──
   Two-option Light/Dark switcher that sits between the last divider
   and the Log-out button. The container is a purple-tinted glass
   pill; the selected option carries a brighter purple gradient with
   a soft inner glow. Replaces the old topbar sun-icon button. */
.sidebar-theme-toggle {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0.35rem 0.75rem 0.5rem 0.75rem;
  padding: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.55), rgba(28, 16, 50, 0.45));
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 6px 18px rgba(15, 8, 30, 0.35);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.sidebar-theme-option {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(229, 220, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.sidebar-theme-option:hover:not(.is-selected) {
  background: rgba(139, 92, 246, 0.10);
  color: rgba(238, 232, 255, 0.92);
}
.sidebar-theme-option:active {
  transform: scale(0.97);
}
.sidebar-theme-option .sidebar-theme-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.sidebar-theme-option .sidebar-theme-icon svg {
  width: 100%;
  height: 100%;
}
.sidebar-theme-option.is-selected {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.85), rgba(124, 58, 237, 0.85));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(60, 20, 120, 0.35),
    0 4px 12px rgba(124, 58, 237, 0.45);
}
.sidebar-theme-option:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.6);
  outline-offset: 2px;
}
/* Light-theme variant: lighter glass + subtler chrome */
body.light .sidebar-theme-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 240, 255, 0.62));
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(124, 58, 237, 0.06),
    0 6px 14px rgba(124, 58, 237, 0.10);
}
body.light .sidebar-theme-option {
  color: rgba(58, 30, 110, 0.62);
}
body.light .sidebar-theme-option:hover:not(.is-selected) {
  background: rgba(124, 58, 237, 0.08);
  color: rgba(58, 30, 110, 0.95);
}
body.light .sidebar-theme-option.is-selected {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(60, 20, 120, 0.35),
    0 4px 12px rgba(124, 58, 237, 0.35);
}

/* ── BOOK / AUTHOR PAGE HERO ── */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 1.75rem;
  margin-bottom: 1.5rem;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.18);
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(124, 58, 237, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15, 8, 30, 0.95), rgba(15, 8, 30, 0.65));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.65), rgba(124, 58, 237, 0.65), rgba(167, 139, 250, 0.65), transparent);
  pointer-events: none;
}
body.light .page-hero {
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(124, 58, 237, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff, #faf8ff);
  border-color: rgba(124, 58, 237, 0.18);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 65%;
}
.page-hero-title {
  margin: 0 0 0.35rem;
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #c4b5fd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.light .page-hero-title {
  background: linear-gradient(135deg, #4c1d95 0%, #1f2937 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text2, #c5c4cf);
  line-height: 1.5;
  max-width: 480px;
}
.page-hero-decoration {
  position: relative;
  z-index: 1;
  color: rgba(167, 139, 250, 0.55);
  filter: drop-shadow(0 6px 24px rgba(124, 58, 237, 0.4));
}

/* Empty-state body shared by Book + Author */
.page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(15, 8, 30, 0.4), rgba(15, 8, 30, 0.05));
  border: 1px dashed rgba(139, 92, 246, 0.25);
  border-radius: 22px;
}
body.light .page-empty {
  background: linear-gradient(180deg, #faf8ff, #ffffff);
  border-color: rgba(124, 58, 237, 0.20);
}
.page-empty-icon {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(167, 139, 250, 0.06));
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.light .page-empty-icon { color: #7c3aed; }
.page-empty-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-empty-body {
  margin: 0 0 1.4rem;
  max-width: 420px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text2);
}
.page-empty-body strong {
  color: #c4b5fd;
  font-weight: 600;
}
body.light .page-empty-body strong { color: #7c3aed; }

/* ── BOOK BROWSE TOOLBAR ── */
.book-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  /* Sticky toolbar — stays at top while scrolling books grid (like Spotify/Netflix) */
  position: sticky;
  top: var(--header-h, 0);
  z-index: 20;
  padding: 0.7rem 0.4rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
}
body:not(.light) .book-toolbar {
  background: rgba(15, 10, 28, 0.78);
  border-bottom-color: rgba(167, 139, 250, 0.10);
}
.book-genre-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;        /* single line, no wrap */
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide scrollbar — feels cleaner on a horizontal pill rail (Twitter/YouTube style) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Subtle fade at right edge to hint at scroll */
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%);
  padding-right: 0.5rem;
}
.book-genre-chips::-webkit-scrollbar { display: none; }
/* Premium purple chip — used by books + videos for consistency */
.book-chip,
.search-tag-pill {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.book-chip:hover,
.search-tag-pill:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(139, 92, 246, 0.06);
  color: #4c1d95;
  transform: translateY(-1px);
}
.book-chip.active,
.search-tag-pill.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.book-chip.active:hover,
.search-tag-pill.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.42);
}
.book-chip:focus,
.search-tag-pill:focus { outline: none; }
.book-chip:focus-visible,
.search-tag-pill:focus-visible { outline: 2px solid rgba(124, 58, 237, 0.5); outline-offset: 2px; }

/* Dark mode */
body:not(.light) .book-chip,
body:not(.light) .search-tag-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #d1d5db;
}
body:not(.light) .book-chip:hover,
body:not(.light) .search-tag-pill:hover {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}
body:not(.light) .book-chip.active,
body:not(.light) .search-tag-pill.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.5);
}
.book-sort-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.42rem 2.4rem 0.42rem 0.95rem;
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  transition: border-color 0.15s, background-color 0.15s;
}
body.light .book-sort-select {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}
.book-sort-select:hover { border-color: rgba(139, 92, 246, 0.45); }
.book-sort-select:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }

/* ── BOOK GRID ── */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}
.book-card {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0;
  font-family: inherit;
  text-align: left;
  animation: bookFadeIn 0.35s ease both;
}
.book-grid-sentinel {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0.25rem;
}
.book-grid-loadmore {
  /* Reset .loading defaults — minimalist pill */
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem !important;
  border-radius: 999px;
  font-size: 0.76rem !important;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--text2) !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  text-align: left !important;
}
body.light .book-grid-loadmore {
  background: rgba(0, 0, 0, 0.02);
  border-color: #e5e7eb;
}
.book-grid-loadmore::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(167, 139, 250, 0.30);
  border-top-color: #a78bfa;
  animation: vuSpin 0.85s linear infinite;
  flex-shrink: 0;
}
.book-grid-end-msg {
  margin: 1.25rem 0 0.25rem;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text3);
}

/* Clickable profile elements inside post cards */
.profile-link {
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s;
}
.profile-link:hover { opacity: 0.85; }
.post-author.profile-link:hover { color: var(--purple-lt, #a78bfa); }
@keyframes bookFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.book-cover {
  position: relative;
  /* 2:3 — standard print-book-cover portrait ratio. Matches the
     home-shelf cards (.home-book-cover) so the Books tab and home
     page look consistent. Was 3:4 (squatter); under that ratio
     covers read as stretched/wider than they should. */
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1428, #0f0a1c);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(139, 92, 246, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.book-card:hover .book-cover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.30);
}
.book-cover img {
  width: 100%;
  height: 100%;
  /* `cover` + `top` — for ratio-mismatched sources we keep the TOP of the
     image visible (where most book titles live) instead of center-cropping
     them out of frame. The right long-term fix is _supabaseRatioCrop on
     every cover at render time so the source arrives at 2:3 — `contain`
     was a worse trade because tall sources (some covers are 1:3+) became
     thin slivers with huge white bars. */
  object-fit: cover;
  object-position: top;
  display: block;
}
.book-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(167, 139, 250, 0.4);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.book-cover-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.book-cover-badge.legacy {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.4);
}
.book-stats {
  position: absolute;
  bottom: 0.55rem;
  left: 0.55rem;
  right: 0.55rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.book-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.book-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card:hover .book-card-title { color: #c4b5fd; }
body.light .book-card:hover .book-card-title { color: #7c3aed; }
.book-card-author {
  font-size: 0.78rem;
  color: var(--text2);
  margin: 0;
}
.book-card-genre {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a78bfa;
  margin: 0;
}

/* ── BOOK DETAIL PAGE ── */
.book-detail {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 720px) {
  .book-detail { grid-template-columns: 1fr; }
  .book-detail-cover { max-width: 240px; margin: 0 auto; }
}
.book-detail-cover {
  /* 2:3 print-book ratio (was 3:4 — caused covers to read stretched). */
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.15);
  background: linear-gradient(135deg, #1a1428, #0f0a1c);
}
/* `cover` + `top` — keep the top of the source visible (titles usually
   live there). See .book-cover img for the full reasoning on why contain
   was a worse trade. The detail page also passes the cover through
   _supabaseRatioCrop in books.js so the source arrives at 2:3 when it
   can. */
.book-detail-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.book-detail-info h1 {
  margin: 0 0 0.5rem;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.book-detail-author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--text2);
}
.book-detail-author .avatar { width: 32px; height: 32px; }
.book-detail-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--text2);
}
.book-detail-meta strong { color: var(--text); margin-right: 0.25rem; }
.book-detail-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.book-detail-genre-row .book-chip { cursor: default; }
.book-detail-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.book-detail-description {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text2);
  white-space: pre-wrap;
  margin-bottom: 1.75rem;
}
body.light .book-detail-description {
  background: #faf8ff;
  border-color: #e5e7eb;
}

/* Chapter list */
.chapter-list {
  margin-top: 1rem;
}
.chapter-list-title {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text2);
  margin-bottom: 0.85rem;
}
.chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  margin-bottom: 0.5rem;
}
body.light .chapter-row {
  background: #ffffff;
  border-color: #e5e7eb;
}
.chapter-row:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateX(2px);
}
.chapter-row-num {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a78bfa;
  min-width: 70px;
}
.chapter-row-title { flex: 1; font-size: 0.92rem; font-weight: 500; color: var(--text); margin: 0 1rem; }
.chapter-row-meta { font-size: 0.78rem; color: var(--text2); }

/* ── CHAPTER READER ── */
.reader-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 8, 30, 0.6);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  margin-bottom: 1.25rem;
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(8px);
}
body.light .reader-bar { background: rgba(255, 255, 255, 0.85); border-color: #e5e7eb; }
.reader-back {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.reader-back:hover { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.45); }
.reader-bar-info { flex: 1; min-width: 0; }
.reader-bar-title { font-size: 0.78rem; color: var(--text2); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.reader-bar-chapter { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-bar-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.reader-tool {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text);
  font-size: 0.78rem; font-weight: 700;
  padding: 0.42rem 0.7rem; border-radius: 10px;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.reader-tool:hover { background: rgba(139, 92, 246, 0.10); border-color: rgba(139, 92, 246, 0.4); color: #c4b5fd; }

.reader-content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0.5rem 2.5rem;
  font-size: var(--reader-font-size, 1.05rem);
  line-height: 1.85;
  color: var(--text);
  font-family: 'Georgia', 'Iowan Old Style', 'Palatino', serif;
  /* Anti-copy: discourage casual selection/copying */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;        /* iOS long-press preview */
  -webkit-tap-highlight-color: transparent;
  /* Username watermark applied via JS by setting --reader-watermark-bg */
  background-image: var(--reader-watermark-bg, none);
  background-repeat: repeat;
  background-position: 0 0;
}
/* Allow selection inside any future input/textarea/comments inside the reader if needed */
.reader-content input,
.reader-content textarea,
.reader-content [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
body.light .reader-content { color: #1f2937; }
.reader-content p { margin: 0 0 1.2em; }
.reader-content h1, .reader-content h2, .reader-content h3 {
  margin: 1.6em 0 0.6em;
  font-family: var(--font);
  letter-spacing: -0.01em;
}
.reader-content blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1.1em;
  border-left: 3px solid #7c3aed;
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text2);
}
.reader-content em { font-style: italic; }
.reader-content strong { font-weight: 700; color: var(--text); }

.reader-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  max-width: 720px;
  margin: 0 auto;
}
.reader-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.reader-nav-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}
.reader-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.reader-progress { font-size: 0.82rem; color: var(--text2); font-variant-numeric: tabular-nums; }

/* ── AUTHOR DASHBOARD ── */
.author-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) {
  .author-stats { grid-template-columns: repeat(2, 1fr); }
}
.author-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 16px;
  transition: border-color 0.18s, background 0.18s;
}
body.light .author-stat { background: #ffffff; border-color: #e5e7eb; }
.author-stat:hover { border-color: rgba(139, 92, 246, 0.35); }
.author-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.author-stat-text { display: flex; flex-direction: column; }
.author-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.author-stat-label {
  font-size: 0.78rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.author-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.author-section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* My books table */
.author-books-table {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 16px;
  overflow: hidden;
}
body.light .author-books-table { background: #ffffff; border-color: #e5e7eb; }
.author-book-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px 90px 90px 100px;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
body.light .author-book-row { border-bottom-color: #e5e7eb; }
.author-book-row:last-child { border-bottom: none; }
.author-book-row:hover { background: rgba(139, 92, 246, 0.06); }
.author-book-row-cover {
  width: 50px;
  /* 2:3 print-book ratio (was 3:4). */
  aspect-ratio: 2/3;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1428, #0f0a1c);
}
.author-book-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-book-row-cover .book-cover-placeholder { width:100%; height:100%; font-size:1.2rem; }
.author-book-row-text { min-width: 0; }
.author-book-row-title { font-size: 0.93rem; font-weight: 600; color: var(--text); margin: 0 0 0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-book-row-genre { font-size: 0.74rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; }
.author-book-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.author-book-status-draft     { background: rgba(156, 163, 175, 0.15); color: #c4b5fd; border: 1px solid rgba(156,163,175,0.3); }
.author-book-status-ongoing   { background: rgba(34, 197, 94, 0.10); color: #6ee7b7; border: 1px solid rgba(34,197,94,0.3); }
.author-book-status-completed { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.35); }
.author-book-status-paused    { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border: 1px solid rgba(251,191,36,0.35); }
.author-book-row-stat {
  font-size: 0.85rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.author-book-row-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.author-book-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text2);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.author-book-action-btn:hover { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.4); color: #c4b5fd; }
.author-book-action-btn-danger:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }

/* ── BOOK EDITOR (metadata + chapter list) ── */
.book-editor-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 700px) {
  .book-editor-grid { grid-template-columns: 1fr; }
  .book-editor-cover-wrap { max-width: 200px; }
}
.book-editor-cover {
  /* 2:3 print-book ratio (was 3:4). */
  aspect-ratio: 2/3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1428, #0f0a1c);
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.book-editor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-editor-status {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text2);
}
.book-editor-form { display: flex; flex-direction: column; }
.book-editor-actions {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.book-editor-publish-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.book-editor-publish-toggle input { display: none; }
.toggle-slider {
  width: 38px; height: 22px;
  background: rgba(156, 163, 175, 0.3);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.book-editor-publish-toggle input:checked + .toggle-slider {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.book-editor-publish-toggle input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
.toggle-label { font-size: 0.85rem; color: var(--text); font-weight: 500; }

.book-editor-chapters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
/* Inline TOC pane in the author book editor.
   Mirrors the mobile book-editor inner ScrollView: shows ~10 rows at
   most, then scrolls vertically while the rest of the page stays put.
   Each row is roughly 60px tall (padding + content + gap), so 600px
   ≈ 10 rows. Books with fewer chapters never trigger the inner scroll
   because the natural height stays under the cap. */
#bookEditorChapters {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 0.25rem; /* leaves room for the scrollbar without clipping rows */
}

/* Subtle scrollbar styling so the inner scroll doesn't visually
   compete with the page-level scroll. */
#bookEditorChapters::-webkit-scrollbar { width: 6px; }
#bookEditorChapters::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.35);
  border-radius: 3px;
}
#bookEditorChapters::-webkit-scrollbar-track { background: transparent; }

.author-chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

/* Lock glyph rendered before the chapter title when the chapter is
   behind the book's paywall. Brand-purple to match the rest of the
   monetization affordances (Lock toggle, picker, banner). */
.author-chapter-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.45rem;
  color: #a78bfa;
  vertical-align: -0.12em;
}
body.light .author-chapter-lock { color: #7c3aed; }
body.light .author-chapter-row { background: #ffffff; border-color: #e5e7eb; }
.author-chapter-row:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.35);
}
.author-chapter-num { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #a78bfa; min-width: 70px; }
.author-chapter-title { flex: 1; font-size: 0.92rem; font-weight: 500; color: var(--text); margin: 0 1rem; }
.author-chapter-meta { font-size: 0.78rem; color: var(--text2); margin-right: 0.75rem; }
.author-chapter-pub-pill {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  margin-right: 0.6rem;
}
.author-chapter-pub-published { background: rgba(34, 197, 94, 0.12); color: #6ee7b7; border: 1px solid rgba(34,197,94,0.3); }
.author-chapter-pub-draft     { background: rgba(156, 163, 175, 0.12); color: var(--text2); border: 1px solid rgba(156,163,175,0.3); }
.author-chapter-pub-scheduled { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.30); white-space: nowrap; }
.author-chapter-actions { display: flex; gap: 0.3rem; }

/* Published / Drafts tab bar in the author book editor — parallel to
   the mobile BookChaptersModal tabs so authors get the same triage
   surface across platforms. Active tab has a purple underline + bolder
   label, counts use a pill that flips inverted (purple bg / white text)
   when active. */
.author-chapter-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.6rem 0 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.light .author-chapter-tabs { border-bottom-color: rgba(0, 0, 0, 0.08); }

.author-chapter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text2);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.author-chapter-tab:hover { color: var(--text); }
.author-chapter-tab.is-active {
  color: #a78bfa;
  font-weight: 700;
  border-bottom-color: #a78bfa;
}

.author-chapter-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.25rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .author-chapter-tab-count {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}
.author-chapter-tab.is-active .author-chapter-tab-count {
  background: #8b5cf6;
  color: #ffffff;
  border-color: transparent;
}

/* ── CHAPTER EDITOR (Quill) ── */
.chapter-editor-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 8, 30, 0.6);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  margin-bottom: 1rem;
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(8px);
}
body.light .chapter-editor-bar { background: rgba(255, 255, 255, 0.85); border-color: #e5e7eb; }
.chapter-editor-bar-spacer { flex: 1; }

/* ─── Premium boxed title input ─── */
.chapter-title-box {
  margin: 0 0 0.7rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, rgba(124, 58, 237, 0.02) 100%),
    #ffffff;
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.chapter-title-box:focus-within {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
body:not(.light) .chapter-title-box {
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.10) 0%, rgba(124, 58, 237, 0.04) 100%),
    rgba(26, 20, 40, 0.5);
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body:not(.light) .chapter-title-box:focus-within {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.chapter-title-input-boxed {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  outline: none;
}
.chapter-title-input-boxed::placeholder {
  color: var(--text3);
  font-weight: 700;
  opacity: 0.55;
}
body.light .chapter-title-input-boxed { color: #0f172a; }
body.light .chapter-title-input-boxed::placeholder { color: #9ca3af; }

@media (max-width: 700px) {
  .chapter-title-input-boxed { font-size: 1.25rem; }
  .chapter-title-box { padding: 0.7rem 0.9rem; }
}

/* ─── Meta strip: save status + word count below title ─── */
.chapter-meta-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.2rem 0 0.85rem;
  padding: 0 0.15rem;
  font-size: 0.78rem;
  color: var(--text2);
}
.chapter-meta-strip .chapter-save-status,
.chapter-meta-strip .chapter-word-count {
  display: inline-flex;
  align-items: center;
}
.chapter-save-status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.chapter-save-status.saving { color: #fcd34d; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
.chapter-save-status.saved  { color: #6ee7b7; border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.chapter-save-status.error  { color: #fca5a5; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.chapter-word-count { color: var(--text2); }
.chapter-editor-actions {
  display: flex; align-items: center; gap: 0.85rem;
  flex-shrink: 0;
}

/* ─── Chapter cover (Wattpad-style hero above title) ─── */
/* The chapter-cover ITSELF is the dropzone when empty. No nested borders. */
.chapter-cover {
  position: relative;
  margin: 0.85rem 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  border: 2px dashed rgba(124, 58, 237, 0.22);
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.05), rgba(124, 58, 237, 0.02)),
    #ffffff;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.chapter-cover:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04)),
    #ffffff;
}
/* When an image is present, swap to a solid border (cover-img makes it has-image) */
.chapter-cover:has(.chapter-cover-img:not([style*="display:none"])),
.chapter-cover.has-image {
  border-style: solid;
  border-color: rgba(124, 58, 237, 0.16);
  background: #000;
}
body:not(.light) .chapter-cover {
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04)),
    rgba(26, 20, 40, 0.5);
  border-color: rgba(167, 139, 250, 0.25);
}
body:not(.light) .chapter-cover:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.12), rgba(124, 58, 237, 0.06)),
    rgba(26, 20, 40, 0.6);
}

.chapter-cover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 150px;
  padding: 1.5rem 1.25rem;
  background: transparent;
  border: none;
  margin: 0;
  color: #6b7280;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s;
}
.chapter-cover:hover .chapter-cover-empty { color: #5b21b6; }
.chapter-cover-empty svg { color: rgba(124, 58, 237, 0.6); }
.chapter-cover-empty small {
  font-size: 0.74rem;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: -0.005em;
  text-align: center;
}
body:not(.light) .chapter-cover-empty { color: #9ca3af; }
body:not(.light) .chapter-cover:hover .chapter-cover-empty { color: #ddd6fe; }
body:not(.light) .chapter-cover-empty small { color: #6b7280; }

.chapter-cover-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.chapter-cover-actions {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  display: none;
  gap: 0.4rem;
  z-index: 2;
}
.chapter-cover-actions button {
  padding: 0.4rem 0.85rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chapter-cover-actions button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}
.chapter-cover-actions button:last-child:hover {
  background: rgba(220, 38, 38, 0.85);
  border-color: rgba(220, 38, 38, 0.95);
}

/* ─── Inline images inside chapter content ───
   Bounded by BOTH width AND height (May 2026 fix). Without a height
   cap, portrait or extra-tall images dominated the viewport — a single
   image pushing 2-3 screens of body text below the fold. Cap at 80vh
   in the reader and 60vh inside the Quill editor so writers see a
   roughly representative layout while composing. `width: auto` +
   `object-fit: contain` letterboxes tall images inside the box
   instead of cropping (the editor's saved inline style does the same;
   see lib/book-editor-helpers.js → INLINE_IMAGE_BASE_STYLE). */
#chapterEditorQuill .ql-editor img,
.chapter-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  margin: 1rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(15, 10, 28, 0.10);
  cursor: zoom-in;
  object-fit: contain;
}
#chapterEditorQuill .ql-editor img {
  max-height: 60vh; /* editor surface is shorter — give body text room */
}
body:not(.light) #chapterEditorQuill .ql-editor img,
body:not(.light) .chapter-content img {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Quill theme overrides */
#chapterEditorQuill {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  overflow: hidden;
  min-height: 60vh;
}
body.light #chapterEditorQuill { background: #ffffff; border-color: #e5e7eb; }
.ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  background: rgba(15, 8, 30, 0.4);
  padding: 0.7rem 0.85rem !important;
  position: sticky;
  top: calc(var(--header-h) + 80px);
  z-index: 40;
  backdrop-filter: blur(8px);
}
body.light .ql-toolbar.ql-snow { background: #faf8ff; border-bottom-color: #e5e7eb !important; }
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--text2) !important; }
.ql-toolbar.ql-snow .ql-fill { fill: var(--text2) !important; }
.ql-toolbar.ql-snow .ql-picker-label { color: var(--text2) !important; }
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: #a78bfa !important; }
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill { fill: #a78bfa !important; }
.ql-container.ql-snow { border: none !important; font-family: 'Georgia', 'Iowan Old Style', 'Palatino', serif !important; font-size: 1.02rem; }
.ql-editor {
  padding: 1.5rem 1.5rem 3rem !important;
  color: var(--text);
  line-height: 1.75;
  min-height: 50vh;
}
body.light .ql-editor { color: #1f2937; }
.ql-editor.ql-blank::before { color: var(--text3) !important; font-style: normal !important; }
.ql-editor h1, .ql-editor h2, .ql-editor h3 { font-family: var(--font); }
.ql-editor blockquote {
  border-left: 3px solid #7c3aed !important;
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0 8px 8px 0;
  padding: 0.4em 1em !important;
  margin: 1em 0 !important;
  color: var(--text2);
}

/* ── MAIN LAYOUT ── */
.main-wrap {
  margin-top: var(--header-h); margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-h));
  padding: 0.4rem 1.5rem 1.5rem;
  max-width: 900px; margin-left: calc(var(--sidebar-w) + max(1.5rem, (100vw - var(--sidebar-w) - 900px) / 2));
  margin-right: auto;
}

/* Videos page uses wider layout */
#videosPage, #videoPlayerPage {
  margin: 0 -1rem;
}
@media (max-width: 800px) {
  #videosPage, #videoPlayerPage { margin: 0; }
}

/* ── STORIES ROW (user avatars) ── */
.stories-row {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0.75rem; margin-bottom: 0.4rem;
  display: flex; gap: 0.75rem; overflow-x: auto; position: relative;
}
.stories-row::-webkit-scrollbar { height: 4px; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; cursor: pointer; flex-shrink: 0; }
.story-avatar {
  width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; transition: all 0.15s;
  background: var(--purple); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 1.2rem;
}
.story-item:hover .story-avatar { border-color: var(--pink); transform: scale(1.03); }
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-name { font-size: 0.72rem; color: var(--text2); max-width: 80px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stories-scroll-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 5; transition: all 0.15s;
}
.stories-scroll-btn:hover { background: var(--purple); }
.stories-scroll-btn svg { width: 16px; height: 16px; }

/* ── COMPOSE BOX ── */
.compose {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0.9rem 1rem; margin-bottom: 0.4rem;
}
.compose-footer { margin-top: 0.5rem; }
.compose-top { display: flex; gap: 0.75rem; align-items: flex-start; }
.compose-text-wrap { flex: 1; position: relative; }
.compose textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.7rem 3.5rem 0.7rem 0.9rem;
  color: var(--text); font-family: var(--font); font-size: 0.9rem;
  resize: none; min-height: 48px; line-height: 1.5; transition: border-color 0.15s;
  display: block;
}
.compose-text-wrap .char-count {
  position: absolute; bottom: 8px; right: 12px;
  font-size: 0.7rem; color: var(--text3);
  pointer-events: none; background: var(--bg3); padding: 0 4px;
}
.compose textarea:focus { outline: none; border-color: var(--purple); }
.compose textarea::placeholder { color: var(--text3); }
.compose-footer { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.5rem; }
.compose-footer .spacer { flex: 1; }
.char-count { font-size: 0.75rem; color: var(--text3); }
.char-count.warn { color: #f59e0b; } .char-count.over { color: var(--red); }

/* ── BUTTONS ── */
.btn {
  padding: 0.7rem 1.5rem; border-radius: 99px; font-size: 0.85rem; font-weight: 600;
  border: none; transition: all 0.15s; display: inline-flex; align-items: center;
  justify-content: center; gap: 0.5rem;
}
.btn-purple { background: var(--purple-grad); color: #fff; box-shadow: 0 4px 16px rgba(124,58,237,0.3); }
.btn-purple:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.5); }
.btn-purple:active { transform: scale(0.97); }
.btn-ghost { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); }
.btn-ghost:hover { background: var(--bg4); border-color: var(--purple); }
.btn-google { background: #fff; color: #1a1a1a; font-weight: 600; }
.btn-google:hover { background: #f0f0f0; }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; }

/* ── AVATAR ── */
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--purple); color: #fff; font-weight: 600; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: 0.65rem; }
.avatar.xs { width: 26px; height: 26px; font-size: 0.6rem; }

/* ── POST CARD ── */
.post-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; margin-bottom: 0.4rem; animation: fadeUp 0.3s ease both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.post-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.65rem; }
.post-author { font-size: 0.95rem; font-weight: 600; }
.post-time { font-size: 0.75rem; color: var(--text3); margin-top: 2px; }
.post-guest { font-size: 0.67rem; background: var(--bg3); color: var(--text3); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); margin-left: 0.4rem; }
.post-body { font-size: 0.925rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-bottom: 0.75rem; }
.post-body a { color: var(--purple-lt); text-decoration: underline; word-break: break-all; }
.post-image { border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; cursor: pointer; border: 1px solid var(--border); }
.post-image img { width: 100%; max-height: 500px; object-fit: cover; display: block; transition: transform 0.2s; }
.post-image:hover img { transform: scale(1.01); }

/* ── REPOSTED ── */
.reposted-banner { display: flex; align-items: center; gap: 6px; color: var(--text3); font-size: 0.75rem; margin-bottom: 0.75rem; }
.reposted-banner svg { width: 12px; height: 12px; }
.reposted-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; }
.reposted-card .post-header { margin-bottom: 0.5rem; }
.reposted-card .avatar { width: 34px; height: 34px; font-size: 0.7rem; }
.reposted-card .post-body { font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ── REACTION COUNTS (above action bar) ── */
.post-stats { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0 0.5rem; font-size: 0.8rem; color: var(--text3); min-height: 20px; }
.post-stats:empty { display: none; }
.post-stats .rcount { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; transition: background 0.15s ease; }
.post-stats .rcount:not(:empty) { cursor: pointer; }
.post-stats .rcount:not(:empty):hover { background: rgba(124, 58, 237, 0.06); color: var(--text2); }
.post-stats .ccount { padding: 2px 6px; border-radius: 6px; transition: background 0.15s ease; }
.post-stats .ccount:not(:empty) { cursor: pointer; }
.post-stats .ccount:not(:empty):hover { background: rgba(124, 58, 237, 0.06); color: var(--text2); text-decoration: underline; }
/* Stacked SVG reactions in the post-stats summary. Width/height are
   baked into the <img> tags themselves (15px). Inline-flex keeps the
   icons + count on one baseline; vertical-align middle aligns with the
   accompanying count text. */
.post-stats .rcount-emojis { display: inline-flex; align-items: center; margin-right: 4px; vertical-align: middle; }
.post-stats .rcount-svg { display: block; border-radius: 50%; }
body:not(.light) .post-stats .rcount:not(:empty):hover { background: rgba(167, 139, 250, 0.10); }
body:not(.light) .post-stats .ccount:not(:empty):hover { background: rgba(167, 139, 250, 0.10); }

/* Reactor list modal tabs */
.reactor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 0 0.5rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
  margin-bottom: 0.4rem;
}
.reactor-tab {
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  color: var(--text2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.reactor-tab:hover { background: rgba(124, 58, 237, 0.06); color: #6d28d9; }
.reactor-tab.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.30);
}
.reactor-emoji {
  flex-shrink: 0;
  font-size: 1.15rem;
  margin-right: 0.4rem;
}
body:not(.light) .reactor-tabs { border-bottom-color: rgba(167, 139, 250, 0.10); }
body:not(.light) .reactor-tab { border-color: rgba(167, 139, 250, 0.20); color: #9ca3af; }
body:not(.light) .reactor-tab:hover { background: rgba(167, 139, 250, 0.10); color: #c4b5fd; }

/* ════════════════════════════════════════════════════════════════════════
   REACTIONS MODAL — compact FB/Discord-style overrides (2026-05-17)
   Scoped to .reactor-list-modal so the shared follow-list styles aren't
   affected. Goals: smaller width, denser rows, real emoji icons on tabs
   + rows, cleaner Close footer.
   ════════════════════════════════════════════════════════════════════════ */
.reactor-list-modal {
  max-width: 380px;
  max-height: 75vh;
}
.reactor-list-modal .follow-list-header { padding-bottom: 0.25rem; }
.reactor-list-modal .follow-list-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.reactor-list-modal .reactor-tabs {
  gap: 0.3rem;
  padding: 0.45rem 0 0.4rem;
  margin-bottom: 0.3rem;
}
.reactor-list-modal .reactor-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 24px;
}
.reactor-list-modal .reactor-tab .reactor-tab-glyph {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.reactor-list-modal .reactor-tab .reactor-tab-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.reactor-list-modal .reactor-tab.active {
  /* Solid brand purple — flat, not gradient (matches the rest of the
     2026-05-17 polish). */
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: none;
}

/* Body — tighter scrollbar, smaller padding */
.reactor-list-modal .follow-list-body {
  padding: 0;
  margin-bottom: 0.4rem;
}
.reactor-list-modal .follow-list-body::-webkit-scrollbar { width: 4px; }

/* Rows — Discord/FB density: 32px avatar, 0.35rem row padding */
.reactor-list-modal .follow-list-row {
  gap: 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
}
.reactor-list-modal .follow-list-row:hover {
  background: rgba(139, 92, 246, 0.06);
}
.reactor-list-modal .follow-list-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.reactor-list-modal .follow-list-name {
  font-size: 0.86rem;
  font-weight: 600;
}
.reactor-list-modal .reactor-emoji {
  font-size: 1.05rem;
  margin-right: 0.1rem;
  line-height: 1;
}

/* Footer — tighter Close button, no isolated wide bar */
.reactor-list-modal .modal-actions {
  padding-top: 0.35rem;
  display: flex;
  justify-content: flex-end;
}
.reactor-list-modal .modal-actions .btn-ghost {
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  border-radius: 999px;
}

body:not(.light) .reactor-list-modal .follow-list-row:hover {
  background: rgba(167, 139, 250, 0.08);
}

/* ── ACTION BAR (premium flat) ── */
.post-actions {
  display: flex; gap: 0.35rem; align-items: center;
  padding-top: 0.55rem; border-top: 1px solid var(--border);
  position: relative;
}
.post-actions .reaction-wrap { display: inline-flex; }
.post-actions > *:first-child { margin-right: auto; }
.action-btn {
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.12s ease;
}
.action-btn:hover {
  background: rgba(139, 92, 246, 0.10);
  color: var(--text);
}
.action-btn:active { transform: scale(0.97); }
.action-btn.reacted {
  color: #f472b6;
  background: rgba(236, 72, 153, 0.10);
  font-weight: 600;
}
body.light .action-btn:hover  { background: rgba(124, 58, 237, 0.08); }
body.light .action-btn.reacted { color: #db2777; background: rgba(219, 39, 119, 0.08); }

/* Universal reaction icon container — fixed size so emoji ↔ svg swap never resizes the row */
.r-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.r-icon > * { line-height: 1; }
.r-icon > svg { width: 100%; height: 100%; }
/* Sizing per context */
.action-btn .r-icon          { width: 20px; height: 20px; font-size: 18px; }
.comment-action-btn .r-icon  { width: 16px; height: 16px; font-size: 14px; }
.action-btn svg              { width: 18px; height: 18px; }

/* ── REACTION PICKER (premium flat) ── */
.reaction-wrap { position: relative; }
.reaction-picker {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.95);
  display: flex; gap: 4px;
  background: var(--bg2);
  border: 1px solid rgba(139, 92, 246, 0.20);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(167, 139, 250, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50; white-space: nowrap;
}
body.light .reaction-picker {
  background: #ffffff;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.16);
}
.reaction-picker.visible { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0) scale(1); }
.reaction-option {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 10px; padding: 5px 7px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.reaction-option:hover  { transform: scale(1.4) translateY(-3px); }
.reaction-option.active { background: rgba(167, 139, 250, 0.14); }
/* Picker reaction icons — now custom FB-style SVG badges sized by the
   <img width/height> attrs (26px). The old font-size rule was for the
   emoji-glyph era; keep `.r-emoji` as the class hook for the reaction
   picker buttons (matches data-key dispatch on the parent button). */
.r-emoji { display: block; border-radius: 50%; }
img.r-emoji { width: 26px; height: 26px; }
.r-label { font-size: 9px; color: var(--text3); letter-spacing: 0.02em; }
/* Reacted-state action button icon — same SVG family, smaller (18px).
   Vertical-align middle so the SVG sits on the text baseline of the
   adjacent label ("Love" / "Haha" / etc.) without dropping below it. */
.r-icon img.r-emoji-svg { display: inline-block; vertical-align: middle; border-radius: 50%; }

/* ── SHARE MENU ── */
.share-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 0.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 50;
  min-width: 200px; display: none;
}
.share-menu.visible { display: block; }
.share-option {
  display: flex; align-items: center; gap: 10px; padding: 0.55rem 0.85rem;
  border-radius: 6px; color: var(--text); font-size: 0.85rem; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; transition: background 0.15s;
}
.share-option:hover { background: var(--bg3); }

/* ── COMMENTS ── */
.comments-section { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }

/* Facebook-style "View N previous comments" / "View N replies" toggles.
   Plain transparent button styled as a quiet secondary link — meant to
   recede so the actual comment content carries the visual weight.
   Bold so the count reads as the primary signal (mirrors FB's chevron-
   prefixed "View previous comments" affordance). */
.comment-view-more,
.comment-view-replies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--text2, #555);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms;
}
.comment-view-more::before,
.comment-view-replies::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.comment-view-more:hover,
.comment-view-replies:hover {
  background: var(--surface-muted, rgba(124,58,237,0.06));
  color: var(--text, #111);
}
.comment-view-more:disabled,
.comment-view-replies:disabled { opacity: 0.5; cursor: default; }
/* Replies sit indented under their parent — make the toggle align with
   the same rail so the visual hierarchy reads as "this belongs to that". */
.replies .comment-view-replies { margin-left: 0; }
.comment-item { display: flex; gap: 0.6rem; margin-bottom: 0.85rem; position: relative; }
.comment-body { flex: 1; min-width: 0; }
/* Ensure the reaction picker isn't clipped by parent comment containers.
   Without this, the picker can appear below the visible viewport when a
   comment has many siblings. */
.comment-item .reaction-picker { z-index: 100; }
.comment-item .reaction-wrap { position: relative; z-index: 1; }
.comment-bubble { background: var(--bg3); border-radius: 4px 16px 16px 16px; padding: 0.65rem 0.85rem; font-size: 0.87rem; line-height: 1.6; color: var(--text); word-break: break-word; }
.comment-bubble a { color: var(--purple-lt); text-decoration: underline; }
.comment-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 3px; }
.comment-author { font-size: 0.78rem; font-weight: 600; color: var(--purple-lt); }
.comment-time { font-size: 0.68rem; color: var(--text3); }
.comment-actions { display: flex; align-items: center; gap: 0.15rem; margin-top: 6px; }
.comment-action-btn {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text2);
  background: transparent;
  border: none;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.12s ease;
  /* Fixed line-height so emoji swap can't push the row taller */
  line-height: 1.4;
}
.comment-action-btn:hover {
  background: rgba(139, 92, 246, 0.10);
  color: var(--text);
}
.comment-action-btn:active { transform: scale(0.96); }
.comment-action-btn.reaction-trigger.reacted {
  color: #f472b6;
  background: rgba(236, 72, 153, 0.10);
  font-weight: 600;
}
body.light .comment-action-btn:hover { background: rgba(124, 58, 237, 0.08); }
body.light .comment-action-btn.reaction-trigger.reacted { color: #db2777; background: rgba(219, 39, 119, 0.08); }
.replies { margin-left: 2.75rem; margin-top: 0.5rem; }
.reply-item { display: flex; gap: 0.5rem; margin-bottom: 0.65rem; }
.comment-image { margin-top: 0.4rem; border-radius: 10px; overflow: hidden; max-width: 240px; cursor: pointer; border: 1px solid var(--border); }
.comment-image img { width: 100%; max-height: 200px; object-fit: cover; display: block; }

.comment-input-wrap { display: flex; gap: 0.5rem; margin-top: 0.75rem; align-items: flex-start; }
.comment-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.6rem 0.9rem;
  color: var(--text); font-family: var(--font); font-size: 0.85rem;
  resize: none; min-height: 38px; max-height: 120px; line-height: 1.5;
}
.comment-input:focus { outline: none; border-color: var(--purple); }
.comment-input::placeholder { color: var(--text3); }
.btn-send {
  background: var(--purple); border: none; color: #fff; border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s; white-space: nowrap;
}
.btn-send:hover { background: var(--purple-lt); }

/* ── IMAGE UPLOAD ── */
.image-upload-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  padding: 6px 10px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500;
  transition: all 0.15s;
}
.image-upload-btn:hover { background: var(--bg3); color: var(--purple-lt); }
.image-upload-btn svg { width: 16px; height: 16px; }
.image-upload-btn input { display: none; }

.image-preview { position: relative; margin-top: 0.75rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); max-width: 100%; }
.image-preview img { width: 100%; max-height: 400px; object-fit: cover; display: block; }
.image-preview-remove {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.75); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}

/* ── AUTH SCREEN ── */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;
  background: radial-gradient(ellipse at top, rgba(124,58,237,0.2) 0%, transparent 60%), var(--bg); }
.auth-card {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-lg);
  padding: 3rem 2.5rem; max-width: 440px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.auth-logo { font-weight: 800; font-size: 2.2rem; color: #fff; margin-bottom: 0.5rem; background: var(--purple-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.auth-tagline { color: var(--text2); font-size: 0.9rem; margin-bottom: 2.5rem; font-weight: 300; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; color: var(--text3); font-size: 0.75rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border2); }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 1500; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; animation: fadeIn 0.2s; }
.modal-box { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; animation: slideUp 0.2s ease; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-title { font-size: 1.2rem; font-weight: 700; }
.modal-close-btn { background: var(--bg3); border: none; color: var(--text2); width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background: var(--bg4); color: var(--text); }
.repost-caption { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; color: var(--text); font-family: var(--font); font-size: 0.9rem; resize: none; min-height: 80px; line-height: 1.6; margin-bottom: 1rem; }
.repost-caption:focus { outline: none; border-color: var(--purple); }
.repost-preview { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; max-height: 300px; overflow-y: auto; }
.repost-preview .avatar { width: 32px; height: 32px; }
.repost-preview img { max-height: 180px; border-radius: 8px; width: 100%; object-fit: cover; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── PREMIUM CONFIRM MODAL ── */
.confirm-modal-overlay { position: fixed; inset: 0; background: rgba(8, 4, 20, 0.78); backdrop-filter: blur(6px); z-index: 2200; align-items: center; justify-content: center; padding: 1rem; }
.confirm-modal-overlay.open { display: flex; animation: fadeIn 0.18s ease; }
.confirm-modal {
  position: relative;
  background: linear-gradient(180deg, var(--bg2) 0%, #0f0a1c 100%);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: confirmPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.confirm-modal::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.6), rgba(124, 58, 237, 0.05) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes confirmPop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.confirm-icon-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(124, 58, 237, 0.22));
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.confirm-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.confirm-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text2);
  margin: 0 0 1.4rem;
}
.confirm-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.confirm-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 12px;
  padding: 0.78rem 1.1rem;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  user-select: none;
}
.confirm-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border2);
  color: var(--text);
}
.confirm-btn-cancel:hover { background: rgba(139, 92, 246, 0.10); border-color: var(--purple); color: var(--text); }
.confirm-btn-cancel:active { transform: scale(0.98); }
.confirm-btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.confirm-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(220, 38, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.confirm-btn-danger:active { transform: scale(0.98); }
.confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── LIGHTBOX ── */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 2rem; cursor: pointer; }
.lightbox.open { display: flex; animation: fadeIn 0.2s; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 0.85rem 1.25rem; font-size: 0.85rem; color: var(--text); box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 2500; animation: slideIn 0.2s ease; }
.toast.success { border-color: var(--success); color: #6ee7b7; }
.toast.error { border-color: var(--red); color: #fca5a5; }
@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.loading { text-align: center; padding: 3rem; color: var(--text3); font-size: 0.9rem; }
.empty { text-align: center; padding: 4rem 2rem; color: var(--text3); }
.empty h3 { font-size: 1.3rem; color: var(--text2); margin-bottom: 0.5rem; font-weight: 600; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-wrap { margin-left: 0; padding: 1rem; }
  .topbar-logo { min-width: auto; }
  .topbar-logo img { height: 36px; }
  .topbar-search { max-width: none; }
  .stories-row { padding: 0.75rem; gap: 0.75rem; }
  .story-avatar { width: 60px; height: 60px; font-size: 1.2rem; }
  .post-actions { grid-template-columns: repeat(4, 1fr); font-size: 0.7rem; }
  .action-btn span { display: none; }
}

/* ── PROFILE PAGE ── */
.profile-banner {
  height: 220px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #ec4899 100%);
  margin-bottom: -50px; position: relative; overflow: hidden;
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-banner-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(167, 139, 250, 0.35);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.profile-banner-edit:hover {
  background: rgba(124, 58, 237, 0.55);
  border-color: rgba(167, 139, 250, 0.6);
  transform: translateY(-1px);
}
.profile-banner-edit:active { transform: scale(0.98); }
.profile-banner-edit svg { width: 14px; height: 14px; }

.profile-head {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1rem;
  display: flex; gap: 1.25rem; align-items: flex-start;
  position: relative;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; margin-top: -60px; }
.profile-avatar {
  width: 130px; height: 130px; border-radius: var(--radius);
  border: 4px solid var(--purple); background: var(--purple-dk);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 3rem; overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-edit {
  position: absolute; bottom: 4px; right: 4px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--purple); color: #fff; border: 2px solid var(--bg2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.profile-avatar-edit svg { width: 14px; height: 14px; }

.profile-info { flex: 1; min-width: 0; }
.profile-name-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.profile-name { font-size: 1.6rem; font-weight: 700; }
/* @username subline under the display name. Hides itself when empty so
   users without a display_name (where the @handle IS the header) don't
   get an awkward blank row. */
.profile-handle { font-size: 0.95rem; color: var(--text2); margin-top: -0.25rem; margin-bottom: 0.5rem; }
.profile-handle:empty { display: none; }
/* @-prefix input row for the Username field in the edit-profile modal */
.edit-handle-row { display: flex; align-items: stretch; gap: 0; }
.edit-handle-row .edit-handle-prefix {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.65rem; border: 1px solid var(--border, #e5e5e5); border-right: none;
  border-radius: 10px 0 0 10px; background: var(--bg2, #fafafa);
  color: var(--text2, #888); font-weight: 600; font-size: 0.95rem;
}
.edit-handle-row .edit-handle-input { border-radius: 0 10px 10px 0; flex: 1; min-width: 0; }
.profile-badge { font-size: 0.72rem; background: var(--bg3); color: var(--text2); padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); }
.profile-badge.guest { background: rgba(251,191,36,0.1); color: var(--accent); border-color: rgba(251,191,36,0.3); }

.profile-stats { display: flex; gap: 1.25rem; margin-bottom: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; }
.profile-stat { background: none; border: none; color: var(--text2); cursor: pointer; padding: 0; font-size: 0.85rem; font-family: var(--font); transition: color 0.15s; }
.profile-stat:hover { color: var(--purple-lt); }
.profile-stat strong { color: var(--text); font-weight: 700; margin-right: 3px; }
.profile-joined { color: var(--text3); font-size: 0.82rem; }

.profile-bio { font-size: 0.9rem; color: var(--text2); line-height: 1.55; margin-bottom: 0.85rem; white-space: pre-wrap; }
.profile-bio:empty { display: none; }

.profile-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* Profile tabs */
/* ── PREMIUM PROFILE TABS ── */
.profile-tabs {
  display: flex;
  gap: 0.15rem;
  margin: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  position: relative;
  background: none;
  border: none;
  padding: 0.85rem 1.15rem;
  margin-bottom: -1px;
  color: var(--text2);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.profile-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.profile-tab:hover {
  color: var(--text);
  background: rgba(139, 92, 246, 0.06);
  border-radius: 10px 10px 0 0;
}
.profile-tab:active { transform: scale(0.98); }
.profile-tab.active {
  color: #c4b5fd;
  font-weight: 600;
}
.profile-tab.active::before {
  /* Glowing underline accent */
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a78bfa 30%, #7c3aed 50%, #a78bfa 70%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
}
body.light .profile-tab:hover { background: rgba(124, 58, 237, 0.06); }
body.light .profile-tab.active { color: #7c3aed; }
body.light .profile-tab.active::before {
  background: linear-gradient(90deg, transparent, #7c3aed 30%, #4c1d95 50%, #7c3aed 70%, transparent);
}

.profile-tab-content { animation: profileTabFade 0.25s ease both; }
@keyframes profileTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reuse video-grid + book-grid for the profile tabs */
.profile-video-grid,
.profile-book-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.profile-video-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.profile-book-grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Inline empty state for profile tabs */
.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(139, 92, 246, 0.03);
  border: 1px dashed rgba(139, 92, 246, 0.20);
  border-radius: 18px;
  margin-top: 0.5rem;
}
body.light .profile-empty { background: #faf8ff; border-color: rgba(124, 58, 237, 0.18); }
.profile-empty-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(167, 139, 250, 0.06));
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  margin-bottom: 1rem;
}
body.light .profile-empty-icon { color: #7c3aed; }
.profile-empty h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.profile-empty p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text2);
  max-width: 360px;
  line-height: 1.55;
}

/* About cards */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 600px) { .about-grid { grid-template-columns: 1fr; } }
.about-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.about-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); }
.about-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; gap: 1rem; }
.about-row:last-child { border-bottom: none; }
.about-label { color: var(--text3); font-weight: 500; flex-shrink: 0; }
.about-value { color: var(--text); text-align: right; word-break: break-word; }
.about-value a { color: var(--purple-lt); }
.about-pill { font-size: 0.72rem; padding: 3px 10px; border-radius: 99px; font-weight: 500; }
.about-pill.success { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }

/* Profile form */
.form-label { display: block; font-size: 0.8rem; color: var(--text2); margin: 0.75rem 0 0.4rem; font-weight: 500; }
.form-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
  color: var(--text); font-family: var(--font); font-size: 0.9rem;
  outline: none; transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--purple); }

/* Light mode tweaks */
body.light .profile-banner { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #f472b6 100%); }
body.light .profile-badge.guest { background: rgba(245,158,11,0.1); color: #d97706; }

/* ── Image cropper ── */
.crop-container { max-height: 500px; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.crop-container img { display: block; max-width: 100%; }

/* ── VIDEO GRID (Premium) ── */
.videos-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.videos-title {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--purple-lt), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.video-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 0.75rem;
}
@media (max-width: 1100px) { .video-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0.75rem; } }
@media (max-width: 700px)  { .video-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.video-card {
  background: transparent; border: none;
  cursor: pointer;
  transition: transform 0.2s;
  animation: fadeUp 0.3s ease both;
}
.video-card:hover { transform: translateY(-2px); }
.video-card:hover .video-thumb {
  box-shadow: 0 12px 30px rgba(124,58,237,0.35);
  outline: 2px solid var(--purple);
}

.video-thumb {
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--purple-dk), var(--purple));
  overflow: hidden; border-radius: 14px;
  transition: all 0.2s; outline: 2px solid transparent;
}
.video-thumb video.preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.3s;
  z-index: 1;
}
.video-thumb video.preview.playing { opacity: 1; }
.video-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: #000;
}
.video-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Gradient overlay at bottom for premium look */
.video-thumb::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.video-card:hover .video-thumb::after { opacity: 1; }

.video-thumb-play { display: none; }

.video-card-info {
  padding: 0.75rem 0.25rem 0; display: flex; gap: 0.65rem; align-items: flex-start;
}
.video-card-info .avatar {
  width: 36px; height: 36px; font-size: 0.7rem; flex-shrink: 0;
  border: 2px solid var(--purple); margin-top: 2px;
}
.video-card-text { flex: 1; min-width: 0; }
.video-card-title {
  font-size: 0.82rem; font-weight: 600; line-height: 1.35;
  margin-bottom: 0.25rem; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-card-meta {
  font-size: 0.78rem; color: var(--text3); line-height: 1.45;
}
.video-card-meta strong { color: var(--text2); font-weight: 500; }

.video-card:hover .video-card-title { color: var(--purple-lt); }

/* Clickable creator (avatar + name) on video cards */
.video-card-creator-clickable { cursor: pointer; transition: color 0.15s ease; }
.video-card-creator.video-card-creator-clickable:hover { color: var(--purple-lt); text-decoration: underline; }
.video-card-info .avatar.video-card-creator-clickable:hover { border-color: var(--purple-lt); transform: scale(1.05); }
.video-card-info .avatar.video-card-creator-clickable { transition: transform 0.15s ease, border-color 0.15s ease; }

/* Video player page (keep premium look).
   No fixed aspect-ratio — let the video drive its own height so portrait
   uploads (9:16) don't get letterboxed and landscape (16:9) doesn't get
   chopped. min-aspect prevents tiny squares from looking weird. */
.video-player-wrap {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  max-height: 75vh;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.video-player-wrap video {
  width: 100%;
  height: auto;
  max-height: 75vh;
  display: block;
  object-fit: contain;
}

.video-info { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.video-title-big { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.video-meta { display: flex; gap: 0.5rem; color: var(--text3); font-size: 0.85rem; margin-bottom: 1rem; }
.video-uploader { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.video-uploader-name { font-size: 0.95rem; font-weight: 600; }
.video-uploader-badge { font-size: 0.72rem; color: var(--text3); }
.video-description {
  background: var(--bg3); border-radius: 10px; padding: 0.85rem 1rem;
  font-size: 0.88rem; line-height: 1.65; color: var(--text2); white-space: pre-wrap;
}
.video-description:empty { display: none; }

body.on-videos .main-wrap {
  max-width: none !important;
  width: calc(100vw - var(--sidebar-w)) !important;
  margin-left: var(--sidebar-w) !important;
  margin-right: 0 !important;
  padding: 1rem 1.5rem !important;
}

/* Home landing — same full-bleed treatment as videos / books. The default
   .main-wrap is locked to 900px for the post feed's reading column; the
   mosaic home view needs every pixel it can get for the 3-column layout
   to breathe (hero video + side stack + featured post all fit only when
   the column-constraint is lifted). Lower padding too, since the home
   landing has its own gap rhythm. */
body.on-home-landing .main-wrap {
  max-width: none !important;
  width: calc(100vw - var(--sidebar-w)) !important;
  margin-left: var(--sidebar-w) !important;
  margin-right: 0 !important;
  /* Horizontal padding tightened further — 5px off each side.
     Left: 0.25rem (~4px) → 0 (hero flush against the sidebar gap).
     Right: 1.2rem (~19px) → 0.875rem (~14px) (post column gains
     another 5px of visual reach toward the viewport edge). Top and
     bottom padding unchanged. */
  padding: 1rem 0.875rem 1rem 0 !important;
}

/* While on the Home landing, force-hide the post-feed's infinite-scroll
   sentinel ("Loading more posts…" pill). The feed loads in the
   background for instant Post-tab nav, and setupFeedInfiniteScroll
   sets the sentinel to display:block — which leaks visually above the
   home mosaic. The loadMoreFeed callback has a visibility guard that
   stops actual fetches, but the pill itself stays on screen until this
   override fires. Hidden via body class so the rule disappears
   automatically when the user navigates to the Post tab. */
body.on-home-landing #feedSentinel {
  display: none !important;
}

.video-thumb-duration {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600;
  z-index: 2; line-height: 1.3;
}
.video-thumb-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.2);
  z-index: 2;
}
.video-thumb-progress-fill {
  height: 100%; background: var(--purple-lt);
}

/* Video player layout (with Up Next sidebar) */
.video-player-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 1100px) { .video-player-layout { grid-template-columns: 1fr; } }
.video-player-main { min-width: 0; }

.video-upnext {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem;
}
.upnext-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem;
  color: var(--text);
}
.upnext-list { display: flex; flex-direction: column; gap: 0.65rem; }

.upnext-item {
  display: flex; gap: 0.65rem; cursor: pointer;
  padding: 0.4rem; border-radius: 8px;
  transition: background 0.15s;
}
.upnext-item:hover { background: var(--bg3); }

.upnext-thumb {
  width: 168px; aspect-ratio: 16/9; border-radius: 8px;
  background: var(--bg3); overflow: hidden; flex-shrink: 0;
  position: relative;
}
.upnext-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  background: #000; display: block;
}
.upnext-thumb-duration {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 1px 5px; border-radius: 3px;
  font-size: 0.65rem; font-weight: 600;
}
.upnext-info { flex: 1; min-width: 0; }
.upnext-title-text {
  font-size: 0.82rem; font-weight: 600; line-height: 1.3;
  margin-bottom: 0.2rem; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upnext-item:hover .upnext-title-text { color: var(--purple-lt); }
.upnext-meta {
  font-size: 0.7rem; color: var(--text3); line-height: 1.35;
}
.upnext-tag {
  display: inline-block; background: rgba(124,58,237,0.15); color: var(--purple-lt);
  font-size: 0.62rem; padding: 1px 6px; border-radius: 99px;
  margin-top: 0.2rem; font-weight: 500;
}

/* Video search */
.videos-header {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.video-search-wrap {
  flex: 1; min-width: 280px; position: relative;
  max-width: 600px;
}
.video-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text3);
  pointer-events: none;
}
.video-search-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 99px; padding: 0.65rem 2.5rem 0.65rem 2.5rem;
  color: var(--text); font-family: var(--font); font-size: 0.9rem;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.video-search-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.video-search-input::placeholder { color: var(--text3); }
.video-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: var(--bg3); color: var(--text2); cursor: pointer;
  font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.video-search-clear:hover { background: var(--purple); color: #fff; }

.video-search-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: nowrap;            /* single line, YouTube-style */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  margin-bottom: 1rem;
  padding: 0.15rem 0.5rem 0.5rem 0.05rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, black 0%, black 92%, transparent 100%);
}
.video-search-tags::-webkit-scrollbar { display: none; }
.video-search-tags:empty { display: none; }

/* search-tag-pill — styling consolidated with .book-chip block above for consistency */
.search-tag-pill-all { font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════════
   VIDEO PLAYER — Premium nav controls (Prev / Rewind / FFWD / Next + Autoplay)
   ════════════════════════════════════════════════════════════════════════════ */

.video-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  margin-top: 0.6rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.06), rgba(124, 58, 237, 0.02)), white;
  border: 1px solid rgba(124, 58, 237, 0.14);
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.04);
}
body:not(.light) .video-nav-controls {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04)), rgba(26, 20, 40, 0.5);
  border-color: rgba(167, 139, 250, 0.20);
}

.vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text, #1f2937);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, transform 0.1s, border-color 0.14s;
  position: relative;
}
.vc-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}
.vc-btn:active { transform: scale(0.96); }
.vc-btn svg { color: #7c3aed; }

body:not(.light) .vc-btn { color: #e5e7eb; }
body:not(.light) .vc-btn:hover { background: rgba(167, 139, 250, 0.12); color: #ddd6fe; }
body:not(.light) .vc-btn svg { color: #c4b5fd; }

/* Skip buttons get a tiny number badge inside */
.vc-btn-skip {
  position: relative;
  padding: 0.45rem 0.65rem;
}
.vc-skip-num {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #5b21b6;
  background: rgba(124, 58, 237, 0.12);
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
body:not(.light) .vc-skip-num {
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.18);
}

/* Brief flash when skip is triggered */
.vc-flash {
  background: rgba(124, 58, 237, 0.18) !important;
  transform: scale(1.04);
}

.vc-spacer { flex: 1; min-width: 0; }

/* Autoplay toggle — premium switch */
.vc-autonext {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  transition: background 0.14s;
}
.vc-autonext:hover { background: rgba(124, 58, 237, 0.06); }
.vc-autonext input { position: absolute; opacity: 0; pointer-events: none; }

.vc-autonext-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(17, 24, 39, 0.18);
  border-radius: 999px;
  transition: background 0.18s;
}
.vc-autonext-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vc-autonext input:checked + .vc-autonext-track {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32);
}
.vc-autonext input:checked + .vc-autonext-track .vc-autonext-thumb {
  transform: translateX(16px);
}
body:not(.light) .vc-autonext-track { background: rgba(255, 255, 255, 0.16); }

.vc-autonext-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2, #6b7280);
  letter-spacing: -0.005em;
}
body:not(.light) .vc-autonext-label { color: #9ca3af; }
.vc-autonext input:checked ~ .vc-autonext-label {
  color: #5b21b6;
}
body:not(.light) .vc-autonext input:checked ~ .vc-autonext-label { color: #c4b5fd; }

/* Mobile — hide button labels, keep icons + skip numbers */
@media (max-width: 700px) {
  .vc-btn span:not(.vc-skip-num) { display: none; }
  .video-nav-controls { gap: 0.25rem; padding: 0.5rem 0.6rem; }
  .vc-btn { padding: 0.45rem 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOKMARKS PAGE — Saved videos + saved books
   ════════════════════════════════════════════════════════════════════════════ */

.bookmarks-header {
  margin: 0 0 1.2rem;
  padding: 0.4rem 0.1rem 0;
}
.bookmarks-title {
  margin: 0 0 0.2rem;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.bookmarks-subtitle {
  display: block;
  font-size: 0.85rem;
  color: var(--text2, #6b7280);
  margin-top: 0.1rem;
}

.bookmarks-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.10);
}
.bookmarks-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2, #6b7280);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.bookmarks-tab:hover { color: var(--text, #1f2937); }
.bookmarks-tab.active {
  color: #7c3aed;
  border-bottom-color: #7c3aed;
}
body:not(.light) .bookmarks-tab.active { color: #c4b5fd; border-bottom-color: #a78bfa; }
.bookmarks-tab svg { flex-shrink: 0; }

.bookmarks-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bookmarks-tab-count:empty { display: none; }
.bookmarks-tab.active .bookmarks-tab-count {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
}
body:not(.light) .bookmarks-tab-count {
  background: rgba(167, 139, 250, 0.18);
  color: #ddd6fe;
}

.bookmarks-content { min-height: 300px; }

.bookmarks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: white;
  border: 1px dashed rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  gap: 0.6rem;
}
body:not(.light) .bookmarks-empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(167, 139, 250, 0.25);
}
.bookmarks-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.2rem;
}
.bookmarks-empty h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #111);
}
.bookmarks-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text2, #6b7280);
  max-width: 380px;
}
.bookmarks-empty .btn { margin-top: 0.6rem; }

/* ════════════════════════════════════════════════════════════════════════════
   BOOK DETAIL — Like + Bookmark active states
   ════════════════════════════════════════════════════════════════════════════ */
.book-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.book-action-btn:active { transform: scale(0.96); }

.book-action-count {
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 0.15rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}
body:not(.light) .book-action-count {
  background: rgba(167, 139, 250, 0.14);
  color: #ddd6fe;
}

/* LIKE — when active, heart fills with red/pink */
.book-action-btn[data-active="1"]#btnLikeBook {
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.4);
  background: rgba(236, 72, 153, 0.08);
}
.book-action-btn[data-active="1"]#btnLikeBook .book-action-icon {
  color: #ec4899;
}
.book-action-btn[data-active="1"]#btnLikeBook .book-action-count {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
}
.book-action-btn[data-active="1"]#btnLikeBook:hover {
  background: rgba(236, 72, 153, 0.14);
  border-color: rgba(236, 72, 153, 0.55);
}

/* BOOKMARK — when active, fills with purple */
.book-action-btn[data-active="1"]#btnBookmarkBook {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.08);
}
.book-action-btn[data-active="1"]#btnBookmarkBook .book-action-icon {
  color: #7c3aed;
}
.book-action-btn[data-active="1"]#btnBookmarkBook:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.55);
}

/* Subtle pop animation when toggling on */
@keyframes bookActionPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.book-action-btn[data-active="1"] .book-action-icon {
  animation: bookActionPop 0.32s ease;
}

.video-search-empty {
  text-align: center; padding: 3rem 1rem; color: var(--text3);
  grid-column: 1 / -1;
}
.video-search-empty h3 { color: var(--text); margin-bottom: 0.5rem; }

/* ── Premium Topbar Search ── */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
}

/* Center the search bar */
.topbar-search {
  flex: 1; max-width: 640px; min-width: 200px;
  margin: 0 auto;
  position: relative;
  background: rgba(255,255,255,0.95);
  border-radius: 99px;
  display: flex; align-items: center;
  height: 44px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(124,58,237,0.1);
}
.topbar-search:focus-within {
  background: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,0.25), inset 0 0 0 2px var(--purple);
  transform: translateY(-1px);
}

.topbar-search-icon {
  width: 18px; height: 18px;
  color: var(--purple);
  flex-shrink: 0; margin-left: 18px;
  pointer-events: none;
}

.topbar-search input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font); font-size: 0.95rem;
  color: #1a1a1a;
  padding: 0 14px;
  height: 100%;
  min-width: 0;
}
.topbar-search input::placeholder { color: #888; font-weight: 400; }

.topbar-search-clear {
  width: 28px; height: 28px;
  background: var(--bg3); color: var(--text2);
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  margin-right: 8px; flex-shrink: 0;
  transition: all 0.15s;
}
.topbar-search-clear:hover {
  background: var(--purple); color: #fff;
  transform: scale(1.1);
}

/* Light mode tweaks */
body.light .topbar-search {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 0 0 1px var(--border);
}
body.light .topbar-search input { color: #111; }

/* Dropdown results */
.search-results {
  position: absolute; top: calc(var(--header-h) + 4px);
  left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 2rem));
  max-height: 70vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.5rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  z-index: 100;
  display: none;
}
.search-results.open { display: block; }
.search-result-item {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  cursor: pointer; transition: background 0.15s;
}
.search-result-item:hover { background: var(--bg3); }
.search-result-item .avatar { width: 36px; height: 36px; flex-shrink: 0; font-size: 0.7rem; }
.search-result-thumb {
  width: 80px; aspect-ratio: 16/9; border-radius: 6px;
  background: #000; overflow: hidden; flex-shrink: 0;
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Book covers in the home dropdown — taller portrait aspect than video thumbs */
.search-result-thumb-book {
  width: 44px; aspect-ratio: 2/3; border-radius: 4px;
  background: var(--bg3); display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text3); flex-shrink: 0;
}
.search-result-thumb-book img { width: 100%; height: 100%; object-fit: cover; }
.search-creator-initials { user-select: none; line-height: 1; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-title {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 0.75rem; color: var(--text3); margin-top: 0.15rem;
}
.search-result-section {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--text3); letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem 0.25rem;
}

.videos-title {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  user-select: none;
}
.videos-title:hover { opacity: 0.85; }
.videos-title:active { transform: scale(0.98); }

/* Video preview in compose */
#composeVideoPreview {
  margin-top: 0.75rem;
}
#composeVideoPreview video {
  width: 100%;
  max-height: 400px;
  border-radius: 12px;
  background: #000;
}
#composeVideoPreview .video-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg);
  border-radius: 8px;
  font-size: 0.875rem;
}
#composeVideoPreview .remove-video-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
}
#composeVideoPreview .remove-video-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Upload progress UI */
.upload-progress {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: none;
}
.upload-progress.active { display: block; }
.upload-progress-label {
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.upload-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7c3aed), #a78bfa);
  width: 0%;
  transition: width 0.3s;
}

/* ═══════════════════════════════════════════
   PREMIUM VIDEO UPLOAD MODAL
   ═══════════════════════════════════════════ */

.video-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 8, 30, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: vuFadeIn 0.2s ease-out;
}

@keyframes vuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.video-upload-modal-premium {
  background: var(--card-bg, #1a1428);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vuSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light .video-upload-modal-premium {
  background: #ffffff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

@keyframes vuSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.vu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.vu-header-text h2 {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  background: linear-gradient(135deg, #c4b5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.light .vu-header-text h2 {
  background: linear-gradient(135deg, #7c3aed, #1f2937);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vu-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #9ca3af);
}

.vu-close {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text, #e5e7eb);
  transition: all 0.15s;
  flex-shrink: 0;
}

body.light .vu-close {
  background: rgba(0, 0, 0, 0.04);
  color: #1f2937;
}

.vu-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  transform: rotate(90deg);
}

/* Body */
.vu-body {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  flex: 1;
}

/* Dropzone */
.vu-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 3.5rem 2rem;
  border: 2px dashed var(--border, rgba(255,255,255,0.15));
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(167, 139, 250, 0.02));
}

.vu-dropzone:hover {
  border-color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.05));
  transform: translateY(-2px);
}

.vu-dropzone-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
  margin-bottom: 0.5rem;
}

.vu-dropzone h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text, #e5e7eb);
}

.vu-dropzone p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #9ca3af);
}

.vu-cta-pill {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.4rem;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Preview */
.vu-preview-box {
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.vu-preview-box video {
  width: 100%;
  max-height: 280px;
  display: block;
}

/* ─── Phase 1 file-selected hero (May 2026) ───
   Once a video file is picked, the dropzone hides and this hero takes
   over: a 16:9 video preview at the top of the modal body, file meta
   strip below with the file name, size, and a Replace File button.
   Mirrors the mobile app's selected-file affordance so authors who
   know one know both. */
.vu-file-selected {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vu-preview-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.vu-preview-hero video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.vu-file-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 12px;
}
.vu-file-meta-text {
  min-width: 0;
  flex: 1;
}
.vu-file-meta-text .vu-file-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vu-file-meta-text .vu-file-size {
  font-size: 0.78rem;
  color: var(--muted, #8b8b9a);
  margin-top: 0.15rem;
}

/* ─── Phase 2 thumbnail stage (May 2026) ───
   6 tiles in a responsive grid: "Upload your own" first, followed by
   5 auto-extracted frames at evenly-spaced timecodes. Tiles are
   16:9, click-selectable, with a clear selected-ring and a timestamp
   badge on the frame tiles. Loading state shows a centered spinner
   while ffmpeg-on-canvas extracts the frame. */
.vu-thumb-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vu-thumb-stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.vu-thumb-stage-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  margin-bottom: 0.2rem;
}
.vu-thumb-stage-sub {
  font-size: 0.82rem;
  color: var(--muted, #8b8b9a);
  line-height: 1.45;
}
.vu-thumb-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.vu-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .vu-thumb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .vu-thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.vu-thumb-grid-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  border: 2px solid transparent;
  cursor: pointer;
  display: block;
  padding: 0;
  transition: border-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}
.vu-thumb-grid-tile:hover {
  border-color: rgba(139, 92, 246, 0.55);
}
.vu-thumb-grid-tile:active {
  transform: scale(0.98);
}
.vu-thumb-grid-tile.is-selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}
.vu-thumb-grid-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Selected-state check overlay */
.vu-thumb-grid-tile.is-selected::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #7c3aed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.vu-thumb-frame-time {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.vu-thumb-frame-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2.5px solid rgba(139, 92, 246, 0.25);
  border-top-color: #7c3aed;
  animation: vu-thumb-spin 0.8s linear infinite;
}
.vu-thumb-frame-tile:not(.is-loading) .vu-thumb-frame-spinner {
  display: none;
}
.vu-thumb-frame-tile.is-loading {
  cursor: progress;
}
.vu-thumb-frame-tile.is-loading:hover {
  border-color: transparent;
}
@keyframes vu-thumb-spin {
  to { transform: rotate(360deg); }
}
/* "Upload your own" tile — dashed border, icon + label inside */
.vu-thumb-upload-tile {
  background: rgba(139, 92, 246, 0.06);
  border: 2px dashed rgba(139, 92, 246, 0.45);
  cursor: pointer;
}
.vu-thumb-upload-tile:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.85);
}
.vu-thumb-upload-tile.is-selected {
  border-style: solid;
}
.vu-thumb-upload-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: rgba(124, 58, 237, 0.95);
  padding: 0.5rem;
  text-align: center;
}
.vu-thumb-upload-inner span {
  font-size: 0.84rem;
  font-weight: 600;
}
.vu-thumb-upload-inner em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--muted, #8b8b9a);
  font-weight: 500;
}
.vu-thumb-upload-tile.is-selected .vu-thumb-upload-inner {
  background: rgba(124, 58, 237, 0.08);
}
/* When upload tile has a preview image, hide the icon overlay */
.vu-thumb-upload-tile.has-image .vu-thumb-upload-inner {
  display: none;
}

/* ─── Upload success modal (May 2026) ───
   Center-screen confirmation dialog that takes over from the small
   "Done" footer button. Same overlay z-index as the parent upload
   modal (it's a sibling overlay), but the card is more prominent and
   uses a green-tinted icon halo. The two CTAs are equally weighted
   — neither is destructive — so primary purple goes to the more
   action-y "View in Studio" and ghost goes to "Upload another." */
.vu-success-overlay {
  z-index: 10010; /* one above the upload modal so it stacks correctly */
}
.vu-success-card {
  background: var(--surface, #fff);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  width: 92%;
  max-width: 440px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: vu-success-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vu-success-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.vu-success-icon-wrap {
  margin: 0 auto 0.9rem;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: vu-success-icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.vu-success-icon-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(16, 185, 129, 0.25);
  animation: vu-success-icon-ring 0.7s ease-out 0.25s both;
}
@keyframes vu-success-icon-bounce {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes vu-success-icon-ring {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.vu-success-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin: 0 0 0.4rem 0;
}
.vu-success-body {
  font-size: 0.92rem;
  color: var(--muted, #6b6b80);
  margin: 0;
  line-height: 1.5;
}
.vu-success-thumb {
  margin: 1.1rem auto 0;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.vu-success-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vu-success-actions {
  margin-top: 1.35rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.vu-success-actions .vu-btn {
  flex: 1;
  max-width: 180px;
}

/* ─── Thumbnail picker (video upload wizard + studio edit) ───
   Two-column layout: 16:9 preview tile on the left, metadata + action
   buttons on the right. Same shape in both modals so authors learn the
   pattern once and find it familiar everywhere. Falls back to a single
   column on narrow viewports so the tile doesn't get squeezed past
   legibility. */
.vu-thumb-picker {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 0.25rem;
}
.vu-thumb-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(139, 92, 246, 0.45);
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.12s ease;
}
.vu-thumb-tile:hover {
  border-color: rgba(139, 92, 246, 0.85);
}
.vu-thumb-tile:active {
  transform: scale(0.99);
}
.vu-thumb-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vu-thumb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: rgba(139, 92, 246, 0.85);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem;
  text-align: center;
}
.vu-thumb-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
.vu-thumb-tile:hover .vu-thumb-overlay {
  opacity: 1;
}
.vu-thumb-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.vu-thumb-meta-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text, #111);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vu-thumb-meta-sub {
  font-size: 0.78rem;
  color: var(--muted, #8b8b9a);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.vu-thumb-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vu-thumb-picker.is-uploading .vu-thumb-tile {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 540px) {
  .vu-thumb-picker {
    grid-template-columns: 1fr;
  }
  .vu-thumb-tile {
    max-width: 280px;
  }
}

/* Form */
.vu-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.vu-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vu-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vu-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #e5e7eb);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vu-required {
  color: #ef4444;
  margin-left: 0.2rem;
}

.vu-counter,
.vu-hint {
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
  font-weight: 500;
}

.vu-field input[type="text"],
.vu-field textarea,
.vu-field select {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  color: var(--text, #e5e7eb);
  font-size: 0.92rem;
  font-family: inherit;
  transition: all 0.15s;
  box-sizing: border-box;
}

body.light .vu-field input[type="text"],
body.light .vu-field textarea,
body.light .vu-field select {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}

.vu-field textarea {
  resize: vertical;
  min-height: 80px;
}

.vu-field input[type="text"]:focus,
.vu-field textarea:focus,
.vu-field select:focus {
  outline: none;
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.05);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

/* ─── Tag chip input (YouTube-style) ───────────────────────────────────
   Wraps a hidden <input> whose .value is kept in sync with the chip
   array. Visually a wrapper that looks identical to .vu-field inputs:
   chips render inline left-to-right, with a flex-grow editor at the end.
   See attachTagChips() in js/app.js. */
.tag-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  font-family: inherit;
  transition: all 0.15s;
  box-sizing: border-box;
  min-height: 44px;
  cursor: text;
}

body.light .tag-chip-wrap {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.tag-chip-wrap:focus-within {
  outline: none;
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.05);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.tag-chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.18);
  user-select: none;
}

.tag-chip-text { line-height: 1; }

.tag-chip-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.tag-chip-remove:hover {
  background: rgba(255, 255, 255, 0.36);
}

.tag-chip-editor {
  flex: 1 1 80px;
  min-width: 80px;
  padding: 4px 6px;
  background: transparent !important;
  border: none !important;
  outline: none;
  color: var(--text, #e5e7eb);
  font-family: inherit;
  font-size: 0.92rem;
  box-shadow: none !important;
}

body.light .tag-chip-editor {
  color: #1f2937;
}

.tag-chip-editor:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Progress */
.vu-progress {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  display: none;
}

.vu-progress.active { display: block; }

.vu-progress-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
}

.vu-progress-status {
  color: var(--text, #e5e7eb);
  font-weight: 500;
}

.vu-progress-percent {
  color: #a78bfa;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vu-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

body.light .vu-progress-bar {
  background: rgba(0, 0, 0, 0.06);
}

.vu-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #c4b5fd);
  background-size: 200% 100%;
  width: 0%;
  transition: width 0.3s;
  animation: vuShimmer 2s linear infinite;
  border-radius: 999px;
}

@keyframes vuShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Footer */
.vu-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(0, 0, 0, 0.15);
}

body.light .vu-footer {
  background: rgba(0, 0, 0, 0.02);
}

.vu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.15s;
}

.vu-btn-ghost {
  background: transparent;
  color: var(--text-muted, #9ca3af);
}

.vu-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #e5e7eb);
}

body.light .vu-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f2937;
}

.vu-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
}

.vu-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

.vu-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ═══════════════════════════════════════════
   PREMIUM STUDIO EDIT MODAL
   (uses .vu-modal / .vu-label / .vu-input / .vu-textarea / .vu-btn-secondary)
   ═══════════════════════════════════════════ */

.vu-modal {
  position: relative;
  background: linear-gradient(180deg, #1a1428 0%, #120c20 100%);
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(139, 92, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vuSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top accent ribbon — subtle purple glow stripe */
.vu-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #7c3aed 25%, #a78bfa 50%, #7c3aed 75%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}

body.light .vu-modal {
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(124, 58, 237, 0.10);
}

.vu-title {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #c4b5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.light .vu-title {
  background: linear-gradient(135deg, #7c3aed, #1f2937);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Labels (used by .vu-form > label.vu-label pattern) */
.vu-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text, #e5e7eb);
  margin: 0 0 0.45rem;
}

body.light .vu-label { color: #1f2937; }

.vu-label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.72rem;
}

.vu-label + .vu-label { margin-top: 1.1rem; }

/* Inputs */
.vu-input,
.vu-textarea,
select.vu-input {
  width: 100%;
  padding: 0.78rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  color: var(--text, #e5e7eb);
  font-size: 0.93rem;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  outline: none;
}

body.light .vu-input,
body.light .vu-textarea,
body.light select.vu-input {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}

.vu-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

.vu-input:hover:not(:focus),
.vu-textarea:hover:not(:focus) {
  border-color: rgba(139, 92, 246, 0.35);
}

.vu-input:focus,
.vu-textarea:focus,
select.vu-input:focus {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}

body.light .vu-input:focus,
body.light .vu-textarea:focus,
body.light select.vu-input:focus {
  background: #fefcff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

/* Custom select chevron */
select.vu-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Spacing between vu-hint after vu-input */
.vu-input + .vu-hint,
.vu-textarea + .vu-hint {
  margin-top: 0.35rem;
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Studio edit thumbnail preview — refined frame.
   The old .vu-preview-box override was replaced May 2026 by the
   .vu-thumb-picker component (defined alongside .vu-preview-box above)
   which is shared with the video upload wizard's Details step. The
   block remains as a no-op anchor so any third-party theme overlays
   that targeted #studioEditModal .vu-preview-box still hit a defined
   selector. Safe to remove entirely once you're sure nothing depends
   on it. */
#studioEditModal .vu-thumb-picker {
  margin-bottom: 1.25rem;
}

/* Secondary button (Cancel) — used in studio edit modal footer */
.vu-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
}
body.light .vu-btn-secondary {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}
.vu-btn-secondary:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.45);
  color: var(--text, #e5e7eb);
}
.vu-btn-secondary:active { transform: scale(0.98); }

/* When the primary button is in "saving" state */
.vu-btn-primary.is-saving {
  opacity: 0.85;
  cursor: progress;
  pointer-events: none;
}
.vu-btn-primary.is-saving::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: vuSpin 0.7s linear infinite;
  margin-right: 0.45rem;
}
@keyframes vuSpin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 600px) {
  .video-upload-overlay { padding: 0; align-items: flex-end; }
  .video-upload-modal-premium {
    max-height: 95vh;
    border-radius: 24px 24px 0 0;
    max-width: 100%;
  }
  .vu-header, .vu-body, .vu-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .vu-header-text h2 { font-size: 1.2rem; }
  .vu-dropzone { padding: 2.5rem 1rem; }
}

/* Form groups */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.form-group label small {
  font-weight: 400;
  color: var(--text-muted, #888);
  margin-left: 0.5rem;
}
.form-group .required { color: #ef4444; }
.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent, #7c3aed);
}
.char-hint {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-top: 0.3rem;
}

/* Videos page header with upload button */
.videos-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-upload-video {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  transition: all 0.2s;
  font-family: inherit;
}

.btn-upload-video:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.btn-upload-video:active {
  transform: translateY(0);
}

.btn-upload-video svg {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .btn-upload-video {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }
}

/* Video posts in feed */
.post-video {
  position: relative;
  margin: 0.75rem 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
}
.post-video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}


/* ════════════════════════════════════════
   CREATOR STUDIO
   ════════════════════════════════════════ */

#studioPage {
  /* Safe-area removed (May 2026 redesign). The Studio canvas now goes
     edge-to-edge — outer .main-wrap gets its padding zeroed by the
     body.on-studio rule, and we drop the page's own max-width + side
     padding here. Top/bottom padding retained for breathing room
     above the header and below the table. */
  /* Left padding trimmed 10px (16px → 6px) so the table sits closer
     to the sidebar edge — gives the wider columns more horizontal
     room. Top, right, and bottom unchanged. */
  padding: 1rem 1rem 3rem 6px;
  max-width: none;
  margin: 0;
}

/* Edge-to-edge canvas for Studio — mirrors the on-home-landing pattern.
   .main-wrap's 900px reading-column constraint cramps the Studio's
   stats grid + video table; here we let it fill the viewport minus
   the sidebar. */
body.on-studio .main-wrap {
  max-width: none !important;
  width: calc(100vw - var(--sidebar-w)) !important;
  margin-left: var(--sidebar-w) !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.studio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 5px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
}

.studio-title {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.studio-subtitle {
  color: #6b7280;
  margin: 0.35rem 0 0 0;
  font-size: 0.93rem;
}

/* ─── Stats grid ─── */
.studio-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding-top: 2px;
}

.studio-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s, box-shadow 0.15s;
}

.studio-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.08);
}

.studio-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.studio-stat-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.studio-stat-label {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.15rem;
  font-weight: 500;
}

/* Clickable variant — Revenue card opens the Earnings page on tap.
   Inherits the base .studio-stat layout, adds the affordance cues:
   cursor, deeper hover lift, and a small purple "View earnings →"
   CTA inside the label. The element is a real <button> so keyboard
   focus + screen readers get full treatment. */
.studio-stat-clickable {
  cursor: pointer;
  appearance: none;
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: linear-gradient(180deg, #fff, #f0fdf4);
  text-align: left;
  font: inherit;
  width: 100%;
}
.studio-stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.35);
}
.studio-stat-clickable:active { transform: translateY(0); }
.studio-stat-clickable:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
.studio-stat-text { min-width: 0; }
.studio-stat-cta {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 1px;
  transition: background 0.15s, color 0.15s;
}
.studio-stat-clickable:hover .studio-stat-cta {
  background: rgba(34, 197, 94, 0.25);
  color: #14532d;
}
/* Dark-mode treatment */
body:not(.light) .studio-stat-clickable {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.18), rgba(6, 78, 59, 0.22));
  border-color: rgba(74, 222, 128, 0.28);
}
body:not(.light) .studio-stat-clickable:hover {
  box-shadow: 0 8px 22px rgba(74, 222, 128, 0.20);
  border-color: rgba(74, 222, 128, 0.45);
}
body:not(.light) .studio-stat-cta {
  background: rgba(74, 222, 128, 0.20);
  color: #86efac;
}
body:not(.light) .studio-stat-clickable:hover .studio-stat-cta {
  background: rgba(74, 222, 128, 0.32);
  color: #bbf7d0;
}

/* ─── Toolbar (search + count) ─── */
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0 0.25rem;
}

.studio-search {
  flex: 1;
  max-width: 380px;
  position: relative;
  display: flex;
  align-items: center;
}

.studio-search svg {
  position: absolute;
  left: 0.85rem;
  color: #9ca3af;
  pointer-events: none;
}

.studio-search input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: white;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color: #111827;
}

.studio-search input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}

.studio-toolbar-info {
  font-size: 0.85rem;
  color: #6b7280;
  margin-left: auto;
  font-weight: 500;
}

/* ─── Table ─── */
.studio-table-wrap {
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.studio-table {
  width: 100%;
  border-collapse: collapse;
  /* `fixed` so the column widths declared on .studio-col-* are
     honored. Default `auto` lets the browser ignore them when one
     cell's content is wider/narrower than expected, which caused
     the headers and cells to drift apart visually. */
  table-layout: fixed;
}

.studio-table thead {
  background: rgba(168, 85, 247, 0.04);
}

.studio-table th {
  /* Fixed header height — symmetric with tbody rows for visual rhythm. */
  height: 44px;
  padding: 0 1rem;
  text-align: left;
  font-weight: 600;
  /* Header text trimmed 1px so labels + sort arrows fit comfortably
     within their column widths without crowding (was 0.72rem). */
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
  /* Single thin line under the header strip stays — it separates the
     column labels from the data. All other borders (row dividers
     between tbody rows, vertical column dividers) are removed
     intentionally for a cleaner, line-free table aesthetic. */
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  vertical-align: middle;
}

.studio-table td {
  /* Horizontal padding only — vertical centering comes from the row's
     fixed `height` + `vertical-align: middle`, so every cell on every
     row lands on the same baseline. */
  padding: 0 1rem;
  /* Borderless rows — line-free table aesthetic. The fixed row height
     plus row hover background provides enough separation without
     visible grid lines. */
  vertical-align: middle;
  color: #1f2937;
  font-size: 0.9rem;
}

/* Fixed row height — guarantees identical vertical rhythm regardless
   of which cell has the tallest content. 88px = 68px thumbnail + 20px
   of evenly distributed top/bottom breathing room (10px each, paired
   with vertical-align: middle). */
.studio-table tbody tr {
  height: 88px;
  transition: background 0.1s;
}

.studio-table tbody tr:hover {
  background: rgba(168, 85, 247, 0.03);
}

.studio-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Visibility filter chips (May 2026) ─── */
.studio-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
}
.studio-filter-chip {
  appearance: none;
  border: 1px solid rgba(139, 92, 246, 0.18);
  background: rgba(139, 92, 246, 0.06);
  color: #6b21a8;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.studio-filter-chip:hover:not(.is-selected) {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.32);
}
.studio-filter-chip:active { transform: scale(0.97); }
.studio-filter-chip.is-selected {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.95));
  color: #fff;
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 3px 10px rgba(124, 58, 237, 0.35);
}
.studio-filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  color: #5b21b6;
}
.studio-filter-chip.is-selected .studio-filter-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Thin divider between the visibility-filter chips and the sort
   shortcut chips. Keeps the two groups visually separate without a
   heavy section heading. */
.studio-filter-divider {
  display: inline-block;
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 0.25rem;
  background: rgba(139, 92, 246, 0.22);
}
body:not(.light) .studio-filter-divider {
  background: rgba(167, 139, 250, 0.30);
}

/* Sort-shortcut variant — same chip shell as the visibility filters
   but with the arrow glyph styled brighter so the metaphor reads at a
   glance. The arrow is a sibling span (not a ::after) so it inherits
   the chip's active/inactive color states. */
.studio-filter-chip-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.9em;
  font-weight: 800;
  opacity: 0.7;
}
.studio-filter-chip.is-selected .studio-filter-chip-arrow {
  opacity: 1;
}
body:not(.light) .studio-filter-chip {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.26);
  color: #c4b5fd;
}
body:not(.light) .studio-filter-chip:hover:not(.is-selected) {
  background: rgba(139, 92, 246, 0.18);
  color: #ddd6fe;
}
body:not(.light) .studio-filter-chip-count {
  background: rgba(139, 92, 246, 0.22);
  color: #ddd6fe;
}

/* ─── Sortable headers ─── */
.studio-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.studio-sortable:hover { color: #7c3aed; }
.studio-sortable.is-sorted { color: #6d28d9; }
body:not(.light) .studio-sortable:hover    { color: #c4b5fd; }
body:not(.light) .studio-sortable.is-sorted{ color: #ddd6fe; }
.studio-sort-icon {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.8em;
}
.studio-sort-icon.dim { opacity: 0.35; font-weight: 400; }

/* ─── Bulk-action bar ─── */
.studio-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(124, 58, 237, 0.14));
  border: 1px solid rgba(124, 58, 237, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 14px rgba(124, 58, 237, 0.18);
  font-size: 0.84rem;
}
.studio-bulk-count { color: #5b21b6; font-weight: 600; }
.studio-bulk-count strong { color: #4c1d95; font-size: 1rem; }
.studio-bulk-actions { display: inline-flex; gap: 0.45rem; align-items: center; }
.studio-bulk-btn {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(255, 255, 255, 0.65);
  color: #5b21b6;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.studio-bulk-btn:hover { background: rgba(255, 255, 255, 0.9); color: #4c1d95; transform: translateY(-1px); }
.studio-bulk-btn-delete {
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}
.studio-bulk-btn-delete:hover { background: rgba(254, 226, 226, 0.85); color: #991b1b; }
.studio-bulk-btn-clear {
  background: transparent;
  border-color: transparent;
  color: #6b21a8;
}
.studio-bulk-btn-clear:hover { background: rgba(139, 92, 246, 0.10); }
.studio-bulk-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
body:not(.light) .studio-bulk-bar {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(124, 58, 237, 0.18));
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
}
body:not(.light) .studio-bulk-count       { color: #ddd6fe; }
body:not(.light) .studio-bulk-count strong{ color: #fff; }
body:not(.light) .studio-bulk-btn {
  background: rgba(40, 24, 70, 0.6);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.35);
}
body:not(.light) .studio-bulk-btn:hover { background: rgba(60, 40, 100, 0.85); color: #fff; }
body:not(.light) .studio-bulk-btn-delete       { color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); }
body:not(.light) .studio-bulk-btn-delete:hover { background: rgba(127, 29, 29, 0.55); color: #fecaca; }
body:not(.light) .studio-bulk-btn-clear        { color: #c4b5fd; }
body:not(.light) .studio-bulk-btn-clear:hover  { background: rgba(139, 92, 246, 0.18); }

/* ─── Checkbox column ─── */
.studio-col-select        { width: 38px; text-align: center; padding-left: 0.4rem; }
.studio-col-select-cell   { width: 38px; text-align: center; padding-left: 0.4rem; }
.studio-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #7c3aed;
  margin: 0;
}
/* Soft purple wash on selected rows so the bulk-bar count is visually
   anchored to the actual rows in the table. */
.studio-table tbody tr.is-selected {
  background: rgba(139, 92, 246, 0.06);
}
body:not(.light) .studio-table tbody tr.is-selected {
  background: rgba(139, 92, 246, 0.12);
}

/* Row-number column — narrow, centered to match the other data
   columns, muted. Tabular figures keep 2-, 3-, and 4-digit numbers
   vertically aligned. */
.studio-table th.studio-col-num,
.studio-col-num {
  width: 48px;
  text-align: center;
}
.studio-col-num-cell {
  text-align: center;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.82rem;
}
body:not(.light) .studio-col-num-cell {
  color: #6b7280;
}
/* Video column — tightened May 2026 so Visibility/Date/Views/Likes/Actions
   get more breathing room. Title + description can ellipsis-truncate
   inside the cell (handled by .studio-row-title / .studio-row-desc). */
/* Column widths — calm, evenly proportioned, content-fitted.
   The width rules below apply to BOTH the th (header) and the td
   (cells) since the row template now tags each td with its column
   class — that's what keeps headers and values on the same vertical
   axis. Pairs with `table-layout: fixed` on `.studio-table` so the
   browser honors these widths instead of auto-sizing. */
/* Video column — `auto` with a 430px floor so it absorbs any leftover
   horizontal width on wide viewports instead of letting the leftover
   inflate other columns (which made Comments/Likes look stretched).
   On narrow viewports it stays at the 430px floor for readability. */
.studio-col-video  { width: auto; min-width: 430px; }
/* Status / Date / Views / Likes — all centered. Specificity bumped
   with `.studio-table th.` so the rule beats the table-wide
   `.studio-table th { text-align: left }` declaration. The td side
   doesn't need the bump (there's no left-align declaration on td). */
.studio-table th.studio-col-status,
.studio-col-status { width: 120px; text-align: center; }
.studio-table th.studio-col-date,
.studio-col-date   { width: 120px; text-align: center; }
.studio-table th.studio-col-views,
.studio-col-views,
.studio-table th.studio-col-likes,
.studio-col-likes,
.studio-table th.studio-col-comments,
.studio-col-comments { width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
/* Cell font sizes — Date, Views, Likes, Comments trimmed 1px from
   the table-wide td default (0.9rem → 0.84rem) so secondary metric
   data reads as quieter than the title column. Targets cells only
   (td selector) — headers stay at the small uppercase header type. */
.studio-table td.studio-col-date,
.studio-table td.studio-col-views,
.studio-table td.studio-col-likes,
.studio-table td.studio-col-comments {
  font-size: 0.84rem;
}
/* Earnings column — slightly wider for "₱1,234.56" formatting, plus
   green tint so the money cue carries through from the Revenue stat
   card and the row-level monetize toggle. */
.studio-table th.studio-col-earnings,
.studio-col-earnings { width: 120px; text-align: center; font-variant-numeric: tabular-nums; }
.studio-cell-earnings { color: #15803d; font-weight: 600; }
body:not(.light) .studio-cell-earnings { color: #4ade80; }
/* Actions column — centered header text matches the centered button
   cluster (.studio-actions uses justify-content: center). Same
   specificity bump on the th selector so the rule beats the
   table-wide left-align. */
.studio-table th.studio-col-actions,
.studio-col-actions {
  width: 145px;
  text-align: center;
  /* Extra left padding shifts the column content rightward so it
     doesn't crowd the Comments value on its left. Gives the
     numeric "0" / "1,234" room to breathe before the button cluster. */
  padding-left: 24px;
}

.studio-cell-muted {
  color: #6b7280;
  font-size: 0.88rem;
}

/* ─── Video cell ─── */
.studio-row-video {
  display: flex;
  gap: 0.9rem;
  /* Center thumbnail + text within the row so it sits on the same
     vertical axis as the other cells (which use vertical-align:
     middle). Previously flex-start, which pushed the text up against
     the row top and made the row look top-heavy. */
  align-items: center;
}

.studio-thumb {
  position: relative;
  width: 120px;
  height: 68px;
  flex-shrink: 0;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.studio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

.studio-thumb-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.studio-row-text {
  min-width: 0;
  flex: 1;
  /* Padding-top removed — alignment now comes from the parent
     flex's align-items: center, so we don't need to nudge the text
     down to fake-center it against the thumbnail. */
}

.studio-row-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.3rem;
  line-height: 1.35;
  /* Title trimmed 2px (0.95rem → 0.83rem) so longer titles fit on
     two lines without truncating prematurely in the 450px column. */
  font-size: 0.83rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.studio-row-desc {
  /* Description trimmed another 1px (0.76rem → 0.70rem, total -2px
     from original 0.82rem) so it sits clearly below the title in
     visual weight and fits more text per line. */
  font-size: 0.70rem;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Status badges ─── */
.studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Visibility pill palette — mirrors mobile CreatorVideoCard so the
   same row reads the same label/color on every platform. */
.studio-badge-ready,        /* legacy alias — keep so older render paths still style */
.studio-badge-published {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.studio-badge-processing {
  background: rgba(234, 179, 8, 0.12);
  color: #a16207;
}

.studio-badge-scheduled {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}

.studio-badge-private,
.studio-badge-failed {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.studio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.studio-dot-green  { background: #22c55e; }
.studio-dot-yellow { background: #eab308; }
.studio-dot-purple { background: #8b5cf6; }
.studio-dot-red    { background: #ef4444; }

/* ─── Action buttons ─── */
.studio-actions {
  display: flex;
  gap: 0.5rem;
  /* Center the cluster horizontally to match the centered header. */
  justify-content: center;
  /* Center the button cluster vertically within the row so the peso,
     edit, and trash icons sit on the same horizontal axis as the
     thumbnail center and the values in adjacent columns. */
  align-items: center;
  /* Match the row height for stable hit targets — every action cell
     is the same size regardless of which buttons render inside. */
  height: 100%;
}

.studio-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.15s;
}

.studio-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
  transform: scale(1.05);
}

.studio-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Peso glyph used inside the monetize toggle. Pure typographic icon
   (no SVG) — the button itself supplies the circular background, this
   span just paints the ₱ centered with the right optical weight. */
.studio-btn-peso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Monetize toggle — green-tinted when active (mirrors the universal
   "money / earning / on" color cue used everywhere else in the
   product), neutral grey when off. Sized down to a small circle so
   it reads as a "coin" rather than a generic 34px action square. */
.studio-btn-monetize {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.studio-btn-monetize:hover {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.studio-btn-monetize.is-on {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #fff;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.30);
}
.studio-btn-monetize.is-on:hover {
  filter: brightness(1.05);
  transform: scale(1.05);
  color: #fff;
}
body:not(.light) .studio-btn-monetize:hover {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
body:not(.light) .studio-btn-monetize.is-on {
  background: linear-gradient(135deg, #86efac, #22c55e);
  color: #052e16;
}

/* ─── Pagination bar (May 2026) ─── */
.studio-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 244, 255, 0.7), rgba(241, 234, 255, 0.55));
  border: 1px solid rgba(139, 92, 246, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  color: #6b21a8;
  flex-wrap: wrap;
}
.studio-pagination-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.studio-pagination-label {
  color: #7c3aed;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.studio-pagesize-group {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.studio-pagesize-option {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(76, 29, 149, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  min-width: 36px;
}
.studio-pagesize-option:hover:not(.is-selected) {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.studio-pagesize-option:active { transform: scale(0.97); }
.studio-pagesize-option.is-selected {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.95));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(60, 20, 120, 0.25),
    0 3px 10px rgba(124, 58, 237, 0.35);
}
.studio-pagination-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.studio-pagination-info {
  color: #6b21a8;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 100px;
  text-align: right;
}
.studio-pagination-btn {
  appearance: none;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.studio-pagination-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.22);
  color: #5b21b6;
  transform: scale(1.05);
}
.studio-pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Dark-mode variants */
body:not(.light) .studio-pagination {
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.55), rgba(28, 16, 50, 0.45));
  border-color: rgba(139, 92, 246, 0.22);
  color: #d8b4fe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body:not(.light) .studio-pagination-label,
body:not(.light) .studio-pagination-info {
  color: #c4b5fd;
}
body:not(.light) .studio-pagesize-group {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.28);
}
body:not(.light) .studio-pagesize-option {
  color: rgba(196, 181, 253, 0.7);
}
body:not(.light) .studio-pagesize-option:hover:not(.is-selected) {
  background: rgba(139, 92, 246, 0.20);
  color: #ddd6fe;
}
body:not(.light) .studio-pagesize-option.is-selected {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.95));
  color: #fff;
}
body:not(.light) .studio-pagination-btn {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
body:not(.light) .studio-pagination-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.30);
  color: #e9d5ff;
}

/* ─── Empty state ─── */
.studio-empty {
  text-align: center;
  padding: 4rem 2rem;
}

.studio-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
}

.studio-empty h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.studio-empty p {
  color: #6b7280;
  margin: 0;
  font-size: 0.93rem;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .studio-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .studio-col-likes,
  .studio-col-status {
    display: none;
  }
}

@media (max-width: 640px) {
  #studioPage {
    padding: 1rem 1rem 2rem;
  }
  .studio-header {
    flex-direction: column;
    align-items: stretch;
  }
  .studio-thumb {
    width: 90px;
    height: 51px;
  }
  .studio-col-date {
    display: none;
  }
}

/* ════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════ */

body:not(.light) .studio-header {
  border-bottom-color: rgba(168, 85, 247, 0.18);
}

body:not(.light) .studio-subtitle {
  color: #9ca3af;
}

body:not(.light) .studio-stat {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body:not(.light) .studio-stat:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.15);
}

body:not(.light) .studio-stat-value {
  color: #f3f4f6;
}

body:not(.light) .studio-stat-label {
  color: #9ca3af;
}

body:not(.light) .studio-search input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}

body:not(.light) .studio-search input::placeholder {
  color: #6b7280;
}

body:not(.light) .studio-toolbar-info {
  color: #9ca3af;
}

body:not(.light) .studio-table-wrap {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body:not(.light) .studio-table thead {
  background: rgba(168, 85, 247, 0.07);
}

body:not(.light) .studio-table th {
  color: #9ca3af;
  border-bottom-color: rgba(168, 85, 247, 0.15);
}

body:not(.light) .studio-table td {
  color: #e5e7eb;
  /* No row/column borders in dark mode either. Border-less aesthetic. */
}

body:not(.light) .studio-table tbody tr:hover {
  background: rgba(168, 85, 247, 0.06);
}

body:not(.light) .studio-row-title {
  color: #f3f4f6;
}

body:not(.light) .studio-row-desc {
  color: #9ca3af;
}

body:not(.light) .studio-cell-muted {
  color: #9ca3af;
}

body:not(.light) .studio-badge-ready,
body:not(.light) .studio-badge-published {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

body:not(.light) .studio-badge-processing {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}

body:not(.light) .studio-badge-scheduled {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}

body:not(.light) .studio-badge-private,
body:not(.light) .studio-badge-failed {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

body:not(.light) .studio-btn {
  color: #9ca3af;
}

body:not(.light) .studio-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

body:not(.light) .studio-btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

body:not(.light) .studio-empty h3 {
  color: #f3f4f6;
}

body:not(.light) .studio-empty p {
  color: #9ca3af;
}

body:not(.light) .studio-empty-icon {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(99, 102, 241, 0.15));
  color: #c084fc;
}

/* ════════════════════════════════════════════════════════════════════════════
   POST ACTION MENU — kebab (⋮) on all posts (own gets Pin/Delete menu)
   + REPORT MODAL
   ════════════════════════════════════════════════════════════════════════════ */

.post-menu-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.12s ease;
  margin-left: auto;
}
.post-menu-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  color: #4c1d95;
}
.post-menu-btn:active { transform: scale(0.92); }
.post-menu-glyph {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: -2px;
}

body:not(.light) .post-menu-btn { color: #9ca3af; }
body:not(.light) .post-menu-btn:hover {
  background: rgba(167, 139, 250, 0.15);
  color: #ddd6fe;
}

/* Floating dropdown menu — minimalist, premium */
.post-action-menu {
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 10, 28, 0.12), 0 2px 6px rgba(15, 10, 28, 0.06);
  padding: 0.3rem;
  min-width: 180px;
  z-index: 9999;
  animation: pamFadeIn 0.14s ease;
}
@keyframes pamFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.post-action-menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #1f2937;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.post-action-menu button:hover { background: rgba(124, 58, 237, 0.06); }

/* Subtle hairline separator above the destructive action */
.post-action-menu button.pam-danger {
  margin-top: 0.25rem;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  padding-top: 0.7rem;
  border-radius: 0 0 8px 8px;
  color: #dc2626;
}
.post-action-menu button.pam-danger:hover { background: rgba(239, 68, 68, 0.06); color: #b91c1c; }

body:not(.light) .post-action-menu {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}
body:not(.light) .post-action-menu button { color: #e5e7eb; }
body:not(.light) .post-action-menu button:hover { background: rgba(167, 139, 250, 0.10); }
body:not(.light) .post-action-menu button.pam-danger {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #f87171;
}
body:not(.light) .post-action-menu button.pam-danger:hover { background: rgba(248, 113, 113, 0.10); color: #fca5a5; }

/* ════════════════════════════════════════════════════════════════════════════
   LINK PREVIEWS — YouTube thumbnail + generic favicon card
   ════════════════════════════════════════════════════════════════════════════ */

.link-preview {
  display: block;
  margin: 0.7rem 0 0.25rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  background: white;
}
.link-preview:hover {
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 10, 28, 0.06);
}

/* ─── YouTube preview ─── */
.link-preview-youtube { padding: 0; }
.link-preview-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.link-preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.link-preview-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.link-preview-play-badge::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.92);
  position: absolute;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.link-preview-play-badge svg {
  position: relative;
  color: white;
  width: 24px;
  height: 24px;
  margin-left: 3px; /* optical centering of triangle */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.link-preview-platform {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Generic favicon preview ─── */
.link-preview-generic {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
}
.link-preview-favicon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.06);
}
.link-preview-favicon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.link-preview-meta {
  flex: 1;
  min-width: 0;
}
.link-preview-host {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.005em;
}
.link-preview-url {
  font-size: 0.74rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

/* ─── Inside comment bubbles, slightly tighter ─── */
.comment-bubble + .link-preview {
  margin-top: 0.5rem;
  margin-left: 0;
  max-width: 360px;
}

/* ─── Dark mode ─── */
body:not(.light) .link-preview {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .link-preview:hover {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body:not(.light) .link-preview-favicon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
body:not(.light) .link-preview-host { color: #e5e7eb; }
body:not(.light) .link-preview-url  { color: #9ca3af; }

/* ─── Selebox-internal preview (book / video / profile) ───────────────
   Shown when a comment or post body links to selebox.com/<type>/<id>.
   Renders a real cover thumb + title + author instead of the generic
   globe favicon. Layout mirrors the generic preview (flex row) but
   with a taller thumbnail slot so book covers don't get squashed. */
.link-preview-internal {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem 0.6rem 0.6rem;
}
.link-preview-internal .link-preview-cover {
  flex-shrink: 0;
  width: 56px;
  height: 84px; /* 2:3 book aspect — fits videos too via object-fit */
  border-radius: 8px;
  overflow: hidden;
  background: #ece9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.12);
}
.link-preview-internal .link-preview-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.link-preview-internal-fallback {
  font-size: 1.6rem;
  opacity: 0.5;
}
.link-preview-internal .link-preview-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.link-preview-internal .link-preview-platform {
  position: static;
  background: transparent;
  color: var(--purple);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}
.link-preview-internal .link-preview-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-internal .link-preview-sub {
  font-size: 0.74rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skeleton state while we hydrate */
.link-preview-internal.is-loading .link-preview-cover,
.link-preview-skel {
  background: linear-gradient(90deg, #ece9f9 0%, #f5f3fc 50%, #ece9f9 100%);
  background-size: 200% 100%;
  animation: link-preview-shimmer 1.4s infinite linear;
}
.link-preview-skel-line {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ece9f9 0%, #f5f3fc 50%, #ece9f9 100%);
  background-size: 200% 100%;
  animation: link-preview-shimmer 1.4s infinite linear;
  margin-bottom: 4px;
}
.link-preview-skel-line.link-preview-skel-line-short { width: 50%; }
@keyframes link-preview-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
body:not(.light) .link-preview-internal .link-preview-cover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.25);
}
body:not(.light) .link-preview-internal.is-loading .link-preview-cover,
body:not(.light) .link-preview-skel,
body:not(.light) .link-preview-skel-line {
  background: linear-gradient(90deg, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0.18) 50%, rgba(139,92,246,0.10) 100%);
  background-size: 200% 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOKS — minimalist premium header
   ════════════════════════════════════════════════════════════════════════════ */

.books-header-min {
  margin: 0 0 1.4rem;
  padding: 0.4rem 0.1rem 0;
}
.books-title-min {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
@media (max-width: 700px) {
  .books-title-min { font-size: 1.35rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOK RECOMMENDATIONS — horizontal carousel above the main browse grid
   ════════════════════════════════════════════════════════════════════════════ */

.book-recommend-rail {
  margin: 0 0 1.4rem;
  padding: 1rem 0 0.4rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.10);
}

.book-recommend-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
  padding: 0 0.1rem;
}
.book-recommend-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.book-recommend-sub {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 500;
}
body:not(.light) .book-recommend-sub { color: #9ca3af; }

.book-recommend-track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 0.4rem 0.1rem 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.28) transparent;
  /* Right-edge fade — visual cue that there's more */
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, black 0%, black 94%, transparent 100%);
}
.book-recommend-track::-webkit-scrollbar { height: 6px; }
.book-recommend-track::-webkit-scrollbar-track { background: transparent; }
.book-recommend-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #c4b5fd, #a78bfa);
  border-radius: 999px;
}

.recommend-card {
  flex-shrink: 0;
  width: 152px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.recommend-card:hover {
  transform: translateY(-3px);
}
.recommend-card-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  box-shadow: 0 4px 14px rgba(15, 10, 28, 0.08);
  position: relative;
  margin-bottom: 0.55rem;
  transition: box-shadow 0.18s;
}
.recommend-card:hover .recommend-card-cover {
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.18);
}
.recommend-card-cover img {
  width: 100%;
  height: 100%;
  /* `cover` + `top` — see .book-cover img. renderBookRecsRail now also
     pre-crops via _supabaseRatioCrop. */
  object-fit: cover;
  object-position: top;
  display: block;
}
.recommend-card-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.recommend-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.15rem;
}
body:not(.light) .recommend-card-title { color: #f3f4f6; }
.recommend-card-author {
  font-size: 0.72rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.light) .recommend-card-author { color: #9ca3af; }
.recommend-card-meta {
  font-size: 0.68rem;
  color: #9ca3af;
  margin-top: 0.15rem;
}

@media (max-width: 700px) {
  .recommend-card { width: 124px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GENRE PICKER v2 — premium 3-line scrollable, purple-accented
   ════════════════════════════════════════════════════════════════════════════ */

.genre-picker {
  position: relative;
  margin: 0.5rem 0 1.1rem;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.05) 0%, rgba(124, 58, 237, 0.02) 100%),
    #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.genre-picker:focus-within {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* ─── Sticky counter header ─── */
.genre-picker-counter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.genre-picker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.32);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.genre-picker-counter:has(.genre-picker-count:not(:empty)) .genre-picker-count {
  transform: scale(1);
}
/* Bounce on count change is just nice — done via JS class toggle, but baseline is here */

/* ─── Scrollable chip area — exactly 3 rows visible ─── */
.genre-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 0.95rem 0.85rem;
  max-height: 138px;          /* 3 rows × ~38px (chip + gap) + padding */
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.28) transparent;
  /* Subtle fade at bottom edge — visual cue there's more to scroll */
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 88%, rgba(0,0,0,0.4) 100%);
          mask-image: linear-gradient(180deg, black 0%, black 88%, rgba(0,0,0,0.4) 100%);
}
.genre-picker-chips::-webkit-scrollbar { width: 6px; }
.genre-picker-chips::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.genre-picker-chips::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c4b5fd, #a78bfa);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.genre-picker-chips::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

/* ─── Dark mode shell ─── */
body:not(.light) .genre-picker {
  background:
    linear-gradient(180deg, rgba(167, 139, 250, 0.10) 0%, rgba(124, 58, 237, 0.04) 100%),
    rgba(26, 20, 40, 0.6);
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body:not(.light) .genre-picker-counter {
  background:
    linear-gradient(180deg, rgba(26, 20, 40, 0.8), rgba(26, 20, 40, 0.4));
  border-bottom-color: rgba(167, 139, 250, 0.12);
  color: #9ca3af;
}
body:not(.light) .genre-picker-chips::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  border-color: rgba(255, 255, 255, 0.06);
}

.genre-chip {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #374151;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 0.34rem 0.78rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.12s, box-shadow 0.18s;
}
.genre-chip:hover {
  border-color: rgba(124, 58, 237, 0.35);
  color: #5b21b6;
  background: rgba(124, 58, 237, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.10);
}
.genre-chip:active { transform: translateY(0) scale(0.97); }

.genre-chip-active {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border-color: transparent;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.genre-chip-active:hover {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, #6d28d9 0%, #9061f9 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* When 5 are selected, dim the unselected to signal "limit reached" */
.genre-picker-full .genre-chip:not(.genre-chip-active) {
  opacity: 0.55;
}
.genre-picker-full .genre-chip:not(.genre-chip-active):hover {
  opacity: 0.85;
  border-color: #fca5a5;
  color: #b91c1c;
}

body:not(.light) .genre-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
body:not(.light) .genre-chip:hover {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.16);
}
body:not(.light) .genre-chip-active {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body:not(.light) .genre-chip-active:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #9061f9 100%);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ─── Generic modal (used by Report) ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 28, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: bdFade 0.18s ease;
}
@keyframes bdFade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: white;
  border-radius: 20px;
  padding: 1.6rem 1.5rem 1.4rem;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
  animation: cardSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-card h2 {
  margin: 0 0 0.4rem;
  color: #111;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal-sub {
  color: #6b7280;
  font-size: 0.85rem;
  margin: 0 0 1.25rem;
  line-height: 1.45;
}

.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.report-reason {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.report-reason:hover {
  border-color: #c4b5fd;
  background: rgba(124, 58, 237, 0.03);
}
.report-reason.checked {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
}
.report-reason input[type="radio"] {
  margin-top: 0.2rem;
  accent-color: #7c3aed;
  flex-shrink: 0;
  cursor: pointer;
}
.report-reason-text { flex: 1; min-width: 0; }
.report-reason-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111;
  margin-bottom: 0.1rem;
}
.report-reason.checked .report-reason-title { color: #7c3aed; }
.report-reason-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.4;
}

.report-details {
  width: 100%;
  min-height: 72px;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  margin-bottom: 1.1rem;
  color: #1f2937;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.report-details:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}
.modal-actions .btn-ghost {
  background: transparent;
  border: 1.5px solid #e5e7eb;
  color: #6b7280;
  padding: 0.6rem 1.1rem;
  border-radius: 11px;
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.modal-actions .btn-ghost:hover { border-color: #c4b5fd; color: #4c1d95; }

.modal-actions .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border: none;
  padding: 0.65rem 1.25rem;
  border-radius: 11px;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s, opacity 0.18s;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
}
.modal-actions .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
}
.modal-actions .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Dark mode for modal */
body:not(.light) .modal-card {
  background: #1a1428;
  box-shadow: 0 32px 84px rgba(0, 0, 0, 0.6);
}
body:not(.light) .modal-card h2 { color: #f3f4f6; }
body:not(.light) .modal-sub { color: #9ca3af; }
body:not(.light) .report-reason {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
body:not(.light) .report-reason:hover {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.06);
}
body:not(.light) .report-reason.checked {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.10);
}
body:not(.light) .report-reason-title { color: #f3f4f6; }
body:not(.light) .report-reason.checked .report-reason-title { color: #c4b5fd; }
body:not(.light) .report-reason-desc { color: #9ca3af; }
body:not(.light) .report-details {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #e5e7eb;
}
body:not(.light) .report-details::placeholder { color: #6b7280; }
body:not(.light) .modal-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9ca3af;
}
body:not(.light) .modal-actions .btn-ghost:hover {
  border-color: rgba(167, 139, 250, 0.5);
  color: #ddd6fe;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE — kebab menu button + share modal
   ════════════════════════════════════════════════════════════════════════════ */

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.profile-menu-btn {
  /* Pinned to the top-right of .profile-head (which is position:relative) */
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 10px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  z-index: 5;
}
.profile-menu-btn svg { width: 18px; height: 18px; display: block; }
.profile-menu-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  color: #4c1d95;
  border-color: rgba(124, 58, 237, 0.30);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}
.profile-menu-btn:active { transform: scale(0.94); }

body:not(.light) .profile-menu-btn {
  background: rgba(26, 20, 40, 0.6);
  border-color: rgba(167, 139, 250, 0.14);
  color: #d1d5db;
}
body:not(.light) .profile-menu-btn:hover {
  background: rgba(167, 139, 250, 0.20);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}

.profile-action-menu { min-width: 200px; }

/* ── Share modal ───────────────────────────────────────────────── */
.share-modal { max-width: 460px; }

.share-link-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.85rem 0 1rem;
}
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  background: #f5f3ff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  color: #1f2937;
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.share-link-input:focus {
  border-color: rgba(124, 58, 237, 0.45);
  background: white;
}
.share-copy-btn {
  flex-shrink: 0;
  min-width: 80px;
  transition: background 0.15s ease, transform 0.12s ease;
}
.share-copy-btn.copied {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  transform: scale(1.02);
}

.share-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 12px;
  color: #4c1d95;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.share-option:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
}
.share-option:active { transform: translateY(0); }
.share-option-icon {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}

body:not(.light) .share-link-input {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.20);
  color: #e5e7eb;
}
body:not(.light) .share-link-input:focus {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.50);
}
body:not(.light) .share-option {
  background: rgba(167, 139, 250, 0.06);
  border-color: rgba(167, 139, 250, 0.14);
  color: #ddd6fe;
}
body:not(.light) .share-option:hover {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE Phase 2 — skeletons, earned badges, tab counts, follow list modal
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer ──────────────────────────────────────────────── */
@keyframes skelShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-banner,
.skeleton-avatar,
.skeleton-text,
.skeleton-row {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06) 0%, rgba(167, 139, 250, 0.18) 50%, rgba(124, 58, 237, 0.06) 100%);
  background-size: 800px 100%;
  animation: skelShimmer 1.4s infinite linear;
  color: transparent !important;
  border-radius: 8px;
}
.skeleton-banner { min-height: 180px; }
.skeleton-avatar { border-radius: 50%; }
.skeleton-text   { display: inline-block; min-width: 80px; height: 1em; border-radius: 6px; }
.skeleton-text-wide { min-width: 220px; }
.skeleton-row    { height: 56px; margin-bottom: 0.5rem; }

body:not(.light) .skeleton-banner,
body:not(.light) .skeleton-avatar,
body:not(.light) .skeleton-text,
body:not(.light) .skeleton-row {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.06) 0%, rgba(167, 139, 250, 0.20) 50%, rgba(167, 139, 250, 0.06) 100%);
  background-size: 800px 100%;
}

/* Plain-text role label — single word next to the username (Moderator
   / Pioneer / Creator / Writer). No pill, no icon, no background — same
   minimal treatment the mobile app uses. Tightened from earlier:
   smaller, snugger spacing so it reads as a quiet subtitle next to
   the name rather than a separate visual element. */
.profile-role-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text3);
  margin-left: 0.15rem;
  letter-spacing: 0.005em;
  line-height: 1;
  vertical-align: middle;
}
body.light .profile-role-text { color: var(--text3); }

/* ── Earned badges row (legacy container, now wraps the single
   role-text label too) — tightened so the text sits snug next to
   the username + seal rather than floating awkwardly to the right. */
.profile-badges-extra {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  margin-left: 0;
}
.earned-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  cursor: default;
  user-select: none;
}
.earned-badge:hover { transform: translateY(-1px); }
.earned-badge-icon { font-size: 0.78rem; line-height: 1; }

/* Creator — purple gradient (Selebox primary) */
.earned-badge.badge-creator {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
/* Writer — emerald (books vibe) */
.earned-badge.badge-writer {
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  color: white;
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22);
}
/* Pioneer — amber/gold rare-feeling */
.earned-badge.badge-pioneer {
  background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  color: #422006;
  border-color: rgba(217, 119, 6, 0.4);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.22);
}
/* Verified — blue */
.earned-badge.badge-verified {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color: white;
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}
.earned-badge.badge-verified .earned-badge-icon { font-weight: 900; font-size: 0.85rem; }
/* Staff — slate (admin team) */
.earned-badge.badge-staff {
  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
  color: white;
  border-color: rgba(31, 41, 55, 0.4);
}

/* ── Tab count pills ───────────────────────────────────────────────── */
.profile-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 0.45rem;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease;
}
.profile-tab.active .tab-count {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}
body:not(.light) .profile-tab .tab-count {
  background: rgba(167, 139, 250, 0.14);
  color: #c4b5fd;
}

/* ── Follow list modal ─────────────────────────────────────────────── */
.follow-list-modal {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.follow-list-header h2 { margin: 0 0 0.15rem; }
.follow-list-search {
  width: 100%;
  padding: 0.65rem 0.85rem;
  margin: 0.85rem 0 0.6rem;
  background: #f5f3ff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  color: #1f2937;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.follow-list-search:focus {
  border-color: rgba(124, 58, 237, 0.45);
  background: white;
}
.follow-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}
.follow-list-body::-webkit-scrollbar { width: 6px; }
.follow-list-body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.3);
  border-radius: 3px;
}
.follow-list-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.follow-list-row:hover { background: rgba(124, 58, 237, 0.04); }
.follow-list-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.follow-list-avatar:hover { transform: scale(1.05); }
.follow-list-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.follow-list-info {
  flex: 1;
  min-width: 0;
}
.follow-list-name {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1f2937;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.005em;
}
.follow-list-name:hover { color: #7c3aed; }
.follow-list-bio {
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.follow-list-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.95rem;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.15s;
  letter-spacing: 0.01em;
  min-width: 88px;
}
.follow-list-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.30); }
.follow-list-btn:active { transform: translateY(0); }
.follow-list-btn:disabled { opacity: 0.6; cursor: progress; }
.follow-list-btn.is-following {
  background: transparent;
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.4);
}
.follow-list-btn.is-following:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.4);
  color: #dc2626;
}
.follow-list-btn.is-following:hover::after { content: ''; }
.follow-list-you {
  flex-shrink: 0;
  padding: 0.35rem 0.85rem;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}
.follow-list-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
}
.follow-list-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

body:not(.light) .follow-list-search {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.20);
  color: #e5e7eb;
}
body:not(.light) .follow-list-search:focus {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.50);
}
body:not(.light) .follow-list-row:hover { background: rgba(167, 139, 250, 0.08); }
body:not(.light) .follow-list-name { color: #f3f4f6; }
body:not(.light) .follow-list-name:hover { color: #c4b5fd; }
body:not(.light) .follow-list-bio { color: #9ca3af; }
body:not(.light) .follow-list-btn.is-following {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.45);
}
body:not(.light) .follow-list-btn.is-following:hover {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
body:not(.light) .follow-list-you {
  background: rgba(167, 139, 250, 0.14);
  color: #ddd6fe;
}
body:not(.light) .follow-list-empty { color: #9ca3af; }

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE Phase 3 — Pinned posts + Mutual followers strip
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Pinned post tag (📌 sits above the post header) ──────────────── */
.post-card.is-pinned {
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.025) 0%, transparent 60px);
  position: relative;
}
.post-pinned-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(167, 139, 250, 0.14) 100%);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 999px;
  color: #6d28d9;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
  width: fit-content;
}
.post-pinned-tag svg { display: block; }
body:not(.light) .post-card.is-pinned {
  border-color: rgba(167, 139, 250, 0.22);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, transparent 60px);
}
body:not(.light) .post-pinned-tag {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.18) 100%);
  border-color: rgba(167, 139, 250, 0.30);
  color: #c4b5fd;
}

/* ── Section header (Pinned / Posts dividers on profile feed) ─────── */
.profile-section-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.95rem 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6d28d9;
  border-top: 1px solid transparent;
}
.profile-section-header:first-child { padding-top: 0.25rem; }
.profile-section-header svg { display: block; opacity: 0.85; }
body:not(.light) .profile-section-header { color: #c4b5fd; }

/* ── Mutual followers strip ────────────────────────────────────────── */
.profile-mutuals {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.7rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(167, 139, 250, 0.06) 100%);
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 12px;
  font-size: 0.84rem;
  color: #4b5563;
  flex-wrap: wrap;
}
.mutual-avatars {
  display: inline-flex;
  flex-shrink: 0;
}
.mutual-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border: 2px solid #faf5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  margin-left: -8px;
  padding: 0;
  transition: transform 0.12s ease, z-index 0s;
  position: relative;
}
.mutual-avatar:first-child { margin-left: 0; }
.mutual-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mutual-avatar span { line-height: 1; }
.mutual-avatar:hover {
  transform: translateY(-2px) scale(1.1);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.30);
}
.mutual-text {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.mutual-name,
.mutual-more {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: #6d28d9;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.mutual-name:hover,
.mutual-more:hover { text-decoration: underline; }

.mutuals-skel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.mutuals-skel-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.10) 0%, rgba(167, 139, 250, 0.22) 50%, rgba(124, 58, 237, 0.10) 100%);
  background-size: 800px 100%;
  animation: skelShimmer 1.4s infinite linear;
  margin-left: -8px;
}
.mutuals-skel-dot:first-child { margin-left: 0; }
.mutuals-skel-text {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  margin-left: 0.4rem;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06) 0%, rgba(167, 139, 250, 0.18) 50%, rgba(124, 58, 237, 0.06) 100%);
  background-size: 800px 100%;
  animation: skelShimmer 1.4s infinite linear;
}

body:not(.light) .profile-mutuals {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.06) 0%, rgba(167, 139, 250, 0.10) 100%);
  border-color: rgba(167, 139, 250, 0.16);
  color: #cbd5e1;
}
body:not(.light) .mutual-avatar {
  border-color: #1a1428;
}
body:not(.light) .mutual-name,
body:not(.light) .mutual-more {
  color: #c4b5fd;
}

/* ════════════════════════════════════════════════════════════════════════════
   DIRECT MESSAGES — Phase 1 (FB Messenger-style with purple)
   ════════════════════════════════════════════════════════════════════════════ */

/* Sidebar unread badge */
.sidebar-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.40);
  pointer-events: none;
}
.sidebar-item { position: relative; }

/* Two-pane shell — full-page Messenger.com style */
#messagesPage { padding: 0; max-width: none; }
.dm-shell {
  display: flex;
  height: calc(100vh - 70px);   /* topbar offset */
  background: var(--bg2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ── LEFT PANE — conversation list ──────────────────────────────────────── */
.dm-sidebar {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg2);
}
.dm-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.5rem;
}
.dm-sidebar-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dm-new-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.12s;
}
.dm-new-btn:hover { background: rgba(124, 58, 237, 0.18); transform: scale(1.05); }

.dm-search-wrap {
  position: relative;
  margin: 0.4rem 1rem 0.85rem;
}
.dm-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
#dmSearchInput {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.2rem;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.86rem;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
#dmSearchInput:focus {
  background: white;
  border-color: rgba(124, 58, 237, 0.30);
}

/* Conversation list scroll area */
.dm-conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.25) transparent;
}
.dm-conv-list::-webkit-scrollbar { width: 6px; }
.dm-conv-list::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.25); border-radius: 3px; }

.dm-conv-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.15s ease;
  margin-bottom: 0.15rem;
  position: relative;
}
.dm-conv-item:hover { background: rgba(124, 58, 237, 0.06); }
.dm-conv-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.14));
  border: 1px solid rgba(124, 58, 237, 0.18);
}
.dm-conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
}
/* Clip the image into a circle directly on the <img> element. This is
   independent of the parent's overflow setting, so when the Secret-badge
   variant relaxes overflow to `visible` (so the badge can extend past
   the circle), the photo itself still renders as a circle. */
.dm-conv-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dm-conv-meta { flex: 1; min-width: 0; }
.dm-conv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.dm-conv-name {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.dm-conv-time {
  font-size: 0.72rem;
  color: var(--text3);
  flex-shrink: 0;
}
.dm-conv-preview {
  font-size: 0.82rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}
.dm-conv-item.has-unread .dm-conv-name,
.dm-conv-item.has-unread .dm-conv-preview {
  font-weight: 700;
  color: var(--text);
}
.dm-conv-unread {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
}

/* Skeleton + empty state */
.dm-conv-skel {
  height: 64px;
  margin: 0.15rem 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06), rgba(167, 139, 250, 0.16), rgba(124, 58, 237, 0.06));
  background-size: 800px 100%;
  animation: skelShimmer 1.4s infinite linear;
}
.dm-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text3);
}
.dm-empty-icon { font-size: 2.5rem; opacity: 0.5; margin-bottom: 0.5rem; }
.dm-empty-list h3 { margin: 0.3rem 0; font-size: 1rem; color: var(--text); }
.dm-empty-list p { font-size: 0.85rem; margin: 0; }

/* ── RIGHT PANE — active thread ─────────────────────────────────────────── */
.dm-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  min-width: 0;
}
.dm-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--text3);
}
.dm-thread-empty-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.16));
  width: 120px; height: 120px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #7c3aed;
}
.dm-thread-empty h2 { margin: 0.5rem 0; font-size: 1.4rem; color: var(--text); }
.dm-thread-empty p { font-size: 0.95rem; max-width: 320px; margin: 0; }

.dm-thread-active { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Thread header */
.dm-thread-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.dm-back-btn {
  display: none;        /* mobile-only — shown via media query */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  align-items: center;
  justify-content: center;
}
.dm-back-btn:hover { background: rgba(124, 58, 237, 0.08); }
.dm-thread-avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  /* No overflow:hidden — would clip the online dot. The img clips itself. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s;
}
.dm-thread-avatar:hover { transform: scale(1.06); }
.dm-thread-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;        /* circular clipping on the img itself */
}
.dm-online-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg2);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20);
  animation: dmOnlinePulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes dmOnlinePulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.20); }
  50%     { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.05); }
}
.dm-thread-info { flex: 1; min-width: 0; }
.dm-thread-name {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.005em;
}
.dm-thread-name:hover { color: #7c3aed; }
.dm-thread-status {
  font-size: 0.74rem;
  color: var(--text3);
  display: block;
  margin-top: 0.1rem;
}
.dm-thread-menu {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-thread-menu:hover { background: rgba(124, 58, 237, 0.08); color: #6d28d9; }

/* Messages scroll area */
.dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.25) transparent;
}
.dm-messages::-webkit-scrollbar { width: 6px; }
.dm-messages::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.25); border-radius: 3px; }

.dm-loading, .dm-error {
  text-align: center;
  padding: 2rem;
  color: var(--text3);
  font-size: 0.9rem;
}
.dm-error { color: #dc2626; }

.dm-thread-intro {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text2);
}
.dm-thread-intro-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-weight: 700;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.dm-thread-intro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-thread-intro h3 { margin: 0.3rem 0 0.4rem; font-size: 1.2rem; color: var(--text); }
.dm-thread-intro p { font-size: 0.88rem; margin: 0; }

/* Date separator */
.dm-date-sep {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  margin: 0.4rem 0;
}

/* ── BUBBLES ───────────────────────────────────────────────────────────── */
.dm-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  margin: 0.08rem 0;
  max-width: 100%;
}
.dm-bubble-row.mine { justify-content: flex-end; }
.dm-bubble-row.theirs { justify-content: flex-start; }

.dm-bubble-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-bubble-avatar-spacer { width: 26px; flex-shrink: 0; }

.dm-bubble {
  max-width: min(540px, 70%);
  padding: 0.55rem 0.85rem;
  border-radius: 18px;
  font-size: 0.93rem;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  box-shadow: 0 1px 3px rgba(15, 10, 28, 0.04);
  cursor: default;
  position: relative;
}
/* Only newly-arriving bubbles animate in — existing bubbles stay put on
   re-render so the list doesn't flash on every send / read receipt update. */
.dm-bubble.is-new {
  animation: dmBubbleIn 0.18s ease-out;
}
@keyframes dmBubbleIn {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* My bubbles — purple gradient, anchored bottom-right */
.dm-bubble.mine {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.22);
}
.dm-bubble.mine.first-in-group { border-top-right-radius: 18px; }
.dm-bubble.mine:not(.last-in-group) { border-bottom-right-radius: 6px; }
.dm-bubble.mine.last-in-group { border-bottom-right-radius: 6px; }
.dm-bubble.mine:not(.first-in-group):not(.last-in-group) { border-top-right-radius: 6px; }

/* Their bubbles — clean gray with subtle border */
.dm-bubble.theirs {
  background: #f3f4f6;
  color: #1f2937;
  border-bottom-left-radius: 6px;
}
.dm-bubble.theirs.first-in-group { border-top-left-radius: 18px; }
.dm-bubble.theirs:not(.last-in-group) { border-bottom-left-radius: 6px; }
.dm-bubble.theirs:not(.first-in-group):not(.last-in-group) { border-top-left-radius: 6px; }

.dm-bubble a { color: #ddd6fe; text-decoration: underline; }
.dm-bubble.theirs a { color: #6d28d9; }
.dm-bubble-deleted { font-style: italic; }

/* Deleted bubbles: muted ghost style, no hover, no click-react */
.dm-bubble.is-deleted {
  background: rgba(124, 58, 237, 0.06) !important;
  color: #6b7280 !important;
  border: 1px dashed rgba(124, 58, 237, 0.30);
  box-shadow: none !important;
  cursor: default;
}
.dm-bubble.is-deleted:hover { filter: none !important; }
body:not(.light) .dm-bubble.is-deleted {
  background: rgba(167, 139, 250, 0.08) !important;
  color: #9ca3af !important;
  border-color: rgba(167, 139, 250, 0.20);
}

/* Read receipt — tiny avatar UNDER the last-read mine bubble (FB pattern) */
.dm-bubble-read {
  width: 16px; height: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;             /* small gap between bubble and seen avatar */
  margin-right: 2px;            /* nudge away from the very edge */
  align-self: flex-end;         /* anchor to the right (mine side) */
  box-shadow: 0 0 0 2px var(--bg);
  flex-shrink: 0;
}
.dm-bubble-read img { width: 100%; height: 100%; object-fit: cover; }

/* ── COMPOSER ──────────────────────────────────────────────────────────── */
.dm-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.dm-composer-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.dm-composer-btn:hover:not(:disabled) { background: rgba(124, 58, 237, 0.15); transform: scale(1.06); }
.dm-composer-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.dm-composer-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 0.2rem 0.5rem 0.2rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.dm-composer-input-wrap:focus-within {
  border-color: rgba(124, 58, 237, 0.30);
  background: white;
}
#dmInput {
  flex: 1;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0;
  max-height: 120px;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.dm-composer-emoji {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.dm-composer-emoji:hover { background: rgba(124, 58, 237, 0.10); }

.dm-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
  transition: transform 0.12s, box-shadow 0.18s;
}
.dm-send-btn:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 5px 14px rgba(124, 58, 237, 0.45); }
.dm-send-btn:active { transform: scale(0.95); }
/* Plane icon when has text, thumbs-up when empty (FB classic) */
.dm-send-btn .dm-send-icon-plane { display: none; }
.dm-send-btn .dm-send-icon-thumb { display: block; }
.dm-send-btn.has-text .dm-send-icon-plane { display: block; }
.dm-send-btn.has-text .dm-send-icon-thumb { display: none; }

/* ── DARK MODE ─────────────────────────────────────────────────────────── */
body:not(.light) .dm-shell { border-color: rgba(255,255,255,0.06); }
body:not(.light) .dm-sidebar { border-right-color: rgba(255,255,255,0.06); }
body:not(.light) .dm-thread-header { border-bottom-color: rgba(255,255,255,0.06); }
body:not(.light) .dm-composer { border-top-color: rgba(255,255,255,0.06); }
body:not(.light) #dmSearchInput { background: rgba(167, 139, 250, 0.08); color: #e5e7eb; }
body:not(.light) #dmSearchInput:focus { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.50); }
body:not(.light) .dm-conv-item:hover { background: rgba(167, 139, 250, 0.08); }
body:not(.light) .dm-conv-item.active { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.20); }
body:not(.light) .dm-bubble.theirs { background: #2a2440; color: #f3f4f6; }
body:not(.light) .dm-bubble.theirs a { color: #c4b5fd; }
body:not(.light) .dm-composer-input-wrap { background: rgba(167, 139, 250, 0.08); }
body:not(.light) .dm-composer-input-wrap:focus-within { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.45); }
body:not(.light) .dm-bubble-read { box-shadow: 0 0 0 2px var(--bg2); }

/* Group seen badge — stacked overlapping mini avatars (Charles bug
   2026-05-16 / #288). Earlier this used a single .dm-bubble-read with
   a stray initials fallback that produced a "G" character because
   dmState.activeOther is null in groups. The .is-group variant
   resets the round-single-avatar styling and renders a horizontal
   stack instead. */
.dm-bubble-read.is-group {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  margin-top: 4px;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.dm-bubble-read.is-group img,
.dm-bubble-read.is-group span:not(.dm-bubble-read-overflow) {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;        /* overlap */
  border: 1.5px solid #fff;
  box-sizing: content-box;
  object-fit: cover;
}
.dm-bubble-read.is-group > *:first-child { margin-left: 0; }
.dm-bubble-read-overflow {
  margin-left: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #7c3aed;
}
body:not(.light) .dm-bubble-read.is-group img,
body:not(.light) .dm-bubble-read.is-group span:not(.dm-bubble-read-overflow) {
  border-color: var(--bg2);
}
body:not(.light) .dm-bubble-read-overflow { color: #c4b5fd; }

/* ── MOBILE ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .dm-shell { border-radius: 0; height: calc(100vh - 60px); }
  .dm-sidebar { width: 100%; }
  .dm-thread { display: none; }
  .dm-shell.thread-open .dm-sidebar { display: none; }
  .dm-shell.thread-open .dm-thread { display: flex; }
  .dm-back-btn { display: inline-flex; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DMs Phase 2 — typing, presence, reactions, hover menu, edit
   ════════════════════════════════════════════════════════════════════════════ */

/* Bubble wrap holds bubble + reactions stacked under it */
.dm-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(540px, 70%);
  position: relative;
}
.dm-bubble-row.mine .dm-bubble-wrap { align-items: flex-end; }
.dm-bubble-wrap .dm-bubble { max-width: 100%; }

/* Bubble interactions */
.dm-bubble {
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.dm-bubble:hover:not(.dm-typing-bubble) { filter: brightness(0.97); }
.dm-bubble.mine:hover:not(.dm-typing-bubble) { filter: brightness(1.05); }

/* Edited tag */
.dm-edited-tag {
  font-size: 0.68rem;
  opacity: 0.65;
  margin-left: 0.3rem;
  font-style: italic;
  white-space: nowrap;
}
.dm-bubble.mine .dm-edited-tag { color: rgba(255, 255, 255, 0.75); }
.dm-bubble.theirs .dm-edited-tag { color: #6b7280; }

/* ── Typing indicator bubble ─────────────────────────────────────────────── */
.dm-typing-bubble {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 0.7rem 0.9rem !important;
  background: #f3f4f6 !important;
  cursor: default !important;
}
.dm-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  display: inline-block;
  animation: dmTypingPulse 1.2s infinite ease-in-out;
}
.dm-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.dm-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes dmTypingPulse {
  0%, 60%, 100% { transform: scale(0.8); opacity: 0.4; }
  30%           { transform: scale(1.0); opacity: 1.0; }
}
body:not(.light) .dm-typing-bubble { background: #2a2440 !important; }
body:not(.light) .dm-typing-dot { background: #6b7280; }

/* ── Reaction pills (under bubble) ────────────────────────────────────────── */
.dm-bubble-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-bottom: 2px;
}
.dm-rx-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 5px;
  background: white;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 10, 28, 0.06);
  line-height: 1.2;
}
.dm-rx-pill:hover {
  transform: translateY(-1px) scale(1.05);
  border-color: rgba(124, 58, 237, 0.35);
}
.dm-rx-pill.mine {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.18));
  border-color: rgba(124, 58, 237, 0.40);
  color: #6d28d9;
}
.dm-rx-count { font-size: 0.7rem; }
body:not(.light) .dm-rx-pill {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.20);
  color: #d1d5db;
}
body:not(.light) .dm-rx-pill.mine {
  background: rgba(167, 139, 250, 0.20);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}

/* ── Hover action menu (above bubble) ───────────────────────────────────── */
.dm-hover-menu {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15, 10, 28, 0.15), 0 2px 4px rgba(15, 10, 28, 0.06);
  z-index: 9999;
  animation: dmMenuFadeIn 0.14s ease;
}
@keyframes dmMenuFadeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1);    }
}
.dm-hover-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.12s ease;
}
.dm-hover-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  transform: scale(1.1);
}
.dm-hover-btn.dm-hover-danger:hover { background: rgba(239, 68, 68, 0.10); color: #dc2626; }
body:not(.light) .dm-hover-menu {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
body:not(.light) .dm-hover-btn { color: #d1d5db; }
body:not(.light) .dm-hover-btn:hover { background: rgba(167, 139, 250, 0.14); color: #ddd6fe; }
body:not(.light) .dm-hover-btn.dm-hover-danger:hover { background: rgba(248, 113, 113, 0.10); color: #fca5a5; }

/* ── Reaction picker ────────────────────────────────────────────────────── */
.dm-reaction-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 10, 28, 0.18);
  z-index: 10000;
  animation: dmMenuFadeIn 0.14s ease;
}
.dm-rx-pick {
  width: 38px; height: 38px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), background 0.12s;
}
.dm-rx-pick:hover {
  transform: scale(1.35) translateY(-3px);
  background: rgba(124, 58, 237, 0.06);
}
body:not(.light) .dm-reaction-picker {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-rx-pick:hover { background: rgba(167, 139, 250, 0.10); }

/* ── Inline edit mode ───────────────────────────────────────────────────── */
.dm-bubble:has(.dm-edit-textarea) {
  padding: 0.5rem 0.6rem !important;
}
.dm-edit-textarea {
  width: 100%;
  min-width: 240px;
  min-height: 60px;
  max-height: 200px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  color: #1f2937;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  outline: none;
  resize: none;
}
.dm-bubble.theirs .dm-edit-textarea { background: white; }
.dm-edit-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  justify-content: flex-end;
}
.dm-edit-cancel,
.dm-edit-save {
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s ease;
}
.dm-edit-cancel {
  background: rgba(255, 255, 255, 0.20);
  color: white;
}
.dm-bubble.theirs .dm-edit-cancel {
  background: rgba(0, 0, 0, 0.06);
  color: #4b5563;
}
.dm-edit-cancel:hover { background: rgba(255, 255, 255, 0.30); }
.dm-bubble.theirs .dm-edit-cancel:hover { background: rgba(0, 0, 0, 0.10); }
.dm-edit-save {
  background: white;
  color: #6d28d9;
}
.dm-bubble.theirs .dm-edit-save {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
}
.dm-edit-save:hover { transform: translateY(-1px); }
body:not(.light) .dm-edit-textarea {
  background: rgba(0, 0, 0, 0.30);
  color: #f3f4f6;
  border-color: rgba(167, 139, 250, 0.45);
}
body:not(.light) .dm-bubble.theirs .dm-edit-textarea { background: rgba(0, 0, 0, 0.30); }

/* Tighten bubble cursor when in edit mode (not clickable) */
.dm-bubble:has(.dm-edit-textarea) { cursor: default; }
.dm-bubble:has(.dm-edit-textarea):hover { filter: none; }

/* ════════════════════════════════════════════════════════════════════════════
   DMs Phase 3 — reply, conv menu, group DMs, search
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Reply preview (above composer) ──────────────────────────────────────── */
.dm-reply-preview {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: rgba(124, 58, 237, 0.05);
  border-top: 1px solid var(--border);
  position: relative;
  animation: dmMenuFadeIn 0.18s ease;
}
.dm-reply-bar {
  width: 3px;
  background: linear-gradient(180deg, #7c3aed, #a78bfa);
  border-radius: 2px;
  flex-shrink: 0;
}
.dm-reply-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.dm-reply-label {
  font-size: 0.74rem;
  color: #6d28d9;
  font-weight: 600;
}
.dm-reply-label strong { color: #4c1d95; }
.dm-reply-text {
  font-size: 0.84rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-reply-cancel {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.12s, color 0.12s;
}
.dm-reply-cancel:hover { background: rgba(124, 58, 237, 0.10); color: #6d28d9; }
body:not(.light) .dm-reply-preview { background: rgba(167, 139, 250, 0.08); border-top-color: rgba(255,255,255,0.06); }
body:not(.light) .dm-reply-label { color: #c4b5fd; }
body:not(.light) .dm-reply-label strong { color: #ddd6fe; }

/* ── Reply quote chip (above bubble in thread) ──────────────────────────── */
.dm-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.7rem;
  background: rgba(124, 58, 237, 0.06);
  border-left: 3px solid rgba(124, 58, 237, 0.45);
  border-radius: 12px 12px 4px 4px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: none;
  margin-bottom: 1px;
  max-width: 100%;
  transition: background 0.15s ease;
}
.dm-reply-quote:hover { background: rgba(124, 58, 237, 0.10); }
.dm-reply-quote-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6d28d9;
}
.dm-reply-quote-body {
  font-size: 0.8rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-reply-quote.mine { align-self: flex-end; }
.dm-reply-quote.theirs { align-self: flex-start; }
.dm-reply-orphan {
  font-style: italic;
  opacity: 0.6;
  cursor: default;
}
body:not(.light) .dm-reply-quote {
  background: rgba(167, 139, 250, 0.08);
  border-left-color: rgba(167, 139, 250, 0.45);
}
body:not(.light) .dm-reply-quote-name { color: #c4b5fd; }

/* ── Sender name (above first bubble in a group stretch) ────────────────── */
.dm-sender-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: 2px;
  margin-left: 6px;
  letter-spacing: 0.01em;
}

/* ── Group avatars (stacked tiles) ──────────────────────────────────────── */
.dm-group-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.dm-group-tile {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2);
}
.dm-group-tile img { width: 100%; height: 100%; object-fit: cover; }
/* List variant: 48px container, 30px tiles */
.dm-conv-avatar.dm-group-avatar { width: 48px; height: 48px; background: transparent; }
.dm-conv-avatar.dm-group-avatar .dm-group-tile-0 { width: 30px; height: 30px; top: 0; left: 0; z-index: 2; }
.dm-conv-avatar.dm-group-avatar .dm-group-tile-1 { width: 30px; height: 30px; bottom: 0; right: 0; z-index: 1; }
/* Header variant: 40px container, 25px tiles */
.dm-group-avatar-header { width: 40px; height: 40px; position: relative; }
.dm-group-avatar-header .dm-group-tile-0 { width: 25px; height: 25px; top: 0; left: 0; z-index: 2; }
.dm-group-avatar-header .dm-group-tile-1 { width: 25px; height: 25px; bottom: 0; right: 0; z-index: 1; }

/* ── Conversation muted badge ──────────────────────────────────────────── */
.dm-conv-muted {
  margin-left: 0.3rem;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* ── Conv actions menu (in thread header) ──────────────────────────────── */
.dm-conv-menu { min-width: 220px; }

/* ── New conversation modal ────────────────────────────────────────────── */
.dm-new-modal { max-width: 540px; width: 100%; }
.dm-new-search {
  width: 100%;
  padding: 0.7rem 0.95rem;
  margin-top: 0.85rem;
  background: #f5f3ff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  color: #1f2937;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.dm-new-search:focus { border-color: rgba(124, 58, 237, 0.45); background: white; }

.dm-new-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.dm-new-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem 0.25rem 0.3rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.18));
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4c1d95;
}
.dm-new-chip img,
.dm-new-chip-init {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-new-chip-x {
  background: rgba(124, 58, 237, 0.20);
  border: none;
  border-radius: 50%;
  width: 18px; height: 18px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: #4c1d95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.dm-new-chip-x:hover { background: rgba(124, 58, 237, 0.35); }

.dm-new-results {
  margin-top: 0.85rem;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.30) transparent;
}
.dm-new-hint {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text3);
  font-size: 0.88rem;
}
.dm-new-result {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.15s;
  margin-bottom: 0.15rem;
}
.dm-new-result:hover { background: rgba(124, 58, 237, 0.06); }
.dm-new-result[data-already-selected="1"] {
  background: rgba(124, 58, 237, 0.10);
}
.dm-new-result-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-new-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-new-result-name { flex: 1; font-weight: 600; font-size: 0.92rem; }
.dm-new-result-check {
  color: #6d28d9;
  font-weight: 700;
  font-size: 1.1rem;
}

.dm-new-name-wrap { margin-top: 0.85rem; }
.dm-new-name {
  width: 100%;
  padding: 0.7rem 0.95rem;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
}
.dm-new-name:focus { border-color: rgba(124, 58, 237, 0.45); background: white; }

body:not(.light) .dm-new-search,
body:not(.light) .dm-new-name {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.20);
  color: #e5e7eb;
}
body:not(.light) .dm-new-result:hover { background: rgba(167, 139, 250, 0.10); }
body:not(.light) .dm-new-chip { color: #ddd6fe; }
body:not(.light) .dm-new-chip-x { background: rgba(167, 139, 250, 0.20); color: #ddd6fe; }

/* ── Global search results (sidebar) ────────────────────────────────────── */
.dm-search-results { padding: 0.5rem 0.5rem 1rem; }
.dm-search-group { margin-bottom: 1rem; }
.dm-search-group-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.4rem 0.6rem 0.25rem;
}
.dm-search-hit {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text2);
  transition: background 0.15s;
  margin-bottom: 0.15rem;
}
.dm-search-hit:hover { background: rgba(124, 58, 237, 0.06); }
.dm-search-hit-time { font-size: 0.7rem; color: var(--text3); }
.dm-search-hit-body {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-search-hit mark {
  background: rgba(124, 58, 237, 0.20);
  color: #4c1d95;
  border-radius: 3px;
  padding: 0 1px;
}
body:not(.light) .dm-search-hit:hover { background: rgba(167, 139, 250, 0.08); }
body:not(.light) .dm-search-hit mark { background: rgba(167, 139, 250, 0.30); color: #ddd6fe; }

/* ════════════════════════════════════════════════════════════════════════════
   DM link previews — external (YouTube/generic) + Selebox-internal cards
   ════════════════════════════════════════════════════════════════════════════ */

/* Generic wrap so external link previews stack nicely under bubbles */
.dm-link-preview-wrap {
  margin-top: 4px;
  max-width: min(540px, 70%);
}
.dm-bubble-row.mine .dm-link-preview-wrap { align-self: flex-end; }
.dm-link-preview-wrap .link-preview { margin: 0; }

/* Selebox-internal preview card — premium purple-tinted */
.dm-internal-preview {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 4px;
  padding: 0;
  width: min(360px, 100%);
  max-width: 100%;
  background: white;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  box-shadow: 0 2px 8px rgba(15, 10, 28, 0.06);
}
.dm-bubble-row.mine .dm-internal-preview { align-self: flex-end; }
.dm-internal-preview:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.40);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18);
}
.dm-internal-preview:active { transform: translateY(0); }

.dm-internal-thumb {
  width: 96px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dm-internal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-internal-placeholder {
  font-size: 1.6rem;
  color: #7c3aed;
}

.dm-internal-meta {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.dm-internal-platform {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6d28d9;
}
.dm-internal-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.005em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dm-internal-sub {
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-internal-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  color: #7c3aed;
  flex-shrink: 0;
}

/* Loading skeleton placeholders */
.dm-internal-skel {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.18) 50%, rgba(124, 58, 237, 0.08) 100%);
  background-size: 800px 100%;
  animation: skelShimmer 1.4s infinite linear;
  border-radius: 6px;
}
.dm-internal-thumb.dm-internal-skel { background-color: rgba(124, 58, 237, 0.10); }
.dm-internal-skel-line { height: 12px; margin-top: 4px; }
.dm-internal-skel-line-short { width: 60%; }
.dm-internal-preview.is-loading {
  cursor: progress;
  pointer-events: none;
}

body:not(.light) .dm-internal-preview {
  background: rgba(167, 139, 250, 0.05);
  border-color: rgba(167, 139, 250, 0.20);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
body:not(.light) .dm-internal-preview:hover {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.40);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
body:not(.light) .dm-internal-thumb {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.20));
}
body:not(.light) .dm-internal-platform { color: #c4b5fd; }
body:not(.light) .dm-internal-title { color: #f3f4f6; }
body:not(.light) .dm-internal-arrow { color: #c4b5fd; }

/* ════════════════════════════════════════════════════════════════════════════
   DMs Phase 4 — image attachments, GIF picker, emoji picker
   ════════════════════════════════════════════════════════════════════════════ */

/* Image inside bubble */
.dm-bubble-image {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  margin: -0.55rem -0.85rem 0.4rem;     /* bleed to bubble edges */
  max-height: 360px;
}
.dm-bubble-image img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  transition: transform 0.18s ease;
}
.dm-bubble-image:hover img { transform: scale(1.02); }
.dm-bubble-image-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 4px;
  pointer-events: none;
}

/* Multi-image gallery — 2-column grid with square cells. Up to 4 visible;
   the 4th cell shows a "+N" overlay when there are more. Layout matches
   the mobile MessageBubble grid so threads look consistent across platforms. */
.dm-bubble-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: -0.55rem -0.85rem 0.4rem;
  border-radius: 14px;
  overflow: hidden;
  max-width: 280px;
}
.dm-bubble-gallery-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.dm-bubble-gallery-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.18s ease;
}
.dm-bubble-gallery-cell:hover img { transform: scale(1.04); }
.dm-bubble-gallery-overflow {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Image-only bubble: tighter padding, transparent gradient (just the image) */
.dm-bubble.is-image-only {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.dm-bubble.is-image-only .dm-bubble-image {
  margin: 0;
  border-radius: 14px;
}
.dm-bubble.mine.is-image-only .dm-bubble-image { border-bottom-right-radius: 6px; }
.dm-bubble.theirs.is-image-only .dm-bubble-image { border-bottom-left-radius: 6px; }

/* Caption under image inside bubble */
.dm-bubble-text { word-wrap: break-word; word-break: break-word; }

/* ── Attach preview strip (above composer when image is staged) ────────── */
.dm-attach-preview {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  background: rgba(124, 58, 237, 0.05);
  border-top: 1px solid var(--border);
  animation: dmMenuFadeIn 0.18s ease;
}
.dm-attach-preview-img {
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(124, 58, 237, 0.08);
}
.dm-attach-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-attach-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.dm-attach-preview-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-attach-preview-size { font-size: 0.7rem; color: var(--text3); }
.dm-attach-preview-cancel {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-attach-preview-cancel:hover { background: rgba(239, 68, 68, 0.10); color: #dc2626; }
body:not(.light) .dm-attach-preview { background: rgba(167, 139, 250, 0.08); border-top-color: rgba(255,255,255,0.06); }

/* ── Attach menu (above the + button) ──────────────────────────────────── */
.dm-attach-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 10, 28, 0.18), 0 2px 6px rgba(15, 10, 28, 0.06);
  z-index: 10000;
  min-width: 170px;
  animation: dmMenuFadeIn 0.14s ease;
}
.dm-attach-menu button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.dm-attach-menu button:hover { background: rgba(124, 58, 237, 0.08); }
.dm-attach-icon {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.18));
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6d28d9;
}
body:not(.light) .dm-attach-menu {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-attach-menu button:hover { background: rgba(167, 139, 250, 0.10); }
body:not(.light) .dm-attach-icon { color: #c4b5fd; }

/* ── GIF picker ────────────────────────────────────────────────────────── */
.dm-gif-picker {
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 10, 28, 0.20), 0 4px 12px rgba(15, 10, 28, 0.08);
  z-index: 10000;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dmMenuFadeIn 0.18s ease;
}
.dm-gif-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.dm-gif-search {
  flex: 1;
  padding: 0.55rem 0.85rem;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.dm-gif-search:focus { border-color: rgba(124, 58, 237, 0.30); background: white; }
.dm-gif-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.08);
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text2);
}
.dm-gif-close:hover { background: rgba(124, 58, 237, 0.18); }
.dm-gif-grid {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;  /* rows size to actual tile height, not stretched */
  align-content: start;          /* don't justify-content vertical when few results */
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.30) transparent;
}
.dm-gif-tile {
  background: rgba(124, 58, 237, 0.05);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  aspect-ratio: 4 / 3;          /* consistent tile height regardless of GIF aspect */
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}
.dm-gif-tile:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25); }
.dm-gif-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill tile, crop overflow — looks clean */
  display: block;
}
.dm-gif-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text3);
  font-size: 0.88rem;
}
.dm-gif-setup {
  grid-column: 1 / -1;
  padding: 1.2rem 1rem;
  text-align: center;
  color: var(--text2);
  font-size: 0.85rem;
}
.dm-gif-setup-icon { font-size: 2.2rem; margin-bottom: 0.4rem; }
.dm-gif-setup h4 {
  margin: 0.3rem 0 0.5rem;
  color: var(--text);
  font-size: 1rem;
}
.dm-gif-setup ol {
  text-align: left;
  margin: 0.5rem auto 0.6rem;
  max-width: 280px;
  padding-left: 1.2rem;
  line-height: 1.6;
}
.dm-gif-setup a {
  color: #6d28d9;
  text-decoration: underline;
  font-weight: 600;
}
.dm-gif-setup code {
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  padding: 1px 5px;
  border-radius: 4px;
}
.dm-gif-setup-note {
  font-size: 0.74rem;
  color: var(--text3);
  margin-top: 0.5rem;
}
body:not(.light) .dm-gif-setup a { color: #c4b5fd; }
body:not(.light) .dm-gif-setup code { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
body:not(.light) .dm-gif-picker {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-gif-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
body:not(.light) .dm-gif-search {
  background: rgba(167, 139, 250, 0.08);
  color: #e5e7eb;
}
body:not(.light) .dm-gif-search:focus {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
}

/* ── Emoji picker ──────────────────────────────────────────────────────── */
.dm-emoji-picker {
  background: white;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 10, 28, 0.20);
  z-index: 10000;
  width: 360px;
  max-height: 440px;
  overflow-y: auto;
  padding: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.30) transparent;
  animation: dmMenuFadeIn 0.16s ease;
}
.dm-emoji-group { margin-bottom: 0.6rem; }
.dm-emoji-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.2rem 0.3rem;
  margin-bottom: 0.2rem;
}
.dm-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.dm-emoji-cell {
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.12s ease;
  font-family: inherit;
}
.dm-emoji-cell:hover {
  background: rgba(124, 58, 237, 0.08);
  transform: scale(1.18);
}
body:not(.light) .dm-emoji-picker {
  background: #1a1428;
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-emoji-cell:hover { background: rgba(167, 139, 250, 0.12); }

/* ════════════════════════════════════════════════════════════════════════════
   Video Upload Wizard — 4-phase premium UI
   ════════════════════════════════════════════════════════════════════════════ */

.vu-wizard { min-width: min(720px, 92vw); max-width: 720px; }

/* Stepper */
.vu-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.10);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.03), transparent);
}
.vu-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(124, 58, 237, 0.15);
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.vu-step-pill .vu-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  transition: background 0.18s ease, color 0.18s ease;
}
.vu-step-pill.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border-color: rgba(124, 58, 237, 0.40);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
  transform: scale(1.04);
}
.vu-step-pill.active .vu-step-num { background: rgba(255, 255, 255, 0.22); color: white; }
.vu-step-pill.done {
  border-color: rgba(124, 58, 237, 0.40);
  color: #6d28d9;
}
.vu-step-pill.done .vu-step-num {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
}
.vu-step-line {
  flex: 0 0 22px;
  height: 2px;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 2px;
  transition: background 0.18s ease;
}
.vu-step-line.done { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

body:not(.light) .vu-stepper { border-bottom-color: rgba(167, 139, 250, 0.14); background: linear-gradient(180deg, rgba(167, 139, 250, 0.05), transparent); }
body:not(.light) .vu-step-pill { color: #9ca3af; border-color: rgba(167, 139, 250, 0.18); }
body:not(.light) .vu-step-pill .vu-step-num { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
body:not(.light) .vu-step-pill.done { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.40); }
body:not(.light) .vu-step-line { background: rgba(167, 139, 250, 0.16); }

/* Panels */
.vu-panel { animation: vuFadeIn 0.18s ease-out; }
@keyframes vuFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropzone drag-over visual feedback */
.vu-dropzone.drag-over {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.16));
  border-color: rgba(124, 58, 237, 0.55) !important;
  transform: scale(1.01);
}

/* Selected file summary (Phase 1, after pick) */
.vu-file-summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
}
.vu-preview-box.compact { width: 96px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #000; }
.vu-preview-box.compact video { width: 100%; height: 100%; object-fit: cover; }
.vu-file-meta { flex: 1; min-width: 0; }
.vu-file-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vu-file-size { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.vu-replace-btn {
  margin-top: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 999px;
  color: #6d28d9;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vu-replace-btn:hover { background: rgba(124, 58, 237, 0.08); }
body:not(.light) .vu-file-summary { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.18); }
body:not(.light) .vu-replace-btn { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35); }
body:not(.light) .vu-replace-btn:hover { background: rgba(167, 139, 250, 0.12); }

/* Phase 3 — cards */
.vu-card {
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  margin-bottom: 0.85rem;
  overflow: hidden;
}
.vu-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}
.vu-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.vu-card-sub { font-size: 0.78rem; color: var(--text3); margin-top: 0.15rem; }
.vu-card-body { padding: 0.5rem 1rem 1rem; font-size: 0.85rem; color: var(--text2); }
.vu-card-body.muted { color: var(--text3); font-style: italic; }
.vu-badge-soon {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
}
body:not(.light) .vu-card { background: rgba(167, 139, 250, 0.06); border-color: rgba(167, 139, 250, 0.16); }

/* Toggle */
.vu-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.vu-toggle input { opacity: 0; width: 0; height: 0; }
.vu-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.vu-toggle-slider::before {
  position: absolute;
  content: '';
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.vu-toggle input:checked + .vu-toggle-slider { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.vu-toggle input:checked + .vu-toggle-slider::before { transform: translateX(18px); }
.vu-toggle.disabled .vu-toggle-slider { opacity: 0.4; cursor: not-allowed; }

/* Visibility radios */
.vu-radio-row { display: flex; flex-direction: column; gap: 0.5rem; }
.vu-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: white;
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vu-radio:hover { background: rgba(124, 58, 237, 0.04); }
.vu-radio.active {
  border-color: rgba(124, 58, 237, 0.55);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(167, 139, 250, 0.10));
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.10);
}
.vu-radio input { margin-top: 4px; accent-color: #7c3aed; flex-shrink: 0; }
.vu-radio-content { flex: 1; }
.vu-radio-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.vu-radio.active .vu-radio-title { color: #6d28d9; }
.vu-radio-sub { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.vu-schedule-input {
  margin-top: 0.65rem;
  padding-left: 0.3rem;
}
.vu-schedule-input input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: white;
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}
.vu-schedule-input input:focus { border-color: rgba(124, 58, 237, 0.60); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10); }
body:not(.light) .vu-radio { background: rgba(167, 139, 250, 0.05); border-color: rgba(167, 139, 250, 0.15); }
body:not(.light) .vu-radio:hover { background: rgba(167, 139, 250, 0.10); }
body:not(.light) .vu-radio.active { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.45); }
body:not(.light) .vu-radio.active .vu-radio-title { color: #c4b5fd; }
body:not(.light) .vu-schedule-input input { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.30); color: #e5e7eb; }

.vu-fb-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text3);
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.8rem;
  background: rgba(124, 58, 237, 0.04);
  border-radius: 10px;
}
body:not(.light) .vu-fb-note { background: rgba(167, 139, 250, 0.06); }

/* Phase 4 — Upload hero */
.vu-upload-hero {
  text-align: center;
  padding: 1.2rem 1rem 0.8rem;
}
.vu-upload-icon-wrap {
  width: 88px; height: 88px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.20));
  color: #7c3aed;
  position: relative;
}
.vu-upload-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(124, 58, 237, 0.30);
  border-top-color: #7c3aed;
  animation: vuSpin 1.4s linear infinite;
}
@keyframes vuSpin { to { transform: rotate(360deg); } }
.vu-upload-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.vu-upload-sub { font-size: 0.85rem; color: var(--text3); margin: 0; }
.vu-upload-bytes {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text3);
  margin-top: 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.vu-upload-speed { color: #6d28d9; font-weight: 600; }
body:not(.light) .vu-upload-icon-wrap { background: linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0.24)); color: #c4b5fd; }
body:not(.light) .vu-upload-icon-wrap::after { border-color: rgba(167, 139, 250, 0.30); border-top-color: #c4b5fd; }
body:not(.light) .vu-upload-speed { color: #c4b5fd; }

/* Footer split layout */
.vu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(124, 58, 237, 0.10);
}
.vu-footer-right { display: flex; gap: 0.5rem; align-items: center; }
body:not(.light) .vu-footer { border-top-color: rgba(167, 139, 250, 0.14); }


/* ════════════════════════════════════════════════════════════════════════
 * CHAPTER PUBLISH — state pill + Publish dialog + Wattpad-style success
 * ════════════════════════════════════════════════════════════════════════ */

/* State pill in the chapter editor bar */
.chapter-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.16);
  white-space: nowrap;
}
.chapter-state-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.18);
}
.chapter-state-pill[data-state="draft"]      { background: rgba(148, 163, 184, 0.10); color: #475569; border-color: rgba(148, 163, 184, 0.20); }
.chapter-state-pill[data-state="draft"] .chapter-state-dot { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.20); }
.chapter-state-pill[data-state="published"]  { background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.22); }
.chapter-state-pill[data-state="published"] .chapter-state-dot { background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22); }
.chapter-state-pill[data-state="scheduled"]  { background: rgba(124, 58, 237, 0.10); color: #6d28d9; border-color: rgba(124, 58, 237, 0.22); }
.chapter-state-pill[data-state="scheduled"] .chapter-state-dot {
  background: #a78bfa;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.22);
  animation: cpPulse 1.6s ease-in-out infinite;
}
@keyframes cpPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.65; } }
body:not(.light) .chapter-state-pill[data-state="draft"]     { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.26); }
body:not(.light) .chapter-state-pill[data-state="published"] { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.30); }
body:not(.light) .chapter-state-pill[data-state="scheduled"] { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.30); }

/* Generic ghost button used in the chapter bar */
.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid rgba(124, 58, 237, 0.18);
}
.btn-ghost:hover { background: rgba(124, 58, 237, 0.06); color: var(--text); }
body:not(.light) .btn-ghost { border-color: rgba(167, 139, 250, 0.22); }
body:not(.light) .btn-ghost:hover { background: rgba(167, 139, 250, 0.10); }

/* ── Publish dialog (uses .vu-modal frame) ── */
.cp-modal { max-width: 480px; }
.cp-modal .vu-body { padding: 1rem 1.25rem 0.5rem; }

/* ── Wattpad-style SUCCESS modal ── */
.cp-success-modal {
  max-width: 460px;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
}
.cp-success-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cp-success-close:hover { background: rgba(255, 255, 255, 0.30); }

/* Hero — full-bleed gradient with check burst */
.cp-success-hero {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 45%, #a78bfa 100%);
  color: white;
  padding: 2rem 1.5rem 2.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cp-success-hero::before,
.cp-success-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.cp-success-hero::before { width: 180px; height: 180px; top: -80px; left: -60px; }
.cp-success-hero::after  { width: 120px; height: 120px; bottom: -50px; right: -30px; }
.cp-success-burst {
  width: 72px; height: 72px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: cpBurstIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cpBurstIn {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.cp-success-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.cp-success-sub {
  font-size: 0.88rem;
  margin: 0;
  opacity: 0.92;
  line-height: 1.4;
}

/* Book card — overlaps the hero slightly */
.cp-card {
  display: flex;
  gap: 0.95rem;
  padding: 1rem 1.2rem;
  margin: -1.4rem 1.2rem 0;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.18);
  position: relative;
  z-index: 2;
}
.cp-cover {
  width: 78px;
  height: 110px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.20));
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.18);
}
.cp-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-book-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-chapter-line { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.55rem; }
.cp-chapter-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.10);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  flex-shrink: 0;
}
.cp-chapter-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cp-found-under { margin-top: auto; }
.cp-found-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.35rem;
}
.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.cp-chip {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 999px;
  white-space: nowrap;
}

/* Action buttons */
.cp-success-actions {
  display: flex;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem 1.3rem;
}
.cp-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.06);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cp-action-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.16);
}
.cp-action-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: white;
  border-color: transparent;
}
.cp-action-btn-primary:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.30);
}

/* Dark mode */
body:not(.light) .cp-card { background: #1a1726; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
body:not(.light) .cp-chapter-num { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
body:not(.light) .cp-chip { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.22); }
body:not(.light) .cp-action-btn { background: rgba(167, 139, 250, 0.10); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.22); }
body:not(.light) .cp-action-btn:hover { background: rgba(167, 139, 250, 0.18); }
body:not(.light) .cp-action-btn-primary { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: white; }


/* ════════════════════════════════════════════════════════════════════════════
   COINS + STARS — topbar pill, unlock modal, lock badges, paywalls
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Topbar coin pill ────────────────────────────────────────────────────── */
.topbar-coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem 0.32rem 0.4rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #92400e;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.topbar-coin-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(180, 83, 9, 0.20); }
.topbar-coin-pill:active { transform: translateY(0); }
/* Icon-only wallet pill — collapses around the logo, no padding for
   the now-hidden balance numbers. Used when the pill renders just
   the Goals-Store mark with no inline balances. The balance spans
   stay in the DOM (so existing JS that writes to #topbarCoinBalance
   / #topbarStarBalance keeps working) but are forced hidden here,
   overriding their `display: inline-flex` defaults. */
.topbar-coin-pill.icon-only {
  gap: 0;
  padding: 0.28rem;
  background: transparent;
  border: none;
  box-shadow: none;
}
.topbar-coin-pill.icon-only:hover {
  background: rgba(168, 85, 247, 0.08);
}
.topbar-coin-pill.icon-only .topbar-coin-balance,
.topbar-coin-pill.icon-only .topbar-star-tip {
  display: none !important;
}
.topbar-coin-icon { display: inline-flex; width: 38px; height: 38px; }
.topbar-coin-icon svg,
.topbar-coin-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.topbar-coin-balance { font-size: 0.92rem; min-width: 1ch; }
.topbar-star-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding-left: 0.45rem;
  margin-left: 0.35rem;
  border-left: 1px solid rgba(180, 83, 9, 0.28);
  color: #6b21a8;
  font-size: 0.82rem;
  font-weight: 700;
  background: transparent;
}
.topbar-star-tip svg { display: block; }

body:not(.light) .topbar-coin-pill {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.10));
  border-color: rgba(251, 191, 36, 0.30);
  color: #fde68a;
}
body:not(.light) .topbar-star-tip {
  background: transparent;
  color: #d8b4fe;
  border-left-color: rgba(251, 191, 36, 0.32);
}

/* ── Lock controls (chapter editor + Studio video edit) ──────────────────── */
.lock-controls {
  margin: 1rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 12px;
}
.lock-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.lock-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lock-toggle-track {
  flex-shrink: 0;
  width: 38px; height: 22px;
  background: rgba(17, 24, 39, 0.18);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s ease;
  margin-top: 0.15rem;
}
.lock-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.lock-toggle input:checked + .lock-toggle-track {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.lock-toggle input:checked + .lock-toggle-track .lock-toggle-knob {
  transform: translateX(16px);
}
.lock-toggle-label { display: flex; flex-direction: column; gap: 0.18rem; }
.lock-toggle-title { font-weight: 700; font-size: 0.96rem; }
.lock-toggle-sub { font-size: 0.82rem; color: var(--text2); }

.lock-cost-row {
  display: flex;
  gap: 0.85rem;
  align-items: flex-end;
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(124, 58, 237, 0.18);
  flex-wrap: wrap;
}
.lock-cost-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
}
.lock-cost-row input {
  width: 90px;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  background: #fff;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lock-cost-row input:focus {
  outline: 2px solid rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
}
.lock-cost-hint {
  font-size: 0.74rem;
  color: var(--text2);
  font-style: italic;
  align-self: center;
}

body:not(.light) .lock-cost-row input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f3f4f6; }

/* ── Lock badge on chapter rows ─────────────────────────────────────────── */
/* Flat inline glyph (Wattpad/Webtoon-style). No circle, no shadow — sits on
   the same baseline as the word count for a clean horizontal alignment.
   Sized to match the meta text so the row stays a uniform height. */
.chapter-row.is-locked {
  position: relative;
}
.chapter-row.is-locked .chapter-row-title {
  color: var(--text2);
}
.chapter-row-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;        /* gap before the chapter title */
  margin-left: -0.2rem;        /* nudge closer to the #N badge */
  color: #7c3aed;              /* matches chapter-row-num purple */
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.12s ease;
}
.chapter-row:hover .chapter-row-lock {
  opacity: 1;
}
.chapter-row-lock svg {
  width: 14px;
  height: 14px;
  display: block;              /* kill baseline gap under inline SVG */
}
body:not(.light) .chapter-row-lock {
  color: #a78bfa;              /* lighter purple for dark theme contrast */
}

/* ════════════════════════════════════════════════════════════════════════════
   Editor's Pick badge — premium gold-purple gradient, top-left of book card
   ════════════════════════════════════════════════════════════════════════════ */
.book-editors-pick-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  background: linear-gradient(135deg, #fbbf24 0%, #a78bfa 60%, #7c3aed 100%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  box-shadow:
    0 4px 12px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.book-editors-pick-badge svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
}

/* Admin/mod pick button on book detail */
.book-editors-pick-btn {
  background: rgba(124, 58, 237, 0.06);
  border: 1.5px solid rgba(124, 58, 237, 0.30);
  color: #6b21a8;
}
.book-editors-pick-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.55);
}
.book-editors-pick-btn.is-picked {
  background: linear-gradient(135deg, #fbbf24 0%, #a78bfa 60%, #7c3aed 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
}
.book-editors-pick-btn.is-picked:hover {
  filter: brightness(1.05);
}
body:not(.light) .book-editors-pick-btn {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.32);
  color: #ddd6fe;
}

/* ════════════════════════════════════════════════════════════════════════════
   Video search — Creator channel cards (top of search results)
   ════════════════════════════════════════════════════════════════════════════ */

.video-creators-header {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
  margin: 0.35rem 0.25rem -0.25rem;
}

.video-creators-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.creator-channel-card {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(167,139,250,0.06));
  border: 1.5px solid rgba(124,58,237,0.20);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.2s ease, background 0.18s ease;
}
.creator-channel-card:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(167,139,250,0.10));
  border-color: rgba(124,58,237,0.45);
  box-shadow: 0 6px 18px rgba(124,58,237,0.18);
}

.creator-channel-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
}
.creator-channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.creator-channel-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
}

.creator-channel-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.creator-channel-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-channel-meta {
  font-size: 0.78rem;
  color: var(--text2);
  font-weight: 600;
  margin-top: 0.15rem;
}
.creator-channel-bio {
  font-size: 0.78rem;
  color: var(--text2);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-channel-cta {
  flex-shrink: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #7c3aed;
  white-space: nowrap;
}

body:not(.light) .creator-channel-card {
  background: linear-gradient(135deg, rgba(167,139,250,0.07), rgba(124,58,237,0.08));
  border-color: rgba(167,139,250,0.22);
}
body:not(.light) .creator-channel-card:hover {
  background: linear-gradient(135deg, rgba(167,139,250,0.14), rgba(124,58,237,0.16));
  border-color: rgba(167,139,250,0.45);
}
body:not(.light) .creator-channel-cta { color: #c4b5fd; }

@media (max-width: 600px) {
  .creator-channel-card { min-width: 100%; max-width: 100%; }
  .creator-channel-cta { display: none; }
}

/* ── Reader paywall ────────────────────────────────────────────────────── */
.reader-paywall {
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.reader-paywall-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.reader-paywall h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.reader-paywall p {
  color: var(--text2);
  margin: 0 0 1.4rem;
}
.reader-paywall-pricing {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.reader-paywall-pricing b { font-size: 1.15rem; font-weight: 700; color: #7c3aed; }
.reader-paywall-or { color: var(--text2); font-size: 0.85rem; font-weight: 500; }

/* ── Video paywall (overlay inside player frame) ───────────────────────── */
.video-paywall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 10, 28, 0.92), rgba(15, 10, 28, 0.96));
  color: #fff;
  border-radius: inherit;
  z-index: 5;
}
.video-paywall-icon { font-size: 2.5rem; margin-bottom: 0.6rem; }
.video-paywall h3 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 700; }
.video-paywall p { margin: 0 0 1.1rem; opacity: 0.8; font-size: 0.92rem; }
.video-paywall-pricing {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}
.video-paywall-pricing b { font-size: 1.05rem; color: #fde68a; }
.video-paywall-or { opacity: 0.6; font-size: 0.78rem; }
.video-player-wrap { position: relative; }

/* ── Unlock modal ──────────────────────────────────────────────────────── */
.unlock-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 28, 0.66);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 1rem;
}
.unlock-modal-backdrop.open { opacity: 1; }
.unlock-modal {
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1.6rem;
  width: 100%;
  max-width: 440px;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.unlock-modal-backdrop.open .unlock-modal { transform: translateY(0); }
.unlock-modal-close {
  position: absolute;
  top: 0.7rem; right: 0.9rem;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  color: var(--text2);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: background 0.12s;
}
.unlock-modal-close:hover { background: rgba(0,0,0,0.06); }
.unlock-modal-icon { font-size: 2.5rem; margin-bottom: 0.4rem; }
.unlock-modal h2 { margin: 0 0 0.3rem; font-size: 1.3rem; font-weight: 700; }
.unlock-modal-title { color: var(--text2); margin: 0 0 0.2rem; font-size: 0.92rem; font-style: italic; }
.unlock-modal-sub { color: var(--text2); margin: 0 0 1.4rem; font-size: 0.86rem; }

.unlock-options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
}
.unlock-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.2rem 0.5rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  font: inherit;
  text-align: left;
}
.unlock-option:hover:not(.is-disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(180, 83, 9, 0.22); border-color: #b45309; }
.unlock-option-star { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.unlock-option-star:hover:not(.is-disabled) { box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22); border-color: #7c3aed; }
.unlock-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.unlock-option.is-loading { opacity: 0.6; pointer-events: none; }
.unlock-option-icon { grid-row: 1 / 3; width: 36px; height: 36px; display: inline-flex; align-self: center; }
.unlock-option-icon svg { width: 100%; height: 100%; }
.unlock-option-cost { grid-column: 2; font-size: 1.6rem; font-weight: 800; color: #92400e; line-height: 1; font-variant-numeric: tabular-nums; }
.unlock-option-star .unlock-option-cost { color: #6b21a8; }
.unlock-option-label { grid-column: 3; font-size: 0.86rem; font-weight: 700; color: #92400e; }
.unlock-option-star .unlock-option-label { color: #6b21a8; }
.unlock-option-hint { grid-column: 2 / 4; font-size: 0.74rem; color: rgba(0,0,0,0.55); margin-top: 0.1rem; }

.unlock-or { color: var(--text2); font-size: 0.78rem; font-weight: 600; opacity: 0.7; }
.unlock-need-more { margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--text2); }

body:not(.light) .unlock-modal { background: #1a1726; color: #f3f4f6; }
body:not(.light) .unlock-modal-close { color: #d1d5db; }
body:not(.light) .unlock-modal-close:hover { background: rgba(255,255,255,0.08); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar-star-tip { display: none; }
  .topbar-coin-pill { padding: 0.3rem 0.6rem 0.3rem 0.35rem; font-size: 0.8rem; }
  .unlock-options {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .unlock-or { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   STORE PAGE — coin packs + balance + earn-a-star block
   ════════════════════════════════════════════════════════════════════════════ */

#storePage {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.2rem 1.5rem 4rem;
}

.store-header { margin-bottom: 1.4rem; }
.store-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #7c3aed;
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}
.store-subtitle { color: var(--text2); font-size: 0.94rem; }

/* Two balance cards at the top */
.store-balance-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0;
}
.store-balance-card {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.2rem;
  background: var(--card, #fff);
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 10, 28, 0.04);
}
.store-balance-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.store-balance-star .store-balance-icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}
.store-balance-meta { flex: 1; min-width: 0; }
.store-balance-label {
  font-size: 0.78rem;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 0.18rem;
}
.store-balance-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Clickable balance card variant (May 2026) — both Coins and Stars
   cards become buttons that open the wallet-history modal filtered to
   the matching currency. Cursor + hover lift + "View history →" CTA
   for affordance. */
.store-balance-card-clickable {
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.store-balance-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.10);
  border-color: rgba(139, 92, 246, 0.28);
}
.store-balance-card-clickable:active { transform: translateY(0); }
.store-balance-card-clickable:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
.store-balance-cta {
  margin-top: 0.18rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7c3aed;
  letter-spacing: 0.01em;
}
.store-balance-card-clickable:hover .store-balance-cta { color: #5b21b6; }
body:not(.light) .store-balance-cta { color: #c4b5fd; }
body:not(.light) .store-balance-card-clickable:hover .store-balance-cta { color: #ddd6fe; }

/* ──────────────────────────────────────────────────────────────────
   Wallet history modal — premium redesign (May 2026)
   ──────────────────────────────────────────────────────────────────
   Three visual zones:
     1. Header band — soft gradient backdrop, currency-tinted accent bar
        on top edge, refined close button.
     2. Summary hero — three large stats with glyph-suffixed numbers,
        thin dividers between items, sits flush under the header.
     3. List — date-grouped, card-styled rows with subtle elevation on
        hover and staggered fade-in. Bulk rows lifted via accent strip.
*/
.wallet-history-modal {
  max-width: 600px;
  width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--card-soft, #fff);
  box-shadow:
    0 25px 50px -12px rgba(76, 29, 149, 0.25),
    0 0 0 1px rgba(139, 92, 246, 0.08);
}

/* Header — flat gradient strip with a 2px accent line so the dialog
   feels weighted at the top edge. Title icon sits in a soft tinted
   square (currency-aware). */
.wallet-history-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 1rem;
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.95), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}
.wallet-history-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed, #6d28d9);
  border-radius: 18px 18px 0 0;
}
.wallet-history-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wallet-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(124, 58, 237, 0.10));
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.15);
}
.wallet-history-modal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.10);
  color: #6b21a8;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, color 0.18s;
}
.wallet-history-modal .modal-close:hover {
  background: rgba(139, 92, 246, 0.14);
  color: #5b21b6;
  transform: rotate(90deg);
}

/* Summary hero — three big stats. Soft gradient backdrop, thin
   vertical separators between items, big tabular numbers, glyph
   appended as a faded suffix so the eye registers the currency. */
.wallet-history-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 1.1rem 1.4rem 1.25rem;
  background: linear-gradient(180deg, rgba(244, 240, 255, 0.55), rgba(232, 220, 255, 0.20));
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}
.wallet-history-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0 0.85rem;
  position: relative;
}
.wallet-history-summary-item + .wallet-history-summary-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.18), transparent);
}
.wallet-history-summary-item:first-child { padding-left: 0; }
.wallet-history-summary-item:last-child  { padding-right: 0; }
.wallet-history-summary-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b21a8;
  opacity: 0.82;
}
.wallet-history-summary-value {
  font-size: 1.55rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.wallet-history-summary-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  opacity: 0.85;
  margin-left: 0.18rem;
}
.wallet-history-summary-glyph svg {
  display: block;
}

/* Tiny coin/star glyph inline with the "Bal 514" line on each row. */
.wallet-history-bal-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -1px;
  margin-left: 0.18rem;
  opacity: 0.82;
}
.wallet-history-bal-glyph svg {
  display: block;
}
.wallet-history-summary-positive { color: #15803d; }
.wallet-history-summary-negative { color: #b91c1c; }

/* List container */
.wallet-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.85rem 1rem;
  background: var(--card-soft, #fff);
  scroll-behavior: smooth;
}
.wallet-history-list::-webkit-scrollbar { width: 8px; }
.wallet-history-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 4px;
}
.wallet-history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.40);
}

/* Loading + empty states */
.wallet-history-loading,
.wallet-history-empty {
  text-align: center;
  padding: 2.8rem 1.5rem;
  color: var(--text3);
}
.wallet-history-loading-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 0.75rem;
  border: 3px solid rgba(139, 92, 246, 0.15);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: wallet-history-spin 0.7s linear infinite;
}
@keyframes wallet-history-spin { to { transform: rotate(360deg); } }
.wallet-history-loading-text { font-size: 0.85rem; color: var(--text3); }

.wallet-history-empty-illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(124, 58, 237, 0.08));
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.14);
  margin: 0 auto 0.85rem;
  opacity: 0.92;
}
.wallet-history-empty-illustration svg {
  display: block;
}
body:not(.light) .wallet-history-empty-illustration {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.26), rgba(124, 58, 237, 0.14));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.20);
}
.wallet-history-empty-title { font-size: 1rem; font-weight: 700; color: var(--text2); margin-bottom: 0.35rem; }
.wallet-history-empty-sub   { font-size: 0.85rem; color: var(--text3); max-width: 320px; margin: 0 auto; line-height: 1.4; }

/* Date section divider — small uppercase chip-like header */
.wallet-history-date-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.5rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b21a8;
  opacity: 0.7;
}
.wallet-history-date-divider span {
  flex-shrink: 0;
}
.wallet-history-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), transparent);
}
.wallet-history-date-divider:first-child { padding-top: 0.4rem; }

/* Row card — slight elevation, soft border, generous padding. Each
   row reads as a discrete card with a left icon column and a right
   amount/balance column. */
.wallet-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--card-soft, #fff);
  border: 1px solid rgba(139, 92, 246, 0.06);
  border-radius: 12px;
  margin-bottom: 0.35rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  opacity: 0;
  animation: wallet-history-row-in 0.32s ease-out forwards;
}
@keyframes wallet-history-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wallet-history-row:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.18);
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.18);
}

/* Left-side kind icon — 36px rounded square, currency/direction tint. */
.wallet-history-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.06);
}
.wallet-history-row-credit .wallet-history-row-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(22, 163, 74, 0.10));
  color: #15803d;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}
body:not(.light) .wallet-history-row-icon {
  background: rgba(139, 92, 246, 0.20);
  color: #c4b5fd;
}
body:not(.light) .wallet-history-row-credit .wallet-history-row-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.24), rgba(22, 163, 74, 0.16));
  color: #4ade80;
}

/* Bulk-unlock variant — premium purple gradient bg, left accent strip,
   weighty icon tile. */
.wallet-history-row-bulk {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.10), rgba(139, 92, 246, 0.02));
  border-color: rgba(139, 92, 246, 0.22);
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #a78bfa, #7c3aed) 1;
  position: relative;
}
.wallet-history-row-bulk::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(ellipse at top left, rgba(167, 139, 250, 0.10), transparent 60%);
}
.wallet-history-row-bulk .wallet-history-row-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.40), rgba(124, 58, 237, 0.28));
  color: #5b21b6;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35), 0 2px 6px rgba(124, 58, 237, 0.18);
}
body:not(.light) .wallet-history-row-bulk {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.20), rgba(139, 92, 246, 0.06));
  border-color: rgba(167, 139, 250, 0.30);
}
body:not(.light) .wallet-history-row-bulk .wallet-history-row-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.38), rgba(124, 58, 237, 0.32));
  color: #ddd6fe;
}

/* Row meta column */
.wallet-history-row-meta { flex: 1; min-width: 0; }
.wallet-history-row-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: -0.005em;
}
.wallet-history-row-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

/* BULK pill — purple gradient with inner sheen + subtle drop shadow.
   Slight scale-up on row hover to feel responsive. */
.wallet-history-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.16rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 999px;
  line-height: 1;
  transition: transform 0.18s, box-shadow 0.18s;
}
.wallet-history-pill-bulk {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow:
    0 1px 4px rgba(124, 58, 237, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 0 rgba(76, 29, 149, 0.25);
}
.wallet-history-row:hover .wallet-history-pill-bulk {
  transform: scale(1.05);
  box-shadow:
    0 3px 8px rgba(124, 58, 237, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Sub-line — small grey row beneath the title with category + time. */
.wallet-history-row-sub {
  font-size: 0.74rem;
  color: var(--text3);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-history-row-sub-dot {
  color: var(--text3);
  opacity: 0.45;
}
.wallet-history-row-time {
  font-variant-numeric: tabular-nums;
  color: var(--text3);
  opacity: 0.85;
}

/* Right column — stacked amount + balance-after. Amount is the focal
   point, balance is a muted ledger reference. */
.wallet-history-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
  flex-shrink: 0;
}
.wallet-history-row-amount {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wallet-history-row-balance {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text3);
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.wallet-history-row-credit .wallet-history-row-amount { color: #15803d; }
.wallet-history-row-debit  .wallet-history-row-amount { color: #b91c1c; }

/* Dark mode tuning */
body:not(.light) .wallet-history-modal {
  background: linear-gradient(180deg, #1f1438, #181028);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(139, 92, 246, 0.18);
}
body:not(.light) .wallet-history-header {
  background: linear-gradient(180deg, rgba(60, 35, 100, 0.50), rgba(40, 22, 80, 0));
  border-bottom-color: rgba(139, 92, 246, 0.18);
}
body:not(.light) .wallet-history-icon {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.30), rgba(124, 58, 237, 0.20));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22);
}
body:not(.light) .wallet-history-modal .modal-close {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(167, 139, 250, 0.22);
  color: #ddd6fe;
}
body:not(.light) .wallet-history-modal .modal-close:hover {
  background: rgba(139, 92, 246, 0.30);
  color: #fff;
}
body:not(.light) .wallet-history-summary {
  background: linear-gradient(180deg, rgba(60, 35, 100, 0.55), rgba(40, 22, 80, 0.30));
  border-bottom-color: rgba(139, 92, 246, 0.20);
}
body:not(.light) .wallet-history-summary-item + .wallet-history-summary-item::before {
  background: linear-gradient(180deg, transparent, rgba(196, 181, 253, 0.22), transparent);
}
body:not(.light) .wallet-history-summary-label { color: #c4b5fd; }
body:not(.light) .wallet-history-summary-positive { color: #4ade80; }
body:not(.light) .wallet-history-summary-negative { color: #fca5a5; }
body:not(.light) .wallet-history-date-divider { color: #c4b5fd; }
body:not(.light) .wallet-history-date-divider::after {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.25), transparent);
}
body:not(.light) .wallet-history-list { background: transparent; }
body:not(.light) .wallet-history-row {
  background: rgba(46, 28, 78, 0.55);
  border-color: rgba(139, 92, 246, 0.16);
}
body:not(.light) .wallet-history-row:hover {
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
}
body:not(.light) .wallet-history-row-credit .wallet-history-row-amount { color: #4ade80; }
body:not(.light) .wallet-history-row-debit  .wallet-history-row-amount { color: #fca5a5; }
body:not(.light) .wallet-history-row-balance { color: #c4b5fd; opacity: 0.6; }

/* Narrow-viewport shrinks — keep the modal usable on 360dp screens
   without sacrificing the premium feel. Drop summary numbers, tighten
   row padding, hide balance-after for space. */
@media (max-width: 420px) {
  .wallet-history-summary { padding: 0.9rem 1rem 1rem; }
  .wallet-history-summary-item { padding: 0 0.55rem; }
  .wallet-history-summary-value { font-size: 1.25rem; }
  .wallet-history-summary-glyph { font-size: 0.8rem; }
  .wallet-history-header { padding: 0.95rem 1rem 0.85rem; }
  .wallet-history-list { padding: 0.5rem 0.6rem 0.9rem; }
  .wallet-history-row { padding: 0.7rem 0.75rem; gap: 0.65rem; }
  .wallet-history-row-icon { width: 32px; height: 32px; }
  .wallet-history-row-title { font-size: 0.88rem; }
  .wallet-history-row-amount { font-size: 0.98rem; }
  .wallet-history-row-balance { display: none; }
}

/* Earn-a-star block */
.store-ad-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(245, 158, 11, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  margin-bottom: 2rem;
}
.store-ad-text { flex: 1; }
.store-ad-text h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 800; color: #92400e; }
.store-ad-text p { margin: 0 0 0.55rem; font-size: 0.85rem; color: var(--text2); }
.store-ad-progress {
  height: 5px;
  background: rgba(180, 83, 9, 0.15);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.store-ad-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transition: width 0.3s ease;
}
.store-ad-progress-text { font-size: 0.74rem; color: #92400e; font-weight: 600; }

.btn-amber {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  font-weight: 700;
  padding: 0.65rem 1.2rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: filter 0.12s, transform 0.08s;
}
.btn-amber:hover:not(:disabled) { filter: brightness(1.05); }
.btn-amber:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-amber:active:not(:disabled) { transform: translateY(1px); }

/* Section title for packs */
.store-section-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}
.store-section-sub {
  color: var(--text2);
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
}

/* Pack rows */
.store-packs {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.store-pack {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--card, #fff);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.1s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  box-shadow: 0 2px 8px rgba(15, 10, 28, 0.05);
  position: relative;
}
.store-pack:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 10, 28, 0.10); border-color: rgba(124, 58, 237, 0.35); }
.store-pack.is-loading { opacity: 0.55; pointer-events: none; }
.store-pack.is-best-value {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, #fff, #fffbeb);
  box-shadow: 0 4px 18px rgba(251, 191, 36, 0.16);
}
.store-pack-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  flex-shrink: 0;
}
.store-pack-meta { min-width: 0; }
.store-pack-name {
  font-size: 1.18rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.store-pack-bonus {
  font-size: 0.86rem;
  color: var(--text2);
  margin-bottom: 0.45rem;
}
.store-pack-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.store-pack-bonus-pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: rgba(124, 58, 237, 0.10);
  color: #7c3aed;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.store-pack-best-pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: linear-gradient(135deg, #dcfce7, #a7f3d0);
  color: #15803d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.store-pack-total {
  font-size: 0.8rem;
  color: var(--text2);
}
.store-pack-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.store-pack-price {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.store-pack-buy {
  font-size: 0.7rem;
  color: var(--text2);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.store-disclaimer {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  text-align: center;
  font-size: 0.78rem;
  color: var(--text2);
  font-style: italic;
}

/* Dark mode */
body:not(.light) .store-balance-card,
body:not(.light) .store-pack { background: #1a1726; border-color: rgba(167, 139, 250, 0.16); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
body:not(.light) .store-pack.is-best-value { background: linear-gradient(135deg, #1a1726, #2a1d1a); border-color: rgba(251, 191, 36, 0.55); }
body:not(.light) .store-balance-value { color: #f3f4f6; }

/* Mobile */
@media (max-width: 640px) {
  .store-balance-cards { grid-template-columns: 1fr; }
  .store-pack {
    grid-template-columns: 56px 1fr;
    gap: 0.7rem 0.9rem;
  }
  .store-pack-cta {
    grid-column: 1 / 3;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .store-ad-block { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .btn-amber { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   STORE — "Bring my mobile balance over" banner (Phase 4)
   ════════════════════════════════════════════════════════════════════════════ */

.store-migrate-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.10));
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 14px;
  position: relative;
}
.store-migrate-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: saturate(1.2);
}
.store-migrate-text { flex: 1; min-width: 0; }
.store-migrate-text h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 800;
  color: #6b21a8;
}
.store-migrate-text p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text2);
  line-height: 1.45;
}
.store-migrate-dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  font-size: 1.3rem;
  color: var(--text2);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}
.store-migrate-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--text); }

body:not(.light) .store-migrate-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(167, 139, 250, 0.10));
  border-color: rgba(167, 139, 250, 0.40);
}
body:not(.light) .store-migrate-text h3 { color: #c4b5fd; }

@media (max-width: 640px) {
  .store-migrate-banner { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding-right: 2.2rem; }
  .store-migrate-banner .btn-purple { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REWARDED AD MODAL (Phase 3 — stub for now, AdMob slot later)
   ════════════════════════════════════════════════════════════════════════════ */

.ad-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 28, 0.85);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 1rem;
}
.ad-modal-backdrop.open { opacity: 1; }

.ad-modal {
  background: linear-gradient(160deg, #1a1726, #2a1f3a);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 18px;
  padding: 2rem 1.8rem;
  width: 100%;
  max-width: 440px;
  text-align: center;
  color: #fff;
  position: relative;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ad-modal-backdrop.open .ad-modal { transform: translateY(0) scale(1); }

.ad-modal-tag {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  background: rgba(168, 85, 247, 0.20);
  color: #d8b4fe;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.ad-modal-icon {
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 6px 18px rgba(168, 85, 247, 0.45));
  animation: adIconBob 2.4s ease-in-out infinite;
}
@keyframes adIconBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.ad-modal h2 {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #c4b5fd, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ad-modal-sub {
  margin: 0 0 1.4rem;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.ad-modal-progress {
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.ad-modal-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  border-radius: 999px;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}
.ad-modal-countdown {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.2rem;
}

.ad-modal-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.7);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ad-modal-cancel:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.35);
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH SCREEN — Terms-acceptance checkbox gate
   ════════════════════════════════════════════════════════════════════════════ */

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1.1rem 0 1.9rem;     /* extra breathing room before "Continue with Google" */
  padding: 0.75rem 0.85rem;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.auth-consent:hover { background: rgba(124, 58, 237, 0.07); }
.auth-consent.is-checked { background: rgba(124, 58, 237, 0.10); border-color: var(--purple, #7c3aed); }

.auth-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-consent-box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.auth-consent-box svg {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.18s cubic-bezier(.34, 1.56, .64, 1);
}
.auth-consent.is-checked .auth-consent-box {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: #7c3aed;
}
.auth-consent.is-checked .auth-consent-box svg {
  opacity: 1;
  transform: scale(1);
}

.auth-consent-text {
  font-size: 0.76rem;          /* −1 step (was 0.82rem) */
  line-height: 1.5;
  color: var(--text2, #4b5563);
}
.auth-consent-text a {
  color: var(--purple, #7c3aed);
  font-weight: 600;
  text-decoration: none;
}
.auth-consent-text a:hover { text-decoration: underline; }

/* Disabled sign-in buttons (until consent checked) */
#btnGoogle:disabled,
#btnGuest:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none !important;
  box-shadow: none !important;
}
#btnGoogle:disabled:hover,
#btnGuest:disabled:hover {
  background: inherit;
}

/* Dark-mode variants */
body:not(.light) .auth-consent {
  background: rgba(167, 139, 250, 0.06);
  border-color: rgba(167, 139, 250, 0.22);
}
body:not(.light) .auth-consent:hover { background: rgba(167, 139, 250, 0.12); }
body:not(.light) .auth-consent.is-checked {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.55);
}
body:not(.light) .auth-consent-box {
  background: rgba(255,255,255,0.04);
  border-color: rgba(167, 139, 250, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 6 — Book lock + bulk unlock + time-based video monetization
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Book lock card (author book editor) — premium look ─── */
.book-lock-card {
  margin-top: 1.4rem;
  padding: 1.25rem 1.4rem 1.1rem;
  background: linear-gradient(150deg, rgba(124, 58, 237, 0.045), rgba(251, 191, 36, 0.035));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  position: relative;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.05);
}
/* subtle gradient accent line on top — feels premium */
.book-lock-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7c3aed 30%, #fbbf24 70%, transparent);
  border-radius: 2px;
}
.book-lock-head {
  margin-bottom: 1rem;
}
.book-lock-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.55rem;
}
.book-lock-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
}
.book-lock-sub { font-size: 0.83rem; color: var(--text2); margin-top: 0.25rem; line-height: 1.5; }
.book-lock-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.8rem;
  margin-bottom: 0.85rem;
}
.book-lock-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  cursor: pointer; user-select: none;
  font-weight: 600; font-size: 0.9rem;
  position: relative;
}
.book-lock-toggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
/* Track + knob: visual update when checkbox toggles. The selectors target
   the .lock-toggle-track sibling next to the (hidden) checkbox inside
   .book-lock-toggle — fixes the "click does nothing" bug. */
.book-lock-toggle .lock-toggle-track {
  flex-shrink: 0;
  width: 38px; height: 22px;
  background: rgba(17, 24, 39, 0.18);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s ease;
}
.book-lock-toggle .lock-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.book-lock-toggle input:checked + .lock-toggle-track {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.book-lock-toggle input:checked + .lock-toggle-track .lock-toggle-knob {
  transform: translateX(16px);
}
.book-lock-toggle-text { font-size: 0.92rem; }

.book-lock-from {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.85rem; color: var(--text2); font-weight: 600;
}
.book-lock-from-select,
.book-lock-from input {
  width: 72px; padding: 0.45rem 0.7rem;
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 8px; font: inherit; font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
  background: #fff; color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.book-lock-from-select:disabled,
.book-lock-from input:disabled { opacity: 0.45; cursor: not-allowed; background: rgba(0,0,0,0.02); }
.book-lock-from-select:focus,
.book-lock-from input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.book-lock-warning {
  font-size: 0.78rem; color: #92400e;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.22);
  padding: 0.55rem 0.75rem; border-radius: 8px;
  line-height: 1.45;
}
.book-lock-status {
  font-size: 0.82rem; color: var(--text);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.20);
  padding: 0.6rem 0.8rem; border-radius: 8px;
  line-height: 1.45;
}

body:not(.light) .book-lock-from input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f3f4f6; }
body:not(.light) .book-lock-warning { color: #fcd34d; background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.30); }

/* ─── Bulk-unlock card (book detail page) ─── */
.book-bulk-unlock {
  display: flex; align-items: center; gap: 0.95rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(251, 191, 36, 0.10));
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.08);
}
.book-bulk-unlock-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(124,58,237,0.25));
}
.book-bulk-unlock-meta { flex: 1; min-width: 0; }
.book-bulk-unlock-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.book-bulk-unlock-title strong { color: #7c3aed; }
.book-bulk-unlock-sub {
  font-size: 0.8rem;
  color: var(--text2);
  margin-top: 0.15rem;
}
#btnBulkUnlockBook { white-space: nowrap; }

@media (max-width: 600px) {
  .book-bulk-unlock { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  #btnBulkUnlockBook { width: 100%; }
}

/* ─── Time-based video monetization modal — glass design, purple touch ─── */
/* Minimalist premium: backdrop-filter blur, semi-transparent white,
   compact sizing so it doesn't dominate the player. */
.video-monet-backdrop {
  /* Override .unlock-modal-backdrop's `position: fixed; z-index: 10000` so
     this paywall stays inside .video-player-wrap instead of covering the
     whole viewport (matches the upfront #videoPaywall behavior — fix #196
     scoped that element the same way). Mounting happens in JS — see
     openVideoMonetThresholdDialog in js/app.js. */
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(15, 10, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: inherit;
}
.video-monet-modal {
  max-width: 380px;
  padding: 1.5rem 1.5rem 1.2rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow:
    0 20px 50px rgba(15, 10, 28, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
/* Purple play-icon header — replaces the default emoji */
.video-monet-icon-wrap {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
}
.video-monet-modal h2 {
  font-size: 1.1rem;
  margin: 0 0 0.15rem;
  letter-spacing: -0.01em;
}
.video-monet-modal .unlock-modal-title {
  font-size: 0.84rem;
  margin: 0 0 0.2rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
}
.video-monet-modal .unlock-modal-sub {
  font-size: 0.8rem;
  margin: 0 0 1rem;
  color: var(--text2);
}

.video-monet-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.video-monet-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.85rem 0.5rem 0.7rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(124, 58, 237, 0.14);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.1s ease, box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease;
}
.video-monet-option:hover:not(.is-disabled) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16);
}
.video-monet-option-coin:hover:not(.is-disabled) {
  border-color: #fbbf24;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.20);
}
.video-monet-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.video-monet-option.is-loading { opacity: 0.55; pointer-events: none; }

.video-monet-option-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  margin-bottom: 0.1rem;
}
.video-monet-option-cost {
  font-size: 1.25rem;
  font-weight: 800;
  color: #92400e;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.video-monet-option-cost small {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text2);
  display: block;
  margin-top: 0.05rem;
}
.video-monet-option-star .video-monet-option-cost { color: #6b21a8; }
.video-monet-option-mode {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  padding: 0.16rem 0.5rem;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 999px;
  margin-top: 0.2rem;
}
.video-monet-option-coin .video-monet-option-mode {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}
.video-monet-option-star .video-monet-option-mode {
  background: rgba(124, 58, 237, 0.12);
  color: #6b21a8;
}

/* Auto-pay countdown — thin purple bar that drains over 5 seconds */
.video-monet-countdown {
  margin-top: 0.85rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.video-monet-countdown-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(124, 58, 237, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.video-monet-countdown-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transform-origin: right;
  transition: width 5s linear;
  /* When the dialog mounts, JS sets width:0% then animates to width:100%
     reverse-pattern. Here it starts full and shrinks to 0. */
  width: 100%;
}
.video-monet-countdown:not(.is-cancelled) .video-monet-countdown-fill {
  animation: vmDrain 5s linear forwards;
}
@keyframes vmDrain {
  from { width: 100%; }
  to   { width: 0%;   }
}
.video-monet-countdown.is-cancelled .video-monet-countdown-fill { width: 0%; }
.video-monet-countdown-text {
  font-size: 0.74rem;
  color: var(--text2);
  font-weight: 500;
}
.video-monet-countdown-text strong { color: #6b21a8; font-weight: 700; }

@media (max-width: 480px) {
  .video-monet-modal { max-width: 320px; padding: 1.2rem 1.2rem 1rem; }
  .video-monet-options { grid-template-columns: 1fr 1fr; }
}

body:not(.light) .video-monet-modal {
  background: rgba(26, 20, 40, 0.85);
  border-color: rgba(167, 139, 250, 0.30);
  color: #f3f4f6;
}
body:not(.light) .video-monet-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(167, 139, 250, 0.18);
  color: #f3f4f6;
}
body:not(.light) .video-monet-option:hover:not(.is-disabled) {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.50);
}
body:not(.light) .video-monet-option-cost { color: #fcd34d; }
body:not(.light) .video-monet-option-star .video-monet-option-cost { color: #c4b5fd; }
body:not(.light) .video-monet-countdown-text strong { color: #c4b5fd; }

/* Briefly highlight a post that was navigated to from search results */
/* PRO badge for monetized books in My Books list — gold→purple gradient
   matching the studio video monetize button, but as a text pill to fit the
   horizontal action row */
/* ════════════════════════════════════════════════════════════════════════════
   Site footer — always visible at bottom of every page
   ════════════════════════════════════════════════════════════════════════════ */
.site-footer {
  margin-top: 1.5rem;
  padding: 0.7rem 1.5rem;
  background: rgba(124, 58, 237, 0.03);
  border-top: 1px solid rgba(124, 58, 237, 0.10);
  /* Account for the left sidebar so the footer aligns with main content */
  padding-left: calc(var(--sidebar-w, 240px) + 1.5rem);
}
/* Hide footer on auth screen + during initial auth resolve on refresh */
body.is-auth .site-footer { display: none; }
.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.4;
}
.site-footer-brand-name {
  font-size: 0.85rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.01em;
}
.site-footer-inner a {
  color: var(--text2);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.site-footer-inner a:hover { color: #7c3aed; }
.site-footer-sep {
  color: var(--text2);
  opacity: 0.45;
  user-select: none;
}
.site-footer-copy { color: var(--text2); opacity: 0.85; }
body:not(.light) .site-footer {
  background: rgba(167, 139, 250, 0.04);
  border-top-color: rgba(167, 139, 250, 0.15);
}
@media (max-width: 900px) {
  .site-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
  .site-footer-inner { font-size: 0.74rem; gap: 0.4rem; }
}

.author-book-pro-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.45rem;
  margin-right: 0.4rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  user-select: none;
  cursor: default;
}

.post-card.post-flash {
  animation: postFlash 1.4s ease-out;
}
@keyframes postFlash {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.0); }
  20%  { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.45), 0 8px 24px rgba(124, 58, 237, 0.20); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Post Detail Modal — opens when you click a post from search results
   ════════════════════════════════════════════════════════════════════════════ */
.post-detail-box {
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.post-detail-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.8rem 0;
  flex-shrink: 0;
}
.post-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.2rem 1.2rem;
}
.post-detail-body .post-card {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.post-detail-body .empty,
.post-detail-body .loading {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text2);
}
@media (max-width: 720px) {
  .post-detail-box { max-height: 95vh; }
  .post-detail-body { padding: 0 0.85rem 0.85rem; }
}

body:not(.light) .video-monet-option { background: linear-gradient(135deg, #1a1726, #221a32); border-color: rgba(255,255,255,0.10); }
body:not(.light) .video-monet-option-coin { background: linear-gradient(135deg, #2a1f0c, #3a2812); }
body:not(.light) .video-monet-option-star { background: linear-gradient(135deg, #1a1429, #261a3a); }
body:not(.light) .video-monet-option-cost { color: #fde68a; }
body:not(.light) .video-monet-option-star .video-monet-option-cost { color: #d8b4fe; }
body:not(.light) .video-monet-option-hint { color: rgba(255,255,255,0.55); }
body:not(.light) .video-monet-option-mode { background: rgba(255,255,255,0.10); color: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7 — Author Earnings (in Author dashboard)
   ════════════════════════════════════════════════════════════════════════════ */

.author-earnings-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border, rgba(17, 24, 39, 0.08));
}
.author-earnings-header { margin-bottom: 1.1rem; }
.author-section-sub { color: var(--text2); font-size: 0.88rem; margin-left: 0.4rem; }
.author-section-subtitle {
  font-size: 0.86rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text2);
  margin: 1.5rem 0 0.6rem;
}
/* Withdrawals-under-maintenance banner — sits above the Available /
   Pending balance cards on the Earnings tab so writers see the
   reassurance copy before scanning their numbers. Same intent as the
   mobile banner in earnings.jsx (and same purple-soft chassis as
   BalanceRecoveryBanner). Soft purple wash + purple-tinted border so
   it reads informational, not alarming. */
.author-earnings-maintenance-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 1rem;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.28);
}
.author-earnings-maintenance-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.16);
  color: #7c3aed;
}
.author-earnings-maintenance-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.author-earnings-maintenance-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.author-earnings-maintenance-body {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text2);
}

/* ──────────────────────────────────────────────────────────────
   Earnings breakdown drill-down (Pass C — May 2026 mobile parity).
   Triggered by clicking a per-source tile on the Earnings page.
   Replaces the tab content + tabs while open. Header has a back
   button, the body has a colored summary card + transaction rows.
   ────────────────────────────────────────────────────────────── */
.earnings-breakdown-view { padding-top: 0.25rem; }
.earnings-breakdown-view-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.earnings-breakdown-back {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: rgba(139, 92, 246, 0.08);
  color: #6b21a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.earnings-breakdown-back:hover { background: rgba(139, 92, 246, 0.18); color: #5b21b6; }
.earnings-breakdown-back:active { transform: scale(0.95); }
.earnings-breakdown-view-title {
  margin: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937;
}
.earnings-breakdown-view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: #7c3aed;
}
.earnings-breakdown-view-spacer { width: 36px; flex-shrink: 0; }

/* Summary card — accent-tinted backdrop matches the source family. */
.earnings-breakdown-summary {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(245, 240, 255, 0.95), rgba(232, 220, 255, 0.7));
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(124, 58, 237, 0.08);
  margin-bottom: 1rem;
}
.earnings-breakdown-summary-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b21a8;
}
.earnings-breakdown-summary-amount {
  margin-top: 0.3rem;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.earnings-breakdown-summary-stats {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: center;
  font-size: 0.78rem;
  color: #6b7280;
}
.earnings-breakdown-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.earnings-breakdown-stat svg { color: #b45309; }
.earnings-breakdown-stat:nth-child(3) svg { color: #a855f7; } /* stars row */
.earnings-breakdown-stat-sep { color: #cbd5e1; }

/* Transaction list */
.earnings-breakdown-list { display: flex; flex-direction: column; gap: 0.55rem; }
.earnings-breakdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(139, 92, 246, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.earnings-breakdown-row-text { flex: 1; min-width: 0; }
.earnings-breakdown-row-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.earnings-breakdown-row-date {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #6b7280;
}
.earnings-breakdown-row-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.earnings-breakdown-row-num { font-size: 0.95rem; font-weight: 700; color: #111827; }
.earnings-breakdown-row-suffix { font-size: 0.74rem; color: #6b7280; }

/* Empty + loading states */
.earnings-breakdown-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.85rem;
}
.earnings-breakdown-empty {
  padding: 3rem 1rem 2rem;
  text-align: center;
  color: #6b7280;
}
.earnings-breakdown-empty-icon { color: rgba(139, 92, 246, 0.45); margin-bottom: 0.5rem; }
.earnings-breakdown-empty-title { font-size: 0.95rem; font-weight: 600; color: #4b5563; }
.earnings-breakdown-empty-sub { font-size: 0.8rem; color: #9ca3af; margin-top: 0.3rem; }

/* Pager */
.earnings-breakdown-pager { display: flex; justify-content: center; margin-top: 1.25rem; }

/* Make breakdown tiles look clickable — cursor + chevron + hover lift */
.earnings-breakdown-card-clickable {
  appearance: none;
  border: 1px solid rgba(139, 92, 246, 0.18);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.earnings-breakdown-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
  border-color: rgba(139, 92, 246, 0.34);
}
.earnings-breakdown-card-clickable:active { transform: translateY(0); }
.earnings-breakdown-card-clickable:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.earnings-breakdown-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(139, 92, 246, 0.55);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.earnings-breakdown-card-clickable:hover .earnings-breakdown-chevron {
  color: #7c3aed;
  transform: translateX(2px);
}

/* Dark-mode variants */
body:not(.light) .earnings-breakdown-back {
  background: rgba(139, 92, 246, 0.20);
  border-color: rgba(167, 139, 250, 0.35);
  color: #ddd6fe;
}
body:not(.light) .earnings-breakdown-back:hover { background: rgba(139, 92, 246, 0.30); color: #fff; }
body:not(.light) .earnings-breakdown-view-title { color: #f3f4f6; }
body:not(.light) .earnings-breakdown-summary {
  background: linear-gradient(180deg, rgba(60, 35, 100, 0.65), rgba(40, 22, 80, 0.55));
  border-color: rgba(167, 139, 250, 0.40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.35);
}
body:not(.light) .earnings-breakdown-summary-label  { color: #c4b5fd; }
body:not(.light) .earnings-breakdown-summary-amount { color: #f3f4f6; }
body:not(.light) .earnings-breakdown-summary-stats  { color: #9ca3af; }
body:not(.light) .earnings-breakdown-row {
  background: rgba(40, 24, 70, 0.55);
  border-color: rgba(139, 92, 246, 0.26);
}
body:not(.light) .earnings-breakdown-row-title  { color: #f3f4f6; }
body:not(.light) .earnings-breakdown-row-date   { color: #9ca3af; }
body:not(.light) .earnings-breakdown-row-num    { color: #f3f4f6; }
body:not(.light) .earnings-breakdown-row-suffix { color: #9ca3af; }
body:not(.light) .earnings-breakdown-loading,
body:not(.light) .earnings-breakdown-empty       { color: #9ca3af; }
body:not(.light) .earnings-breakdown-empty-title { color: #d1d5db; }
body:not(.light) .earnings-breakdown-card-clickable {
  background: rgba(40, 24, 70, 0.45);
  border-color: rgba(139, 92, 246, 0.26);
}
body:not(.light) .earnings-breakdown-card-clickable:hover {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Minimalist Earnings page header — replaces the old purple hero
   banner. Just typographic — no card, no border, no decoration. */
.earnings-header {
  /* Top margin trimmed 20px — pulls the header up tight against the
     topbar so the Total earnings / This month tiles surface higher on
     the viewport. Net effect on most desktop widths: header sits ~20px
     closer to the topbar's bottom edge. */
  margin: -20px 0 1rem;
}
.earnings-header-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
}
.earnings-header-caption {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}
body:not(.light) .earnings-header-title   { color: #f3f4f6; }
body:not(.light) .earnings-header-caption { color: #9ca3af; }

/* Lifetime totals row — sits ABOVE the Available / Under-review
   cards. Two large tiles: "Total earnings" + "This month" with a
   month picker. Mirrors mobile's primary hero. */
.author-earnings-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.author-earnings-total-tile {
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(244, 240, 255, 0.65));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(124, 58, 237, 0.06);
}
.author-earnings-total-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.author-earnings-total-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b21a8;
  text-transform: uppercase;
}
.author-earnings-total-php {
  margin-top: 0.4rem;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.author-earnings-total-foot {
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: #6b7280;
}
/* Total-Lifetime tile gets a slight purple accent so it reads as the
   primary indicator on the page. */
.author-earnings-total-lifetime {
  background: linear-gradient(180deg, rgba(245, 240, 255, 0.95), rgba(232, 220, 255, 0.7));
  border-color: rgba(139, 92, 246, 0.28);
}
.author-earnings-total-lifetime .author-earnings-total-label { color: #5b21b6; }
/* Month picker — minimal inline select that matches the tile. */
.author-earnings-month-picker {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.22);
  color: #5b21b6;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 1.6rem 0.25rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  transition: background 0.15s, border-color 0.15s;
}
.author-earnings-month-picker:hover {
  background-color: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}
.author-earnings-month-picker:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}

/* Latest-withdrawal status callout — sits under Available amount.
   Dot color + status copy reflect the state. */
.author-earnings-withdrawal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #6b21a8;
}
.author-earnings-withdrawal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.author-earnings-withdrawal-status.is-pending  { color: #b45309; background: rgba(245, 158, 11, 0.12); }
.author-earnings-withdrawal-status.is-approved { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); }
.author-earnings-withdrawal-status.is-paid     { color: #15803d; background: rgba(34, 197, 94, 0.12); }

/* Dark-mode variants */
body:not(.light) .author-earnings-total-tile {
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.55), rgba(28, 16, 50, 0.45));
  border-color: rgba(139, 92, 246, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(0, 0, 0, 0.35);
}
body:not(.light) .author-earnings-total-lifetime {
  background: linear-gradient(180deg, rgba(60, 35, 100, 0.65), rgba(40, 22, 80, 0.55));
  border-color: rgba(167, 139, 250, 0.40);
}
body:not(.light) .author-earnings-total-label   { color: #c4b5fd; }
body:not(.light) .author-earnings-total-lifetime .author-earnings-total-label { color: #ddd6fe; }
body:not(.light) .author-earnings-total-php     { color: #f3f4f6; }
body:not(.light) .author-earnings-total-foot    { color: #9ca3af; }
body:not(.light) .author-earnings-month-picker {
  background-color: rgba(139, 92, 246, 0.20);
  border-color: rgba(167, 139, 250, 0.35);
  color: #ddd6fe;
}
body:not(.light) .author-earnings-month-picker:hover {
  background-color: rgba(139, 92, 246, 0.30);
}
body:not(.light) .author-earnings-withdrawal-status            { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
body:not(.light) .author-earnings-withdrawal-status.is-pending  { color: #fbbf24; background: rgba(245, 158, 11, 0.18); }
body:not(.light) .author-earnings-withdrawal-status.is-approved { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
body:not(.light) .author-earnings-withdrawal-status.is-paid     { color: #4ade80; background: rgba(34, 197, 94, 0.20); }

.author-earnings-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
/* Minimalist premium earnings cards — peso primary, touch of purple */
.author-earnings-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 16px;
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
.author-earnings-card:hover {
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.06);
}
.author-earnings-available {
  background: linear-gradient(135deg, #ffffff 0%, rgba(167, 139, 250, 0.04) 100%);
  border-color: rgba(124, 58, 237, 0.16);
}
.author-earnings-pending {
  background: #fff;
  border-color: rgba(17, 24, 39, 0.06);
}
.author-earnings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.author-earnings-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text2);
}
.author-earnings-amount-php {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}
.author-earnings-available .author-earnings-amount-php {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.author-earnings-amount-sub {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  margin-top: 0.05rem;
}
.author-earnings-payout-btn {
  align-self: flex-start;
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Disabled state — used while withdrawals are under maintenance.
   Same purple base so the button still reads as the primary action,
   but at ~45% opacity with a not-allowed cursor so users see it's
   intentionally inactive (not just slow to respond). The lock icon
   reinforces the meaning. */
.author-earnings-payout-btn:disabled,
.author-earnings-payout-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.author-earnings-payout-btn-icon {
  display: inline-flex;
  align-items: center;
}
.author-earnings-foot {
  font-size: 0.74rem;
  color: var(--text2);
  margin-top: 0.5rem;
  font-style: normal;
}

/* KYC banner */
.author-kyc-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--border, rgba(17, 24, 39, 0.08));
}
.author-kyc-banner.is-required { background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.25); }
.author-kyc-banner.is-pending  { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.18); }
.author-kyc-banner.is-approved { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.22); }
.author-kyc-banner.is-rejected { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.22); }

.author-kyc-icon { font-size: 1.6rem; flex-shrink: 0; }
.author-kyc-text { flex: 1; min-width: 0; }
.author-kyc-title { font-weight: 700; font-size: 0.95rem; }
.author-kyc-sub { font-size: 0.82rem; color: var(--text2); margin-top: 0.15rem; }

/* Earnings + withdrawals lists */
.author-earnings-list { display: flex; flex-direction: column; gap: 0.4rem; }
.earnings-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(17, 24, 39, 0.06));
  border-radius: 10px;
  font-size: 0.88rem;
}
.earnings-row-type { font-weight: 600; text-transform: capitalize; }
.earnings-row-sub  { font-size: 0.74rem; color: var(--text2); margin-top: 0.1rem; }
.earnings-row-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: #92400e; }
.earnings-row-amount small { font-weight: 600; color: var(--text2); margin-left: 0.2rem; }
.earnings-row-php { font-size: 0.82rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.earnings-row-status {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.earnings-row-status-pending     { background: rgba(217, 119, 6, 0.10); color: #92400e; }
.earnings-row-status-available   { background: rgba(34, 197, 94, 0.10); color: #166534; }
.earnings-row-status-withdrawn   { background: rgba(124, 58, 237, 0.10); color: #6b21a8; }
.earnings-row-status-reversed    { background: rgba(220, 38, 38, 0.10); color: #991b1b; }
.earnings-row-status-w-pending   { background: rgba(217, 119, 6, 0.10); color: #92400e; }
.earnings-row-status-w-approved  { background: rgba(34, 197, 94, 0.10); color: #166534; }
.earnings-row-status-w-paid      { background: rgba(124, 58, 237, 0.10); color: #6b21a8; }
.earnings-row-status-w-rejected  { background: rgba(220, 38, 38, 0.10); color: #991b1b; }
.earnings-row-status-w-cancelled { background: rgba(107, 114, 128, 0.12); color: #374151; }

.page-empty-soft {
  padding: 1.5rem;
  text-align: center;
  color: var(--text2);
  background: rgba(0,0,0,0.02);
  border-radius: 10px;
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .author-earnings-cards { grid-template-columns: 1fr; }
  .author-earnings-totals { grid-template-columns: 1fr; }
  .earnings-row { grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; }
  .earnings-row-php { display: none; }
  .author-kyc-banner { flex-wrap: wrap; }
}

/* Payments Info — locked / read-only state */
.pi-input:read-only,
.pi-input[readonly] {
  background: rgba(0, 0, 0, 0.025);
  cursor: not-allowed;
  color: var(--text2);
}
.pi-method-pill input:disabled + * { cursor: not-allowed; }
.pi-method-pill:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}
.pi-upload.pi-locked {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}
.pi-pending-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.05rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(217,119,6,0.08), rgba(245,158,11,0.06));
  border: 1px solid rgba(217,119,6,0.22);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #92400e;
  line-height: 1.4;
}
body:not(.light) .pi-input:read-only,
body:not(.light) .pi-input[readonly] {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255,255,255,0.55);
}
body:not(.light) .pi-pending-banner {
  background: linear-gradient(135deg, rgba(217,119,6,0.18), rgba(245,158,11,0.12));
  border-color: rgba(217,119,6,0.36);
  color: #fcd34d;
}

/* ════════════════════════════════════════════════════════════════════════════
   Home Feed v1 — For You / Following / Discover tabs (compact)
   ════════════════════════════════════════════════════════════════════════════ */
.feed-tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.2rem 0 0.5rem;
  margin: 0.4rem 0 0.5rem;
}
.feed-tab {
  background: transparent;
  border: none;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.feed-tab:hover {
  background: rgba(124, 58, 237, 0.06);
  color: #6b21a8;
}
.feed-tab.active {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.20);
}
body:not(.light) .feed-tab { color: rgba(255, 255, 255, 0.65); }
body:not(.light) .feed-tab:hover { background: rgba(167, 139, 250, 0.12); color: #ddd6fe; }
body:not(.light) .feed-tab.active { background: linear-gradient(135deg, #a78bfa, #c4b5fd); color: #1a1428; }

@media (max-width: 600px) {
  .feed-tab { padding: 0.3rem 0.7rem; font-size: 0.76rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Withdrawal modal — read-only saved-account card + min-payout popup
   ════════════════════════════════════════════════════════════════════════════ */

.payout-account-card {
  margin: 0.85rem 0 1rem;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(167, 139, 250, 0.07));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
}
.payout-account-head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 0.25rem;
}
.payout-account-method {
  font-size: 1rem;
  font-weight: 800;
  color: #6b21a8;
  margin-bottom: 0.1rem;
}
.payout-account-name {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}
.payout-account-foot {
  font-size: 0.74rem;
  color: var(--text2);
  margin-top: 0.5rem;
  line-height: 1.4;
}
body:not(.light) .payout-account-card {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(124, 58, 237, 0.08));
  border-color: rgba(167, 139, 250, 0.26);
}
body:not(.light) .payout-account-method { color: #c4b5fd; }

/* Pioneer perk banner — only renders when the current user is a Pioneer
   within their exemption window. Solid purple gradient + white text reads
   as a celebratory perk, not a secondary notice. */
.payout-pioneer-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.95rem;
  padding: 0.7rem 0.85rem;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border-radius: 10px;
  box-shadow: 0 4px 14px -4px rgba(124, 58, 237, 0.4);
  color: #ffffff;
}
.payout-pioneer-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.payout-pioneer-text { min-width: 0; line-height: 1.3; }
.payout-pioneer-title { font-size: 0.86rem; font-weight: 700; }
.payout-pioneer-sub   { font-size: 0.74rem; opacity: 0.88; margin-top: 0.1rem; }

/* Receipt-style fee preview. Slim rows under the amount input; updates
   live as the user types. Pioneer-exempt sessions render the fee values
   as "Waived" in green. */
.payout-fee-preview {
  margin: 0.85rem 0 0.55rem;
  padding: 0.7rem 0.85rem;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 10px;
  font-size: 0.85rem;
}
.payout-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.18rem 0;
}
.payout-fee-label  { color: var(--text2); }
.payout-fee-value  { color: var(--text); font-variant-numeric: tabular-nums; }
.payout-fee-row.payout-fee-total {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  font-weight: 700;
}
.payout-fee-row.payout-fee-total .payout-fee-label,
.payout-fee-row.payout-fee-total .payout-fee-value { color: #7c3aed; font-size: 0.95rem; }
.payout-fee-value.is-waived { color: #16a34a; font-weight: 700; }
body:not(.light) .payout-fee-preview { background: rgba(167, 139, 250, 0.06); border-color: rgba(167, 139, 250, 0.18); }
body:not(.light) .payout-fee-row.payout-fee-total .payout-fee-label,
body:not(.light) .payout-fee-row.payout-fee-total .payout-fee-value { color: #c4b5fd; }

/* Min-payout popup */
.min-payout-body {
  text-align: center;
  padding: 0.5rem 0 1rem;
}
.min-payout-icon {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}
.min-payout-msg {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.min-payout-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 auto;
  max-width: 280px;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 10px;
}
.min-payout-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.min-payout-progress-row strong { color: var(--text); }
.min-payout-progress-row-need {
  border-top: 1px dashed rgba(124, 58, 237, 0.25);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}
.min-payout-progress-row-need strong { color: #7c3aed; }

body:not(.light) .min-payout-progress {
  background: rgba(255, 255, 255, 0.04);
}
body:not(.light) .min-payout-progress-row-need strong { color: #c4b5fd; }

/* ════════════════════════════════════════════════════════════════════════════
   Collapsible post bodies — Facebook-style "See more / less" with tap-to-toggle
   ════════════════════════════════════════════════════════════════════════════ */

.collapsible-body {
  position: relative;
  cursor: pointer;
  /* Reserve a tiny right-padding so the toggle text doesn't crowd the edge */
  padding-bottom: 0;
  transition: max-height 0.18s ease;
}
.collapsible-body.is-collapsed {
  /* Plain max-height clip (≈ 6 lines at line-height 1.65) instead of
     -webkit-line-clamp. The line-clamp / -webkit-box combo broke in 3 ways:
     1) absolutely-positioned "See more" toggle was clipped or hidden,
     2) scrollHeight returned the clamped height in Safari → overflow detection
        returned false → toggle never added,
     3) click events on webkit-box elements mis-fired in some browsers.
     A regular block element with max-height + overflow:hidden has none of these
     issues; the gradient fade still hides any partial trailing line. */
  max-height: 9.9em;
  overflow: hidden;
}
/* Soft gradient fade at the bottom of the truncated text — signals "more below" */
.collapsible-body.is-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.4em;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 60%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* Tap-anywhere hint: subtle hover dims the body slightly so users sense it's clickable */
.collapsible-body:hover { filter: brightness(0.985); }

/* The "See more" / "See less" inline label — premium purple, never blue */
.collapsible-toggle {
  display: inline-block;
  margin-top: 0.45rem;
  color: #7c3aed;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.collapsible-toggle:hover {
  color: #6b21a8;
  text-decoration: underline;
}
/* When inside the collapsed body, the toggle floats inline above the gradient */
.collapsible-body.is-collapsed .collapsible-toggle {
  position: absolute;
  bottom: 0.2rem;
  right: 0;
  background: #fff;
  padding: 0 0.3rem 0 0.6rem;
  z-index: 1;
}

/* Dark mode — match the post card bg so the gradient doesn't clash */
body:not(.light) .collapsible-body.is-collapsed::after {
  background: linear-gradient(
    to bottom,
    rgba(15, 10, 28, 0) 0%,
    rgba(15, 10, 28, 0.85) 60%,
    rgba(15, 10, 28, 1) 100%
  );
}
body:not(.light) .collapsible-toggle { color: #c4b5fd; }
body:not(.light) .collapsible-toggle:hover { color: #ddd6fe; }
body:not(.light) .collapsible-body.is-collapsed .collapsible-toggle {
  background: var(--bg2, #1a1428);
}

/* Sign-out confirmation popup */
.signout-body {
  text-align: center;
  padding: 0.5rem 0 1rem;
}
.signout-icon {
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
}
.signout-msg {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
}

body:not(.light) .earnings-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.light) .author-earnings-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.light) .author-earnings-available { background: linear-gradient(135deg, rgba(167,139,250,0.10) 0%, rgba(124,58,237,0.04) 100%); border-color: rgba(167,139,250,0.24); }
body:not(.light) .author-earnings-available .author-earnings-amount-php { background: linear-gradient(135deg, #a78bfa, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body:not(.light) .earnings-breakdown-icon { background: rgba(167,139,250,0.12); color: #c4b5fd; }

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7 — Admin Payouts tab
   ════════════════════════════════════════════════════════════════════════════ */

.payout-card,
.kyc-card {
  background: var(--admin-card, #fff);
  border: 1px solid var(--admin-border, rgba(17, 24, 39, 0.08));
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: 0.75rem;
}
.payout-card-head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--admin-border, rgba(17, 24, 39, 0.06));
}
.payout-author { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; }
.payout-author-name { font-weight: 700; font-size: 0.95rem; }
.payout-author-email { font-size: 0.78rem; color: var(--admin-text-2, #6b7280); }
.payout-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.payout-amount-coins { font-weight: 700; font-size: 1rem; color: #92400e; }
.payout-amount-php { font-size: 0.84rem; color: var(--admin-text-2, #6b7280); margin-top: 0.1rem; }
/* Highlighted peso amount — used in the new admin payout cards where
   "0 coins" was removed and the peso figure is the primary number a
   moderator scans for. Larger, bolder, brand purple. */
.payout-amount-php-lg {
  font-size: 1.4rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -0.02em;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}

/* Status tabs (Pending / Approved / Paid / Rejected / All). Replaced
   the legacy <select> dropdown so a moderator can flip between
   buckets at a glance. Pill-shaped tabs with a count badge per
   status; active tab gets the brand purple. */
.payouts-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0.75rem 0 1rem;
  padding: 4px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 999px;
  width: fit-content;
}
.payouts-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--admin-text-2, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.payouts-status-tab:hover { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
.payouts-status-tab.active {
  background: #7c3aed;
  color: #ffffff;
  font-weight: 800;
}
.payouts-status-tab.active .payouts-status-count { color: rgba(255, 255, 255, 0.8); }
.payouts-status-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* Verification grid + media previews — what the moderator scans
   before approving / paying out. KYC-fed account name, the user-
   provided email + home address, plus thumbnail previews of the
   GCash QR and signature so a moderator can match against the
   destination account at a glance. Click any image to open the
   full-size signed URL in a new tab. */
.payout-verify {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  background: rgba(139, 92, 246, 0.03);
}
.payout-verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  align-content: start;
}
.payout-verify-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.payout-verify-row-wide { grid-column: span 2; }
.payout-verify-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-2, #6b7280);
  font-weight: 700;
  margin-bottom: 2px;
}
.payout-verify-val {
  font-size: 0.86rem;
  color: var(--admin-text, #111827);
  font-weight: 500;
  word-break: break-word;
}
.payout-verify-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.payout-verify-media-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.payout-verify-media-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-2, #6b7280);
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}
.payout-verify-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #f7f5ff;
  border-radius: 6px;
  cursor: zoom-in;
}
.payout-verify-media-empty {
  font-size: 0.78rem;
  color: var(--admin-text-2, #6b7280);
  text-align: center;
  padding: 32px 8px;
  background: #f7f5ff;
  border-radius: 6px;
  font-style: italic;
}

/* Stack the verification grid + media on narrow viewports so the
   thumbnails don't squeeze the data column. */
@media (max-width: 760px) {
  .payout-verify { grid-template-columns: 1fr; }
  .payout-verify-grid { grid-template-columns: 1fr; }
  .payout-verify-row-wide { grid-column: auto; }
}
.payout-status-badge {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.payout-status-badge-pending   { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.payout-status-badge-approved  { background: rgba(34, 197, 94, 0.12); color: #166534; }
.payout-status-badge-paid      { background: rgba(124, 58, 237, 0.12); color: #6b21a8; }
.payout-status-badge-rejected  { background: rgba(220, 38, 38, 0.10); color: #991b1b; }
.payout-status-badge-cancelled { background: rgba(107, 114, 128, 0.12); color: #374151; }

.payout-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem 1rem;
  font-size: 0.84rem;
  color: var(--admin-text, #111827);
  margin-bottom: 0.85rem;
}
.payout-details strong {
  color: var(--admin-text-2, #6b7280);
  font-weight: 600;
  margin-right: 0.3rem;
}
.payout-actions {
  display: flex; gap: 0.5rem;
  flex-wrap: wrap;
}

/* Clickable author chip on book detail page */
.book-detail-author-link {
  background: transparent;
  border: 0;
  padding: 0.4rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.book-detail-author-link:hover { background: rgba(124, 58, 237, 0.08); }
.book-detail-author-link:hover strong { color: #7c3aed; }
.book-detail-author-link strong { transition: color 0.15s ease; }

/* Book-lock toggle: disabled during 90-day grace */
.book-lock-toggle.is-locked-grace { cursor: not-allowed; opacity: 0.85; }
.book-lock-toggle.is-locked-grace .lock-toggle-track,
.book-lock-toggle.is-locked-grace .lock-toggle-knob { cursor: not-allowed; }
.book-lock-toggle.is-locked-grace .book-lock-toggle-text::after {
  content: ' (locked)';
  color: var(--text2);
  font-weight: 500;
  font-size: 0.78rem;
}

/* Per-chapter Premium toggle — disabled state */
.lock-toggle.is-disabled { opacity: 0.55; cursor: not-allowed; }
.lock-toggle.is-disabled .lock-toggle-track { background: rgba(17,24,39,0.10); cursor: not-allowed; }
.lock-toggle.is-disabled .lock-toggle-knob { box-shadow: none; }

/* Upload monetize card — ineligible state (video < 3 min) */
.vu-card.is-ineligible { opacity: 0.6; }
.vu-card.is-ineligible .vu-toggle { cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════════
   EARNINGS PAGE — own sidebar entry, two tabs (Earnings / Payments Info)
   ════════════════════════════════════════════════════════════════════════════ */

#earningsPage { max-width: 920px; margin: 0 auto; padding: 1.4rem 1.5rem 4rem; }

.page-hero-earnings {
  background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(251,191,36,0.05));
  border: 1px solid rgba(124,58,237,0.18);
}

.earnings-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  margin: 1.5rem 0 1.6rem;
  padding-bottom: 0.25rem;
}
.earnings-tab {
  background: transparent;
  border: 0;
  padding: 0.6rem 1.05rem;
  font: inherit; font-weight: 700; font-size: 0.96rem;
  color: var(--text2);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.earnings-tab:hover { background: rgba(17,24,39,0.04); color: var(--text); }
.earnings-tab.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(167,139,250,0.12));
  color: #7c3aed;
}

/* Breakdown cards (Posts / Videos / Books) */
.earnings-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 1.4rem 0 1.5rem;
}
.earnings-breakdown-card {
  display: flex; align-items: center; gap: 0.95rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
.earnings-breakdown-card:hover {
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.05);
}
.earnings-breakdown-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  flex-shrink: 0;
}
.earnings-breakdown-meta { min-width: 0; flex: 1; }
.earnings-breakdown-label {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text2);
  margin-bottom: 0.2rem;
}
.earnings-breakdown-php {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.earnings-breakdown-sub {
  font-size: 0.74rem;
  color: var(--text2);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.payments-info-help {
  padding: 1.2rem 1.4rem;
  background: rgba(0,0,0,0.02);
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text2);
}
.payments-info-help p { margin: 0 0 0.6rem; }
.payments-info-help p:last-child { margin: 0; }
.payments-info-help strong { color: var(--text); font-weight: 700; }

@media (max-width: 720px) {
  .earnings-breakdown { grid-template-columns: 1fr; }
}

body:not(.light) .earnings-breakdown-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body:not(.light) .payments-info-help { background: rgba(255,255,255,0.04); }

/* ════════════════════════════════════════════════════════════════════════════
   PAYMENTS INFO — inline form (Phase 7b)
   Premium feel: white cards, subtle purple accents, large touch targets.
   ════════════════════════════════════════════════════════════════════════════ */

.pi-card {
  background: var(--card, #fff);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  margin-bottom: 0.95rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pi-card:hover { box-shadow: 0 4px 18px rgba(15, 10, 28, 0.05); border-color: rgba(124, 58, 237, 0.18); }

.pi-card-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.pi-card-head-active {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.04), transparent);
}
.pi-card-pill {
  width: 18px; height: 4px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  flex-shrink: 0;
}
.pi-card-pill-active { background: linear-gradient(135deg, #22c55e, #10b981); }
.pi-card-icon-box {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.10));
  color: #7c3aed;
  border-radius: 9px;
  flex-shrink: 0;
}
.pi-card-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.pi-req { color: #dc2626; font-weight: 700; }

.pi-card-body { padding: 1.1rem 1.25rem 1.25rem; }

/* Field rows */
.pi-field { display: block; margin-bottom: 0.95rem; }
.pi-field:last-child { margin-bottom: 0; }
.pi-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
}

.pi-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pi-input::placeholder { color: rgba(107, 114, 128, 0.7); }
.pi-input:hover { border-color: rgba(124, 58, 237, 0.22); }
.pi-input:focus {
  outline: none;
  background: #fff;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

/* Method-of-payment pill grid */
.pi-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.pi-method-pill {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0.95rem 1rem;
  background: rgba(238, 242, 255, 0.6);
  border: 1.5px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  font-weight: 700; font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.pi-method-pill input { position: absolute; opacity: 0; pointer-events: none; }
.pi-method-pill:hover { border-color: rgba(124, 58, 237, 0.35); background: rgba(238, 242, 255, 0.9); }
.pi-method-pill:active { transform: translateY(1px); }
.pi-method-pill.is-checked {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.10));
  border-color: #7c3aed;
  color: #6b21a8;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.16);
}

/* Upload boxes — premium dashed-purple drop targets */
.pi-upload {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  min-height: 200px;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse at top, rgba(167, 139, 250, 0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(167, 139, 250, 0.06) 100%);
  border: 2px dashed rgba(124, 58, 237, 0.32);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  overflow: hidden;
}
.pi-upload::before {
  /* Subtle inner glow that intensifies on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.pi-upload:hover {
  border-color: rgba(124, 58, 237, 0.62);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.12);
}
.pi-upload:hover::before { opacity: 1; }
.pi-upload.is-uploading { opacity: 0.6; cursor: wait; }

.pi-upload-icon {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow:
    0 10px 22px rgba(124, 58, 237, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 0.2s ease;
}
.pi-upload:hover .pi-upload-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 16px 30px rgba(124, 58, 237, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pi-upload-text {
  position: relative;
  z-index: 2;
  font-size: 0.94rem;
  font-weight: 600;
  color: #6b21a8;
  letter-spacing: -0.005em;
}

.pi-upload-preview {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
  z-index: 1;
}
/* When a preview is shown, shrink the icon + text into a soft floating chip */
.pi-upload:has(.pi-upload-preview:not([style*="display: none"])) {
  background: #000;
  border-style: solid;
  border-color: rgba(124, 58, 237, 0.5);
}
.pi-upload:has(.pi-upload-preview:not([style*="display: none"])) .pi-upload-icon {
  width: 40px; height: 40px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
.pi-upload:has(.pi-upload-preview:not([style*="display: none"])) .pi-upload-icon svg {
  width: 18px; height: 18px;
}
.pi-upload:has(.pi-upload-preview:not([style*="display: none"])) .pi-upload-text {
  background: rgba(255, 255, 255, 0.95);
  color: #6b21a8;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.84rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
}

/* Dark mode */
body:not(.light) .pi-upload {
  background:
    radial-gradient(ellipse at top, rgba(167, 139, 250, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.06) 100%);
  border-color: rgba(167, 139, 250, 0.40);
}
body:not(.light) .pi-upload:hover { border-color: rgba(167, 139, 250, 0.70); }
body:not(.light) .pi-upload-text { color: #ddd6fe; }

/* Save button — premium gradient */
.pi-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%;
  margin: 1.5rem 0 0.75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.30);
  transition: transform 0.08s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.pi-save-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px rgba(37, 99, 235, 0.36); }
.pi-save-btn:active { transform: translateY(0); }
.pi-save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.pi-disclaimer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text2);
  margin: 0.8rem 0 0;
  font-style: italic;
}

/* Dark mode */
body:not(.light) .pi-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
body:not(.light) .pi-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #f3f4f6; }
body:not(.light) .pi-input:focus { background: rgba(255, 255, 255, 0.07); }
body:not(.light) .pi-method-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #f3f4f6; }
body:not(.light) .pi-method-pill:hover { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.40); }
body:not(.light) .pi-method-pill.is-checked { background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(124, 58, 237, 0.16)); border-color: #a78bfa; color: #ddd6fe; }
body:not(.light) .pi-upload { background: rgba(255, 255, 255, 0.03); }
body:not(.light) .pi-upload:hover { background: rgba(167, 139, 250, 0.06); }

/* Mobile */
@media (max-width: 600px) {
  .pi-method-grid { grid-template-columns: 1fr; }
  .pi-card-body { padding: 1rem; }
}

/* Per-chapter coin/star cost dropdowns */
.lock-cost-select {
  width: 90px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lock-cost-select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}
body:not(.light) .lock-cost-select { background: rgba(255,255,255,0.06); border-color: rgba(167, 139, 250, 0.30); color: #f3f4f6; }

/* Chapter editor — word count indicator with min/max color coding */
.chapter-meta-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.chapter-wc-hint {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  background: rgba(107, 114, 128, 0.10);
  color: var(--text2);
  transition: background 0.15s ease, color 0.15s ease;
}
.chapter-meta-strip.wc-under .chapter-wc-hint {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}
.chapter-meta-strip.wc-ok .chapter-wc-hint {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}
.chapter-meta-strip.wc-over .chapter-wc-hint {
  background: rgba(220, 38, 38, 0.14);
  color: #991b1b;
}
.chapter-meta-strip.wc-under .chapter-word-count { color: #92400e; }
.chapter-meta-strip.wc-ok .chapter-word-count    { color: #166534; }
.chapter-meta-strip.wc-over .chapter-word-count  { color: #991b1b; }

body:not(.light) .chapter-meta-strip.wc-under .chapter-wc-hint { background: rgba(217, 119, 6, 0.20); color: #fcd34d; }
body:not(.light) .chapter-meta-strip.wc-ok    .chapter-wc-hint { background: rgba(34, 197, 94, 0.20);  color: #6ee7b7; }
body:not(.light) .chapter-meta-strip.wc-over  .chapter-wc-hint { background: rgba(220, 38, 38, 0.20);  color: #fca5a5; }

/* ════════════════════════════════════════════════════════════════════════════
   Edit Profile — hints, counters, cooldown banner
   ════════════════════════════════════════════════════════════════════════════ */

.edit-profile-hint {
  font-size: 0.78rem;
  color: var(--text2);
  /* 0.5rem of breathing room between input and hint — the old -0.5rem
     negative top pulled the hint up INTO the input bottom border, which
     looked OK with one-line hints but overlapped once we started wrapping
     two-line copy ("…30 days. N changes remaining."). 2026-05-16. */
  margin: 0.5rem 0 0.85rem;
  line-height: 1.45;
}

.edit-profile-hint.is-locked {
  color: #92400e;
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.20);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-weight: 600;
  margin: 0.4rem 0 0.85rem;
}

.edit-profile-counter {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  margin: -0.55rem 0 0.85rem;
}
.edit-profile-counter .is-warn { color: #d97706; }
.edit-profile-counter .is-bad  { color: #dc2626; }

/* Disabled (read-only) display name input during cooldown */
.form-input:disabled,
.form-input[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
}

body:not(.light) .edit-profile-hint.is-locked {
  background: rgba(217, 119, 6, 0.16);
  border-color: rgba(217, 119, 6, 0.32);
  color: #fcd34d;
}
body:not(.light) .form-input:disabled,
body:not(.light) .form-input[readonly] {
  background: rgba(255, 255, 255, 0.03);
}

/* Edit profile — Country + City row */
.edit-location-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.edit-location-row select,
.edit-location-row input {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .edit-location-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Books Page v2 — mirrors the mobile-app shape:
   tabs + multiple curated sections + horizontal-scroll tracks of v2 book cards
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wider canvas: when bookPage is visible, expand the main column from the
   home-feed 900px constraint to fill the available viewport so 7 covers fit. */
body.on-books .main-wrap {
  max-width: none !important;
  width: calc(100vw - var(--sidebar-w)) !important;
  margin-left: var(--sidebar-w) !important;
  margin-right: 0 !important;
  /* Tight horizontal padding — the books page is a dense visual surface and
     the old 1.75rem inset wasted a noticeable strip next to the sidebar. */
  padding: 0.4rem 0.85rem 2rem !important;
}
body.on-books .compose,
body.on-books #feedTabs,
body.on-books #feedSentinel { display: none !important; }
@media (max-width: 700px) {
  body.on-books .main-wrap {
    margin-left: 0 !important;
    width: 100vw !important;
    padding: 0.4rem 0.9rem 1.5rem !important;
  }
}

/* ── Tab bar (minimal underline style — Stripe / Apple inspired) ────────── */
/* Text-only tabs with an animated purple underline indicator. Smaller and
   more refined than a pill bar, but the active state's gradient underline
   keeps the Selebox purple accent front and centre. */
.book-tabs {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0.4rem 0 1.5rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.book-tabs::-webkit-scrollbar { display: none; }

.book-tab {
  flex: 0 0 auto;
  padding: 0.55rem 0 0.7rem;
  background: transparent;
  border: none;
  color: var(--text3);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.book-tab:hover { color: var(--text); }

/* Animated indicator: a thin purple bar that draws in under the active tab.
   Sits 1px below the tab so it overlaps the row's underline cleanly. */
.book-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 60%, #ec4899 100%);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-tab.active { color: #7c3aed; }
.book-tab.active::after { transform: scaleX(1); }

/* Dark mode — lighter purple text for contrast, same gradient indicator. */
body:not(.light) .book-tab.active { color: #c4b5fd; }
body:not(.light) .book-tab::after {
  background: linear-gradient(90deg, #c4b5fd 0%, #a78bfa 60%, #f9a8d4 100%);
}

@media (max-width: 700px) {
  .book-tabs { gap: 1.25rem; }
  .book-tab { font-size: 0.88rem; padding: 0.5rem 0 0.65rem; }
}

/* ── Tab panel ──────────────────────────────────────────────────────────── */
.book-tab-panel { display: block; }
.book-tab-panel:not(.active) { display: none; }

/* ── Section (Weekly Featured / Fresh Reads / etc.) ─────────────────────── */
.book-section {
  --cards-per-row: 7;
  --card-gap: 1rem;
  margin: 0 0 2.4rem;
}
.book-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}
.book-section-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  position: relative;
}
.book-section-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 1.1em;
  background: linear-gradient(180deg, #8b5cf6, #ec4899);
  border-radius: 2px;
  margin-right: 0.6rem;
  vertical-align: -0.1em;
}
.book-section-see-all {
  background: transparent;
  border: 1px solid transparent;
  color: var(--purple, #7c3aed);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  letter-spacing: -0.005em;
}
.book-section-see-all:hover {
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.20);
}
.book-section-see-all:active { transform: scale(0.97); }
body:not(.light) .book-section-see-all { color: #c4b5fd; }
body:not(.light) .book-section-see-all:hover {
  color: #ddd6fe;
  background: rgba(196,181,253,0.10);
  border-color: rgba(196,181,253,0.20);
}

/* ── Horizontal scroll track — exactly N cards visible per row ──────────── */
.book-section-track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding: 0.25rem 0 1rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.book-section-track::-webkit-scrollbar { height: 8px; }
.book-section-track::-webkit-scrollbar-track { background: transparent; }
.book-section-track::-webkit-scrollbar-thumb {
  background: var(--bg3);
  border-radius: 4px;
}
.book-section-track::-webkit-scrollbar-thumb:hover { background: var(--border); }
.book-section-track .loading,
.book-section-track .book-section-empty {
  flex: 1; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  font-size: 0.92rem;
  font-weight: 500;
}

/* ── v2 book card (matches mobile look: cover, badge ribbon, stats) ─────── */
.book-card-v2 {
  /* Width formula: divide the visible track by N, subtract a share of the
     gaps. With --cards-per-row: 7 (default), exactly 7 covers fit per row;
     extra cards are reachable via horizontal scroll/snap. */
  flex: 0 0 calc((100% - (var(--cards-per-row) - 1) * var(--card-gap)) / var(--cards-per-row));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: transform 0.18s ease;
}
.book-card-v2:hover { transform: translateY(-3px); }
.book-card-v2:active { transform: translateY(-1px); }

.book-card-v2-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #d6cdf6 0%, #ece8fd 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  transition: box-shadow 0.18s ease;
}
.book-card-v2:hover .book-card-v2-cover {
  box-shadow: 0 14px 32px rgba(124,58,237,0.30);
}
.book-card-v2-cover img {
  width: 100%; height: 100%;
  /* `cover` + `top` — see .book-cover img. _supabaseRatioCrop already
     pre-crops Supabase URLs so this rule only matters for external/old
     uploads at non-2:3 ratios. */
  object-fit: cover;
  object-position: top;
  display: block;
}
.book-card-v2-cover-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  font-size: 2.2rem;
}

/* ── Corner ribbon badge: Free / Paid ───────────────────────────────────── */
.book-card-v2-badge {
  position: absolute;
  top: 0; right: 0;
  width: 86px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0.32rem 0;
  transform: rotate(45deg) translate(22px, -8px);
  transform-origin: 100% 0;
  text-transform: capitalize;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.book-card-v2-badge-free {
  background: linear-gradient(135deg, #10b981, #059669);
}
.book-card-v2-badge-paid {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

/* ── Card body ──────────────────────────────────────────────────────────── */
.book-card-v2-body {
  padding: 0.7rem 0.15rem 0.2rem;
}
.book-card-v2-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.book-card-v2-author {
  font-size: 0.8rem;
  color: var(--text3);
  margin: 0 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stats row (rating + view count) ────────────────────────────────────── */
.book-card-v2-stats {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.book-card-v2-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.book-card-v2-stat-rating {
  background: rgba(251, 191, 36, 0.18);
  color: #b45309;
}
body:not(.light) .book-card-v2-stat-rating {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}
.book-card-v2-stat-views {
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
}
body:not(.light) .book-card-v2-stat-views {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}

/* ── Discover tab — genre-grouped rows ──────────────────────────────────── */
/* Now uses the shared .book-section-head / .book-section-title markup so
   the layout is identical to For You and Ranking. The old per-Discover
   classes were removed to drop a duplicate styling source. */
.book-discover-genres { display: block; }

/* ── Ranking tab — Top-100 leaderboard with genre filter chips ──────────── */
/* Mobile-app parity: one vertical ranked list per genre, numbered ribbons
   on each card (#1 gold, #2 silver, #3 bronze, then purple). */

.rank-genre-chips {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0.25rem 0 1.4rem;
  padding: 0.35rem 0 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rank-genre-chips::-webkit-scrollbar { display: none; }
.rank-genre-chip {
  flex: 0 0 auto;
  padding: 0.5rem 1.15rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--text2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.1s ease;
}
.rank-genre-chip:hover { color: var(--text); border-color: rgba(124,58,237,0.30); }
.rank-genre-chip.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(124,58,237,0.06));
  border-color: rgba(124,58,237,0.45);
  color: #7c3aed;
}
body:not(.light) .rank-genre-chip.active {
  background: linear-gradient(135deg, rgba(167,139,250,0.16), rgba(196,181,253,0.08));
  border-color: rgba(167,139,250,0.50);
  color: #c4b5fd;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 2rem;
}
.rank-list .loading,
.rank-list .rank-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text3);
  font-size: 0.95rem;
}

/* Single leaderboard row — cover left, info right, ribbon overlay */
.rank-card {
  display: flex;
  gap: 1rem;
  padding: 0.85rem 1rem 0.85rem 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  font: inherit;
  color: var(--text);
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   HOME LANDING (May 2026 — mosaic layout)
   ─────────────────────────────────────────────────────────────────────
   Magazine-style information-dense home view. Layout follows the
   wireframe Charles sketched: a top 3-column region (videos main /
   videos side / featured post) plus a 5-cover book row below.

     .home-top
        ├── .home-video-main   col 1 — hero + 3 medium videos
        │       ├── .home-video-hero       (big featured video)
        │       └── .home-video-medium-row (3 medium video cards)
        ├── .home-video-side   col 2 — 3 small videos stacked
        │       └── .home-video-small × 3
        └── .home-featured-post col 3 — large post, spans full top height
     .home-books               row of 5 portrait book covers

   The single grid keeps the columns row-aligned: col 1's hero + medium
   row equals col 2's three stacked smalls equals col 3's full-height
   post. Each child opts into a grid-area that spans the right rows so
   the geometry "just works" without manual height matching.

   Selebox purple is preserved throughout — the wireframe used red/blue/
   yellow to distinguish content types, but visually each card is a
   purple-glass frosted panel matching the rest of the app.
   ───────────────────────────────────────────────────────────────────── */

.home-landing {
  padding: 1rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Top region ──────────────────────────────────────────────────────
   Single grid with three columns and two rows. The hero video sits in
   (col 1, row 1); the medium video row sits in (col 1, row 2); the
   side stack spans both rows in col 2; the featured post spans both
   rows in col 3. Result: column heights align naturally.
   ───────────────────────────────────────────────────────────────── */
.home-top {
  display: grid;
  /* Col 1 (hero): 2.5 → 2.375fr (-5%). The freed 0.125fr distributed
     equally to trending (0.92 → 0.98) and post (1.33 → 1.39). */
  grid-template-columns: minmax(0, 2.375fr) minmax(0, 0.98fr) minmax(0, 1.39fr);
  /* 2-row layout (May 2026 — books wrapped in a stack inside home-top
     so they overlay (share vertical space with) the tall featured
     post on the right, instead of pushing everything below them):
       Row 1  Col 1: Hero video
              Col 2: Trending video stack
              Col 3: Featured post (spans both rows)
       Row 2  Cols 1-2: Books stack (Trending + Recent Update grouped) */
  grid-template-rows: auto auto;
  /* Column gap tightened progressively: 1rem → 0.5rem → 5px. */
  gap: 5px;
  align-items: stretch;
}

/* Col 1 — videos main: just the hero video. Width restored to 100%
   of col 1 (was 95% briefly to shrink the hero) so the trending
   column sits flush right next to it with only the grid's 5px column
   gap between them. If hero needs to shrink again, easier path is to
   adjust the fr-value on col 1 — that way trending and post follow
   automatically instead of leaving a gap. */
.home-video-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* Col 2 — 4 Trending video cards stacked, matched to the hero's
   height. CSS Grid's default align-items:stretch makes this column
   the same height as col 1 (the hero). The cards inside use flex:1
   so they distribute that available height equally — the column
   ends up visually balanced with the hero, no empty trailing gap. */
.home-video-side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  /* Gap progressively tightened — 0.75rem → 0.45rem → 0.25rem.
     ~8px total reduction between each of the 4 trending cards. */
  gap: 0.25rem;
  /* May 2026 — 20px horizontal breathing room on both sides of the
     trending column so cards don't sit flush against the hero on the
     left or the featured post on the right. */
  padding-left: 20px;
  padding-right: 20px;
  /* Shift the entire trending column 10px to the left so it sits
     closer to the hero. The post column compensates with its own
     -10 margin-left. */
  margin-left: -10px;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

/* Col 3 — featured post, full top-section height */
.home-featured-post {
  grid-column: 3;
  /* Span both rows so the post sits beside both the videos row AND
     the books stack below it — books "overlay" the post visually
     because they share the same vertical strip on the page. */
  grid-row: 1 / span 2;
  min-width: 0;
  /* May 2026 — pull the panel 10px toward the trending column so the
     gap between trending (with its new 20px right-padding) and the
     featured post reads as one tight visual break instead of two. */
  margin-left: -10px;
  /* Fixed 1200px height (was 900). _syncHomeTopHeights() no longer
     stamps an inline height on this element, so this CSS rule wins.
     Internal scroll handles any overflow within the 1200px window. */
  height: 1200px;
}

/* ── Shared card primitives ────────────────────────────────────────── */

.home-skeleton-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}

.home-skeleton-card:hover { transform: translateY(-2px); }
.home-skeleton-card:active { transform: translateY(0) scale(0.995); }

.home-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 50% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1a1543 0%, #0e0b2c 100%);
  border: 1px solid rgba(139, 92, 246, 0.20);
  box-shadow: 0 8px 28px -12px rgba(124, 58, 237, 0.40);
}

/* Real <img> thumbnail — covers the whole .home-thumb container so
   the gradient placeholder + the chips sit on top. */
.home-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.light .home-thumb {
  background: linear-gradient(135deg, #e8eaf2 0%, #f1f2f7 100%);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 8px 28px -12px rgba(124, 58, 237, 0.18);
}

/* Featured (hero) thumb — strict 16:9.
   Previously this had aspect-ratio:auto + height:100% so it stretched
   to fill the grid row's 1fr height; that made the hero look much taller
   than wide. Now it sizes purely from its width via the 16:9 ratio
   (matching the medium + trending thumbs), and the parent grid is set
   to auto rows so it doesn't get force-stretched. */
.home-thumb-wide {
  aspect-ratio: 16 / 9;
}

.home-thumb-dur {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 10, 31, 0.80);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.home-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.55rem 0.25rem 0;
}

.home-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-card-sub {
  font-size: 0.8rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hero video — biggest card on the page ─────────────────────────── */
.home-video-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* May 2026 — 10px left padding so the featured/hero video card has
     breathing room from the page's left edge (parent .home-landing
     has no horizontal padding). */
  padding-left: 10px;
}

.home-video-hero .home-card-title { font-size: 1.05rem; -webkit-line-clamp: 2; }

/* ── Medium video card — three in a row under the hero ─────────────── */
.home-video-medium .home-card-title { font-size: 0.88rem; }

/* ── Trending list — horizontal cards (thumb left, meta right) ──────
   Minimal "Up Next" style: thumbnail on the left, title + creator +
   duration stacked on the right. Each card uses flex:1 so the 5
   cards distribute the column's height equally — that's what makes
   the side column visually balance with the hero in col 1 (which
   CSS Grid stretches to match). */
.home-video-trending {
  /* May 2026 — card height matches the thumbnail's intrinsic 16:9
     height. Previously `flex: 1 1 0` distributed the column's full
     height equally across 4 cards, leaving empty space below each
     thumb because the thumb only takes 16:9 of its width. Switching
     to `flex: 0 0 auto` makes each card size to its content (the
     thumb), so card-bottom = thumb-bottom with no extra gap. */
  flex: 0 0 auto;
  /* Thumbnail-only — block layout because there's only one child. */
  display: block;
  padding: 0;
  border-radius: 12px;
  background: rgba(15, 8, 36, 0.35);
  border: 1px solid rgba(167, 139, 250, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  min-width: 0;
  min-height: 0;
  /* overflow hidden so the card's border-radius clips the thumb's
     edges into the rounded corners. */
  overflow: hidden;
}
.home-video-trending:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(167, 139, 250, 0.30);
  transform: translateY(-1px);
}
.home-video-trending:active { transform: translateY(0) scale(0.99); }
body.light .home-video-trending {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 58, 237, 0.10);
}
body.light .home-video-trending:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.25);
}

.home-video-trending .home-thumb {
  /* Thumb-only redesign — fill the full card width, 16:9 derives the height. */
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  /* Card's own border-radius + overflow:hidden does the corner
     clipping now, so the thumb itself doesn't need rounded corners. */
  border-radius: 0;
}
.home-video-trending .home-card-meta {
  /* Padding moved here from the card so the thumb can sit flush at
     top/bottom while the text still has reading breathing room. */
  padding: 0.4rem 0.5rem 0.4rem 0;
  gap: 0.15rem;
  min-width: 0;
  align-self: center;
}
.home-video-trending .home-card-title {
  /* Font size shrunk ~2px (0.92rem → 0.8rem) and clamped to a single
     line. With the title shorter and on one line, the meta block
     reads tighter and the creator + views lines underneath stay
     unambiguous secondary info. */
  font-size: 0.8rem;
  font-weight: 600;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-video-trending .home-card-sub {
  font-size: 0.78rem;
  color: var(--text3);
  /* Single line — creator only on this row. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Third line of the trending meta block: views count. Slightly
   smaller + dimmer than the creator line so the visual hierarchy
   reads as title → creator → views. */
.home-video-trending .home-card-views {
  font-size: 0.72rem;
  color: var(--text3);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Featured post — col 3, spans full top height ──────────────────────
   Slot container only. The inner content is a real .post-card rendered
   by the regular renderPost() function (same DOM the Post tab uses), so
   we deliberately strip the panel's own background/border/glow. Without
   that strip we'd get a double-card look (post-card nested inside a
   second purple-glow card).
   Skeleton state keeps a soft glow so the slot doesn't look empty
   before data lands. */
.home-featured-post {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease;
}

.home-featured-post.home-skeleton-card {
  /* Pre-load look — soft purple glow + gradient. Vanishes once the
     real post-card is appended (we remove the skeleton class then). */
  border: 1px solid rgba(139, 92, 246, 0.32);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20) 0%, rgba(20, 20, 51, 0.55) 100%);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.12),
    0 18px 60px -20px rgba(124, 58, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.light .home-featured-post.home-skeleton-card {
  border-color: rgba(124, 58, 237, 0.22);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(241, 242, 247, 0.85) 100%);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.10),
    0 18px 60px -20px rgba(124, 58, 237, 0.30);
}

/* The panel matches the hero card's height edge-to-edge — same trick
   the Trending column uses. CSS Grid's default align-items:stretch
   plus min-height:0 + overflow-y:auto lets this column shrink down
   to the row height (set by the hero) and scroll the 10 posts
   internally. Result: all three top-row columns end at the same
   horizontal line, no visual imbalance. */
.home-featured-post {
  display: flex;
  flex-direction: column;
  /* Gap progressively tightened — 0.75rem → 0.45rem → 0.25rem.
     ~8px total reduction between each post card to match the
     trending column's tighter rhythm. */
  gap: 0.25rem;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.30) transparent;
  padding: 0.4rem;
}
.home-featured-post::-webkit-scrollbar { width: 6px; }
.home-featured-post::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.30);
  border-radius: 999px;
}
.home-featured-post::-webkit-scrollbar-track { background: transparent; }

/* Each post card inside the slot — natural height, no inner scroll.
   The panel itself scrolls. */
.home-featured-post .post-card {
  width: 100%;
  margin: 0;
  flex-shrink: 0;
}

/* ── Compression overrides for the mini featured-post slot ──────────
   The home column is much narrower than the Discover feed, so the
   default .post-card layout reads as cluttered. We collapse the card
   to: header (avatar + author + time) → clamped body → media. The
   action bar, share menu, comments toggle, reaction counters, and
   3-dot menu are all hidden — they're full-Post-tab affordances, not
   mini-slot ones. Click anywhere on the card opens the full post and
   the user gets the full controls there. */
.home-featured-post .post-card {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
}

/* Hide the action bar (Like/Comments/Repost/Share) entirely. */
.home-featured-post .post-card .post-actions,
.home-featured-post .post-card .post-stats,
.home-featured-post .post-card .comments-section,
.home-featured-post .post-card .post-menu-btn {
  display: none !important;
}

/* Tighter header — smaller avatar + slimmer name/time. */
.home-featured-post .post-card .post-header {
  margin-bottom: 0.4rem;
}
.home-featured-post .post-card .post-header .avatar {
  width: 32px;
  height: 32px;
}
.home-featured-post .post-card .post-header .avatar img {
  width: 100%;
  height: 100%;
}
.home-featured-post .post-card .post-author {
  font-size: 0.86rem;
}
.home-featured-post .post-card .post-time {
  font-size: 0.72rem;
}

/* Body — line-clamped to 4 lines so long Tagalog drama hooks fit
   without forcing the card to be huge. Slight font shrink for the
   mini context. */
.home-featured-post .post-card .post-body {
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0.25rem 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Media (image + video) — round corners + cap max-height so a
   portrait image doesn't dominate the panel. */
.home-featured-post .post-card .post-image,
.home-featured-post .post-card .post-video {
  margin-top: 0.4rem;
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
}
.home-featured-post .post-card .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reposted-card nested inside a featured post — collapse its
   nested-card padding too so the mini doesn't get a double frame. */
.home-featured-post .post-card .reposted-card {
  padding: 0.5rem;
  margin-top: 0.4rem;
}
.home-featured-post .post-card .reposted-card .post-body {
  font-size: 0.8rem;
  -webkit-line-clamp: 2;
}
.home-featured-post .post-card .reposted-banner {
  font-size: 0.7rem;
  margin: 0.2rem 0;
}

/* Link previews + pinned tags are also Post-tab-only affordances. */
.home-featured-post .post-card .link-preview,
.home-featured-post .post-card .post-pinned-tag {
  display: none !important;
}

.home-featured-post-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 100% at 70% 0%, rgba(167, 139, 250, 0.30) 0%, transparent 55%),
    radial-gradient(120% 100% at 0% 100%, rgba(124, 58, 237, 0.30) 0%, transparent 50%),
    linear-gradient(135deg, #1a1543 0%, #0e0b2c 100%);
  z-index: 0;
}

body.light .home-featured-post-media {
  background:
    radial-gradient(140% 100% at 70% 0%, rgba(167, 139, 250, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #eef0ff 0%, #f7f8fc 100%);
}

.home-featured-post-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.16);
  font-weight: 700;
}

body.light .home-featured-post-placeholder { color: rgba(124, 58, 237, 0.30); }

.home-featured-post-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 360px;
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.65rem;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(10, 10, 31, 0.78) 100%);
}

body.light .home-featured-post-overlay {
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(247, 248, 252, 0.88) 100%);
}

.home-featured-post-overline {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-lt);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.32);
}

body.light .home-featured-post-overline {
  color: var(--purple-dk);
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.22);
}

.home-featured-post-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  /* Clamp very long Tagalog drama hooks to 4 lines so the panel's
     height stays predictable — viewers can click through to read the
     rest. The ellipsis fade is implicit in the line-clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-featured-post-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text2);
}

.home-featured-post-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
  border: 2px solid rgba(167, 139, 250, 0.5);
  flex-shrink: 0;
}

.home-featured-post-author { font-weight: 600; color: var(--text); }
.home-featured-post-dot { color: var(--text3); }
.home-featured-post-when { color: var(--text3); }

/* ── Book shelves — two labeled rows (Trending + Recent Update) ──────
   Each shelf is a .home-books-section with a header + a 7-up grid.
   The header is intentionally minimal — just the section title — so
   the shelf reads as a piece of page content rather than a separate
   widget. */

.home-books-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* May 2026 — book shelf padding tuned in passes:
       · all-around 60px → squeezed the cover grid uncomfortably
       · top-only 60px   → fine vertically, but cards sat flush against
                           the page edges
     Final: 70px on top (60 + 10), 10px on left + right. Applies to
     both Trending and Recent Update shelves via this shared class. */
  padding-top: 70px;
  padding-left: 10px;
  padding-right: 10px;
}

/* May 2026 — Books grouped into a single .home-books-stack inside
   .home-top. The stack occupies row 2 of cols 1-2; featured post in
   col 3 spans both rows. Within the stack, shelves stack vertically
   with a gap. Width 100% of the stack's grid cell (which is itself
   cols 1-2 of home-top). */
.home-books-stack {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
#homeBooksTrending,
#homeBooksRecent {
  /* +20px top padding (May 2026) so each shelf header gets a bit of
     breathing room above its title — first inside the books-stack
     container, second between the two shelves. */
  padding-top: 20px;
  margin-top: 0;
  /* Each shelf takes its grid cell's full width — the stack's flex
     handles the vertical gap between the two shelves. */
  width: 100%;
}

.home-books-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* "See all" link — sits at the right end of the shelf header opposite
   the title. Clicking it navigates to the Books page (same surface as
   the Books sidebar item). Visual: subtle purple-tinted text + chevron,
   not a primary button. Hover firms up the color + nudges the chevron. */
.home-books-seeall {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--purple-lt);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.home-books-seeall:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.30);
  color: var(--text);
}
.home-books-seeall:hover svg {
  transform: translateX(2px);
}
.home-books-seeall svg {
  transition: transform 0.15s ease;
}
.home-books-seeall:active { transform: scale(0.97); }
body.light .home-books-seeall {
  color: var(--purple-dk);
}
body.light .home-books-seeall:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.22);
  color: #4c1d95;
}

.home-books-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}

/* Books row wrapper — relative-positioned so the right-arrow can
   anchor to the row's right edge and vertically center on the books
   inside it. The arrow lives next to the row, not in the header. */
.home-books-row {
  position: relative;
}

/* Next-page arrow — sits at the right edge of the books row,
   vertically centered with the cover area. Purple-glass styling
   matches the topbar icon buttons so the whole page feels like one
   material. Sits slightly outside the rightmost book so it doesn't
   overlap the cover. */
.home-books-next {
  position: absolute;
  /* Anchor at the right edge of the row, then nudge a little outside
     so the button doesn't visually compete with the last book cover. */
  right: -22px;
  /* Center on the cover (book cards are cover + title + author stacked
     vertically; the cover is roughly the top ~75% of the card, so we
     anchor a bit above the card midpoint). */
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(167, 139, 250, 0.25) 0%, transparent 70%),
    rgba(15, 8, 36, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(167, 139, 250, 0.40);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 8px 22px -6px rgba(124, 58, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.home-books-next:hover {
  border-color: rgba(196, 181, 253, 0.85);
  transform: translateY(-50%) translateX(3px);
  box-shadow:
    0 12px 28px -6px rgba(167, 139, 250, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.home-books-next:active { transform: translateY(-50%) translateX(1px) scale(0.95); }
.home-books-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
  box-shadow: 0 4px 12px -6px rgba(124, 58, 237, 0.30);
}
body.light .home-books-next {
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(167, 139, 250, 0.20) 0%, transparent 70%),
    rgba(255, 255, 255, 0.88);
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--purple-dk);
  box-shadow:
    0 8px 22px -6px rgba(124, 58, 237, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
body.light .home-books-next:hover {
  border-color: rgba(76, 29, 149, 0.65);
  box-shadow:
    0 12px 28px -6px rgba(124, 58, 237, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-books {
  display: grid;
  /* 6 covers per shelf (May 2026 — was 7). Each cell is 1fr so covers
     evenly distribute the shelf width and grow/shrink with the column. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.home-book-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.home-book-cover {
  position: relative;
  width: 100%;
  /* 2:3 — print-book-shelf ratio. Standard book cover proportions,
     matches the rest of the app. Currently paired with object-fit:fill
     on the image so 9:16 source covers stretch to fill the container
     vertically (image becomes slightly taller than native). */
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 50% 30%, rgba(167, 139, 250, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, #2a1b62 0%, #0e0b2c 100%);
  /* Removed the 1px violet border — it was acting as a thin inset
     frame that visually pushed the cover image inward. The box-shadow
     below still gives the card its lifted feel without intruding on
     the artwork. */
  box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.45);
}

/* Real cover — fills the 2:3 container edge-to-edge. The image
   arriving from Supabase is ALREADY at perfect 2:3 thanks to the
   server-side resize=cover transform applied in _supabaseRatioCrop
   (same approach mobile uses in lib/utils/image-source.js). So we
   just object-fit:cover and the slot fills cleanly with no letterbox,
   no zoom-in, no stretch — the cropping decision happens server-side
   and is centered on the source artwork. */
.home-book-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` + `top` — see .book-cover img. _supabaseRatioCrop already
     pre-crops Supabase URLs to 2:3 before they reach this rule, so the
     CSS only kicks in for external / old-upload covers at non-2:3. */
  object-fit: cover;
  object-position: top;
  z-index: 1;
  display: block;
}

/* Cover chip — pill in the top-left corner. Same purple-gradient
   treatment as the video card TRENDING pill so the visual vocabulary
   stays consistent across shelves. Two variants:
     · home-book-chip-trending → "TRENDING" on Trending shelf
     · home-book-chip-new      → "NEW · CH. {N}" on Recent Update shelf
   Same swatch on both — they communicate the same "fresh attention"
   energy, just for different reasons. */
.home-book-chip {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 10px -2px rgba(124, 58, 237, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: calc(100% - 0.9rem); /* don't bleed past the cover */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin-only inline edit pencil — top-right corner of each book
   cover. Fades in on hover over the parent .home-book-card so it
   doesn't compete with the cover artwork when not in use. Click
   triggers the replace flow without opening the book detail page.
   Higher z-index than the cover chips so it stays clickable when
   overlapping at narrow widths. */
.home-book-edit {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15, 8, 36, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.55);
}
.home-book-card:hover .home-book-edit {
  opacity: 1;
  transform: translateY(0);
}
.home-book-edit:hover {
  background: rgba(124, 58, 237, 0.85);
  border-color: rgba(196, 181, 253, 0.95);
  box-shadow: 0 8px 20px -4px rgba(167, 139, 250, 0.7);
}
.home-book-edit:active { transform: translateY(0) scale(0.94); }
body.light .home-book-edit {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.45);
  color: var(--purple-dk);
}
body.light .home-book-edit:hover {
  background: var(--purple);
  border-color: var(--purple-dk);
  color: #fff;
}

/* Reads chip — bottom-right of cover, dark fill with white text.
   Trending only. Same shape as the video duration chip. */
.home-book-reads {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 10, 31, 0.80);
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body.light .home-book-cover {
  background: linear-gradient(160deg, #e0d4ff 0%, #f1f2f7 100%);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.18);
}

/* Title always reserves exactly 2 lines of space. Short titles
   ("Owned by the Suarez") get blank space below; long titles
   ("THEIR SHARED OBSESSION") fill both lines. Either way, the
   author row below sits at the same y-offset on every card so the
   whole row aligns into a clean grid. */
.home-book-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Two lines × 1.3 line-height = 2.6em. Setting both min- and
     max- to the same value pins the box at exactly that height. */
  min-height: 2.6em;
  max-height: 2.6em;
}

/* Author always one line — already nowrap+ellipsis, so card heights
   stay deterministic. */
.home-book-author {
  font-size: 0.78rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-height: 1.3em;
}

/* ── Responsive — collapse the mosaic on narrower viewports ─────────── */

@media (max-width: 1280px) {
  .home-top {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

/* Books cascade — 7 covers at the wide default, dropping by one as
   the viewport narrows so each cover stays at a readable size:
     ≥1280px → 7 across (default)
     ≤1280px → 6 across (hide cover 7)
     ≤1100px → 5 across (hide covers 6, 7) — also the layout-collapse breakpoint
     ≤  900px → 4 across (hide covers 5, 6, 7)
     ≤  760px → 3 across (hide covers 4–7) */
@media (max-width: 1280px) {
  /* 6 covers stay the same at 1280px since base is already 6 (the
     7th-card hide-rule from when we had 7 covers is no longer
     needed). */
  .home-books { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  /* Tablet: stack the post under the videos so the videos can use full
     width for the hero + medium row, and the post sits below.
     The side stack moves underneath the medium row. */
  .home-top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .home-video-main { grid-column: 1; grid-row: 1; }
  .home-video-side { grid-column: 2; grid-row: 1; }
  .home-featured-post { grid-column: 1 / 3; grid-row: 2; }
  .home-featured-post-overlay { min-height: 280px; }

  .home-books { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-books .home-book-card:nth-child(6),
  .home-books .home-book-card:nth-child(7) { display: none; }
}

@media (max-width: 900px) {
  .home-books { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-books .home-book-card:nth-child(5),
  .home-books .home-book-card:nth-child(6),
  .home-books .home-book-card:nth-child(7) { display: none; }
}

@media (max-width: 760px) {
  /* Phone: single column for everything. The medium row keeps its
     3-up grid but books drop to 3 visible at a time. */
  .home-top {
    grid-template-columns: 1fr;
  }
  .home-video-main { grid-column: 1; grid-row: 1; }
  .home-video-side {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .home-featured-post { grid-column: 1; grid-row: 3; }
  .home-thumb-wide { min-height: 200px; }

  .home-books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-books .home-book-card:nth-child(4),
  .home-books .home-book-card:nth-child(5),
  .home-books .home-book-card:nth-child(6),
  .home-books .home-book-card:nth-child(7) { display: none; }
}
.rank-card:hover {
  transform: translateY(-1px);
  border-color: rgba(124,58,237,0.30);
  box-shadow: 0 8px 22px rgba(124,58,237,0.10);
}

/* Numbered ribbon — banner on the LEFT of the cover */
.rank-card-ribbon {
  flex: 0 0 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.55rem 0 0;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -0.02em;
  position: relative;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
  /* Pointed bottom so it looks like a hanging banner */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
  min-height: 56px;
}
/* Top three get the podium colours */
.rank-card[data-rank="1"] .rank-card-ribbon {
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
  color: #78350f;
}
.rank-card[data-rank="2"] .rank-card-ribbon {
  background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 100%);
  color: #1f2937;
}
.rank-card[data-rank="3"] .rank-card-ribbon {
  background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%);
  color: #fff;
}

.rank-card-cover {
  flex: 0 0 100px;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #d6cdf6, #ece8fd);
  margin: 0.15rem 0;
}
/* `cover` + `top` — Ranking tab uses the same source-aspect-ratio
   heuristic as the other shelves. _renderRankCard now also calls
   _supabaseRatioCrop so most covers arrive at 2:3 server-side; this
   CSS is the safety net for external sources. See .book-cover img. */
.rank-card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rank-card-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: var(--text3);
}

.rank-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.1rem 0;
}
.rank-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rank-card-desc {
  font-size: 0.86rem;
  color: var(--text2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.rank-card-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rank-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: -0.005em;
}
.rank-card-badge-completed {
  background: rgba(16,185,129,0.14);
  color: #047857;
}
body:not(.light) .rank-card-badge-completed {
  background: rgba(52,211,153,0.16);
  color: #6ee7b7;
}
.rank-card-badge-ongoing {
  background: rgba(124,58,237,0.12);
  color: #6d28d9;
}
body:not(.light) .rank-card-badge-ongoing {
  background: rgba(167,139,250,0.16);
  color: #c4b5fd;
}
.rank-card-badge-paid {
  background: rgba(244,63,94,0.12);
  color: #be123c;
}
body:not(.light) .rank-card-badge-paid {
  background: rgba(251,113,133,0.18);
  color: #fda4af;
}

/* Stats row — ⭐ 👁 ❤ 📋 with icons */
.rank-card-stats {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-top: 0.15rem;
  color: var(--text3);
  font-size: 0.84rem;
  font-weight: 600;
}
.rank-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.rank-card-stat-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.rank-card-stat-rating .rank-card-stat-icon { color: #f59e0b; }
.rank-card-stat-views   .rank-card-stat-icon { color: #7c3aed; }
.rank-card-stat-likes   .rank-card-stat-icon { color: #ec4899; }

@media (max-width: 700px) {
  .rank-card-cover { flex-basis: 84px; }
  .rank-card-title { font-size: 0.95rem; }
  .rank-card-desc  { font-size: 0.80rem; -webkit-line-clamp: 2; }
  .rank-card-stats { gap: 0.75rem; font-size: 0.78rem; }
  .rank-card-ribbon { flex-basis: 26px; font-size: 0.92rem; }
}

/* ── Library / Reading List collection grid ─────────────────────────────── */
/* Multi-column wrap of v2 cards. Mirrors the rail's cards-per-row at every
   breakpoint so a user's library feels visually identical to a curated rail.
   v2 cards inside override their flex-basis with 100% so they fill the grid
   column rather than the calc-based row width they use inside section tracks. */
.book-collection-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.6rem 1rem;
  margin: 0 0 2rem;
}
.book-collection-grid .book-card-v2 {
  flex: none;
  width: 100%;
}
@media (max-width: 1500px) { .book-collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .book-collection-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .book-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .book-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.7rem; } }

.book-collection-grid .loading {
  grid-column: 1 / -1;
  padding: 2rem 0;
  text-align: center;
  color: var(--text3);
}

/* ── Library / Reading List collection header ───────────────────────────── */
.book-collection-head {
  margin: 0.4rem 0 1.2rem;
}
.book-collection-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.25rem;
}
.book-collection-sub {
  font-size: 0.9rem;
  color: var(--text3);
  margin: 0;
}
.book-collection-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text3);
}
.book-collection-empty h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text2);
  margin: 0 0 0.4rem;
}
.book-collection-empty p { margin: 0; font-size: 0.92rem; }

/* ── See All sub-view (within the books page) ───────────────────────────── */
.book-see-all { display: block; }
.book-see-all-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0.4rem 0.25rem 1.2rem;
}

/* ── Responsive cards-per-row ───────────────────────────────────────────── */
@media (max-width: 1500px) { .book-section { --cards-per-row: 6; } }
@media (max-width: 1200px) { .book-section { --cards-per-row: 5; } }
@media (max-width: 900px)  { .book-section { --cards-per-row: 4; } }
@media (max-width: 700px) {
  .book-section { --cards-per-row: 2.5; --card-gap: 0.75rem; }
  .book-card-v2-title { font-size: 0.92rem; }
  .book-card-v2-author { font-size: 0.74rem; }
  .book-section-title { font-size: 1.15rem; }
  .book-collection-title { font-size: 1.25rem; }
  .book-card-v2-badge { width: 76px; font-size: 0.65rem; transform: rotate(45deg) translate(20px, -7px); }
}

/* ─────────────────────────────────────────────────────────────────────
 * Chat parity v2 — Secret tab, group settings modal, 3-tab pill.
 * Mirrors the mobile UX (group manage, Secret tab, biometric lock UI).
 * Added in the web parity pass.
 * ───────────────────────────────────────────────────────────────────── */

/* Three-tab pill above the conversations list. */
.dm-tab-pill {
  display: flex;
  gap: 6px;
  padding: 8px 12px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.dm-tab {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.dm-tab:hover { background: var(--surface-muted, rgba(124,58,237,0.08)); }
.dm-tab.is-active {
  background: var(--accent-purple, #8b5cf6);
  color: #fff;
  border-color: var(--accent-purple, #8b5cf6);
}

/* Side-by-side new-chat buttons (regular + Secret) in the sidebar header.
   Both render as plain icon-only `.dm-new-btn` circles — the Secret one
   used to be a purple pill (`.dm-new-btn-secret` + `.dm-new-btn-label`)
   but we simplified to icon-only to match the chat-bubble button next to
   it. Discoverability comes from the lock glyph + the tooltip on hover. */
.dm-sidebar-actions { display: flex; gap: 6px; align-items: center; }

/* Secret-tab empty state CTA. */
.dm-empty-list {
  text-align: center;
  padding: 32px 18px 28px;
  color: var(--text2);
}
.dm-empty-icon { font-size: 2.2rem; margin-bottom: 10px; }
.dm-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.dm-empty-sub { font-size: 0.85rem; line-height: 1.4; max-width: 280px; margin: 0 auto 14px; }
.dm-cta-btn {
  background: var(--accent-purple, #8b5cf6);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.dm-cta-btn:hover { filter: brightness(1.05); }

/* Lock badge on Secret conversation row avatars. SVG (not emoji) so the
   lock always sits dead-center and renders identically across browsers
   and OS. Positioned to sit clearly OUTSIDE the avatar's bottom-right —
   roughly halfway-out — so it's visually obvious that the chat is
   Secret without competing with the avatar photo. White border doubles
   as a clean break against any avatar color. */
.dm-conv-avatar-secret { position: relative; overflow: visible; }
.dm-conv-avatar-secret::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--accent-purple, #8b5cf6);
  border: 2.5px solid var(--bg, #fff);
  background-image: url("data:image/svg+xml;utf8,<svg 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'><rect x='5' y='11' width='14' height='9' rx='2' ry='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35);
  z-index: 1;
}

/* "↑ N new posts" pill — appears at the top-center of the feed when
   the background poller has discovered new content. Tap → applies the
   buffered posts to the top of the feed without a fresh DB call. The
   pill is fixed-position so scroll doesn't move it. */
.feed-new-pill {
  position: fixed;
  top: 76px;            /* clear of the sticky header */
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primaryContrast, #fff);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(121, 117, 212, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 1500;
  transition: opacity 220ms ease, transform 220ms ease;
}
.feed-new-pill.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.feed-new-pill:hover {
  filter: brightness(1.05);
}
.feed-new-pill:active {
  transform: translateX(-50%) translateY(1px);
}

/* Suggested mutuals row in the New Secret chat modal. Renders the first
   five mutual followers as avatar chips so the user can start a Secret
   chat in one click without typing a search. */
.dm-secret-suggested {
  margin: 4px 0 14px;
}
.dm-secret-suggested-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.dm-secret-suggested-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dm-secret-suggested-chip {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, border-color 120ms ease;
}
.dm-secret-suggested-chip:hover {
  transform: scale(1.06);
  border-color: var(--primary);
}
.dm-secret-suggested-chip:disabled {
  opacity: 0.5;
  cursor: default;
}
.dm-secret-suggested-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dm-secret-suggested-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--text2);
  background: var(--surfaceMuted, var(--surface));
}
.dm-secret-suggested-more {
  font-size: 12px;
  color: var(--text2);
  margin-top: 8px;
}

/* PIN gate for the locked Secret tab. */
.dm-secret-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 22px;
  text-align: center;
  color: var(--text2);
}
.dm-secret-gate-icon {
  font-size: 1.8rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(139,92,246,0.16);
  border: 1px solid var(--accent-purple, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.dm-secret-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dm-secret-subtitle { font-size: 0.85rem; max-width: 280px; line-height: 1.4; margin-bottom: 18px; }
.dm-secret-input {
  width: 180px;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--surface));
  color: var(--text);
  outline: none;
}
.dm-secret-input:focus { border-color: var(--accent-purple, #8b5cf6); }
.dm-secret-error { color: #ef4444; font-size: 0.78rem; margin-top: 8px; min-height: 1em; }
.dm-secret-submit {
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent-purple, #8b5cf6);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.88rem;
}
.dm-secret-submit:hover { filter: brightness(1.05); }

/* Group settings modal — shared bones with follow-list-modal. */
.group-info-modal { max-width: 460px; }
.group-info-identity { text-align: center; padding: 18px 8px 10px; }
.group-info-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}
.group-info-avatar {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-muted, rgba(124,58,237,0.08));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-info-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-purple, #8b5cf6);
  color: #fff;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.group-info-avatar-edit:hover { filter: brightness(1.05); }
.group-info-name-row { display: flex; justify-content: center; }
.group-info-name {
  font-size: 1.2rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.group-info-pencil { font-size: 0.7rem; color: var(--text-muted, #888); }
.group-info-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-muted, rgba(124,58,237,0.08));
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.group-info-add-row:hover { background: rgba(139,92,246,0.12); }
.group-info-add-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(139,92,246,0.16);
  border: 1px solid var(--accent-purple, #8b5cf6);
  color: var(--accent-purple, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.group-info-members-body { max-height: 320px; overflow-y: auto; }
.group-info-creator-badge {
  font-size: 0.68rem;
  color: var(--accent-purple, #8b5cf6);
  font-weight: 600;
}
/* Admin role badge — same family as creator but a softer accent so the
   creator still reads as the highest tier. Migration
   2026-05-16_group_chat_300_cap_and_admin_role.sql introduced the role. */
.group-info-admin-badge {
  font-size: 0.68rem;
  color: #f59e0b;
  font-weight: 600;
  margin-left: 6px;
}
/* Promote/demote pill buttons in the group members dialog. Creator-only
   per the showGroupMembersDialog gate. */
.group-info-promote,
.group-info-demote {
  margin-right: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.group-info-promote:hover { background: rgba(139, 92, 246, 0.10); color: var(--accent-purple, #8b5cf6); border-color: var(--accent-purple, #8b5cf6); }
.group-info-demote:hover  { background: rgba(245, 158, 11, 0.10); color: #f59e0b; border-color: #f59e0b; }
/* Member-cap counter shown in openNewConvModal + openAddMembersModal.
   Inline next to the modal sub-text. */
.dm-cap-counter {
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 500;
}
.group-info-kick {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-muted, rgba(124,58,237,0.08));
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.group-info-kick:hover { background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444; }

/* Generic danger button — used by the Leave group action. */
.btn-danger {
  background: rgba(239,68,68,0.12);
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(239,68,68,0.22); }

/* ─────────────────────────────────────────────────────────────────────
 * Lock prompt banner — soft notice surfaced to authors on the
 * dashboard / book editor when a book is currently Free but they
 * already monetize at least one other book. Mirrors the mobile
 * BookLockPromptBanner one-tap-lock affordance: a small purple-accented
 * card with a 5–10 segmented picker and a Dismiss link.
 * ───────────────────────────────────────────────────────────────────── */
.lock-prompt-banner {
  display: flex;
  background: var(--bg2, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(124,58,237,0.20));
  border-radius: 14px;
  margin: 0 0 0.9rem;
  overflow: hidden;
  position: relative;
}
.lock-prompt-banner::before {
  /* Brand-purple accent stripe down the left edge — same affordance
     as the mobile banner so the cross-platform UX feels intentional. */
  content: '';
  flex: 0 0 4px;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}
.lock-prompt-banner-body {
  flex: 1;
  padding: 0.95rem 1.1rem;
  min-width: 0;
}
.lock-prompt-banner-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.lock-prompt-banner-sub {
  font-size: 0.82rem;
  color: var(--text2);
  margin: 0.3rem 0 0.7rem;
  line-height: 1.45;
}
/* Inline 5–10 segmented buttons — visually consistent with the
   reaction emoji picker / genre chip family. */
.lock-prompt-banner-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}
.lock-prompt-banner-pick {
  min-width: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: var(--bg, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.lock-prompt-banner-pick:hover:not(:disabled) {
  background: rgba(139,92,246,0.10);
  border-color: rgba(124,58,237,0.40);
  color: #7c3aed;
}
body:not(.light) .lock-prompt-banner-pick:hover:not(:disabled) {
  background: rgba(167,139,250,0.16);
  border-color: rgba(167,139,250,0.50);
  color: #c4b5fd;
}
.lock-prompt-banner-pick:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Dismiss link sits below the picker. Underlined, subdued — secondary
   action, never competes with the primary Lock buttons. */
.lock-prompt-banner-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.7rem;
  min-height: 18px;
}
.lock-prompt-banner-dismiss {
  font-size: 0.78rem;
  color: var(--text3, var(--text-muted, #888));
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.lock-prompt-banner-dismiss:hover { color: var(--text); }
.lock-prompt-banner-dismiss:disabled { opacity: 0.5; cursor: default; }
/* Small loading dot during async writes — shown next to the dismiss
   link while either lock or dismiss RPCs are in flight. */
.lock-prompt-banner-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(124,58,237,0.25);
  border-top-color: #7c3aed;
  animation: lock-prompt-spin 0.7s linear infinite;
}
@keyframes lock-prompt-spin { to { transform: rotate(360deg); } }
/* Compact variant for the author book list — tighter padding so each
   row's banner doesn't dominate the card next to it. */
.lock-prompt-banner-compact .lock-prompt-banner-body { padding: 0.75rem 0.95rem; }
.lock-prompt-banner-compact .lock-prompt-banner-sub { margin-bottom: 0.55rem; }

/* ════════════════════════════════════════════════════════════════════════
   Floating Messages dock (js/messages-dock.js, Commit 2 — 2026-05-16)
   Facebook-style hybrid: launcher pill bottom-right, inbox panel above,
   max 2 mini-chat windows stacked from the right. Premium feel — white
   cards, brand purple accent (#7c3aed), purple-tinted shadows, smooth
   180ms easing on hover/open. Hidden <768px (mobile uses full Messages).
   ════════════════════════════════════════════════════════════════════════ */

#dmFloatingRoot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;            /* above feed, below modals (.unlock-modal-backdrop=10000) */
  pointer-events: none;     /* children re-enable; lets clicks pass through gaps */
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-family: inherit;
}
#dmFloatingRoot > * { pointer-events: auto; }

/* Right column: inbox panel + avatar overflow stack + launcher pill.
   Vertical flex with launcher always at the bottom, anything else
   stacks above it (newest closest to the launcher). */
.dm-dock-rightcol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Avatar overflow column (Facebook-style). Sits above the launcher and
   below the inbox (when open). Capped at DM_FLOAT_MAX_AVATARS (3). */
.dm-dock-avatar-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.dm-dock-avatar-stack:empty { display: none; }

.dm-mini-avatar-bubble {
  position: relative;
  width: 48px; height: 48px;
}
.dm-mini-avatar-bubble-btn {
  width: 48px; height: 48px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 22px rgba(124, 58, 237, 0.22),
    0 3px 8px rgba(15, 10, 28, 0.10);
  transition: transform 160ms ease, box-shadow 160ms ease;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.85rem;
}
.dm-mini-avatar-bubble-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(124, 58, 237, 0.28), 0 4px 10px rgba(15, 10, 28, 0.12); }
.dm-mini-avatar-bubble-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-mini-avatar-bubble-close {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #6b7280;
  color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
  padding: 0;
}
.dm-mini-avatar-bubble:hover .dm-mini-avatar-bubble-close { opacity: 1; transform: scale(1); }
.dm-mini-avatar-bubble-close:hover { background: #1f2937; }

@media (max-width: 767px) { #dmFloatingRoot { display: none; } }

/* ── Launcher pill — full state by default, collapses to avatar-only
      when the inbox panel is open (user feedback 2026-05-16). CSS
      transition on width + label opacity gives a Messenger-style
      smooth collapse/expand. */
.dm-dock-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 10px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 12px 32px rgba(124, 58, 237, 0.14),
    0 4px 10px rgba(15, 10, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  /* No overflow:hidden on the root — would clip the unread badge.
     The label clips itself via its own overflow rule (.dm-dock-launcher-label). */
  /* The transition list is intentionally explicit — `all` would also
     animate transform on :hover, making the lift feel sluggish. */
  transition:
    padding 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    gap     240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms ease;
}
.dm-dock-launcher:hover {
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.18), 0 6px 12px rgba(15, 10, 28, 0.08);
}

.dm-dock-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: #7c3aed;
  flex: none;
  overflow: hidden;          /* clip the SVG as the icon collapses */
  /* Icon fades + zeroes its width when the launcher collapses so the
     avatar slides flush against the (eliminated) padding. */
  max-width: 32px;
  opacity: 1;
  transition:
    max-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    margin 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dm-dock-launcher-icon svg { width: 22px; height: 22px; }

.dm-dock-launcher-badge {
  /* Sits at the top-right of the launcher root (NOT nested under the
     icon span, which collapses in compact mode). z-index 2 keeps it
     above the avatar in case they visually overlap on small viewports. */
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45), 0 0 0 2px #fff;
  z-index: 2;
}
.dm-dock-launcher-badge[data-empty="1"] { display: none; }

.dm-dock-launcher-label {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;          /* clip the text as it shrinks */
  /* max-width carries the collapse — animating width directly with
     content doesn't work cross-browser, but max-width with overflow
     hidden gives a clean shrink-to-zero. 120px covers the longest
     localizations of "Messages" we'll realistically see. */
  max-width: 120px;
  opacity: 1;
  transition:
    max-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    margin 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dm-dock-launcher-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
  flex: none;
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1), height 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dm-dock-launcher-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Compact state — driven by .is-compact toggle in openMessagesDock /
   closeMessagesDock. Pill collapses to a 52px circle by hiding the
   icon + label (max-width 0) and tightening padding/gap to zero. */
.dm-dock-launcher.is-compact {
  padding: 2px;
  gap: 0;
  border-radius: 50%;
}
.dm-dock-launcher.is-compact .dm-dock-launcher-icon {
  max-width: 0;
  opacity: 0;
  margin-right: 0;
}
.dm-dock-launcher.is-compact .dm-dock-launcher-label {
  max-width: 0;
  opacity: 0;
  margin-right: 0;
}
.dm-dock-launcher.is-compact .dm-dock-launcher-avatar {
  width: 48px; height: 48px;
}

.dm-dock-initials {
  width: 100%; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff; font-weight: 700;
}

/* ── Inbox panel (sits in the right column, above avatars + launcher) ── */
/* Compact Messenger-style: ~300px wide, ~420px tall. User feedback
   2026-05-16 rounds 1 (320x440) and 2 (this) progressively tightened
   from the original 360x560. Lighter shadow + smaller radius — the
   panel should feel "floating" rather than "modal-heavy." */
.dm-dock-inbox {
  width: 300px;
  max-height: min(420px, calc(100vh - 130px));
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(124, 58, 237, 0.12),
    0 4px 12px rgba(15, 10, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dm-dock-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dm-dock-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
/* Header — tightened so the conv list gets more vertical real estate.
   Was 11/12/9 with 0.98rem h2 — now 7/10/6 with 0.92rem. */
.dm-dock-inbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 6px 12px;
  border-bottom: 1px solid rgba(15, 10, 28, 0.05);
}
.dm-dock-inbox-header h2 {
  margin: 0; font-size: 0.92rem; font-weight: 700; color: #111827;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -0.005em;
}
.dm-dock-inbox-badge {
  min-width: 18px; height: 17px;
  padding: 0 6px;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-dock-inbox-badge[data-empty="1"] { display: none; }
.dm-dock-inbox-actions { display: inline-flex; gap: 2px; }
.dm-dock-inbox-actions button {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer; color: #9ca3af;
  transition: background 120ms ease, color 120ms ease;
}
.dm-dock-inbox-actions button:hover { background: rgba(124, 58, 237, 0.08); color: #7c3aed; }
.dm-dock-inbox-actions button svg { width: 14px; height: 14px; }

.dm-dock-inbox-list {
  overflow-y: auto;
  padding: 4px 0 8px;
  /* Subtle scroll affordance without scrollbar chrome bleeding into
     the rounded corners. */
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.20) transparent;
}
.dm-dock-inbox-list::-webkit-scrollbar { width: 6px; }
.dm-dock-inbox-list::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.18); border-radius: 999px; }
.dm-dock-empty {
  padding: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Conv list rows — denser, single-line preview, lighter timestamps.
   36px avatar (was 40), 6px vertical padding (was 8). */
.dm-dock-conv-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px 6px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 120ms ease;
}
.dm-dock-conv-item:hover { background: rgba(124, 58, 237, 0.05); }
.dm-dock-conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: #fff; font-weight: 700; font-size: 0.78rem;
}
.dm-dock-conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-dock-conv-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.dm-dock-conv-name { font-weight: 600; color: #111827; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.dm-dock-conv-preview { font-size: 0.78rem; color: #9ca3af; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-dock-conv-empty-preview { color: #c4c0cc; font-weight: 400; }
.dm-dock-conv-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; padding-top: 1px; }
.dm-dock-conv-time { font-size: 0.66rem; color: #b6b3c0; letter-spacing: 0.01em; }
.dm-dock-conv-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 0 1.5px #fff;
}

/* ── Mini chat stack ────────────────────────────────────────────────── */
.dm-dock-mini-stack {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  /* Newest mini opens at the rightmost of the stack, closest to the
     launcher. flex-direction stays default so order matches DOM order
     (newest appended → rightmost). */
}

.dm-mini-chat {
  width: 306px;                       /* was 340 — shrunk ~10% per user feedback */
  height: min(432px, calc(100vh - 80px));  /* was 480 — same shrink ratio */
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 16px;
  box-shadow:
    0 18px 44px rgba(124, 58, 237, 0.16),
    0 6px 14px rgba(15, 10, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;                 /* drop-hint overlay anchor */
  animation: dm-dock-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Drag-over overlay — shows when a file is hovering. The hint div is
   absolutely positioned over the message list, fades in/out via opacity. */
.dm-mini-drop-hint {
  position: absolute;
  inset: 50px 8px 60px 8px;           /* clear header + composer */
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, 0.10);
  border: 2px dashed rgba(124, 58, 237, 0.45);
  border-radius: 14px;
  color: #6d28d9;
  font-weight: 600; font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 5;
}
.dm-mini-chat.is-dragover .dm-mini-drop-hint { opacity: 1; }

.dm-mini-header {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 8px;
  border-bottom: 1px solid rgba(15, 10, 28, 0.06);
  background: linear-gradient(180deg, #fff, #fbfaff);
  min-height: 44px;
}
.dm-mini-back {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  cursor: pointer; color: #6b7280;
  transition: background 120ms ease, color 120ms ease;
}
.dm-mini-back:hover { background: rgba(124, 58, 237, 0.08); color: #7c3aed; }
.dm-mini-back svg { width: 16px; height: 16px; }

.dm-mini-peek {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 10px;
  font-family: inherit;
  transition: background 120ms ease;
}
.dm-mini-peek:hover { background: rgba(124, 58, 237, 0.06); }
.dm-mini-avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.dm-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-mini-name-wrap { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.dm-mini-name { font-weight: 700; color: #111827; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-mini-handle { font-size: 0.68rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-mini-spacer { flex: 1; }
.dm-mini-header > button:not(.dm-mini-peek):not(.dm-mini-back) {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  cursor: pointer; color: #6b7280;
  transition: background 120ms ease, color 120ms ease;
}
.dm-mini-header > button:not(.dm-mini-peek):not(.dm-mini-back):hover {
  background: rgba(124, 58, 237, 0.08); color: #7c3aed;
}
.dm-mini-header > button svg { width: 13px; height: 13px; }

/* Message list */
.dm-mini-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  align-content: stretch;
  /* No flex `gap` here — earlier impl used gap: 2px + negative margins
     on .is-run-* rows which fought itself and made spacing hard to
     reason about. Inter-row spacing now lives explicitly on
     .dm-mini-row.margin-top. Codex 2026-05-16. */
  gap: 0;
  background: linear-gradient(180deg, #fff, #fafaff);
}
/* Loading state shown during the progressive open (Charles 2026-05-16
   perf fix #290). Three pulsing dots in the message area while the
   first page of bubbles is in flight. Centered so it doesn't shift the
   layout when real messages replace it. */
.dm-mini-loading {
  margin: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 18px 0;
}
.dm-mini-loading-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c4b5fd;
  opacity: 0.5;
  animation: dmMiniLoadingDot 1.2s infinite ease-in-out;
}
.dm-mini-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.dm-mini-loading-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes dmMiniLoadingDot {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
body:not(.light) .dm-mini-loading-dot { background: #7c3aed; }

.dm-mini-empty {
  margin: auto;
  text-align: center;
  color: #9ca3af;
  font-size: 0.88rem;
  padding: 12px;
}
.dm-mini-date-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 10px 0 4px;
  font-size: 0.7rem; color: #9ca3af;
}
.dm-mini-date-divider span {
  background: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 10, 28, 0.06);
}

.dm-mini-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px;
  align-items: flex-end;
  flex: 0 0 auto;
}
.dm-mini-row.is-mine {
  grid-template-columns: 1fr;
  justify-items: end;
}
.dm-mini-row-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.dm-mini-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-mini-row-avatar-spacer { background: transparent; visibility: hidden; }

.dm-mini-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.dm-mini-row.is-mine   .dm-mini-bubble-wrap { align-items: flex-end; }
/* Incoming bubbles need explicit flex-start — without it, default
   align-items: stretch makes the bubble fill the row's full width,
   which is why "hi" looked like a giant block instead of a chat
   bubble. Codex 2026-05-16. */
.dm-mini-row.is-theirs .dm-mini-bubble-wrap { align-items: flex-start; }
.dm-mini-bubble {
  /* Width must be max-content, not fit-content/auto inside a shrink-sized
     grid item. fit-content collapsed short words like "Hey" into one
     character per line in the floating dock. The wrapper owns the full
     row width; the bubble uses its natural text width, capped to the
     available chat width. */
  width: max-content;
  max-width: min(76%, 220px);
  min-width: 0;
  padding: 7px 11px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}
/* Image bubbles — render the picture itself, no text container chrome.
   Drop shadow gives separation against the gray gutter without a border. */
.dm-mini-image {
  max-width: 200px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 10, 28, 0.10);
  background: #f3f4f6;
}
.dm-mini-image img { display: block; width: 100%; max-height: 280px; object-fit: cover; cursor: zoom-in; transition: transform 200ms ease; }
.dm-mini-image:hover img { transform: scale(1.02); }
.dm-mini-image.is-pending { opacity: 0.6; }
.dm-mini-image.is-pending img { cursor: progress; }

/* Image collages — Messenger-style layouts for 2/3/4+ photos in one
   message. Each cell is a square crop; +N overlay on the 4th when >4. */
.dm-mini-image-grid {
  width: 220px;
  display: grid;
  gap: 3px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 10, 28, 0.10);
  background: #f3f4f6;
  position: relative;
}
.dm-mini-image-grid.is-2 {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 110px;
}
.dm-mini-image-grid.is-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 110px 110px;
}
.dm-mini-image-grid.is-3 > .dm-mini-image-cell:first-child {
  grid-row: 1 / span 2;
}
.dm-mini-image-grid.is-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 110px 110px;
}
.dm-mini-image-cell {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}
.dm-mini-image-cell img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dm-mini-image-cell.has-overflow img { filter: brightness(0.55); }
.dm-mini-image-overflow {
  position: absolute;
  right: 0; bottom: 0;
  width: 50%; height: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.5px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dm-mini-image-grid.is-pending { opacity: 0.6; }

/* Attach popover — anchored to the + button. Shows "Photo" and "GIF"
   choices. Each opens the native file picker filtered to the right
   image MIME types. */
.dm-mini-attach-wrap { position: relative; }
.dm-mini-attach-menu {
  position: absolute;
  bottom: 38px;   /* clears the + button */
  left: -4px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 14px;
  box-shadow:
    0 14px 30px rgba(124, 58, 237, 0.18),
    0 4px 10px rgba(15, 10, 28, 0.08);
  padding: 6px;
  min-width: 140px;
  display: flex; flex-direction: column;
  gap: 2px;
  animation: dm-dock-pop 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 20;
}
.dm-mini-attach-menu[hidden] { display: none; }
.dm-mini-attach-opt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #1f2937;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 120ms ease, color 120ms ease;
}
.dm-mini-attach-opt:hover { background: rgba(124, 58, 237, 0.08); color: #6d28d9; }
.dm-mini-attach-opt-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.10);
  color: #7c3aed;
  flex: none;
}
.dm-mini-attach-opt-icon svg { width: 16px; height: 16px; }
.dm-mini-attach-opt-gif {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #7c3aed;
}
.dm-mini-row.is-theirs .dm-mini-bubble {
  background: #f3f4f6;
  color: #1f2937;
  border-bottom-left-radius: 6px;
}
.dm-mini-row.is-theirs:not(.is-tail) .dm-mini-bubble { border-bottom-left-radius: 18px; }
.dm-mini-row.is-mine .dm-mini-bubble {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
}
.dm-mini-row.is-mine:not(.is-tail) .dm-mini-bubble { border-bottom-right-radius: 18px; }
.dm-mini-bubble.is-pending { opacity: 0.6; }

/* ── Bubble grouping for consecutive same-sender runs (Messenger
   pattern). Tightens the corner on the "tail" side of the bubble
   when it's adjacent to another bubble from the same sender, and
   collapses the row gap so the run reads as one block. Charles bug
   2026-05-16. The `.dm-mini-messages` container has `gap: 2px`
   already, so to truly pull grouped bubbles together we override the
   margin (negative) AND tighten corners. Older rules used 18px
   border-radius which was visually identical to the default 16px;
   the new 3px is intentionally bold so the grouping is unmistakable. */
/* (Old `.dm-mini-bubble-stack .dm-mini-bubble` companion selectors
   removed alongside the hover action menu — the stack wrapper no
   longer exists. Charles 2026-05-16 #291.) */
.dm-mini-row.is-run-first.is-mine   .dm-mini-bubble { border-bottom-right-radius: 3px; }
.dm-mini-row.is-run-mid.is-mine     .dm-mini-bubble { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.dm-mini-row.is-run-last.is-mine    .dm-mini-bubble { border-top-right-radius: 3px; }
.dm-mini-row.is-run-first.is-theirs .dm-mini-bubble { border-bottom-left-radius: 3px; }
.dm-mini-row.is-run-mid.is-theirs   .dm-mini-bubble { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.dm-mini-row.is-run-last.is-theirs  .dm-mini-bubble { border-top-left-radius: 3px; }
/* Inter-row spacing — explicit margins instead of the prior
   gap-then-negative-margin pattern (Codex 2026-05-16). Standalone
   rows get a tight 6px separation; rows that continue a same-sender
   run get only 1px so consecutive bubbles snug almost-touching.
   Dividers (date + unread) reset the next row to 0 so they don't
   compound with the divider's own spacing. */
.dm-mini-row { margin-top: 6px; }
.dm-mini-row.is-run-mid,
.dm-mini-row.is-run-last { margin-top: 1px; }
.dm-mini-date-divider + .dm-mini-row,
.dm-mini-unread-divider + .dm-mini-row,
.dm-mini-row:first-child { margin-top: 0; }

/* Kill the bubble's purple drop-shadow on bubbles that have another
   bubble directly below them in the same run — otherwise the 14px
   shadow paints into the gap and makes grouped bubbles look spaced
   apart even when they're geometrically touching. Singletons +
   is-run-last keep their shadow so the bottom of the group still
   feels grounded. Charles 2026-05-16. */
.dm-mini-row.is-mine.is-run-first .dm-mini-bubble,
.dm-mini-row.is-mine.is-run-mid   .dm-mini-bubble {
  box-shadow: none;
}

/* Soft-deleted ("unsent") bubble — render path lives in
   _renderMessagesMarkup's deleted_at branch. Visually distinct from
   live bubbles so users immediately recognize the row was unsent:
   outlined instead of filled, italic, faded, trash glyph inline.
   Charles 2026-05-16, Codex review P0-2. */
.dm-mini-bubble.is-deleted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed rgba(15, 10, 28, 0.18);
  color: #6b7280;
  font-style: italic;
  font-size: 0.78rem;
  padding: 5px 10px;
}
.dm-mini-bubble.is-deleted .dm-mini-deleted-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
body:not(.light) .dm-mini-bubble.is-deleted {
  border-color: rgba(255, 255, 255, 0.14);
  color: #9b91b8;
}

/* ── Reactions: pills + hover react button + picker ──────────────────
   Pattern matches the full-page DM reactions so a reaction added from
   the dock and one added from the full Messages screen look identical.
   The hover react button is a tiny smiley that slides in alongside the
   bubble on hover (or always-visible on touch — no hover concept).
   Charles 2026-05-16 dock parity (#258). */
.dm-mini-bubble-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-mini-row.is-mine .dm-mini-bubble-inline { justify-content: flex-end; }
.dm-mini-bubble-content { min-width: 0; }

/* ── Unread badge in inbox list (Codex #280) ──────────────────────── */
.dm-dock-conv-unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Unread divider line (Codex #281) ─────────────────────────────── */
.dm-mini-unread-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dm-mini-unread-divider::before,
.dm-mini-unread-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(124, 58, 237, 0.25);
}
body:not(.light) .dm-mini-unread-divider { color: #c4b5fd; }
body:not(.light) .dm-mini-unread-divider::before,
body:not(.light) .dm-mini-unread-divider::after { background: rgba(167, 139, 250, 0.25); }

/* ── Load-older button at top of messages (Codex #282) ────────────── */
.dm-mini-older-row {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 6px 12px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
  color: #7c3aed;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 120ms ease;
}
.dm-mini-older-row:hover { background: rgba(124, 58, 237, 0.12); }
.dm-mini-older-row.is-loading {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-weight: 500;
  cursor: default;
}
body:not(.light) .dm-mini-older-row {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.20);
  color: #c4b5fd;
}
body:not(.light) .dm-mini-older-row:hover { background: rgba(167, 139, 250, 0.18); }

/* ── Typing indicator (Codex #283) ────────────────────────────────── */
.dm-mini-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #f1eef9;
  border-radius: 16px;
}
.dm-mini-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7c3aed;
  opacity: 0.4;
  animation: dmMiniTypingDot 1.4s infinite ease-in-out;
}
.dm-mini-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.dm-mini-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dmMiniTypingDot {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
body:not(.light) .dm-mini-typing-bubble { background: #2a2440; }

/* ── Seen indicator avatar under last-read own message (Codex #283) ─
   Earlier this rendered as a full-bubble-width circle — the `img`
   was `width: 100%` inside an unconstrained flex container, so it
   stretched to the messages-list width. Fixed by explicit sizing on
   the actual elements (img + initials span) instead of using `> *`
   + `img { width: 100% }`. Charles bug 2026-05-16.
   2026-05-16 (Codex polish): seen-row now lives INSIDE the bubble-
   wrap (was rendered as a row sibling), so it hugs the message it
   belongs to instead of floating as a detached item. Tightened
   padding + line-height for that placement. */
.dm-mini-seen-row {
  display: flex;
  justify-content: flex-end;
  padding: 1px 4px 0 0;
  line-height: 1;
}
.dm-mini-seen-row img {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: none;
}
.dm-mini-seen-row .dm-dock-initials {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  font-size: 0.5rem;
  color: #fff;
  font-weight: 600;
  flex: none;
}
/* Group seen — stacked avatars (overlapping) of members who read past
   the most recent own message. Codex follow-up for Charles 2026-05-16. */
.dm-mini-seen-row.is-group {
  gap: 0;
  align-items: center;
}
.dm-mini-seen-row.is-group img,
.dm-mini-seen-row.is-group .dm-dock-initials {
  margin-left: -4px;       /* overlap */
  border: 1.5px solid #fff;
  box-sizing: content-box; /* keeps the 14px avatar visible after border */
}
.dm-mini-seen-row.is-group > *:first-child { margin-left: 0; }
.dm-mini-seen-overflow {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #7c3aed;
}
body:not(.light) .dm-mini-seen-row.is-group img,
body:not(.light) .dm-mini-seen-row.is-group .dm-dock-initials {
  border-color: #1f1a36;
}
body:not(.light) .dm-mini-seen-overflow { color: #c4b5fd; }

/* ── Lightbox gallery nav (Codex #284) ────────────────────────────── */
.lightbox-nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  z-index: 2010;
}
.lightbox-prev,
.lightbox-next {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 120ms ease;
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255, 255, 255, 0.15); }
.lightbox-counter {
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 50px;
  text-align: center;
}

/* Group chat sender name — appears above the first bubble in each
   incoming run (Messenger group pattern). Charles 2026-05-16 group
   avatar/name fix. */
.dm-mini-sender-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: #7c3aed;
  margin-bottom: 2px;
  padding: 0 6px;
}
body:not(.light) .dm-mini-sender-name { color: #c4b5fd; }

/* ── Tap-to-open action popover (Charles 2026-05-16 #291) ────────────
   Replaces the hover-revealed action strip that used absolute
   positioning above each bubble. The bubble-wrap itself is now the
   tap target (no extra inline-block wrapper that was introducing
   baseline whitespace between rows). The wrap is already part of the
   row layout — adding role/tabindex/data-msg costs zero pixels. */
.dm-mini-bubble-wrap[data-msg] {
  cursor: pointer;
  outline: none;
}
.dm-mini-bubble-wrap[data-msg]:focus-visible .dm-mini-bubble {
  outline: 2px solid rgba(124, 58, 237, 0.5);
  outline-offset: 2px;
}
.dm-mini-bubble-wrap[data-msg]:active .dm-mini-bubble { opacity: 0.88; }

/* Image-only message actions overlay — small ⋯ button bottom-right
   of the image. Codex P1-3 2026-05-16. Image messages don't have a
   .dm-mini-bubble to tap, so this gives users a way to React /
   Reply / Delete pure-image messages without losing the
   tap-image-opens-lightbox UX. */
.dm-mini-bubble-wrap[data-msg] { position: relative; }
.dm-mini-img-actions {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
}
.dm-mini-bubble-wrap[data-msg]:hover .dm-mini-img-actions { opacity: 1; }
.dm-mini-img-actions:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.06);
}
.dm-mini-img-actions:active { transform: scale(0.92); }
@media (hover: none) {
  /* Touch — always visible since there's no hover state. */
  .dm-mini-img-actions { opacity: 0.85; }
}
/* Keep links + interactive elements inside the bubble (reply quote,
   reaction pills, edit textarea) showing their own cursor. */
.dm-mini-bubble-wrap[data-msg] .dm-mini-rx-pill,
.dm-mini-bubble-wrap[data-msg] .dm-mini-reply-quote,
.dm-mini-bubble-wrap[data-msg] .dm-mini-edit-textarea,
.dm-mini-bubble-wrap[data-msg] .dm-mini-edit-save,
.dm-mini-bubble-wrap[data-msg] .dm-mini-edit-cancel,
.dm-mini-bubble-wrap[data-msg] .dm-mini-image img,
.dm-mini-bubble-wrap[data-msg] .dm-mini-image-cell img { cursor: pointer; }

.dm-mini-action-popover {
  display: inline-flex;
  gap: 2px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid rgba(15, 10, 28, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 10, 28, 0.18);
  /* Above the dock root (z 9000), below modals (10000). */
  z-index: 9150;
  animation: dmMiniActionPopIn 140ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes dmMiniActionPopIn {
  from { transform: translateY(4px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.dm-mini-pop-act {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none; border-radius: 50%;
  color: #6b7280; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.dm-mini-pop-act:hover {
  background: rgba(124, 58, 237, 0.10);
  color: #7c3aed;
  transform: scale(1.08);
}
.dm-mini-pop-act-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.dm-mini-pop-act:active { transform: scale(0.92); }
body:not(.light) .dm-mini-action-popover {
  background: #1f1a36;
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-mini-pop-act { color: #9b91b8; }
body:not(.light) .dm-mini-pop-act:hover {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}

/* Inline edit textarea (replaces bubble body when editing). */
.dm-mini-edit-wrap {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 14px;
  padding: 6px 8px;
  max-width: 240px;
}
.dm-mini-edit-textarea {
  resize: none;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 32px;
  padding: 0;
  color: inherit;
}
.dm-mini-edit-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}
.dm-mini-edit-cancel,
.dm-mini-edit-save {
  font-size: 0.72rem;
  padding: 3px 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.dm-mini-edit-cancel {
  background: transparent;
  color: #6b7280;
}
.dm-mini-edit-cancel:hover { background: rgba(15, 10, 28, 0.06); }
.dm-mini-edit-save {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
}
.dm-mini-edit-save:hover { transform: translateY(-1px); }
.dm-mini-edited {
  font-size: 0.65rem;
  opacity: 0.55;
  margin-left: 4px;
}

/* Reply quote chip above the bubble (when this message replies to one). */
.dm-mini-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border-left: 3px solid #a78bfa;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 6px;
  max-width: 220px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 120ms ease;
}
.dm-mini-reply-quote:hover { background: rgba(124, 58, 237, 0.12); }
.dm-mini-reply-quote.is-mine    { align-self: flex-end; border-left: 0; border-right: 3px solid #a78bfa; }
.dm-mini-reply-quote.is-theirs  { align-self: flex-start; }
.dm-mini-reply-quote-name {
  font-weight: 600;
  color: #7c3aed;
  font-size: 0.65rem;
}
.dm-mini-reply-quote-body {
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-mini-reply-quote.is-orphan {
  font-style: italic;
  color: #9ca3af;
  cursor: default;
}
body:not(.light) .dm-mini-reply-quote {
  background: rgba(167, 139, 250, 0.10);
}
body:not(.light) .dm-mini-reply-quote-name { color: #c4b5fd; }
body:not(.light) .dm-mini-reply-quote-body { color: #cfc8e6; }

/* Reply chip above the composer (while drafting a reply). */
.dm-mini-reply-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(124, 58, 237, 0.08);
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  border-left: 3px solid #7c3aed;
  font-size: 0.72rem;
}
.dm-mini-reply-chip-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.dm-mini-reply-chip-name {
  font-weight: 600;
  color: #7c3aed;
}
.dm-mini-reply-chip-body {
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-mini-reply-chip-close {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: #6b7280; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.dm-mini-reply-chip-close:hover { background: rgba(15, 10, 28, 0.08); color: #1f2937; }
body:not(.light) .dm-mini-reply-chip {
  background: rgba(167, 139, 250, 0.12);
  border-top-color: rgba(255, 255, 255, 0.08);
}
body:not(.light) .dm-mini-reply-chip-name { color: #c4b5fd; }
body:not(.light) .dm-mini-reply-chip-body { color: #cfc8e6; }

/* Jump-to highlight pulse when clicking a reply quote. */
.dm-mini-row.is-jump-highlight .dm-mini-bubble {
  animation: dmMiniJumpPulse 1200ms ease;
}
@keyframes dmMiniJumpPulse {
  0%, 100% { box-shadow: none; }
  30%      { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }
}
.dm-mini-react-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 50%;
  color: #7c3aed; cursor: pointer;
  /* Always visible at moderate opacity so users discover the button;
     hover bumps to full intensity. Earlier opacity: 0 + hover-only
     reveal made the button effectively invisible, which is why reactions
     looked broken even though the click path worked. Charles 2026-05-16. */
  opacity: 0.65;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
  flex: none;
}
.dm-mini-row:hover .dm-mini-react-btn { opacity: 1; }
.dm-mini-react-btn:hover {
  background: rgba(124, 58, 237, 0.16);
  color: #5b21b6;
  transform: scale(1.08);
}
.dm-mini-react-btn:active { transform: scale(0.92); }
.dm-mini-react-btn svg { width: 16px; height: 16px; }
body:not(.light) .dm-mini-react-btn {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
}
body:not(.light) .dm-mini-react-btn:hover {
  background: rgba(167, 139, 250, 0.22);
  color: #e7e2f5;
}
@media (hover: none) {
  /* Touch — the `.dm-mini-row:hover .dm-mini-react-btn { opacity: 1 }`
     rule above never fires (no hover state on touch), so the button
     would sit permanently at the resting opacity and read as disabled
     on iPad/iPhone Safari. Pin to full opacity on touch — the button
     IS the tap target, so there's no "subtle on rest, prominent on
     hover" affordance to preserve. Codex review P2-271 fix. */
  .dm-mini-react-btn { opacity: 1; }
}

.dm-mini-bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: -4px;          /* overlap onto the bubble's bottom edge */
  padding: 0 4px;
}
.dm-mini-bubble-reactions.is-mine    { justify-content: flex-end; }
.dm-mini-bubble-reactions.is-theirs  { justify-content: flex-start; }
.dm-mini-rx-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 10, 28, 0.08);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  color: #4b5563;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.dm-mini-rx-pill:hover { background: #fafaff; transform: translateY(-1px); }
.dm-mini-rx-pill.is-mine {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.35);
  color: #5b21b6;
}
.dm-mini-rx-pill-emoji { font-size: 0.85rem; line-height: 1; }
.dm-mini-rx-pill-count { font-weight: 600; }

/* Quick-reactions picker — Messenger-style horizontal strip with a
   subtle pop-in. Positioned by JS via fixed-top/left. */
.dm-mini-rx-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 10, 28, 0.18);
  border: 1px solid rgba(15, 10, 28, 0.05);
  /* Must sit ABOVE the dock root (#dmFloatingRoot z-index: 9000) so it
     doesn't get clipped by the right-column avatar stack / launcher
     when the picker pops up next to a mini-chat near the dock's edge.
     Stays below modals (10000) so an open modal still covers it.
     Charles 2026-05-16: picker visible-but-clipped bug fix. */
  z-index: 9100;
  animation: dmMiniRxPickerIn 140ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes dmMiniRxPickerIn {
  from { transform: translateY(4px) scale(0.92); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
.dm-mini-rx-pick {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.dm-mini-rx-pick:hover { background: rgba(124, 58, 237, 0.10); transform: scale(1.18); }
.dm-mini-rx-pick:active { transform: scale(0.92); }

body.light .dm-mini-rx-pill { background: #fff; }
body:not(.light) .dm-mini-rx-pill {
  background: #1f1a36;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cfc8e6;
}
body:not(.light) .dm-mini-rx-pill:hover { background: #2a2440; }
body:not(.light) .dm-mini-rx-pill.is-mine {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.4);
  color: #e7e2f5;
}
body:not(.light) .dm-mini-rx-picker {
  background: #1f1a36;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Composer */
.dm-mini-composer {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(15, 10, 28, 0.06);
  background: #fff;
}
.dm-mini-attach,
.dm-mini-emoji {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  cursor: pointer; color: #6b7280;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  flex: none;
}
.dm-mini-attach:hover,
.dm-mini-emoji:hover { background: rgba(124, 58, 237, 0.08); color: #7c3aed; }
.dm-mini-attach:active { transform: scale(0.92); }
.dm-mini-attach svg,
.dm-mini-emoji svg { width: 16px; height: 16px; }

.dm-mini-input {
  flex: 1; min-width: 0;
  resize: none;
  border: 1px solid rgba(15, 10, 28, 0.10);
  border-radius: 16px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  background: #fafaff;
  color: #1f2937;
  max-height: 110px;
  transition: border-color 120ms ease, background 120ms ease;
}
.dm-mini-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.35);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
.dm-mini-input:disabled { opacity: 0.6; cursor: progress; }

.dm-mini-send {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  flex: none;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.30);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.dm-mini-send:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(124, 58, 237, 0.40); }
.dm-mini-send:active { transform: translateY(0); }
.dm-mini-send:disabled { opacity: 0.5; cursor: progress; transform: none; box-shadow: none; }
.dm-mini-send svg { width: 14px; height: 14px; }
/* Send-button icon swap: empty input → thumbs-up; typed input →
   paper-plane. Visible affordance for the thumbs-up quick send so
   users discover the mobile + full-page parity behavior. Charles
   2026-05-16 dock parity. */
.dm-mini-send-icon-plane,
.dm-mini-send-icon-thumb { width: 14px; height: 14px; display: none; }
.dm-mini-send:not(.is-thumb) .dm-mini-send-icon-plane { display: block; }
.dm-mini-send.is-thumb     .dm-mini-send-icon-thumb { display: block; }
.dm-mini-send.is-thumb {
  /* Slightly larger glyph + lighter gradient signals "this is a
     one-tap thumbs-up shortcut", not a normal send. */
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
}
.dm-mini-send.is-thumb svg { width: 16px; height: 16px; }

/* Minimized chip — replaces the mini-chat while it's collapsed */
.dm-mini-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.10);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(124, 58, 237, 0.14),
    0 4px 8px rgba(15, 10, 28, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
  font-family: inherit;
  font-size: 0.88rem; font-weight: 600;
  color: #1f2937;
}
.dm-mini-chip:hover { transform: translateY(-1px); }
.dm-mini-chip-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.dm-mini-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-mini-chip-name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-mini-chip-close {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}
.dm-mini-chip-close:hover { background: rgba(124, 58, 237, 0.08); color: #7c3aed; }

/* Dark-mode adjustments (body.dark or :not(.light)) */
body:not(.light) .dm-dock-launcher,
body:not(.light) .dm-dock-inbox,
body:not(.light) .dm-mini-chat,
body:not(.light) .dm-mini-chip {
  background: #1f1b2e;
  border-color: rgba(167, 139, 250, 0.20);
  color: #e7e2f5;
}
body:not(.light) .dm-dock-launcher { color: #e7e2f5; }
body:not(.light) .dm-dock-inbox-header { border-bottom-color: rgba(167, 139, 250, 0.14); }
body:not(.light) .dm-dock-inbox-header h2 { color: #f3effa; }
body:not(.light) .dm-dock-conv-item:hover,
body:not(.light) .dm-mini-peek:hover,
body:not(.light) .dm-dock-inbox-actions button:hover,
body:not(.light) .dm-mini-emoji:hover,
body:not(.light) .dm-mini-attach:hover,
body:not(.light) .dm-mini-back:hover,
body:not(.light) .dm-mini-header > button:not(.dm-mini-peek):not(.dm-mini-back):hover {
  background: rgba(167, 139, 250, 0.14);
  color: #c4b5fd;
}
body:not(.light) .dm-mini-drop-hint {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.50);
  color: #c4b5fd;
}
body:not(.light) .dm-mini-image,
body:not(.light) .dm-mini-image-grid { background: #2a2440; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
body:not(.light) .dm-mini-image-cell { background: #1f1b2e; }
body:not(.light) .dm-mini-attach-menu {
  background: #1f1b2e;
  border-color: rgba(167, 139, 250, 0.20);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
}
body:not(.light) .dm-mini-attach-opt { color: #e7e2f5; }
body:not(.light) .dm-mini-attach-opt:hover { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
body:not(.light) .dm-mini-attach-opt-icon { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
body:not(.light) .dm-mini-attach-opt-gif { color: #c4b5fd; }
body:not(.light) .dm-dock-conv-name,
body:not(.light) .dm-mini-name { color: #f3effa; }
body:not(.light) .dm-dock-conv-preview,
body:not(.light) .dm-mini-handle { color: #a89ec7; }
body:not(.light) .dm-mini-messages { background: linear-gradient(180deg, #1f1b2e, #181527); }
body:not(.light) .dm-mini-row.is-theirs .dm-mini-bubble { background: #2a2440; color: #e7e2f5; }
body:not(.light) .dm-mini-date-divider span { background: #1f1b2e; border-color: rgba(167, 139, 250, 0.14); color: #a89ec7; }
body:not(.light) .dm-mini-input { background: #181527; color: #e7e2f5; border-color: rgba(167, 139, 250, 0.20); }
body:not(.light) .dm-mini-input:focus { background: #211c33; border-color: rgba(167, 139, 250, 0.50); }
body:not(.light) .dm-mini-composer,
body:not(.light) .dm-mini-header { background: #1f1b2e; border-color: rgba(167, 139, 250, 0.14); }
body:not(.light) .dm-mini-header { background: linear-gradient(180deg, #1f1b2e, #25203a); }

/* ════════════════════════════════════════════════════════════════════════════
   FEED UI POLISH — 2026-05-17
   ════════════════════════════════════════════════════════════════════════════
   Premium pass on the post-feed surface per UX feedback. Additive
   overrides only — earlier rules in this file still apply and these
   refine. Touch points:
     • Post card (hover/elevation, transitions, body legibility)
     • Username + timestamp hierarchy
     • Vertical rhythm between cards + inside cards
     • Link preview (clickable cursor, hover lift, larger generic favicon
       block, bolder host)
     • Action buttons (smoother transitions, scale-on-press)
     • Engagement counts (more prominent on hover)
     • Composer (focus glow ring, polished tool buttons, loading state
       on Post submit when [disabled])
   Skipped per user instruction: post-type badges, right-side
   suggestion panel.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card: subtle lift on hover, premium shadow, breathing room ─────────── */
.post-card {
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 10, 28, 0.03);
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
}
.post-card:hover {
  box-shadow: 0 6px 22px rgba(15, 10, 28, 0.08), 0 1px 3px rgba(15, 10, 28, 0.04);
  border-color: rgba(124, 58, 237, 0.18);
}
body:not(.light) .post-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body:not(.light) .post-card:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.22);
  border-color: rgba(167, 139, 250, 0.22);
}

/* ── Header: clearer username, lighter/smaller timestamp ────────────────── */
.post-author {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  transition: color 0.15s ease;
}
.post-author.profile-link:hover { color: var(--purple, #7c3aed); }
body:not(.light) .post-author.profile-link:hover { color: var(--purple-lt, #a78bfa); }
.post-time {
  font-size: 0.72rem;
  color: var(--text3);
  opacity: 0.85;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.post-header { margin-bottom: 0.75rem; }

/* ── Body: slightly larger, comfier reading ─────────────────────────────── */
.post-body {
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: -0.003em;
  color: var(--text);
  margin-bottom: 0.85rem;
}

/* ── Link preview: clickable cursor, premium hover, bigger generic block ── */
.link-preview { cursor: pointer; }
.link-preview-generic {
  padding: 0.85rem 1rem;
  gap: 1rem;
  align-items: center;
}
.link-preview-favicon {
  width: 52px;
  height: 52px;
  border-radius: 11px;
}
.link-preview-favicon img { width: 30px; height: 30px; }
.link-preview-host {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
}
.link-preview-url {
  font-size: 0.76rem;
  color: #6b7280;
  margin-top: 0.18rem;
}
.link-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 10, 28, 0.09);
  border-color: rgba(124, 58, 237, 0.32);
}
body:not(.light) .link-preview-host { color: #f3f4f6; }
body:not(.light) .link-preview:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  border-color: rgba(167, 139, 250, 0.42);
}
/* Thumbnail (YouTube) — slight zoom-in on hover for liveliness. */
.link-preview-youtube .link-preview-thumb img {
  transition: transform 0.35s ease;
}
.link-preview-youtube:hover .link-preview-thumb img { transform: scale(1.025); }

/* ── Engagement counts: a touch more prominent on hover, subtle pop ───── */
.post-stats {
  padding: 0.35rem 0 0.6rem;
  font-size: 0.82rem;
}
.post-stats .rcount,
.post-stats .ccount {
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.post-stats .rcount:not(:empty):hover,
.post-stats .ccount:not(:empty):hover {
  transform: translateY(-1px);
}

/* ── Action buttons: smoother transitions, clearer hover, premium press ── */
.action-btn {
  transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}
.action-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  color: var(--purple, #7c3aed);
  transform: translateY(-1px);
}
.action-btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}
body:not(.light) .action-btn:hover {
  background: rgba(167, 139, 250, 0.14);
  color: var(--purple-lt, #c4b5fd);
}
/* The "reacted" pink state — give it a tiny soft glow so it reads as
   "this is your active reaction" rather than just a color swap. */
.action-btn.reacted {
  box-shadow: 0 1px 3px rgba(236, 72, 153, 0.20);
}
.action-btn.reacted:hover {
  background: rgba(236, 72, 153, 0.16);
  color: #ec4899;
}

/* ── Action bar: a hair more air above the buttons ──────────────────────── */
.post-actions {
  padding-top: 0.7rem;
  gap: 0.5rem;
}

/* ── Composer: premium focus ring, polished tool buttons, loading state ── */
.compose {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.compose:focus-within {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
body:not(.light) .compose:focus-within {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
.compose textarea {
  transition: border-color 0.18s ease, background 0.18s ease;
}
.compose textarea:focus {
  border-color: rgba(124, 58, 237, 0.55);
  background: var(--bg2);
}
body:not(.light) .compose textarea:focus {
  border-color: rgba(167, 139, 250, 0.55);
}

/* Tool buttons (Photo / Video / Book / Schedule) — premium hover + press */
.image-upload-btn {
  transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease;
  border-radius: 8px;
  padding: 7px 12px;
}
.image-upload-btn:hover {
  background: rgba(124, 58, 237, 0.10);
  color: var(--purple, #7c3aed);
  transform: translateY(-1px);
}
.image-upload-btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}
body:not(.light) .image-upload-btn:hover {
  background: rgba(167, 139, 250, 0.14);
  color: var(--purple-lt, #c4b5fd);
}

/* Composer submit Post button — loading/disabled feedback. Any code path
   that sets [disabled] on btnPostSubmit will pick this up automatically. */
#btnPostSubmit { transition: transform 0.14s ease, opacity 0.18s ease, box-shadow 0.18s ease; }
#btnPostSubmit:not([disabled]):hover { transform: translateY(-1px); }
#btnPostSubmit:not([disabled]):active { transform: scale(0.97); }
#btnPostSubmit[disabled] {
  opacity: 0.62;
  cursor: progress;
  transform: none;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18);
}

/* ── Feed spacing: a bit more breathing room between cards ─────────────── */
#feed .post-card + .post-card { margin-top: 0.25rem; }
#feed { padding-bottom: 1rem; }

/* ── Post image: slight shadow + smoother zoom on hover ─────────────────── */
.post-image {
  transition: box-shadow 0.22s ease;
}
.post-image:hover {
  box-shadow: 0 4px 14px rgba(15, 10, 28, 0.10);
}
.post-image img { transition: transform 0.35s ease; }
.post-image:hover img { transform: scale(1.015); }

/* ════════════════════════════════════════════════════════════════════════════
   FEED DENSITY TWEAKS — 2026-05-18
   ════════════════════════════════════════════════════════════════════════════
   Follow-up to the 2026-05-17 polish (above). User feedback: cards
   feel slightly too tall and images dominate the feed. Goal is a
   Facebook/Threads-like density — more posts visible per screen,
   faster scanning, image supports the post instead of overpowering
   it. All adjustments preserve yesterday's hover/transition polish,
   rounded corners, soft shadows, and purple theme.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card: tighter padding + tighter inter-card spacing ─────────────────── */
.post-card {
  padding: 0.8rem 0.95rem;
  margin-bottom: 0.55rem;
}
/* Override the inter-card extra margin from yesterday's polish so cards
   sit closer together. Keeps the hover-lift intact (transform only,
   not margin). */
#feed .post-card + .post-card { margin-top: 0; }

/* ── Header: a hair less air below the username/timestamp row ──────────── */
.post-header { margin-bottom: 0.55rem; }

/* ── Body: still readable but tighter line-height for density ──────────── */
.post-body {
  font-size: 0.93rem;
  line-height: 1.55;
  margin-bottom: 0.6rem;
}

/* ── Image: cap height at 480px (between user's 400-550 sweet spot),
       keep aspect ratio, tighter margin below so the image hugs the
       stats/actions row instead of leaving a gap. ────────────────────── */
.post-image {
  margin-bottom: 0.5rem;
  max-height: 480px;
  /* When the image's natural aspect ratio is taller than the wrapper,
     contain it so we never blow past the cap on tall portrait photos.
     The earlier rule on .post-image img kept object-fit: cover at
     500px; we override here. */
}
.post-image img {
  max-height: 480px;
  object-fit: cover;
}

/* ── Reaction count strip: tighter padding so it doesn't add a band
       between the image and the action bar. ────────────────────────── */
.post-stats {
  padding: 0.2rem 0 0.35rem;
  min-height: 0;
}

/* ── Action bar: tighter top padding so Like/Comment/Repost/Share sit
       closer to the post content. Keep the divider border from yesterday. */
.post-actions {
  padding-top: 0.4rem;
  gap: 0.25rem;
}
/* Smaller hit-area on each action button — still finger-friendly but
   less visually heavy than yesterday's 0.55rem 1rem padding. */
.action-btn {
  padding: 0.45rem 0.8rem;
  font-size: 0.88rem;
  gap: 0.45rem;
}
.action-btn .r-icon { width: 18px; height: 18px; font-size: 16px; }
.action-btn svg     { width: 16px; height: 16px; }

/* ── Reposted card inside a post: slightly tighter too ─────────────────── */
.reposted-card { padding: 0.75rem 0.85rem; }
.reposted-banner { margin-bottom: 0.5rem; }

/* ── Compose: slightly less padding for parity with the denser cards ──── */
.compose {
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.55rem;
}
.compose-footer { margin-top: 0.6rem; }

/* ── Link preview: trim the top margin so it tucks under the body text
       without leaving an obvious gap. ──────────────────────────────── */
.link-preview {
  margin: 0.55rem 0 0.2rem;
}

/* ── Stories row + composer + tabs: each loses a couple of px of
       bottom margin so the feed starts higher on the page. ─────────── */
.stories-row { margin-bottom: 0.55rem; }

/* ════════════════════════════════════════════════════════════════════════════
   POST FEED — RIGHT-RAIL SUGGESTED CREATORS (2026-05-17)
   ────────────────────────────────────────────────────────────────────────────
   Twitter/Threads pattern: a second column to the right of the post feed
   surfacing creators worth following. We keep the rail very tightly
   scoped:
     • Post tab only — body.on-post-feed gates the entire layout switch
     • Hidden < 1100px — small viewports get the existing single-column feed
     • One section for now (Suggested Creators); same .rail-card shell
       handles future additions (Authors, Rising Writers, etc.)
   The shell defaults to a single block layout so other tabs render
   exactly as before. Only when the body gains .on-post-feed AND the
   viewport is wide enough does the 2-column grid kick in.
   ════════════════════════════════════════════════════════════════════════════ */

/* Default: stacked, no rail. .post-feed-main is a transparent passthrough. */
.post-feed-shell { display: block; }
.post-feed-main  { display: block; }
.feed-right-rail { display: none; }

/* Activate the 2-column layout only on the Post tab + wide viewports.
   Widen .main-wrap so the rail has somewhere to live without crushing
   the feed column below the ~640px sweet spot. */
@media (min-width: 1100px) {
  body.on-post-feed .main-wrap {
    max-width: none !important;
    /* Anchor the layout to the right edge with a 40px gutter (instead
       of centering with auto margins) so the rail sits closer to the
       viewport edge per design feedback 2026-05-17. Left margin grows
       to fill whatever extra width remains. */
    width: min(calc(100vw - var(--sidebar-w) - 2rem), 1180px) !important;
    margin-left: auto !important;
    margin-right: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.on-post-feed .post-feed-shell {
    display: grid;
    /* Rail widened 360→400px so long usernames + verified seal have
       plenty of room before the Follow button. Feed column unchanged. */
    grid-template-columns: minmax(0, 640px) 400px;
    gap: 1.5rem;
    justify-content: center;
    align-items: start;
  }
  body.on-post-feed .feed-right-rail {
    display: block;
    /* Stick under the topbar so the rail follows the user as they
       scroll. Falls free when its content scrolls past the column. */
    position: sticky;
    top: calc(var(--header-h) + 0.4rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
    /* Hide the scrollbar visually (still scrollable). Keeps the rail
       feeling like a static panel, not a scroll-tied widget. */
    scrollbar-width: thin;
  }
  body.on-post-feed .feed-right-rail::-webkit-scrollbar { width: 4px; }
  body.on-post-feed .feed-right-rail::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px;
  }
}

/* ── Rail card shell — mirrors the .post-card visual weight so the rail
       feels like part of the same surface, just a different column.
       2026-05-17 hierarchy pass: tightened padding, lighter title weight,
       softer purple accents (was using --accent which is amber/yellow
       — wrong palette; SeLeBox brand purple is --purple #8b5cf6). ─── */
.rail-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.7rem 0.85rem 0.55rem;
  margin-bottom: 0.6rem;
}
body:not(.light) .rail-card {
  background: var(--bg2);
  border-color: var(--border);
}

.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}
.rail-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
  color: var(--purple);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rail-refresh {
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, transform 0.4s;
}
.rail-refresh:hover {
  color: var(--purple);
  background: rgba(139, 92, 246, 0.08);
}
.rail-refresh.spinning svg { animation: rail-spin 0.7s linear; }
@keyframes rail-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Tighter row gap so suggestions read as a single list, not 5 cards. */
.rail-list { display: flex; flex-direction: column; gap: 0.15rem; }

/* ── Suggestion row — avatar + name/subtitle + Follow button ─────────
   Reduced vertical breathing, smaller name, lighter subtitle, smaller
   follow pill. The whole row stays hover-tappable to open the profile.
   2026-05-17 spacing pass: bumped the avatar column 34→40px so the
   verified ring has room to breathe + the username badge isn't crowded
   against the ring edge. Wider gap too. */
.rail-suggest-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.3rem;
  margin: 0 -0.3rem; /* hover bg extends past the visual column edge */
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.rail-suggest-row:hover {
  background: rgba(139, 92, 246, 0.06);
}
.rail-suggest-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.rail-suggest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rail-suggest-meta { min-width: 0; }
.rail-suggest-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.rail-suggest-sub {
  font-size: 0.72rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  font-weight: 400;
}

/* Follow button — premium outline pill in SeLeBox brand purple. Quiet
   resting state, fills with a subtle gradient + lifts on hover so the
   click target feels tactile. 2026-05-17 v2 polish. */
.rail-follow-btn {
  position: relative;
  background: transparent;
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  overflow: hidden;
  transition: color 0.18s ease,
              background 0.22s ease,
              border-color 0.18s ease,
              transform 0.12s ease,
              box-shadow 0.22s ease;
}
.rail-follow-btn .rail-follow-label {
  position: relative;
  z-index: 1;
}
.rail-follow-btn:hover {
  background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.rail-follow-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}
.rail-follow-btn.following {
  background: rgba(139, 92, 246, 0.08);
  color: var(--purple);
  border-color: rgba(139, 92, 246, 0.35);
}
.rail-follow-btn.following:hover {
  color: #e74c3c;
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.18);
}
.rail-follow-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Verified-creator avatar — soft purple ring + tinted glow. Mirrors
   mobile's "this person has a role" treatment without competing with
   the verified seal next to the name. */
.rail-suggest-avatar.is-verified {
  box-shadow: 0 0 0 2px var(--bg2),
              0 0 0 3.5px rgba(139, 92, 246, 0.55),
              0 2px 8px rgba(139, 92, 246, 0.22);
}
body.light .rail-suggest-avatar.is-verified {
  box-shadow: 0 0 0 2px #fff,
              0 0 0 3.5px rgba(139, 92, 246, 0.55),
              0 2px 8px rgba(139, 92, 246, 0.18);
}

/* Row hover — soft lift + tinted background for the "card-y" feel
   without rebuilding each row as an actual card. */
.rail-suggest-row {
  transition: background 0.18s ease, transform 0.18s ease;
}
.rail-suggest-row:hover {
  transform: translateY(-1px);
}

/* See more footer — slim purple link that previews discoverability. */
.rail-footer {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(139, 92, 246, 0.10);
  text-align: center;
}
.rail-see-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, gap 0.18s ease;
}
.rail-see-more:hover {
  background: rgba(139, 92, 246, 0.10);
  gap: 7px; /* arrow slides slightly on hover */
}
.rail-see-more svg {
  transition: transform 0.18s ease;
}
.rail-see-more:hover svg {
  transform: translateX(1px);
}

/* ── Skeleton state while loading ──────────────────────────────────── */
.rail-skeleton-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
}
.rail-skel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--bg3) 25%, rgba(121, 117, 212, 0.08) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: rail-shimmer 1.4s infinite linear;
}
.rail-skel-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rail-skel-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg3) 25%, rgba(121, 117, 212, 0.08) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: rail-shimmer 1.4s infinite linear;
}
.rail-skel-line.short { width: 60%; }
@keyframes rail-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty / error fallback inside the rail */
.rail-empty {
  font-size: 0.8rem;
  color: var(--text2);
  padding: 0.4rem 0;
  text-align: center;
}
.rail-empty .rail-empty-cta {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--purple);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}
.rail-empty .rail-empty-cta:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   FEED REFINEMENT PASS — 2026-05-17 (round 3)
   ────────────────────────────────────────────────────────────────────────────
   Goal: keep the Facebook-style post structure, tighten everything by 10-20%
   to match modern FB/X density. Specifically:
     • Post header: cleaner avatar→name→time alignment, smaller gap
     • Action bar: denser, less vertical air around Like/Comment/Repost/Share
     • Comments: shorter bubbles, tighter rows, smaller input + send btn,
       quieter "View previous comments" link
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Post header: tighten the meta column (avatar → name+time stack) ───── */
.post-header {
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.post-header .avatar {
  width: 38px;
  height: 38px;
  font-size: 0.85rem;
}
/* The name+time wrapper is the second flex child (an unstyled <div>). Tighten
   the line between author and timestamp so the meta block reads as one
   unit instead of two stacked labels. */
.post-header > div:not(.avatar) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.post-author {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}
.post-time {
  font-size: 0.7rem;
  line-height: 1.2;
  margin-top: 0;
}

/* ── Action bar: dense FB-style row ────────────────────────────────────── */
.post-actions {
  padding-top: 0.3rem;
  gap: 0.1rem;
}
.action-btn {
  padding: 0.35rem 0.55rem;
  font-size: 0.83rem;
  gap: 0.35rem;
  border-radius: 8px;
}
.action-btn .r-icon { width: 16px; height: 16px; font-size: 14px; }
.action-btn svg     { width: 15px; height: 15px; }
/* Reaction count strip — virtually flush with the action bar. */
.post-stats {
  padding: 0.15rem 0 0.25rem;
  font-size: 0.82rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMMENTS — Facebook-style compact pass (2026-05-17)
   Targets: density, faster scan, less scroll burden.
   ════════════════════════════════════════════════════════════════════════════ */

/* Whole section sits closer to the action bar above. */
.comments-section {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

/* Comment row: smaller avatar, tighter row spacing. */
.comment-item {
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.comment-item > .avatar {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Bubble — FB style: short, hugged tight to the text. The previous 0.65rem
   vertical padding gave a balloon feel; 0.4rem makes it conversational. */
.comment-bubble {
  padding: 0.4rem 0.7rem;
  font-size: 0.835rem;
  line-height: 1.4;
  border-radius: 4px 14px 14px 14px;
}

/* Meta row no longer needs its own slot — FB renders the username INSIDE the
   bubble. Keep the existing structure (meta above bubble) but compact it. */
.comment-meta {
  gap: 0.35rem;
  margin-bottom: 1px;
}
.comment-author {
  font-size: 0.76rem;
  font-weight: 700;
}
.comment-time {
  font-size: 0.66rem;
  opacity: 0.8;
}

/* Action row (Like / Reply) directly under bubble — denser, smaller pills. */
.comment-actions {
  gap: 0;
  margin-top: 2px;
}
.comment-action-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  line-height: 1.3;
  gap: 0.25rem;
}
.comment-action-btn:hover {
  background: rgba(139, 92, 246, 0.08);
}

/* Replies: pulled in tighter, smaller indent (avatar+gap+a hair). */
.replies {
  margin-left: 1.85rem;
  margin-top: 0.3rem;
}
.reply-item {
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.reply-item > .avatar {
  width: 24px;
  height: 24px;
  font-size: 0.65rem;
}

/* "View previous comments" / "View N replies" — recedes into a subtle link. */
.comment-view-more,
.comment-view-replies {
  margin: 2px 0 6px;
  padding: 3px 6px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text3);
  gap: 4px;
  border-radius: 4px;
}
.comment-view-more::before,
.comment-view-replies::before {
  width: 14px;
  opacity: 0.5;
}
.comment-view-more:hover,
.comment-view-replies:hover {
  color: var(--purple);
  background: transparent;
  text-decoration: underline;
}

/* Inline image attached to a comment — smaller cap so it doesn't blow up
   the row height. */
.comment-image {
  margin-top: 0.3rem;
  max-width: 200px;
}
.comment-image img { max-height: 170px; }

/* ── Comment input — compact row, smaller send button ──────────────────── */
.comment-input-wrap {
  gap: 0.4rem;
  margin-top: 0.55rem;
  align-items: stretch;
}
.comment-input {
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  min-height: 32px;
  border-radius: 999px;
  line-height: 1.4;
}
.btn-send {
  padding: 0.35rem 0.85rem;
  font-size: 0.74rem;
  border-radius: 999px;
}

/* ── Single-row composer (avatar | textarea | photo icon | Send | ✕) ─────
   The wrap is flex-column (set inline by engagement.js so the preview
   sits below). The row inside is its own flex layout so all controls
   ride the same baseline. */
.comment-input-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
}
.comment-input-preview {
  margin-left: 36px;
}
.comment-input-preview:empty { display: none; }

/* Photo trigger — icon-only square with subtle hover. Sits between the
   text field and the Send button so users can drop a photo without
   leaving the row. */
.comment-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text3);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.comment-photo-btn:hover {
  color: var(--purple);
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--purple);
}
.comment-photo-btn svg { width: 16px; height: 16px; display: block; }
.comment-photo-btn input { display: none; }

/* Cancel-reply ✕ — only appears on reply inputs. Subtle and matches the
   photo-btn footprint so the row reads as a balanced strip. */
.reply-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.reply-cancel-btn:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}

/* ── Comment author: black/white per theme, not light purple ────────────
   Earlier rule colored the author name with --purple-lt which read as a
   "tag" rather than a name. Reverting to the standard text color makes
   the username the heaviest element in the row (per design feedback). */
.comment-author {
  color: var(--text);
}
body.light .comment-author { color: var(--text); }

/* Clickable affordance for comment avatar + author (2026-05-17 fix —
   both now carry .profile-link so the global delegate routes to
   openProfile). Earlier they had no hover indication and felt static. */
.comment-author.profile-link,
.comment-item > .avatar.profile-link,
.reply-item > .avatar.profile-link {
  cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.comment-author.profile-link:hover {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comment-item > .avatar.profile-link:hover,
.reply-item > .avatar.profile-link:hover {
  opacity: 0.85;
}

/* ── Like + Reply alignment fix ────────────────────────────────────────
   The Like button has icon+text inside .reaction-wrap (an extra flex
   parent that introduces a baseline mismatch with the plain Reply
   button). Force the row + its children to center-align so the heart,
   "Like", and "Reply" all sit on the same line. */
.comment-actions {
  align-items: center;
}
.comment-actions .reaction-wrap {
  display: inline-flex;
  align-items: center;
}
.comment-actions .comment-action-btn {
  display: inline-flex;
  align-items: center;
}
.comment-actions .comment-action-btn svg,
.comment-actions .comment-action-btn .r-icon svg {
  display: block;
  vertical-align: middle;
}

/* "View previous comments" toggle — when expanded show a small minus
   instead of the dash so users see the row IS a toggle. */
.comment-view-more.expanded::before,
.comment-view-replies.expanded::before {
  width: 14px;
  opacity: 0.75;
  background: var(--purple);
}
.comment-view-more.expanded,
.comment-view-replies.expanded {
  color: var(--purple);
}