/* ═══════════════════════════════════════════════════════════════
   AUTO-GENERATED — DO NOT EDIT THIS FILE
   Edit the partials in css/src/ instead, then run: ./build.sh
   Built: 2026-04-06 21:29:46
   ═══════════════════════════════════════════════════════════════ */

/* ==================== FLUID SCALING SYSTEM ==================== */
:root {
  /* ── Color palette ── */
  --color-green: #4ade80;
  --color-cyan: #22d3ee;
  --color-red: #f87171;
  --color-blue: #8ab4ff;
  --color-amber: #fbbf24;
  --color-purple-light: #c4b5fd;
  --color-muted: #9ca3af;
  --color-bg: #0a0b0d;
  --color-surface: #242830;

  --text-shadow-color: 1px 1px 2px #242830, -1px -1px 2px #242830, 1px -1px 2px #242830, -1px 1px 2px #242830;

  /* ── Shared gradients ── */
  --gradient-primary: linear-gradient(135deg, #4ade80, #22d3ee);

  /* ── Easing curves ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-slide: cubic-bezier(0.32, 0.72, 0, 1);

  /* Typography scale - fluid sizing using clamp() */
  --fs-2xs: clamp(0.6rem, 0.55rem + 0.25vw, 0.7rem);    /* ~10-11px */
  --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);     /* ~11-13px */
  --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);     /* ~13-14px */
  --fs-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);     /* ~14-16px */
  --fs-md: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);         /* ~18-21px */
  --fs-lg: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);       /* ~21-26px */
  --fs-xl: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);         /* ~26-32px */
  --fs-2xl: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);        /* ~29-38px */
  --fs-3xl: clamp(2.4rem, 1.8rem + 1.5vw, 3.2rem);      /* ~38-51px */
  
  /* Spacing scale - fluid padding/margins */
  --space-2xs: clamp(2px, 0.125rem + 0.15vw, 4px);
  --space-xs: clamp(4px, 0.25rem + 0.25vw, 8px);
  --space-sm: clamp(8px, 0.5rem + 0.4vw, 12px);
  --space-md: clamp(12px, 0.75rem + 0.5vw, 18px);
  --space-lg: clamp(16px, 1rem + 0.75vw, 24px);
  --space-xl: clamp(20px, 1.25rem + 1vw, 32px);
  --space-2xl: clamp(28px, 1.75rem + 1.25vw, 44px);
  
  /* Component-specific sizing */
  --card-glass-opacity: 0.62;
  --card-padding: clamp(14px, 0.875rem + 0.75vw, 24px);
  --card-radius: clamp(14px, 0.875rem + 0.5vw, 20px);
  --pill-padding-y: clamp(6px, 0.375rem + 0.4vw, 14px);
  --pill-padding-x: clamp(10px, 0.625rem + 0.6vw, 24px);
  --pill-radius: clamp(18px, 1.125rem + 0.5vw, 32px);
  --fab-size: clamp(40px, 2.5rem + 0.5vw, 52px);
  --fab-font: clamp(14px, 0.875rem + 0.3vw, 18px);
  --button-padding-y: clamp(6px, 0.375rem + 0.25vw, 10px);
  --button-padding-x: clamp(10px, 0.625rem + 0.4vw, 16px);
  --button-radius: clamp(8px, 0.5rem + 0.25vw, 12px);
  --bubble-padding-y: clamp(3px, 0.1875rem + 0.15vw, 5px);
  --bubble-padding-x: clamp(8px, 0.5rem + 0.25vw, 12px);
  --bubble-radius: clamp(10px, 0.625rem + 0.25vw, 14px);
  
  /* Footer navbar sizing */
  --footer-padding-y: 0px;
  --footer-padding-x: clamp(0.375rem, 0.25rem + 0.4vw, 0.875rem);
  --footer-font: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);

  /* Legacy aliases (pre-footer rename compatibility) */
  --header-padding-y: var(--footer-padding-y);
  --header-padding-x: var(--footer-padding-x);
  --header-font: var(--footer-font);
  /* Navbar icon size — single source of truth, everything else derives from this */
  /* --nav-icon: clamp(1.44rem, 1.02rem + 2.16vw, 2.7rem); */
  --nav-icon: clamp(2.16rem, 1.50rem + 3.24vw, 4.05rem);
  --nav-orb: clamp(2.88rem, 1.92rem + 4.32vw, 5.7rem);
  --nav-orb-icon: clamp(1.8rem, 1.2rem + 2.64vw, 3.45rem);
  --nav-gap: clamp(0.68rem, 0.34rem + 2.1vw, 2.2rem);
  --nav-orb-margin: clamp(0.62rem, 0.31rem + 1.5vw, 1.9rem);
  /* Total navbar height (orb + top/bottom padding).
     CSS calc is the initial value; boot.js overrides --navbar-h with
     the footer's real offsetHeight via ResizeObserver so every overlay
     page sits flush above the navbar regardless of env() quirks. */
  --navbar-h: calc(var(--nav-orb) + 5px);

  /* JS-measured safe area fallbacks (set by measureSafeAreas() in boot.js).
     Initialised to 0px; once the DOM loads, JS overwrites them with the
     actual env() pixel values measured from a known-good probe element. */
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;

  /* iOS safe area insets (with constant() fallback for iOS 11.0–11.1) */
  --sat: constant(safe-area-inset-top);
  --sar: constant(safe-area-inset-right);
  --sab: constant(safe-area-inset-bottom);
  --sal: constant(safe-area-inset-left);
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ── Responsive layout tokens ── */
  --content-max-w: 680px;           /* main content column width */
  --page-pad-x: clamp(12px, 2vw, 24px);  /* horizontal page padding */
  --grid-cols: 1;                    /* list/grid column count — overridden per breakpoint */
  --card-min-h: 120px;               /* collapsed card minimum height */

  /* ── z-index scale ── */
  --z-base:         0;      /* background canvases, particles          */
  --z-card:         10;     /* cards, page-level content               */
  --z-card-active:  20;     /* expanded cards, constellation sheets    */
  --z-overlay:      50;     /* loading overlays, transition screens    */
  --z-sticky:       100;    /* dragged pills, pinned footers, radials  */
  --z-float:        200;    /* floating UI: category bar, social orb   */
  --z-mini-player:  400;    /* persistent mini-player bar              */
  --z-morb:         900;    /* music orb (explore-only; see --z-orbs)   */
  --z-modal:        1000;   /* modals, slide-over panels, chat views   */
  --z-toast:        2000;   /* toasts, confetti, notification nudges   */
  --z-page:         9999;   /* full-screen pages (account, RL, search) */
  --z-navbar:       10000;  /* fixed bottom navbar, share sheet        */
  --z-orbs:         10002;  /* music + social orbs — persist over pages */
  --z-system-toast: 20000;  /* system-level toasts (above everything)  */
  --z-celebration:  99999;  /* level-up celebration overlay            */

  /* ── Orb row clearance ── */
  --orb-row-h: 68px;  /* 14px top + 46px orb + 8px gap — matches <main> */

  /* ── Bottom orb bar height (vertical padding + orb diameter) ── */
  /* Used by .explore-content padding-bottom to clear the fixed orb bar.
     Overridden per breakpoint whenever orb-bar padding or orb size changes. */
  --orb-bar-h: calc(var(--space-md) * 2 + 43px);  /* ~67–79px */
}

/* ── Safe-area note ───────────────────────────────────────────
   Every fixed/absolute page handles safe-area insets with
   max(env(safe-area-inset-*, 0px), var(--safe-*)) — the env()
   value works when Safari evaluates it correctly, and the
   var(--safe-*) fallback (set by boot.js) covers transform /
   fixed contexts where env() can resolve to 0.
   ─────────────────────────────────────────────────────────── */

/* Base styles */
html {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;  /* fallback for older browsers */
  overflow: clip;    /* modern: won't create clipping context for position:fixed */
  overscroll-behavior: none;
  background: var(--color-bg);
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* NOTE: do NOT add overflow:clip/hidden here — iOS Safari treats it
     as creating a containing block for position:fixed children (like
     the footer navbar), which shifts them off the viewport bottom.
     html { overflow: clip } already clips the viewport. */
  overscroll-behavior: none;
}

/* Hide scrollbars globally while keeping scroll functionality */
* {
  scrollbar-width: none; /* Firefox */
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ═══ Shared orb glow pulse ═══ */
/* Pulsing box-shadow ring. Apply .expanded-orb to any circular element
   with --orb-color set. Same visual as .social-orb.orb-target-mode. */
@keyframes orb-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--orb-color, #fff) 25%, transparent),
      0 0 28px color-mix(in srgb, var(--orb-color, #fff) 40%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--orb-color, #fff) 15%, transparent),
      0 0 40px color-mix(in srgb, var(--orb-color, #fff) 45%, transparent);
  }
}

.expanded-orb {
  animation: orb-glow-pulse 1.2s ease-in-out infinite;
}

/* ═══ Shared preference shimmer component ═══ */
/* Register --shimmer-angle so the browser can interpolate it */
@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes prefShimmer {
  to { --shimmer-angle: 360deg; }
}

/* Base shimmer pseudo — applied via .pref-shimmer on pills & orbs.
   Cards use a box-shadow border glow instead.                        */
.pref-shimmer {
  position: relative; /* ensure stacking context for ::before */
}
.pref-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0%,
    color-mix(in srgb, var(--shimmer-color, transparent) 30%, transparent) 5%,
    var(--shimmer-color, transparent) 10%,
    color-mix(in srgb, var(--shimmer-color, transparent) 30%, transparent) 15%,
    transparent 22%,
    transparent 40%,
    color-mix(in srgb, var(--shimmer-color, transparent) 20%, transparent) 48%,
    transparent 56%,
    transparent 100%
  );
  opacity: var(--shimmer-opacity, 0);
  animation: prefShimmer var(--shimmer-duration, 24s) linear var(--shimmer-delay, 0s) infinite;
  pointer-events: none;
  z-index: 10;
  will-change: --shimmer-angle;
}

body {
  background: var(--color-bg);
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  /* Fixed to viewport — no min-height that could exceed 100% and cause scroll */
  max-height: 100%;
  -webkit-text-size-adjust: 100%;  /* prevent iOS text inflation */
  text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   Orb Row Center — shared back-arrow + title between the two orbs.
   Occupies the "dead space" between music orb (left) and social
   orb (right) in the persistent top bar.
   ═══════════════════════════════════════════════════════════════ */

#orb-row-center {
  display: none;                      /* hidden until a page populates it */
  position: fixed;
  /* Vertically aligned with the 46px orbs */
  top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  height: 46px;
  /* Sit between the orb edges */
  left: 70px;
  right: 70px;
  /* Flex row: [back] [title (flex:1)] [right-slot] */
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  box-sizing: border-box;
  /* Below the orbs themselves but above pages */
  z-index: calc(var(--z-orbs) - 1);
  pointer-events: none;               /* let taps pass through when empty */
  /* Subtle entrance */
  animation: orc-fade-in 0.2s ease-out;
}

#orb-row-center.visible {
  display: flex;
  pointer-events: auto;
}

/* When orb-row-center is visible, hide the explore cat bar to avoid overlap */
#orb-row-center.visible ~ #explore-cat-bar {
  display: none !important;
}

@keyframes orc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Back button ── */
.orc-back {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 4px;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.orc-back:hover {
  background: rgba(255, 255, 255, 0.1);
}
.orc-back:active {
  transform: scale(0.92);
}

/* ── Title ── */
.orc-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding-right: 0;
}

/* When there's no right element, balance with the back button width */
#orb-row-center.visible:not(:has(.orc-right)) .orc-title {
  padding-right: 30px;
}

/* ── Right slot (version text, position text, share icon, etc.) ── */
.orc-right {
  flex-shrink: 0;
  font-size: 13px;
  color: #888;
  white-space: nowrap;
}
/* ==================== UNIFIED CATEGORY PILLS ==================== */
/* Single source of truth for every category pill in the app.       */
/* Replaces: .mini-pill, .category-bubble, .rm-category,            */
/*           .sm-category, .sp-belt-pill, .sp-item-cat,             */
/*           .refine-pill, .rl-cat-active-pill                      */

/* ── Container ── */
.cat-pill-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--space-xs) var(--space-sm);
}

/* ── Base pill ── */
.cat-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--bubble-padding-y) var(--bubble-padding-x);
  border-radius: var(--pill-radius);
  background: var(--pill-bg, rgba(100, 100, 100, 0.55));
  border: 1.5px solid var(--pill-border, rgba(100, 100, 100, 0.5));
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.25),
    0 0 6px var(--pill-glow, rgba(100, 100, 100, 0.15));
  color: var(--pill-color, rgba(255, 255, 255, 0.7));
  font-size: var(--fs-xs);
  font-weight: 500;
  /* text-shadow: var(--text-shadow-color); */
  cursor: grab;
  user-select: none;
  touch-action: none;
  white-space: nowrap;
  max-width: min(200px, calc(100vw - 40px));
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    opacity 0.3s ease,
    transform 0.15s ease;
}

.cat-pill-text {
  text-transform: capitalize;
  pointer-events: none; /* clicks pass through to pill */
}

/* ── Interaction states ── */
.cat-pill:hover {
  transform: scale(1.05);
}

.cat-pill:active,
.cat-pill.cat-pill-dragging {
  cursor: grabbing;
  will-change: transform;
  contain: layout style;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 40px var(--pill-glow, rgba(100, 100, 100, 0.4));
  z-index: var(--z-sticky);
}

/* ── Selected category — sharp border + traveling point highlight ── */
.cat-pill-selected {
  --shimmer-color: var(--pill-color, rgba(200,200,200,0.8));
  --shimmer-opacity: 1;
  /* Keep the sharp border — same as base pill but brighter */
  border-color: var(--pill-color, rgba(200, 200, 200, 0.6));
  font-weight: 700;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 10px var(--pill-glow, rgba(100, 100, 100, 0.3)),
    0 0 18px color-mix(in srgb, var(--pill-color, white) 25%, transparent);
}
/* Traveling point highlight — tight ring with a single bright spot */
.cat-pill-selected::before {
  padding: 1.5px;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0%,
    transparent 42%,
    color-mix(in srgb, var(--shimmer-color, white) 60%, transparent) 47%,
    var(--shimmer-color, white) 50%,
    color-mix(in srgb, var(--shimmer-color, white) 60%, transparent) 53%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation-duration: var(--shimmer-duration, 3s);
}

/* ── Multi-select group glow (refine page) ── */
.cat-pill-group-selected {
  border-color: rgba(100, 160, 255, 1);
  box-shadow:
    0 0 10px rgba(80, 140, 255, 0.7),
    0 0 25px rgba(80, 140, 255, 0.4),
    0 0 50px rgba(80, 140, 255, 0.2),
    inset 0 0 15px rgba(80, 140, 255, 0.2);
}

/* ── Ghost pill (leave-behind after swipe) ── */
.cat-pill-ghost {
  opacity: 0.15 !important;
  border-style: dashed !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: default !important;
  pointer-events: none !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
.cat-pill-ghost::before {
  display: none !important;   /* kill shimmer ring on ghosts */
}

/* ── Overflow escape — applied to ancestors during pill drag ── */
.pill-overflow-escape {
  overflow: visible !important;
}

/* Hide bubbles during overflow measurement — prevents flash of unclamped pills */
.category-bubbles.pills-measuring {
  visibility: hidden;
}

/* ── Pill row clamp — prevents visible 5→2 row shrink while
      applyRowLimit() waits for card animation to settle ── */
.pills-row-clamped {
  max-height: calc(
    2 * (var(--fs-xs) + 2 * var(--bubble-padding-y) + 3px)
    + var(--space-xs)
    + 2 * var(--space-xs)
  );
  overflow: hidden !important;
}

/* ── Pill overflow toggle (+N / −N) ── */
.pill-hidden-overflow {
  display: none !important;
}
.pills-expanded .pill-hidden-overflow {
  display: inline-flex !important;
}
.pill-overflow-toggle {
  background: rgba(0, 0, 0, 0);
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  touch-action: manipulation;
  padding: var(--bubble-padding-y) var(--bubble-padding-x);
  border-radius: var(--pill-radius);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pill-overflow-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.85);
}
.pill-overflow-toggle:active {
  transform: scale(0.95);
}
/* Context sizing for toggle pill in read mode */
.rm-categories .pill-overflow-toggle {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
}
/* Context sizing for toggle pill in reading list items */
.rl-item-cats .pill-overflow-toggle {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
/* Context sizing for toggle pill in expanded card bubbles */
.category-bubbles .pill-overflow-toggle {
  padding: var(--bubble-padding-y) var(--bubble-padding-x);
}
/* Context sizing for toggle pill in search result items */
.sp-item-cats .pill-overflow-toggle {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
/* Context sizing for friends activity */
.fa-explore-card .pill-overflow-toggle {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
}

/* ── Tension (group follower lag) ── */
.cat-pill-tension {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  z-index: var(--z-overlay);
}

/* ── Sorted (swiped off-screen) — CSS fallbacks ── */
.cat-pill.sorted-like {
  transform: translateX(150%) rotate(15deg) !important;
}
.cat-pill.sorted-dislike {
  transform: translateX(-150%) rotate(-15deg) !important;
}

/* ── Context-specific sizing overrides ── */

/* Collapsed card mini-pills — compact */
.card-collapsed-pills-bottom .cat-pill {
  margin: 0.3em;
  /* padding: 0.5em; */
  font-size: var(--fs-xs);
  max-width: 110px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.2),
    0 0 6px var(--pill-glow, rgba(100, 100, 100, 0.1));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Expanded card category bubbles — medium */
.category-bubbles .cat-pill {
  padding: var(--bubble-padding-y) var(--bubble-padding-x);
}

/* Read mode — matches article card aesthetic */
.rm-categories .cat-pill {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
  background: rgba(0,0,0);
}

/* Search belt — keep conveyor belt interactions */
.sp-belt-track .cat-pill {
  /* Sets distance between pills during infinite scroll */
  margin-right: 8px;
  /* flex-shrink: 0; */  
  /* padding: 5px 14px; */
  /* border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px var(--pill-glow, rgba(100, 100, 100, 0.2));
  opacity: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none; */
}
.sp-belt-track .cat-pill:hover {
  opacity: 1;
  transform: scale(1.08);
  text-shadow: 0 0 12px var(--pill-glow, rgba(100, 100, 100, 0.4));
}
.sp-belt-track .cat-pill:active { transform: scale(0.95); }
.sp-belt-track .cat-pill.sp-belt-selected {
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 0 20px var(--pill-glow, rgba(100, 100, 100, 0.3)),
              0 0 6px var(--pill-glow, rgba(100, 100, 100, 0.15)) inset;
}

/* Search result items — compact */
.sp-item-cats .cat-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Explore filter bar chips — keep remove button styling */
.explore-cat-bar .cat-pill {
  padding: 3px 6px 3px 10px;
  border-radius: 10px;
  font-size: 11px;
}

/* Search filter pills — keep remove button styling */
.sp-filters .cat-pill {
  padding: 5px 8px 5px 14px;
  border-radius: 20px;
  font-weight: 600;
}

/* Reading list filter bar pills */
.rl-cat-bar .cat-pill {
  padding: 3px 10px;
  border-radius: 14px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* Reading list item category pills — tappable filter toggles */
.rl-item-cats .cat-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
}
.rl-item-cats .cat-pill.rl-item-cat-active {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

/* Refine page — full physics mode, larger pills */
.refine-pills .cat-pill {
  padding: calc(var(--pill-padding-y) * var(--pill-scale, 1)) calc(var(--pill-padding-x) * var(--pill-scale, 1));
  border-radius: var(--pill-radius);
  font-size: calc(var(--fs-sm) * var(--pill-scale, 1));
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 0 20px var(--pill-glow, rgba(100, 100, 100, 0.2));
  cursor: grab;
}

/* Friends activity cards — matches read-mode style */
.fa-explore-card .cat-pill {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cat-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* ==================== THEME: BALATRO ==================== */
body.theme-balatro {
  background: #1a0a1e;
  --balatro-red: #c41e3a;
  --balatro-gold: #ffd700;
  --balatro-purple: #4a1e6e;
  --balatro-dark: #0d0510;
  /* overflow:clip removed — see _01-tokens.css body note (iOS Safari bug) */
}

/* Liquid metal background */
body.theme-balatro::before {
  content: '';
  position: fixed;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  z-index: var(--z-base);
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(196, 30, 58, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 60%, rgba(74, 30, 110, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #0d0510 0%, #1a0a1e 50%, #0d0510 100%);
  animation: balatroShift 8s ease-in-out infinite;
  pointer-events: none;
}

/* Liquid metal shimmer overlay */
body.theme-balatro::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-base);
  background: 
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 215, 0, 0.02) 2px,
      rgba(255, 215, 0, 0.02) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 2px,
      rgba(196, 30, 58, 0.02) 2px,
      rgba(196, 30, 58, 0.02) 4px
    );
  animation: balatroShimmer 3s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes balatroShift {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg);
  }
  33% {
    transform: scale(1.05) translate(2%, -1%);
    filter: hue-rotate(-10deg);
  }
  66% {
    transform: scale(1.02) translate(-1%, 2%);
    filter: hue-rotate(10deg);
  }
}

@keyframes balatroShimmer {
  0% {
    background-position: 0px 0px, 0px 0px;
  }
  100% {
    background-position: 100px 100px, -100px 100px;
  }
}

/* Balatro theme: card styling */
body.theme-balatro .card {
  background: linear-gradient(145deg, 
    rgba(26, 10, 30, calc(var(--card-glass-opacity) + 0.03)) 0%, 
    rgba(74, 30, 110, calc(var(--card-glass-opacity) - 0.42)) 50%,
    rgba(26, 10, 30, calc(var(--card-glass-opacity) + 0.03)) 100%);
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(196, 30, 58, 0.3),
    0 0 40px rgba(74, 30, 110, 0.2),
    inset 0 1px 0 rgba(255, 215, 0, 0.08),
    inset 0 0 60px rgba(0, 0, 0, 0.4);
}

body.theme-balatro .card:hover {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 
    0 0 30px rgba(196, 30, 58, 0.4),
    0 0 60px rgba(74, 30, 110, 0.3),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Balatro theme: debug panels */
body.theme-balatro .debug-prefs-live,
body.theme-balatro .debug-deltas,
body.theme-balatro .debug-algo {
  background: rgba(13, 5, 16, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 20px rgba(196, 30, 58, 0.2);
}

/* Balatro theme: footer buttons only (not all buttons) */
body.theme-balatro footer button,
body.theme-balatro footer select,
body.theme-balatro .progress-container button {
  background: linear-gradient(145deg, rgba(74, 30, 110, 0.4), rgba(26, 10, 30, 0.8));
  border: 1px solid rgba(255, 215, 0, 0.3);
}

body.theme-balatro footer button:hover,
body.theme-balatro footer select:hover,
body.theme-balatro .progress-container button:hover {
  background: linear-gradient(145deg, rgba(196, 30, 58, 0.4), rgba(74, 30, 110, 0.5));
  border-color: rgba(255, 215, 0, 0.5);
}

/* Balatro theme: category pills */
body.theme-balatro .cat-pill {
  border-color: rgba(255, 215, 0, 0.3);
}

body.theme-balatro .cat-pill-group-selected {
  background: rgba(196, 30, 58, 0.4) !important;
  border-color: var(--balatro-gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Balatro theme: footer navbar */
body.theme-balatro footer {
  border-bottom-color: rgba(255, 215, 0, 0.2);
  background: rgba(13, 5, 16, 0.8);
}

/* Balatro theme: modal */
body.theme-balatro .modal-content {
  background: linear-gradient(145deg, #1a0a1e, #0d0510);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

body.theme-balatro .account-section {
  border-bottom-color: rgba(255, 215, 0, 0.1);
}

/* Balatro theme: title glow */
body.theme-balatro .title {
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* ==================== END BALATRO THEME ==================== */

/* Background particle canvas */
.bg-particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Footer — persistent fixed navbar pinned to bottom of screen */
footer {
  display: flex;
  align-items: center;
  height: var(--nav-icon);
  margin: 0;
  padding: 0 var(--footer-padding-x);
  padding-top: 4px;
  padding-bottom: 0;
  /* Safe area: left/right padding on notched devices */
  padding-left: max(var(--footer-padding-x), env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(var(--footer-padding-x), env(safe-area-inset-right, 0px), var(--safe-right));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-navbar) + 1);
  /* background: var(--color-bg); */
  font-size: var(--footer-font);
  overflow: visible;
  justify-content: space-evenly;
  gap: 0;
  /* Explicit top:auto prevents iOS Safari from inferring a top offset
     from the footer's normal-flow position — forces bottom:0 only */
  top: auto;
}

/* Safe-area bottom padding intentionally 0 — the footer background
   extends to the screen edge via bottom:0; icons sit above the home
   indicator naturally thanks to the orb/icon sizing. */

/* Controls */
button, select {
  background: #191b20;
  color: #fff;
  border: 1px solid #2a2e35;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--fs-sm);
}

button:hover, select:hover {
  background: var(--color-surface);
  border-color: #3a3e45;
}

@media (hover: none) {
  button:hover, select:hover {
    background: #191b20;
    border-color: #2a2e35;
  }

  .icon-btn:hover {
    background: transparent;
    border-color: transparent;
  }
  .icon-btn:hover .icon {
    opacity: 0.75;
  }
}

button:active {
  transform: scale(0.95);
}

/* ─── SVG Icon System ──────────────────────────────────── */
.icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  display: inline-block;
  pointer-events: none;
}

/* Inline Tabler SVG icons — https://tabler.io/icons */
.tabler-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  display: inline-block;
  flex-shrink: 0;
  pointer-events: none;
  color: inherit;
}

.header-logo,
.footer-logo {
  top: -0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  cursor: pointer;
  width: var(--nav-orb);
  height: var(--nav-orb);
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: clamp(0.1rem, 0.06rem + 0.12vw, 0.16rem) solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 clamp(0.6rem, 0.4rem + 0.8vw, 1.2rem) rgba(255, 255, 255, 0.05),
              0 0 clamp(0.2rem, 0.1rem + 0.3vw, 0.5rem) rgba(255, 255, 255, 0.03),
              inset 0 0 clamp(0.4rem, 0.25rem + 0.5vw, 0.75rem) rgba(255, 255, 255, 0.04);
  margin: 0 var(--nav--margin);
  /* Belt buckle: orb sits above the thin bar */
  z-index: 2;
  background-color: #0e0e0e;
  animation: orb-shimmer 3s ease-in-out infinite;
}

@keyframes orb-shimmer {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 clamp(0.4rem, 0.3rem + 0.5vw, 0.8rem) rgba(255, 255, 255, 0.03),
                0 0 clamp(0.1rem, 0.06rem + 0.15vw, 0.3rem) rgba(255, 255, 255, 0.02),
                inset 0 0 clamp(0.3rem, 0.2rem + 0.3vw, 0.5rem) rgba(255, 255, 255, 0.02);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 clamp(1rem, 0.6rem + 1.5vw, 2rem) rgba(255, 255, 255, 0.1),
                0 0 clamp(0.4rem, 0.2rem + 0.6vw, 0.8rem) rgba(255, 255, 255, 0.06),
                inset 0 0 clamp(0.5rem, 0.3rem + 0.6vw, 1rem) rgba(255, 255, 255, 0.06);
  }
}

.header-logo:hover,
.footer-logo:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 clamp(0.6rem, 0.4rem + 0.8vw, 1.2rem) rgba(255, 255, 255, 0.08),
              inset 0 0 clamp(0.4rem, 0.25rem + 0.5vw, 0.75rem) rgba(255, 255, 255, 0.05);
}

.header-logo:active,
.footer-logo:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.14);
}

.header-logo .icon,
.footer-logo .icon {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.header-logo:hover .icon,
.footer-logo:hover .icon {
  opacity: 1;
}

.icon-logo {
  width: var(--nav-orb-icon);
  height: var(--nav-orb-icon);
  margin: 0;
}

.header-logo-text,
.footer-logo-text {
  display: none;
}

.icon-heading {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.15em;
  margin-right: 4px;
}

.icon-brain {
  width: 1.25em;
  height: 1.25em;
}

.icon-explore {
  width: 2em;
  height: 2em;
}

.icon-avatar {
  width: 2.5em;
  height: 2.5em;
  opacity: 0.5;
}

/* Icon button — shared base for header buttons with SVG icons */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.06rem, 0.03rem + 0.1vw, 0.19rem) clamp(0.1rem, 0.06rem + 0.15vw, 0.25rem);
  background: transparent;
  border: none;
  border-radius: 0;
  transition: all 0.15s ease;
  position: relative;
  /* overflow: hidden; */
  cursor: pointer;
}

.icon-btn .icon {
  width: var(--nav-icon);
  height: var(--nav-icon);
  display: block;
  object-fit: contain;
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0.6;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.icon-btn:hover .icon {
  opacity: 1;
}

/* Press lowlight highlight */
.icon-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.12);
}

.icon-btn:active .icon {
  opacity: 0.5;
  transform: scale(0.92);
}

/* Invisible spacer — same size as an icon-btn but invisible/inert.
   Keeps left/right button groups even so the logo stays centred. */
.icon-btn-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* Active nav button — bright indicates current view */
.icon-btn.active {
  background: none;
}
.icon-btn.active .icon {
  opacity: 1;
}

/* Ripple flash on press */
.icon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* ─── Reading list badge ─── */
#reading-list {
  overflow: visible;
}
.rl-badge {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}
.rl-badge.hidden {
  display: none;
}

.icon-btn:active::after {
  opacity: 1;
}

/* Auth button states */
#auth-btn {
  min-width: var(--nav-icon);
  min-height: var(--nav-icon);
  border-radius: 50%;
  overflow: hidden;
}

#auth-btn.authenticated {
  border-color: var(--icon-color-b, #f48fb1);
  background: rgba(233, 30, 99, 0.12);
  color: var(--icon-color-a, #e91e63);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.625rem + 0.3vw, 0.9rem);
}

#auth-btn.authenticated .icon {
  opacity: 1;
}

/* Subtle glow nudge for unauthenticated users */
#auth-btn.sign-in-nudge {
  animation: sign-in-glow 3s ease-in-out infinite;
}

@keyframes sign-in-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(140, 180, 255, 0.15); }
  50%      { box-shadow: 0 0 12px rgba(140, 180, 255, 0.4), 0 0 4px rgba(140, 180, 255, 0.2); }
}

#auth-btn img.avatar-img {
  display: block;
  width: var(--nav-icon);
  height: var(--nav-icon);
  object-fit: cover;
  border-radius: 50%;
}

/* (Wrapper divs removed — footer children are now direct siblings
   with justify-content: space-between on footer itself) */

/* Main content */
main {
  flex: 1;
  min-height: 0;     /* allow flex shrink below natural size */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  /* Clear the music & social orbs AND the notch/Dynamic Island — whichever is taller.
     max() with var(--safe-top) fallback covers Safari contexts where env() returns 0. */
    padding-top: max(68px, calc(env(safe-area-inset-top, 0px) + 68px), calc(var(--safe-top) + 68px));
  /* padding-left: max(12px, env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(12px, env(safe-area-inset-right, 0px), var(--safe-right)); */
  /* Clear the fixed bottom navbar (includes safe-area home indicator padding) */
  padding-bottom: var(--navbar-h);
  overflow: hidden;
  box-sizing: border-box;
}

/* When card is expanded, align to top for scrolling */
main:has(.card.expanded) {
  align-items: flex-start;
}

/* Main container - vertical flex for card + debug row */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-max-w);
  flex: 1;
  min-height: 0;
  /* gap: var(--space-xs); */
  box-sizing: border-box;
  overflow: clip;
  overflow-clip-margin: 60px;
  container-type: inline-size;
  container-name: main;
}

/* Card Stack Container — native scroll feed */
.card-stack {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  container-type: size;
  container-name: card-stack;
  /* Padding so outer glow on cards isn't clipped by scroll bounds */
  padding: clamp(8px, 1.5vw, 16px);
}

/* Triple card container - vertical stack */
.triple-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

/* Card - Glass morphism (faux-glass — no backdrop-filter for perf) */
.card {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(25, 28, 35, calc(var(--card-glass-opacity) + 0.08)) 0%,
    rgba(17, 19, 23, var(--card-glass-opacity)) 50%,
    rgba(22, 25, 32, calc(var(--card-glass-opacity) + 0.04)) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  padding-bottom: var(--space-sm);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 30px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  
  /* Flex layout for proper content flow */
  display: flex;
  flex-direction: column;
  
  /* Animation properties */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  z-index: var(--z-card);
  transform: translate3d(0, 0, 0);
  
  /* Smooth transitions */
  transition: opacity 0.3s ease,
              max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s ease,
              min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              flex 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.3s ease,
              box-shadow 0.3s ease;
}

.card.visible {
  opacity: 1;
}

/* ===== DOM WINDOWING SPACER ===== */
/* Lightweight placeholder replacing off-screen cards to preserve scroll height */
.card-spacer,
.dom-window-spacer {
  flex: 0 0 auto;
  pointer-events: none;
  visibility: hidden;
}

/* ===== COLLAPSED CARD STATE ===== */
.card.card-collapsed {
  /* min-height: 0;
  max-height: none; */
  flex: 0 0 auto;
  /* height: 20vh; */
  height: fit-content;
  max-height: calc((100vh - 2 * var(--space-xs)) / 3);
  min-height: calc((100vh - 2 * var(--space-xs)) / 8);
  padding: 0;
  padding-bottom: 0;
  cursor: pointer;
  opacity: 1;
  animation: none;
  overflow: hidden;
  touch-action: pan-y; /* Allow native vertical scroll; CardPhysics handles horizontal */
}

/* Preference neon border glow — driven by --pref-glow-color / --pref-glow-intensity.
   Creates a neon-tube effect: bright border + inset bleed + outer glow.
   Spread sizes use clamp() to scale across phone → tablet screens. */
.card.card-collapsed {
  border-color:
    color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 100%), rgba(255, 255, 255, 0.14));
  box-shadow:
    /* Base depth shadow */
    0 10px 40px rgba(0, 0, 0, 0.5),
    /* Inset glow — light bleeding inward from the border */
    inset 0 0 clamp(12px, 2vw, 24px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 55%), transparent),
    inset 0 0 clamp(28px, 4.5vw, 56px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 25%), transparent),
    /* Tight outer glow — neon tube halo hugging the border */
    0 0 clamp(4px, 0.7vw, 8px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 90%), transparent),
    /* Mid-range outer glow */
    0 0 clamp(12px, 2vw, 24px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 60%), transparent),
    /* Wide diffuse halo */
    0 0 clamp(28px, 5vw, 56px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 30%), transparent);
}

/* Suppress shimmer pseudo-element on cards (shimmer kept for pills/orbs) */
.card::before {
  display: none !important;
}

/* Fade hint — only when card content actually overflows its container */
.card.card-collapsed.content-overflows {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
}

/* Selected preview card — Greek badge color glow + preference neon border glow */
.card.card-collapsed.card-selected {
  border-color:
    color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 100%),
              color-mix(in srgb, var(--card-color, rgba(255,255,255,0.1)) 40%, transparent));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--card-color, transparent) 25%, transparent),
    0 0 24px color-mix(in srgb, var(--card-color, transparent) 12%, transparent),
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 clamp(12px, 2vw, 24px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 55%), transparent),
    inset 0 0 clamp(28px, 4.5vw, 56px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 25%), transparent),
    0 0 clamp(4px, 0.7vw, 8px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 90%), transparent),
    0 0 clamp(12px, 2vw, 24px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 60%), transparent),
    0 0 clamp(28px, 5vw, 56px)
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 30%), transparent);
}

.card.card-collapsed .card-content,
.card.card-collapsed .category-bubbles,
.card.card-collapsed .progress-container {
  display: none;
}

.card.card-collapsed .card-collapsed-row {
  display: grid;
}

/* Collapsed row layout — title center, pills bottom */
.card-collapsed-row {
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 40px;
  grid-template-areas:
    "title"
    "pills";
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

/* Card top row — badge left, brain right, shared by collapsed & expanded */
.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg) var(--space-xs);
  /* height: fit-content; */
  flex-shrink: 0;
  /* max-height: calc((100vh - 2 * var(--space-xs)) / 9);
  min-height: calc((100vh - 2 * var(--space-xs)) / 24); */
}

/* Greek letter badge */
.greek-badge {
  width: 2em;
  height: 2em;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  font-family: 'Georgia', serif;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

/* Collapsed card info — holds title, placed in center grid area */
.card-collapsed-info {
  grid-area: title;
  align-self: center;
  justify-self: center;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}

.card-collapsed-title {
  text-shadow: var(--text-shadow-color);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin: 0.5em;
  /* overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical; */
  color: var(--pref-title-color, rgb(192, 200, 215));
}

/* Category pills — bottom of collapsed card, single row, 40px to match top row */
.card-collapsed-row .card-collapsed-pills-bottom {
  grid-area: pills;
  align-self: center;
  justify-self: center;
  height: 2em;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Popularity badge */
.popularity-badge {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.popularity-badge:hover {
  transform: scale(1.1);
}

.popularity-badge:active {
  transform: scale(0.9);
}

.popularity-icon {
  font-size: var(--fs-md);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popularity-icon .icon {
  width: 20px;
  height: 20px;
  opacity: 0.35;
  filter: grayscale(1) brightness(1.8);
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.popularity-badge.boosted .popularity-icon .icon {
  opacity: 1;
  filter: grayscale(0) brightness(1) drop-shadow(0 0 4px rgba(233, 30, 99, 0.5));
  transform: scale(1.1);
}

.popularity-count {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  font-family: monospace;
  transition: color 0.3s ease;
}

.popularity-badge.boosted .popularity-count {
  color: rgba(233, 30, 99, 0.9);
}

/* Undiscovered state — etched into glass, ancient-future feel */
.popularity-badge.undiscovered {
  width: auto;
  min-width: 40px;
}

.popularity-badge.undiscovered .popularity-icon {
  display: none;
}

.popularity-badge.undiscovered .popularity-count {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.popularity-badge.undiscovered:hover .popularity-count {
  opacity: 1;
}

/* Boost animation — Twitter-heart-style fill */
@keyframes boost-pop {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.35); }
  30%  { transform: scale(0.85); }
  45%  { transform: scale(1.2); }
  60%  { transform: scale(0.95); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1.1); }
}

@keyframes boost-ring {
  0%   { transform: scale(0.3); opacity: 0.8; border-width: 4px; }
  60%  { opacity: 0.4; }
  100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}

.popularity-badge.boost-animating .popularity-icon {
  animation: boost-pop 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards;
}

/* Ring burst behind the brain */
.popularity-badge .boost-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 4px solid rgba(233, 30, 99, 0.7);
  pointer-events: none;
  opacity: 0;
}

.popularity-badge.boost-animating .boost-ring {
  animation: boost-ring 0.5s ease-out forwards;
}

/* Unboost animation — subtle deflate */
@keyframes unboost-shrink {
  0%   { transform: scale(1.1); }
  40%  { transform: scale(0.7); }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.popularity-badge.unboost-animating .popularity-icon {
  animation: unboost-shrink 0.4s ease forwards;
}

/* Floating +1 / −1 */
@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}

.boost-plus-one {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-amber);
  pointer-events: none;
  animation: float-up 0.6s ease forwards;
}

.boost-plus-one.unboost-float {
  color: rgba(255, 255, 255, 0.5);
}

/* Expended (swiped) card — hidden in feed model */
.card.card-expended {
  display: none;
  pointer-events: none;
}

.card.card-expended .card-collapsed-title {
  text-decoration: none;
  color: inherit;
}

/* ===== ORB BAR ===== */
.orb-bar {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: var(--space-md) var(--space-xl);
  flex-shrink: 0;
  z-index: calc(var(--z-card-active) + 5);
  width: fit-content;
  /* Fixed above bottom navbar */
  position: fixed;
  bottom: calc(16px + var(--navbar-h));
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.orb-selector {
  --orb-color: var(--color-green);
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, opacity 0.35s ease;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--orb-color) 30%, transparent);
  opacity: 0.85;
  position: relative;
  overflow: hidden;
}

.orb-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green), var(--color-cyan), var(--color-green));
  background-size: 200% 200%;
  animation: shimmer 2s ease-in-out infinite;
  pointer-events: none;
}

.orb-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', serif;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  text-shadow: none;
  pointer-events: none;
  user-select: none;
}

.orb-selector.expended {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(0.8);
}

.orb-selector:hover:not(.expended) {
  transform: scale(1.15);
  opacity: 0.8;
}

.orb-selector:active:not(.expended) {
  transform: scale(0.95);
}

/* Orb highlight when its card is expanded — uses shared .expanded-orb component */
.orb-selector.orb-expanded {
  opacity: 1;
  transform: scale(1);
}

/* ===== EXPANDED CARD IN TRIPLE MODE ===== */
.card.card-expanded-active {
  position: relative;
  min-height: 200px;
  max-height: none;
  padding: 0;
  /* padding-bottom: var(--space-2xl); */
  /* flex: 0 0 auto; */
  height: calc(90cqh);
  z-index: var(--z-card-active);
  opacity: 1;
  overflow: hidden;
  animation: none;
}

.card.card-expanded-active .card-collapsed-row {
  display: none;
}

.card.card-expanded-active .card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Title stays in card-content on its own line */
.card.card-expanded-active .card-content .title {
  text-align: center;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.3;
  margin-top: 0.5em;
  margin-bottom: 0;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.card.card-expanded-active .card-content,
.card.card-expanded-active .progress-container {
  display: flex;
}

.card.card-expanded-active .progress-container {
  padding: var(--space-xs) var(--card-padding) var(--space-sm);
}

.card.card-expanded-active .category-bubbles {
  display: flex;
  opacity: 0;
  animation: categoryFadeIn 0.3s ease forwards;
  animation-delay: 0.1s;
  padding-top: 0.2em; 
  margin-top: var(--space-sm);
}

.card.card-expanded-active .card-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  padding: 0 var(--card-padding);
}

.card.card-expanded-active .title {
  opacity: 0;
  animation: titleFadeIn 0.3s ease forwards;
  animation-delay: 0.05s;
}

.card.card-expanded-active .meta {
  margin-top: var(--space-sm);
  opacity: 0;
  animation: sweepInFromLeft 0.3s ease forwards;
  animation-delay: 0.15s;
  padding: 0.2em;
}

/* When a card is expanded, hide the other cards entirely */
.triple-card-container:has(.card-expanded-active) .card:not(.card-expanded-active) {
  display: none;
}

/* ===== Card AI Action Bar (inside card-top-row, expanded only) ===== */
.card-ai-bar {
  display: none; /* hidden when collapsed */
}

.card.card-expanded-active .card-ai-bar {
  display: flex;
  background: var(--color-bg);
  border-radius: 999px;
  padding: 0.2em; 
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: categoryFadeIn 0.3s ease forwards;
}

/* ── Default state: dashed border (content not yet generated) ── */
.card-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.card-ai-btn .tabler-icon {
  width: 18px;
  height: 18px;
}

.card-ai-btn:active {
  transform: scale(0.92);
}

/* ── Available state: pulsing blue/white outline (content exists, not shown) ── */
@keyframes aiPulseOutline {
  0%, 100% { border-color: rgba(96, 165, 250, 0.5); box-shadow: 0 0 4px rgba(96, 165, 250, 0.15); }
  50%      { border-color: rgba(200, 220, 255, 0.8); box-shadow: 0 0 10px rgba(96, 165, 250, 0.3); }
}

.card-ai-btn.ai-available {
  border-style: solid;
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.06);
  color: rgba(200, 220, 255, 0.9);
  animation: aiPulseOutline 2.4s ease-in-out infinite;
}

/* ── Active state: solid pulsing blue (content is displayed/playing) ── */
@keyframes aiPulseSolid {
  0%, 100% { background: rgba(59, 130, 246, 0.45); box-shadow: 0 0 8px rgba(59, 130, 246, 0.25); }
  50%      { background: rgba(59, 130, 246, 0.65); box-shadow: 0 0 14px rgba(59, 130, 246, 0.4); }
}

.card-ai-btn.ai-active {
  border: 1.5px solid rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.45);
  color: #fff;
  animation: aiPulseSolid 2s ease-in-out infinite;
}

/* ── Loading state ── */
.card-ai-btn.ai-loading {
  border-style: solid;
  border-color: rgba(96, 165, 250, 0.3);
  opacity: 0.7;
  pointer-events: none;
}

/* ── Ready state: always-functional buttons (e.g. 📖 read) — subtle solid, no pulse ── */
.card-ai-btn.ai-ready {
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}

/* AI content rendered inside expanded cards */
.card-ai-abstract {
  font-size: var(--fs-base);
  color: rgba(168, 85, 247, 0.85);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.card-ai-h2 {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-xs);
}

.card-ai-h3 {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin: var(--space-sm) 0 var(--space-xs);
}

/* Only apply GPU hints when actively dragging */
.card.dragging {
  will-change: transform;
  cursor: grabbing;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Word Warp Loading Overlay - Fullscreen above bottom navbar */
.word-warp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--navbar-h); /* Above bottom navbar */
  z-index: var(--z-overlay);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  background: rgba(10, 11, 14, 0.98);
}

.word-warp-overlay canvas {
  width: 100%;
  height: 100%;
}

.explore-page.loading .word-warp-overlay {
  opacity: 1;
  visibility: visible;
}

.loading-tooltip {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  text-align: center;
  max-width: 80%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.explore-page.loading .loading-tooltip {
  opacity: 1;
}

/* Card Content - scrollable area for title/meta/extract */
.card-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0; /* Allow flex shrinking */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-xs);
  transition: opacity 0.15s ease;
}

/* Hide card content when page is loading (fullscreen word warp) */
.explore-page.loading .card {
  opacity: 0;
}

/* Wikibite Progress Bar */
.progress-container {
  /* display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-xs) var(--card-padding) var(--space-sm);
  flex: 0 0 auto; */
  max-height: 4px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-surface);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-green), var(--color-cyan));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Category bubbles */
.category-bubbles {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  justify-content: center;
}

.title {
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

/* Title-only preview mode - same size as expanded card, title centered */
.card.preview-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  animation: eager-pulse 1.5s ease-in-out infinite;
}

/* Stop animation when user is touching/dragging */
.card.preview-mode.touching {
  animation: none;
  cursor: grabbing;
}

/* Loading state in preview mode */
.card.preview-mode.loading {
  animation: none;
}

/* Eager pulse animation - like a present waiting to be opened */
@keyframes eager-pulse {
  0%, 30%, 60%, 100% { 
    transform: scale(1); 
  }
  15% { 
    transform: scale(1.012); 
  }
  45% { 
    transform: scale(1.006); 
  }
}

/* ── Shared card-list layout (search, reading-list, etc.) ── */
.card-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px var(--page-pad-x) 20px;
  min-height: 0;
  touch-action: pan-y;
  overscroll-behavior: contain;
  container-type: size;
}

.card-list .card.card-collapsed {
  margin-bottom: var(--space-xs);
  position: relative;
  touch-action: pan-y;
}

/* When a card is expanded in any card-list, hide siblings */
.card-list:has(.card-expanded-active) .card:not(.card-expanded-active),
.card-list:has(.card-expanded-active) .sp-sentinel {
  display: none;
}

/* Hide chrome elements (toolbar, etc.) when a card-list card is expanded */
.card-list-expand-hidden {
  display: none !important;
}

/* ── Reading-list status dot badge (used as iconType: 'custom') ── */
.rl-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.rl-status-dot.status-new       { background: var(--color-blue, #3b82f6); border-color: rgba(59, 130, 246, 0.4); }
.rl-status-dot.status-reading   { background: var(--color-amber, #f59e0b); border-color: rgba(245, 158, 11, 0.4); }
.rl-status-dot.status-finished  { background: var(--color-green, #22c55e); border-color: rgba(34, 197, 94, 0.4); }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .card.preview-mode {
    animation: none;
  }
  .card,
  .card.card-collapsed,
  .card.card-collapsed.card-selected {
    --card-glass-opacity: 0.92;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }
  .edge-glow.flash { animation: none; }
  .sp-belt-left, .sp-belt-right { animation: none; }
  .constellation-orb-unread::before { animation: none; }
  .lm-orb-ring, .lm-orb-core { animation: none; }
  .modal-content,
  .chat-header,
  .orb-bar,
  .cat-pill,
  .share-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.card.preview-mode .title {
  font-size: var(--fs-2xl);
  text-align: center;
  margin: 0;
  position: static;
  transform: none;
  line-height: 1.4;
  transition: opacity 0.2s ease;
}

/* Hide text content in preview mode, but show category pills and progress */
.card.preview-mode .meta,
.card.preview-mode .extract {
  display: none !important;
}

/* Hide the skip/save FABs in preview mode */
.card.preview-mode .fab-row {
  display: none !important;
}

/* Preview mode: card-content fills space, title centered within it, pills at bottom */
.card.preview-mode .card-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Preview mode: category pills in same position as expanded */
.card.preview-mode .category-bubbles {
  justify-content: center;
}


.card.preview-mode .progress-container {
  display: none !important;
}

/* Expanded mode - full card */
.card.expanded {
  min-height: 300px;
  max-height: calc(100vh - 100px);   /* fallback for older browsers */
  max-height: calc(100svh - 100px);  /* stable viewport height */
  max-height: calc(100dvh - 100px);  /* dynamic viewport height */
  padding: var(--card-padding);
  padding-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: none;
}

.card.expanded .card-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.card.expanded .progress-container,
.card.expanded .category-bubbles {
  display: flex;
}

.card.expanded .category-bubbles {
  margin-top: var(--space-sm);
}

/* Title fades in at top after preview→expanded transition */
.card.expanded .title {
  opacity: 0;
  animation: titleFadeIn 0.3s ease forwards;
  animation-delay: 0.05s;
}

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

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

/* Content sweeps in from left — meta after title */
.card.expanded .meta {
  opacity: 0;
  animation: sweepInFromLeft 0.3s ease forwards;
}

.card.expanded .meta { animation-delay: 0.15s; }

@keyframes sweepInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.meta {
  opacity: 0.75;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
}

/* Wikibite text content */
.extract {
  line-height: 1.7;
  padding: 0.2em;
  font-size: var(--fs-base);
}

/* Inline Wikipedia images in wikibite content */
.wb-figure {
  margin: var(--space-sm) 0;
  text-align: center;
}
.wb-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.wb-caption {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* Custom scrollbar for card content */
.card-content::-webkit-scrollbar {
  width: 6px;
}

.card-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.card-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.card-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* FAB navigation arrows removed — tap L/R + swipe handles all navigation */

/* Engage mode */
.locked {
  outline: 2px solid #5a9;
  background: #1a2a1a !important;
}

/* Links */
a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 1;
  transition: opacity 0.3s ease;
  /* Safe area — always apply, not just standalone */
  padding: max(env(safe-area-inset-top, 0px), var(--safe-top)) max(env(safe-area-inset-right, 0px), var(--safe-right)) max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)) max(env(safe-area-inset-left, 0px), var(--safe-left));
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background: rgba(17, 19, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--card-radius);
  padding: var(--space-lg);
  max-width: 400px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

.modal-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: var(--space-2xs);
  border-radius: 4px;
}

.modal-header button:hover {
  background: var(--color-surface);
}

/* Stats display */
.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-surface);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  opacity: 0.8;
}

.stat-value {
  font-weight: 600;
  color: var(--color-blue);
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Error messages */
.error-message {
  background: #2a1a1a;
  border: 1px solid #4a2a2a;
  color: #ff8a8a;
  padding: var(--space-sm);
  border-radius: var(--button-radius);
  margin: var(--space-md) 0;
}

/* Success messages */
.success-message {
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  color: #8aff8a;
  padding: 12px;
  border-radius: 8px;
  margin: 16px 0;
}

/* Preferences modal styling */
.pref-section {
  margin-bottom: 20px;
}

.pref-section-title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.pref-section-title.top-title {
  color: var(--color-green);
}

.pref-section-title.bottom-title {
  color: var(--color-red);
}

.pref-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #3a3a4a;
  border-radius: 8px;
  background: #0a0b0d;
}

.pref-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2a3a;
}

.pref-item:last-child {
  border-bottom: none;
}

.pref-item.pref-top {
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

.pref-item.pref-bottom {
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
}

.pref-category {
  font-weight: 500;
}

.pref-weight {
  font-family: monospace;
  color: var(--color-muted);
}

/* Algorithm settings sliders */
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
}

.slider-row label {
  font-size: var(--fs-sm);
  color: #e5e7eb;
}

.slider-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-control input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #2a2e35;
  border-radius: 3px;
  outline: none;
}

.slider-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-green);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.slider-control input[type="range"]::-webkit-slider-thumb:hover {
  background: #22c55e;
}

.slider-control span {
  min-width: 24px;
  text-align: center;
  font-family: monospace;
  font-weight: 600;
  color: var(--color-green);
}

/* ===== AI BUTTON HINT (flash summary button when thumbnail requires it) ===== */
.card-ai-btn.ai-btn-hint {
  animation: ai-btn-hint-flash 0.5s ease-in-out 3;
}

@keyframes ai-btn-hint-flash {
  0%, 100% { transform: scale(1); box-shadow: none; }
  50%      { transform: scale(1.25); box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
}

/* ===== CARD THUMBNAIL REVEALED STATE ===== */
.card.card-thumbnail-revealed {
  background: none;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 calc(8px + 10px * var(--pref-glow-intensity, 0))
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 35%), transparent),
    0 0 calc(18px + 24px * var(--pref-glow-intensity, 0))
      color-mix(in srgb, var(--pref-glow-color, transparent) calc(var(--pref-glow-intensity, 0) * 18%), transparent);
}

.card.card-thumbnail-revealed .card-top-row,
.card.card-thumbnail-revealed .card-collapsed-row,
.card.card-thumbnail-revealed .card-content,
.card.card-thumbnail-revealed .category-bubbles,
.card.card-thumbnail-revealed .progress-container {
  position: relative;
  z-index: 1;
}


.card.card-thumbnail-revealed .card-collapsed-info {
  padding: 8px 12px;
  border-radius: 12px;
}

.card.card-thumbnail-revealed .popularity-count {
  color: rgba(255, 255, 255, 0.72);
}

/* ── Expanded-mode text highlights over thumbnails ── */

/* Stop flex from stretching children to full width */
.card.card-thumbnail-revealed.card-expanded-active .card-content {
  align-items: flex-start;
}

/* Title: inline text-hugging highlight, not a block container */
.card.card-thumbnail-revealed.card-expanded-active .title {
  width: fit-content;
  max-width: 100%;
  align-self: center;
  /* change these to text  */
  text-shadow: var(--text-shadow-color);
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
}

/* Meta: inline text-hugging highlight */
.card.card-thumbnail-revealed.card-expanded-active .meta {
  width: fit-content;
  max-width: 100%;
  background: rgba(10, 11, 13, 0.5);
  text-shadow: var(--text-shadow-color);
  padding: 0 0.5em;
  border-radius: 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  /* line-height: 1.8; */
}

/* Body text: inline text-hugging highlight */
.card.card-thumbnail-revealed.card-expanded-active .extract {
  width: fit-content;
  max-width: 100%;
  background: rgba(10, 11, 13, 0.5);
  backdrop-filter: blur(1em);
  text-shadow: var(--text-shadow-color);
  padding: 0 0.5em;
  border-radius: 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  /* line-height: 1.8; */
}

.card.card-thumbnail-revealed.card-expanded-active .category-bubbles {
  position: relative;
  z-index: 1;
}

/* .card.card-thumbnail-revealed.card-expanded-active .category-bubbles .cat-pill {
  background: rgba(10, 11, 13, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.18);
} */

/* Progress bar track contrast */
.card.card-thumbnail-revealed.card-expanded-active .progress-bar {
  background: rgba(255, 255, 255, 0.1);
}

/* .card.card-thumbnail-revealed.card-expanded-active .progress-text {
  background: rgba(10, 11, 13, 0.85);
  padding: 1px 6px;
  border-radius: 4px;
} */

/* Remove inherited shimmer/glass pseudo-layer on revealed thumbnails */
.card.card-thumbnail-revealed::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
/* ==========================================================================
   SWIPE ANIMATIONS - TikTok-style card interactions
   ========================================================================== */

/* Card swipe-out animations */
.card.swipe-left {
  animation: swipeLeft 0.35s ease-out forwards;
  will-change: transform, opacity;
}

.card.swipe-right {
  animation: swipeRight 0.35s ease-out forwards;
  will-change: transform, opacity;
}

.card.swipe-up {
  animation: swipeUp 0.3s ease-out forwards;
  will-change: transform, opacity;
}

.card.swipe-down {
  animation: pulseDown 0.4s ease-out;
  will-change: transform, opacity;
}

/* Card enter animation */
.card.card-enter {
  animation: cardEnter 0.3s ease-out forwards;
}

@keyframes swipeLeft {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes swipeRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes swipeUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}

@keyframes pulseDown {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(90, 153, 255, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

@keyframes cardEnter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ── Individual card slide-out / slide-in animations ── */

.card.card-slide-out-left {
  animation: slideOutLeft 0.3s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.card.card-slide-out-right {
  animation: slideOutRight 0.3s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

.card.card-slide-in {
  animation: slideInFromBottom 0.3s ease-out;
  will-change: transform, opacity;
}

.card.card-slide-in-from-top {
  animation: slideInFromTop 0.3s ease-out;
  will-change: transform, opacity;
}

.card.card-slide-up {
  animation: slideUpShift 0.25s ease-out;
  will-change: transform;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpShift {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Floating reaction icons - BEHIND the card */
.reaction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1; /* Behind card */
  overflow: hidden;
}

/* Container for multiple rising icons */
.reaction-icons-container {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-lg);
}

.reaction-icon {
  font-size: 50px;
  opacity: 0;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.reaction-icon.like {
  animation: brainsRise 1s ease-out forwards;
}

.reaction-icon.like:nth-child(2) {
  animation-delay: 0.1s;
  font-size: 40px;
}

.reaction-icon.like:nth-child(3) {
  animation-delay: 0.2s;
  font-size: 35px;
}

.reaction-icon.dislike {
  animation: xFade 0.6s ease-out forwards;
}

.reaction-icon.dislike:nth-child(2) {
  animation-delay: 0.08s;
}

.reaction-icon.dislike:nth-child(3) {
  animation-delay: 0.16s;
}

/* Blue edge glow for focus/zone-in */
.card.zone-glow {
  animation: zoneGlow 0.6s ease-out;
}

@keyframes brainsRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.9;
    transform: translateY(-30px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.8);
  }
}

@keyframes xFade {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.2) rotate(-10deg);
  }
  60% {
    opacity: 0.6;
    transform: scale(1) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
}

@keyframes zoneGlow {
  0% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
  30% {
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.6),
                0 0 40px rgba(100, 180, 255, 0.4),
                0 10px 30px rgba(0, 0, 0, .35);
  }
  60% {
    box-shadow: 0 0 0 5px rgba(100, 180, 255, 0.8),
                0 0 60px rgba(100, 180, 255, 0.5),
                0 10px 30px rgba(0, 0, 0, .35);
  }
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

/* Screen edge glow overlays */
.edge-glow {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), var(--safe-top));     /* avoid bleeding behind notch / Dynamic Island */
  bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom));  /* avoid bleeding behind home indicator */
  width: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  z-index: var(--z-page);
}

.edge-glow-left {
  left: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--color-red) 90%, transparent) 0%, color-mix(in srgb, var(--color-red) 40%, transparent) 60%, transparent 100%);
}

.edge-glow-right {
  right: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--color-green) 90%, transparent) 0%, color-mix(in srgb, var(--color-green) 40%, transparent) 60%, transparent 100%);
}

/* Flash animation for swipe confirmation */
.edge-glow.flash {
  animation: edgeFlash 0.3s ease-out forwards;
}

@keyframes edgeFlash {
  0% { opacity: var(--glow-intensity, 0.5); }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Nav Button Flash — contextual swipe hint ──────────────── */
/* Animation lives on the .icon img so the glow hugs the SVG silhouette
   instead of box-shadowing the rectangular button container. */
@keyframes navFlashIcon {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 var(--nav-flash-color, color-mix(in srgb, var(--color-green) 60%, transparent))); opacity: 0.6; }
  20%  { transform: scale(1.22); filter: drop-shadow(0 0 8px var(--nav-flash-color, color-mix(in srgb, var(--color-green) 85%, transparent))); opacity: 1; }
  45%  { transform: scale(1.10); filter: drop-shadow(0 0 6px var(--nav-flash-color, color-mix(in srgb, var(--color-green) 60%, transparent))); opacity: 1; }
  70%  { transform: scale(1.04); filter: drop-shadow(0 0 3px var(--nav-flash-color, color-mix(in srgb, var(--color-green) 30%, transparent))); opacity: 0.85; }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); opacity: 0.6; }
}

.icon-btn.nav-flash {
  z-index: var(--z-card);
  /* keep button itself invisible — no box-shadow, no background */
}

.icon-btn.nav-flash .icon {
  animation: navFlashIcon 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Green variant — swipe right → reading list */
.icon-btn.nav-flash-green {
  --nav-flash-color: color-mix(in srgb, var(--color-green) 60%, transparent);
}

/* Warm variant — swipe left → vibe check */
.icon-btn.nav-flash-warm {
  --nav-flash-color: rgba(251, 146, 60, 0.6);
}

/* ─── Chat Bubble — delivered glow (replaces read receipts) ─── */
.chat-bubble-me.msg-delivered {
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-green) 18%, transparent),
              0 0 2px 0 color-mix(in srgb, var(--color-green) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 28%, transparent);
}

/* Constant soft glow for the most recent sent message ("just landed") */
@keyframes msgDeliveredPulse {
  0%, 100% { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-green) 18%, transparent), 0 0 2px 0 color-mix(in srgb, var(--color-green) 12%, transparent); }
  50%      { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--color-green) 28%, transparent), 0 0 4px 1px color-mix(in srgb, var(--color-green) 18%, transparent); }
}

.chat-bubble-me.msg-delivered-recent {
  animation: msgDeliveredPulse 2.2s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--color-green) 32%, transparent);
}

/* ─── Friends Activity — fresh-card glow ───────────────────── */
@keyframes faFreshGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.15), 0 0 10px 2px rgba(96, 165, 250, 0.08); }
  50%      { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.30), 0 0 16px 4px rgba(96, 165, 250, 0.16); }
}

.card.fa-explore-card.fa-fresh-glow {
  animation: faFreshGlow 2.8s ease-in-out infinite;
}

/* Legacy card glow classes (kept for button clicks) */
.card.glow-green {
  animation: none;
}

.card.glow-red {
  animation: none;
}

/* Wiki link styling in content */
.wiki-link {
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-color: var(--color-cyan);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.wiki-link:hover,
.wiki-link:active {
  text-decoration-color: var(--color-cyan);
}

/* Reading list styles */
.reading-list-item {
  padding: var(--space-sm);
  border-bottom: 1px solid #2a2e35;
  cursor: pointer;
  transition: background 0.2s;
}

.reading-list-item:hover {
  background: var(--color-surface);
}

.reading-list-item:last-child {
  border-bottom: none;
}

.reading-list-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.reading-list-meta {
  font-size: var(--fs-sm);
  opacity: 0.7;
}

.reading-list-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  opacity: 0.6;
}

.reading-list-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.reading-list-actions button {
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-xs);
}

/* Report button in header */
.report-btn.reported .icon {
  opacity: 1;
}

.report-btn.hidden {
  display: none;
}

/* Report modal */
.report-modal-content {
  max-width: 400px;
}

.report-form {
  padding: var(--space-md);
}

.report-form p {
  margin-bottom: var(--space-md);
  color: #ccc;
  font-size: var(--fs-base);
}

.report-form input[type="text"] {
  width: 100%;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid #444;
  border-radius: var(--button-radius);
  background: #2a2a2a;
  color: #fff;
  font-size: var(--fs-base);
  margin-bottom: var(--space-md);
}

.report-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-green);
}

.report-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

.btn-secondary {
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid #444;
  border-radius: var(--button-radius);
  background: transparent;
  color: #ccc;
  cursor: pointer;
  font-size: var(--fs-sm);
}

.btn-secondary:hover {
  background: #333;
}

.btn-primary {
  padding: var(--button-padding-y) var(--button-padding-x);
  border: none;
  border-radius: var(--button-radius);
  background: var(--color-green);
  color: #000;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.btn-primary:hover {
  background: #22c55e;
}

/* ==========================================================================
   DEBUG PANELS - Live preference and delta displays (flexbox layout)
   ========================================================================== */

/* Row container for debug panels (mobile-first: stacked) */
.debug-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

/* Individual debug panel - equal width */
.debug-panel {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(17, 19, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--card-radius);
  padding: var(--space-sm);
  font-size: var(--fs-xs);
  height: 200px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.debug-panel.hidden {
  display: none;
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-surface);
  font-weight: 600;
  color: var(--color-muted);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.debug-close {
  background: #191b20;
  border: 1px solid #2a2e35;
  color: var(--color-muted);
  font-size: var(--fs-base);
  cursor: pointer;
  padding: 2px var(--space-xs);
  border-radius: 6px;
  line-height: 1;
}

.debug-close:hover {
  background: var(--color-surface);
  color: #fff;
}

.debug-section {
  margin-bottom: var(--space-sm);
}

.debug-section-title {
  font-size: var(--fs-2xs);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 6px;
}

.debug-section-title.top-title {
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
  color: var(--color-green);
}

.debug-section-title.bottom-title {
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
  color: var(--color-red);
}

.debug-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debug-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  font-size: var(--fs-2xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.debug-item-category {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-item-delta {
  font-family: monospace;
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.debug-item-delta.positive {
  color: var(--color-green);
}

.debug-item-delta.negative {
  color: var(--color-red);
}

.debug-item-delta.neutral {
  color: rgba(255, 255, 255, 0.5);
}

/* Algo Performance Graph Panel */
.algo-graph-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.algo-graph-canvas-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

#algo-graph-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.algo-graph-stats {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0 0 0;
  font-size: var(--fs-2xs);
}

.algo-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.algo-stat-label {
  color: #6b7280;
  font-size: var(--fs-3xs, 0.6rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.algo-stat-value {
  font-family: monospace;
  font-weight: 600;
}

.algo-stat-value.positive {
  color: var(--color-green);
}

.algo-stat-value.neutral {
  color: #facc15;
}

.algo-stat-value.negative {
  color: var(--color-red);
}

/* Delta item animation */
.debug-item.delta-animate {
  animation: deltaFlash 0.5s ease-out;
}

@keyframes deltaFlash {
  0% {
    background: color-mix(in srgb, var(--color-green) 30%, transparent);
    transform: translateX(-5px);
  }
  100% {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(0);
  }
}

/* Auto-hide animation for deltas */
.debug-deltas.fade-out {
  animation: fadeOutDeltas 0.5s ease-out forwards;
}

@keyframes fadeOutDeltas {
  0% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* Debug toggles in settings modal */
.debug-toggles {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid #2a2a3a;
}

.debug-toggles h3 {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  cursor: pointer;
  color: #e5e7eb;
  font-size: var(--fs-sm);
}

.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-green);
  cursor: pointer;
}

/* Account modal styles (removed — see #account-page below) */

.app-version {
  font-size: 0.7rem;
  color: var(--text-secondary, #666);
  opacity: 0.6;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.account-section {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-surface);
}

.account-section:last-child {
  border-bottom: none;
}

.account-section h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--fs-sm);
  color: #888;
}

/* Theme selector */
.theme-selector {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(25, 27, 32, 0.8);
  border: 2px solid #2a2e35;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.theme-btn:hover {
  background: rgba(36, 40, 48, 0.9);
  border-color: #3a3e45;
}

.theme-btn.active {
  border-color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

.theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.default-preview {
  background: linear-gradient(145deg, var(--color-bg), #191b20);
}

.balatro-preview {
  background: 
    radial-gradient(ellipse 80% 50% at 30% 40%, rgba(196, 30, 58, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 60%, rgba(74, 30, 110, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 80%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #0d0510 0%, #1a0a1e 50%, #0d0510 100%);
}

.theme-name {
  font-size: var(--fs-2xs);
  color: #aaa;
}

.theme-btn.active .theme-name {
  color: var(--color-green);
}

.user-card {
  display: flex;
  align-items: center;
  padding: 0.5em;
  gap: var(--space-sm);
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-weight: 600;
  font-size: var(--fs-base);
}

.user-email {
  color: #888;
  font-size: var(--fs-sm);
}

.full-width {
  width: 100%;
}

/* Generic utility: hide elements with .hidden class (low-specificity fallback).
   More-specific selectors like .modal.hidden or .page.hidden that use
   opacity/visibility for transitions will naturally override this. */
.hidden {
  display: none;
}

.account-actions {
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.account-actions .btn-primary,
.account-actions .btn-secondary {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-actions .btn-primary {
  background: var(--gradient-primary);
  color: #000;
  font-weight: 600;
  border: none;
}

.account-actions .btn-primary:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-green) 30%, transparent);
}

.account-actions .btn-secondary {
  background: transparent;
  color: #888;
  border: 1px solid #444;
}

.account-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.btn-primary {
  background: var(--gradient-primary);
  color: #000;
  font-weight: 600;
}

.btn-secondary {
  background: var(--color-surface);
  color: #fff;
}

/* Stats in account modal */
#account-stats .stat-item,
#account-prefs .pref-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--fs-sm);
}

#account-prefs {
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sort bar for category preferences */
.prefs-sort-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.prefs-sort-btn {
  flex: 1;
  padding: 5px 0;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted, #999);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.prefs-sort-btn.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

/* ── Feed loading drawer ── */
.feed-drawer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  flex-shrink: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.75));
  border-radius: var(--space-sm) var(--space-sm) 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feed-drawer.visible {
  opacity: 1;
}

.feed-drawer-tip {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  line-height: 1.4;
}

.feed-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) 0;
  flex-shrink: 0;
}

.feed-spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: feedSpinnerPulse 1.2s ease-in-out infinite;
}

.feed-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.feed-spinner-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes feedSpinnerPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* ==================== REFINE PAGE ==================== */

.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;  /* lock both axes; inner containers handle their own scroll */
}

.page.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  visibility: hidden;
}

/* ===== SIGN IN PAGE ===== */
.signin-page {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-card);
  padding: var(--space-lg);
  min-height: 100vh;
  min-height: 100dvh;
}

.signin-container {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.signin-header {
  text-align: center;
  margin-bottom: var(--space-xs);
}

.signin-logo {
  font-size: 3.5rem;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-green) 30%, transparent));
}

.signin-header h1 {
  font-size: 2rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.signin-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-sm);
  margin-top: 6px;
}

.signin-error {
  display: none;
  width: 100%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-red);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--space-sm);
  font-size: var(--fs-sm);
  text-align: center;
}

.signin-error.visible {
  display: block;
}

.signin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.signin-field input {
  width: 100%;
  padding: var(--space-md) var(--space-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--space-sm);
  color: #fff;
  font-size: var(--fs-base);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.signin-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
  background: rgba(255, 255, 255, 0.06);
}

.signin-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.signin-btn {
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--space-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.signin-btn:active {
  transform: scale(0.97);
}

.signin-btn-primary {
  background: var(--gradient-primary);
  color: #000;
}

.signin-btn-primary:hover {
  opacity: 0.9;
}

.signin-btn-google {
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.signin-btn-google:hover {
  background: #f0f0f0;
}

.signin-divider {
  display: flex;
  align-items: center;
  width: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--fs-xs);
}

.signin-divider::before,
.signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.signin-divider span {
  padding: 0 var(--space-md);
}

.signin-toggle {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-sm);
}

.signin-toggle a {
  color: var(--color-blue);
  cursor: pointer;
  margin-left: 4px;
}

.signin-toggle a:hover {
  text-decoration: underline;
}

.signin-guest {
  margin-top: 4px;
}

.signin-guest a {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.signin-guest a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== REFINE PAGE ===== */
.refine-page {
  display: flex;
  flex-direction: column;
  z-index: var(--z-card);
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: var(--navbar-h); /* Account for fixed bottom navbar (includes safe-area) */
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
}

.refine-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.refine-header {
  text-align: center;
  padding: var(--space-lg) clamp(32px, 10vw, 80px) var(--space-md);
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.refine-header h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.refine-header p {
  color: #888;
  margin: var(--space-2xs) 0;
  font-size: var(--fs-base);
}

.refine-header .green-text {
  color: var(--color-green);
  font-weight: 600;
}

.refine-header .red-text {
  color: var(--color-red);
  font-weight: 600;
}

.refine-hint {
  font-size: var(--fs-sm) !important;
  opacity: 0.7;
}

.refine-pills {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--space-md) * var(--pill-scale, 1)) calc(var(--space-sm) * var(--pill-scale, 1));
  padding: var(--space-sm) clamp(32px, 10vw, 80px);
  padding-bottom: 80px; /* Space for fixed footer */
  box-sizing: border-box;
  --pill-scale: 1;
}

/* Footer */
.refine-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) max(env(safe-area-inset-right, 0px), var(--safe-right)) calc(var(--space-lg) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom))) max(env(safe-area-inset-left, 0px), var(--safe-left));
  pointer-events: none;
  z-index: var(--z-sticky);
}

.refine-footer > * {
  pointer-events: auto;
}

.refine-progress {
  color: #888;
  font-size: var(--fs-sm);
}

.refine-done-btn {
  width: calc(var(--fab-size) * 1.5);
  height: calc(var(--fab-size) * 1.5);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.85;
}

.refine-done-btn .icon {
  width: 48px;
  height: 48px;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.refine-done-btn:hover {
  transform: scale(1.15);
  opacity: 1;
}

.refine-done-btn:focus {
  outline: none;
}

.refine-done-btn:active {
  transform: scale(0.88);
  opacity: 0.6;
}

/* Explore page adjustments */
.explore-page {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Explore content wrapper - fills available space above bottom navbar */
.explore-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* padding: var(--space-xs);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs); */
  box-sizing: border-box;
  height: 100%;
  overflow: visible;
}

/* ─── Explore Category Filter Bar (fixed between top-left & top-right orbs) ─── */
.explore-cat-bar {
  display: none;
  position: fixed;
  /* Vertically center with the 46px orbs (orb top = 14px + sat) */
  top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  height: 46px;
  /* Sit snugly between the orb edges: music orb right edge ≈ 62px, social orb left edge ≈ vw-60px */
  left: 70px;
  right: 70px;
  padding: 4px 10px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(12, 12, 18, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 23px;
  z-index: calc(var(--z-orbs) - 1);
  animation: explore-cat-bar-in 0.25s ease-out;
}
.explore-cat-bar.visible {
  display: flex;
}
@keyframes explore-cat-bar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explore-cat-bar::-webkit-scrollbar {
  display: none;
}
.explore-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-purple-light, #d4c5ff);
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  padding: 3px 6px 3px 10px;
  white-space: nowrap;
  cursor: default;
  transition: all 0.15s;
  animation: explore-chip-in 0.2s ease-out;
}
@keyframes explore-chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.explore-cat-x {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  font-family: inherit;
}
.explore-cat-x:hover,
.explore-cat-x:active {
  color: rgba(255,255,255,0.8);
}
.explore-cat-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
  line-height: 1;
}
.explore-cat-clear:hover,
.explore-cat-clear:active {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.12);
}

.explore-page.hidden {
  display: none;
}

/* #refine-btn — uses standard .icon-btn styles, no special animation */

/* Loading state for refine page */
.refine-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 200px;
  color: #888;
}

.refine-loading::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--color-green) 20%, transparent);
  border-top-color: var(--color-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Word Warp Test Overlay - Fullscreen */
.word-warp-test {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-page);
  background: var(--color-bg);
  display: none;
  /* iOS safe area insets — env() direct for Safari compat */
  padding-top: max(env(safe-area-inset-top, 0px), var(--safe-top));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

.word-warp-test.active {
  display: block;
}

.word-warp-test canvas {
  width: 100%;
  height: 100%;
}

.close-warp-test {
  position: absolute;
  /* Clear safe area + orb row so close button sits below the orbs */
  top: calc(max(env(safe-area-inset-top, 0px), var(--safe-top)) + var(--orb-row-h) + 8px);
  right: calc(20px + max(env(safe-area-inset-right, 0px), var(--safe-right)));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--fs-lg);
  cursor: pointer;
  z-index: var(--z-navbar);
  transition: background 0.2s;
}

.close-warp-test:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dev-btn {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.dev-btn:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   Social — Unified Full Page Overlay (Messages + Friends)
   ═══════════════════════════════════════════════════════════ */

.social-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--navbar-h);
  /* background: var(--color-bg); */
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(0);
  opacity: 1;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: 0;
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
  container-type: inline-size;
  container-name: social;
}

.social-page.hidden {
  transform: translateX(20px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}



.social-floating-actions {
  position: absolute;
  /* absolute positioning ignores parent padding — manually clear safe-area + orb row */
  top: calc(max(env(safe-area-inset-top, 0px), var(--safe-top)) + var(--orb-row-h) + clamp(0.25rem, 0.1rem + 0.3vw, 0.5rem));
  right: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  z-index: var(--z-card);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* ─── Floating Action Buttons (FABs) ────────────────── */
.social-fab {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 18, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.social-fab:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.social-fab:active {
  transform: scale(0.92);
}

.social-fab-notif {
  border-color: color-mix(in srgb, var(--color-amber) 25%, transparent);
  position: relative;
}

.social-fab-notif:hover {
  border-color: color-mix(in srgb, var(--color-amber) 45%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
              0 0 12px color-mix(in srgb, var(--color-amber) 10%, transparent);
}

.social-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-amber);
  color: var(--color-bg);
  font-size: 0.55rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  animation: constellation-badge-pulse 2s ease-in-out infinite;
}

.social-page-header h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

/* Primary tab bar: Messages | Friends */
.social-primary-tabs {
  display: flex;
  border-bottom: 2px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: var(--color-bg);
}

.social-primary-tab {
  flex: 1;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: color 0.2s ease;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.social-primary-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.social-primary-tab.active {
  color: var(--color-blue);
}

.social-primary-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--color-blue);
  border-radius: 1px;
}

/* Sub-views */
.social-sub-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.social-sub-view.hidden {
  display: none;
}

/* Sub-filter pills (Unread / Read / Sent) */
.social-sub-tabs {
  display: flex;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.social-sub-tab {
  flex: 1;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.social-sub-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.social-sub-tab.active {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
  color: var(--color-blue);
}

.social-sub-tab .tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-green);
  color: var(--color-bg);
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
}

.social-sub-tab .tab-badge.reaction-badge {
  background: rgba(255, 180, 0, 0.85);
}

.social-sub-tab .tab-badge:empty {
  display: none;
}

/* ─── Balatro theme overrides for Social page ─────────────── */

body.theme-balatro .social-primary-tab.active {
  color: #ff4646;
}

body.theme-balatro .social-primary-tab.active::after {
  background: #ff4646;
}

body.theme-balatro .social-sub-tab.active {
  background: rgba(255, 70, 70, 0.12);
  border-color: rgba(255, 70, 70, 0.3);
  color: #ff4646;
}

body.theme-balatro .social-sub-tab .tab-badge {
  background: #ff4646;
  color: #fff;
}

.inbox-btn {
  position: relative;
}

/* Inbox messages list */
.inbox-messages {
  flex: 1;
  overflow-y: auto;
}

.inbox-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  opacity: 0.7;
}

.inbox-empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

.inbox-empty p {
  margin: 4px 0;
}

.inbox-empty-hint {
  font-size: var(--fs-xs);
  opacity: 0.6;
  margin-top: var(--space-sm) !important;
}

/* Inbox items */
.inbox-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.inbox-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.inbox-item.unread {
  background: color-mix(in srgb, var(--color-green) 4%, transparent);
}

.inbox-item-avatar {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.inbox-item-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.inbox-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-blue) 20%, transparent);
  color: var(--color-blue);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-green);
  border: 2px solid rgba(17, 19, 23, 0.8);
}

.inbox-item-body {
  flex: 1;
  min-width: 0;
}

.inbox-item-from {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-blue);
  margin-bottom: 2px;
}

.inbox-item-title {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-item-preview {
  font-size: var(--fs-xs);
  opacity: 0.5;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-item-reactions {
  display: flex;
  gap: 4px;
  margin-top: var(--space-xs);
}

.reaction-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reaction-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.15);
}

.reaction-btn.active {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
  transform: scale(1.1);
}

/* ─── Inbox Item Expand / Collapse ─────────────────────────── */

.inbox-item {
  cursor: pointer;
}

.inbox-item.expanded {
  background: rgba(255, 255, 255, 0.04);
}

.inbox-item-expanded {
  margin-top: 8px;
  animation: inbox-expand 0.2s ease;
}

.inbox-item-expanded.hidden {
  display: none;
}

@keyframes inbox-expand {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 500px; }
}

.inbox-item-full-text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.inbox-item-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.inbox-reply-btn {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
  border-radius: 8px;
  color: var(--color-blue);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--space-2xs) var(--space-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.inbox-reply-btn:hover {
  background: color-mix(in srgb, var(--color-blue) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
}

.inbox-reply-btn.wiktok-reply {
  background: rgba(255, 180, 0, 0.1);
  border-color: rgba(255, 180, 0, 0.25);
  color: #ffb400;
}

.inbox-reply-btn.wiktok-reply:hover {
  background: rgba(255, 180, 0, 0.18);
  border-color: rgba(255, 180, 0, 0.4);
}

/* ─── DM Inbox Notifications ──────────────────────────────── */

.inbox-item.dm-message {
  border-left: 3px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.inbox-item.dm-message .inbox-item-from {
  color: var(--color-blue);
}

.inbox-item.dm-message .inbox-item-title {
  color: color-mix(in srgb, var(--color-blue) 80%, transparent);
  font-size: var(--fs-xs);
}

.dm-avatar {
  background: color-mix(in srgb, var(--color-blue) 20%, transparent) !important;
  color: var(--color-blue) !important;
}

.inbox-reply-btn.dm-open-chat {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
  color: var(--color-blue);
}

.inbox-reply-btn.dm-open-chat:hover {
  background: color-mix(in srgb, var(--color-blue) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
}

/* ─── Per-Friend Unread DM Badge ──────────────────────────── */

.friend-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #f43f5e;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
  z-index: 2;
  border: 2px solid var(--color-bg);
}

/* ─── WikTok System Chat ──────────────────────────────────── */

.chat-wiktok-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl) var(--space-md);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.chat-wiktok-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.chat-wiktok-hint {
  font-size: var(--fs-xs);
  opacity: 0.5;
  margin-top: 6px;
}

/* System notification bubbles (WikTok chat) */
.chat-bubble-system {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  max-width: 85%;
  margin: 6px auto 6px 8px;
  padding: var(--space-sm) var(--space-md);
  border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 15%, transparent);
}

.chat-system-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.chat-system-icon .tabler-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.chat-bubble-system .chat-bubble-content {
  flex: 1;
  min-width: 0;
}

.chat-system-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: color-mix(in srgb, var(--color-green) 90%, transparent);
  margin-bottom: 2px;
}

.chat-bubble-system .chat-bubble-body {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.chat-bubble-system .chat-bubble-time {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.chat-system-sender {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Inbox Filter Tabs ────────────────────────────────────── */

.inbox-tabs {
  display: flex;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.inbox-tab {
  flex: 1;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.inbox-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.inbox-tab.active {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
  color: var(--color-blue);
}

.inbox-tab .tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-green);
  color: var(--color-bg);
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
}

.inbox-tab .tab-badge.reaction-badge {
  background: rgba(255, 180, 0, 0.85);
}

.inbox-tab .tab-badge:empty {
  display: none;
}

/* ─── Sent Item Layout ─────────────────────────────────────── */

.inbox-item.sent-item {
  position: relative;
}

/* Stylised letter avatar for sent items */
.sent-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-blue) 30%, transparent), rgba(168, 130, 255, 0.3));
  color: var(--color-purple-light);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(168, 130, 255, 0.2);
}

/* ─── Sent Reaction Badge (top-right) ─────────────────────── */

.sent-reaction-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.sent-reaction-badge:hover {
  transform: scale(1.1);
}

.sent-reaction-emoji {
  font-size: 0.95rem;
  line-height: 1;
}

.sent-reaction-badge.pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  width: 30px;
  height: 30px;
}

.sent-reaction-waiting {
  font-size: 0.8rem;
  opacity: 0.25;
  letter-spacing: -2px;
}

/* ─── System Messages ─────────────────────────────────────── */

.inbox-item.system-message {
  background: rgba(255, 180, 0, 0.04);
  border-left: 3px solid rgba(255, 180, 0, 0.3);
}

.inbox-item.system-message .inbox-item-from {
  color: #ffb400;
}

.system-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.25), rgba(255, 120, 0, 0.2));
  border: 1px solid rgba(255, 180, 0, 0.2);
  font-size: 1.1rem;
  line-height: 1;
}

/* Balatro theme overrides for tabs */
body.theme-balatro .inbox-tab.active {
  background: rgba(255, 70, 70, 0.12);
  border-color: rgba(255, 70, 70, 0.3);
  color: #ff4646;
}

body.theme-balatro .inbox-tab .tab-badge {
  background: #ff4646;
  color: #fff;
}

/* ─── Social Toolbar Button ───────────────────────────────── */

.social-toolbar-btn {
  font-size: 1.1rem;
  line-height: 1;
}

/* =============================================
   Friends Page — full-screen overlay
/* Toolbar: search + add button */
.friends-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.friends-search-wrap {
  flex: 1;
}

.friends-search-wrap input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: max(var(--fs-sm), 16px);
  box-sizing: border-box;
}

.friends-search-wrap input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-green) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-green) 12%, transparent);
}

.friends-add-btn {
  width: 38px;
  height: 38px;
  border: 1.5px dashed color-mix(in srgb, var(--color-green) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
  color: var(--color-green);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.friends-add-btn:hover {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
}

.friends-add-btn:active {
  transform: scale(0.9);
}



/* Section label */
.friends-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  padding: var(--space-md) var(--space-md) var(--space-2xs);
}

/* Pending request rows */
.friends-pending {
  flex-shrink: 0;
}

.friend-request-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.friend-request-info {
  flex: 1;
  min-width: 0;
}

.friend-request-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-request-label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
}

.friend-request-accept,
.friend-request-reject {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.friend-request-accept {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  color: var(--color-green);
}

.friend-request-reject {
  background: color-mix(in srgb, var(--color-red) 12%, transparent);
  color: var(--color-red);
}

.friend-request-accept:active,
.friend-request-reject:active {
  transform: scale(0.88);
}

/* Friends list (scrollable) */
.friends-list {
  flex: 1;
  overflow-y: auto;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
  cursor: pointer;
}

.friend-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.friend-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.friend-row-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.friend-avatar-letter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.friend-row-info {
  flex: 1;
  min-width: 0;
}

.friend-row-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.friend-row:hover .friend-row-remove {
  opacity: 0.5;
}

.friend-row-remove:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--color-red) 12%, transparent);
}

/* Empty state */
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.friends-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.friends-empty p {
  margin: 4px 0;
  font-size: var(--fs-sm);
}

.friends-empty-hint {
  font-size: var(--fs-xs);
  opacity: 0.6;
}

/* ─── Balatro theme overrides for friends page ─────────── */

body.theme-balatro .friends-add-btn {
  border-color: rgba(255, 70, 70, 0.4);
  background: rgba(255, 70, 70, 0.08);
  color: #ff4646;
}

body.theme-balatro .friend-avatar-letter {
  background: linear-gradient(135deg, #dc2626 0%, #ff4646 100%);
}

body.theme-balatro .friend-request-accept {
  background: rgba(255, 70, 70, 0.15);
  color: #ff4646;
}



/* =============================================
   Chat Thread View (inside friends page)
   ============================================= */

.chat-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Let top: 0 + bottom: 0 size this relative to its containing block
     (.social-page, which creates a new containing block via transform).
     Explicit height would over-constrain and push the input bar off-screen. */
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-modal) + 200);
  transition: transform 0.25s var(--ease-slide);
  transform: translateX(0);
  /* Clear safe area + orb row so chat header sits below the orbs */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
  overflow: hidden;
}

.chat-view.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

/* Particle canvas inside chat — cloned from main bg */
.chat-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Chat header — back+title now in #orb-row-center */
.chat-header {
  display: none;
}

.chat-back-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.chat-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.chat-friend-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #fff;
}

/* Messages area — transparent so particles show through.
   Uses a flex spacer (::before) to push messages to the bottom
   instead of justify-content: flex-end, which breaks upward scroll
   in some mobile browsers. */
.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: auto;
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* Flex spacer — pushes messages to the bottom when they don't fill the view,
   while allowing normal upward scrolling when they overflow. */
.chat-messages::before {
  content: '';
  flex: 1 1 auto;
}

.chat-messages > * {
  position: relative;
  z-index: 1;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 48px 16px;
}

.chat-empty p {
  margin: 4px 0;
  font-size: var(--fs-sm);
}

.chat-empty-hint {
  font-size: 1.4rem;
  opacity: 0.7;
}

/* ─── Chat Bubbles — glass morphism ─────────────────────── */

.chat-bubble {
  max-width: 78%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 16px;
  word-wrap: break-word;
  line-height: 1.4;
}

.chat-bubble-me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 18%, transparent);
  border-bottom-right-radius: 4px;
  color: #d1fae5;
}

.chat-bubble-them {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 4px;
  color: rgba(255, 255, 255, 0.88);
}

.chat-bubble-body {
  font-size: var(--fs-sm);
}

.chat-bubble-body a.chat-link {
  color: #6ecfff;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.chat-bubble-body a.chat-link-article {
  display: inline-block;
  background: rgba(110, 207, 255, 0.12);
  color: #6ecfff;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  margin: 4px 0;
  font-weight: 500;
}

.chat-bubble-time {
  font-size: 0.62rem;
  opacity: 0.4;
  margin-top: 3px;
  text-align: right;
}

.chat-bubble-them .chat-bubble-time {
  text-align: left;
}

/* ─── Chat Article Card (shared wiktok preview) ──────────── */

/* ═══════════════════════════════════════════════════════════
   Chat Article Cards — Full explore-page cards in chat.
   Uses the real .card / .card-collapsed / .card-expanded-active
   classes.  Collapsed & expanded base styles inherit from
   _04-cards.css — only chat-specific sizing/layout overrides
   live here.
   ═══════════════════════════════════════════════════════════ */

.chat-card-wrapper {
  width: 92%;
  min-width: 240px;
  max-width: 92%;
}

.chat-card-wrapper.chat-card-me {
  align-self: flex-end;
}

.chat-card-wrapper.chat-card-them {
  align-self: flex-start;
}

/* Cards inside chat — override explore-page sizing */
.chat-card-wrapper .card {
  --card-glass-opacity: 1; /* fully opaque so cards behind don't bleed through */
  width: 100%;
  min-height: 0;
  padding-bottom: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 1;
  /* Allow native vertical scroll in chat; CardPhysics handles horizontal only */
  touch-action: pan-y;
}

/* ── Floating overlay for expanded chat card ── */
.chat-card-overlay {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-modal) + 300);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: chatOverlayFadeIn 0.2s ease-out;
}

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

/* Overlay card — sizing & chrome only; sub-element styles
   (title, content, ai-bar, meta, etc.) inherit from
   .card.card-expanded-active in _04-cards.css (class added by JS). */
.chat-card-overlay > .card {
  --card-glass-opacity: 1;
  width: 92%;
  max-width: 420px;
  height: 75vh;
  height: 75dvh;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  padding-bottom: var(--space-2xl);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

/* Overlay top-row: tighter vertical padding than explore page */
.chat-card-overlay > .card .card-top-row {
  padding: var(--card-padding);
  padding-bottom: var(--space-xs);
}

/* Overlay category bubbles: add wrap + gap (explore page uses row) */
.chat-card-overlay > .card .category-bubbles {
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--card-padding);
}

/* Overlay progress: remove top/bottom padding for compact overlay */
.chat-card-overlay > .card .progress-container {
  padding: 0 var(--card-padding);
}

/* ── Expanded chat card (inline fallback — hidden by overlay) ── */

/* Inline-expanded chat card: smaller bottom padding than explore page */
.chat-card-wrapper .card.card-expanded-active {
  padding-bottom: 8px;
}

/* Inline layout uses block instead of flex so content stacks simply */
.chat-card-wrapper .card.card-expanded-active .card-content,
.chat-card-wrapper .card.card-expanded-active .progress-container {
  display: block;
}

.chat-card-wrapper .card.card-expanded-active .card-content {
  padding: 0 var(--card-padding) var(--space-sm);
}

.chat-card-wrapper .card.card-expanded-active .category-bubbles {
  padding: 0 var(--card-padding) var(--space-sm);
}

.chat-card-wrapper .card.card-expanded-active .progress-container {
  padding: 0 var(--card-padding) var(--space-sm);
}

/* Chat top-row: add gap for inline timestamp */
.chat-card-wrapper .card.card-expanded-active .card-top-row {
  gap: 10px;
}

/* Inline-expanded title: compact single-line with ellipsis
   (differs from explore page's centered multi-line title) */
.chat-card-wrapper .card.card-expanded-active .card-content .title {
  flex: none;
  font-size: var(--fs-base, 15px);
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Chat-specific timestamp inside cards */
.chat-card-wrapper .chat-card-time {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 8px;
}

/* Swipe result badge — shared with old system */
.chat-card-wrapper .chat-card-swipe-badge {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  margin: 0 14px 8px;
}

.chat-card-wrapper .chat-card-swipe-badge.saved {
  display: flex;
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
  color: var(--color-green);
  border: 1px solid color-mix(in srgb, var(--color-green) 15%, transparent);
}

.chat-card-wrapper .chat-card-swipe-badge.skipped {
  display: flex;
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
  color: color-mix(in srgb, var(--color-red) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-red) 12%, transparent);
}

/* Swiped card — reduced opacity */
.chat-card-wrapper .card.chat-card-swiped {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Input bar — glass morphism, always anchored at bottom */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm);
  /* Safe area: extra bottom padding for iPhone home indicator */
  padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: rgba(17, 19, 23, 0.95);
  position: relative;
  z-index: 4;
}

.chat-input-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: max(var(--fs-sm), 16px);
  box-sizing: border-box;
}

.chat-input-bar input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-green) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-green) 12%, transparent);
}

.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--color-green) 20%, transparent);
  color: var(--color-green);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}

.chat-send-btn:hover {
  background: color-mix(in srgb, var(--color-green) 30%, transparent);
}

.chat-send-btn:active {
  transform: scale(0.9);
}

/* Attach button */
.chat-attach-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  line-height: 1;
}

.chat-attach-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.chat-attach-btn:active {
  transform: scale(0.9);
}

/* Article picker overlay */
.chat-article-picker {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  max-height: 50%;
  background: rgba(18, 20, 26, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  z-index: var(--z-card);
  animation: slideUpPicker 0.2s ease-out;
}

@keyframes slideUpPicker {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.chat-article-picker.hidden {
  display: none;
}

.chat-article-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.chat-article-picker-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.chat-article-picker-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.chat-article-picker-list {
  overflow-y: auto;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-article-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  width: 100%;
}

.chat-article-item:hover {
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
}

.chat-article-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.chat-article-item-snippet {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

/* ─── Balatro theme overrides for chat ─────────────────── */

body.theme-balatro .chat-header {
  background: rgba(26, 10, 30, 0.8);
  border-bottom-color: rgba(255, 215, 0, 0.15);
}

body.theme-balatro .chat-bubble-me {
  background: rgba(196, 30, 58, 0.15);
  border-color: rgba(196, 30, 58, 0.2);
  color: #fecaca;
}

body.theme-balatro .chat-input-bar {
  background: rgba(26, 10, 30, 0.8);
  border-top-color: rgba(255, 215, 0, 0.15);
}

body.theme-balatro .chat-input-bar input:focus {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.12);
}

body.theme-balatro .chat-send-btn {
  background: rgba(196, 30, 58, 0.2);
  color: #c41e3a;
}

body.theme-balatro .chat-send-btn:hover {
  background: rgba(196, 30, 58, 0.3);
}

body.theme-balatro .chat-article-card {
  background: linear-gradient(145deg, rgba(26, 10, 30, 0.95) 0%, rgba(74, 30, 110, 0.3) 50%, rgba(26, 10, 30, 0.95) 100%);
  border: 2px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 16px rgba(196, 30, 58, 0.2), 0 6px 24px rgba(0, 0, 0, 0.4);
}

body.theme-balatro .chat-card-open-btn {
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.2);
}

body.theme-balatro .chat-card-open-btn:hover {
  background: rgba(255, 215, 0, 0.2);
}

body.theme-balatro .chat-article-item:hover {
  background: rgba(255, 70, 70, 0.08);
}

body.theme-balatro .chat-article-picker {
  background: rgba(26, 10, 30, 0.95);
  border-top-color: rgba(255, 215, 0, 0.15);
}

/* ─── Notification Badge (on inbox button) ────────────────── */

.inbox-btn {
  position: relative;
}

.bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  border-radius: 8px;
  background: #f43f5e;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
}

.bell-badge.hidden {
  display: none;
}

/* ─── Friend Requests inside Inbox ────────────────────────── */

.inbox-friend-requests {
  flex-shrink: 0;
}

.inbox-section-label {
  padding: var(--space-sm) var(--space-md) var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.notif-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.notif-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.notif-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.notif-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-blue) 20%, transparent);
  color: var(--color-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-name {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.notif-hint {
  font-size: var(--fs-xs);
  opacity: 0.5;
}

.notif-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.notif-accept,
.notif-reject {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.notif-accept {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  color: var(--color-green);
}

.notif-accept:hover {
  background: color-mix(in srgb, var(--color-green) 30%, transparent);
  transform: scale(1.1);
}

.notif-reject {
  background: color-mix(in srgb, var(--color-red) 15%, transparent);
  color: var(--color-red);
}

.notif-reject:hover {
  background: color-mix(in srgb, var(--color-red) 30%, transparent);
  transform: scale(1.1);
}

/* ─── Social Toast ────────────────────────────────────────── */

.social-toast {
  position: fixed;
  bottom: calc(var(--navbar-h, 80px) + 8px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10, 11, 13, 0.95);
  border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
  color: var(--color-green);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: var(--fs-sm);
  z-index: var(--z-system-toast);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.social-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Balatro theme overrides for social ──────────────────── */

body.theme-balatro .bell-badge {
  background: #ff4646;
}

body.theme-balatro .social-toast {
  border-color: rgba(255, 70, 70, 0.3);
  color: #ff4646;
}

/* =============================================
   Share Sheet (bottom drawer)
   ============================================= */

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-navbar) + 10);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 0.25s ease;
  opacity: 0;
}

.share-sheet.hidden {
  display: none;
}

.share-sheet.visible {
  opacity: 1;
}

.share-card {
  width: 100%;
  max-width: 420px;
  background: rgba(17, 19, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: var(--space-sm) var(--space-lg) calc(var(--space-2xl) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-slide);
}

.share-sheet.visible .share-card {
  transform: translateY(0);
}

.share-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto var(--space-md);
}

/* Article preview */
.share-article-preview {
  margin-bottom: var(--space-md);
}

.share-article-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-article-snippet {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Friends row */
.share-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
}

.share-friends-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.share-friends-row::-webkit-scrollbar {
  display: none;
}

.share-friend-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  min-width: 56px;
  transition: transform 0.15s ease;
}

.share-friend-btn:active {
  transform: scale(0.92);
}

.share-friend-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.share-friend-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.share-friend-initial {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.share-friend-name {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
  text-align: center;
}

/* Divider */
.share-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: var(--space-md) 0;
}

/* External share actions */
.share-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.share-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  min-width: 72px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.share-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.share-action-btn:active {
  transform: scale(0.95);
}

.share-action-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.share-action-icon .tabler-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.share-action-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* ─── Balatro theme overrides for share ──────────────────── */

body.theme-balatro .share-card {
  border-color: rgba(255, 70, 70, 0.15);
}

body.theme-balatro .share-friend-avatar {
  background: linear-gradient(135deg, #dc2626 0%, #ff4646 100%);
}

body.theme-balatro .share-action-btn {
  border-color: rgba(255, 70, 70, 0.12);
}

body.theme-balatro .share-action-btn:hover {
  background: rgba(255, 70, 70, 0.08);
}

/* ==================== PWA STANDALONE MODE ==================== */
/* Safe area insets for notched iPhones (Home Screen web app) */

/* Standalone PWA extras */
@media (display-mode: standalone) {
  /* Safe area insets for modal overlays (notched iPhones) */
  .modal-content,
  .reading-list-modal {
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  }

  /* Modal already has safe-area in base rule — no need to duplicate here */

  /* Prevent rubber-band overscroll in standalone mode */
  html {
    overscroll-behavior: none;
  }
}

/* ===== ACCOUNT PAGE (full-screen) ===== */

#account-page {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  /* background: var(--color-bg); */
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: auto;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: 0;
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

.acct-header {
  display: none;  /* back+title now in #orb-row-center */
}
.acct-back {
  background: none; border: none; color: #fff;
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background 0.2s;
}
.acct-back:hover { background: rgba(255,255,255,0.1); }
.acct-title {
  font-size: var(--fs-md); font-weight: 700; color: #fff;
  flex: 1; margin: 0;
}

.acct-tabs {
  display: flex;
  gap: 0;
  padding: var(--space-sm) var(--space-lg) 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.acct-tab {
  flex: 1;
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-size: var(--fs-sm); font-weight: 600;
  padding: var(--space-sm) 0 var(--space-sm);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.acct-tab:hover { color: rgba(255,255,255,0.7); }
.acct-tab.active {
  color: #fff;
  border-bottom-color: var(--color-green, #4ade80);
}

.acct-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-lg) var(--space-xl);
}

.acct-loading {
  text-align: center;
  color: #888;
  padding: var(--space-2xl) var(--space-lg);
  font-size: var(--fs-sm);
}

/* ===== READING LIST PAGE ===== */

#rl-page {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: auto;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: 0;
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}
#rl-page[hidden] { display: none; }

/* Header */
.rl-header {
  display: none;
}
.rl-back {
  background: none; border: none; color: #fff;
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background 0.2s;
}
.rl-back:hover { background: rgba(255,255,255,0.1); }
.rl-title {
  font-size: 20px; font-weight: 700; color: #fff;
  flex: 1; margin: 0;
}
.rl-count { font-size: var(--fs-sm); color: #888; white-space: nowrap; }

/* Search bar with clear button */
.rl-search-wrap {
  padding: var(--space-sm) var(--space-lg); flex-shrink: 0;
  position: relative;
}
.rl-search {
  width: 100%;
  padding: 10px 40px 10px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; color: #fff; font-size: var(--fs-base);
  outline: none; transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.rl-search::placeholder { color: #555; }
.rl-search:focus { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); }
.rl-search-clear {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); border: none; color: #999;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.rl-search-clear.visible { opacity: 1; pointer-events: auto; }
.rl-search-clear:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* Toolbar: filter + sort dropdowns */
.rl-toolbar {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-lg) var(--space-sm); flex-shrink: 0;
}
.rl-select-wrap {
  display: flex; align-items: center; gap: 6px;
}
.rl-select-label {
  font-size: 12px; color: #666; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.rl-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #ccc; font-size: 13px;
  /* padding: 6px 28px 6px 10px; cursor: pointer; */
  outline: none; flex-shrink: 0; white-space: nowrap;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  transition: border-color 0.2s, background 0.2s;
}
.rl-select:focus { border-color: rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.12); }
.rl-select option { background: #1a1a1a; color: #ddd; }

/* Scrollable items area — now uses shared .card-list rules from _04-cards.css */
.rl-items {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 4px var(--page-pad-x) 20px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  container-name: rl-items;
}

/* Active category filter bar */
.rl-cat-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 20px 10px; flex-shrink: 0;
  flex-wrap: wrap;
}
.rl-cat-bar-label {
  font-size: 11px; color: #666; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.rl-cat-clear-all {
  font-size: 11px; color: #888; background: none; border: none;
  cursor: pointer; padding: 2px 4px; margin-left: auto;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.15s;
}
.rl-cat-clear-all:hover { color: #ccc; }

/* Category filter pill active highlight */
.rl-item-cat-active { outline: 1.5px solid var(--pill-color, #888); outline-offset: 1px; }
.rl-cat-active-pill { cursor: pointer; }

/* Trophy icon for unlocked articles */
.rl-item-trophy { font-size: 14px; }

/* Empty state */
.rl-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: var(--space-2xl) var(--space-lg); text-align: center; color: #666;
}
.rl-empty p { margin: 4px 0; font-size: 15px; }

/* ===== SEARCH PAGE ===== */

#sp-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--navbar-h);
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: auto;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: 0;
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

#sp-page[hidden] {
  display: none;
}

/* Chrome hiding when card expanded now uses shared .card-list-expand-hidden in _04-cards.css */

/* Header */
.sp-header {
  display: none;
}

.sp-back {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.sp-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sp-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  margin: 0;
}

/* Search input with clear button */
.sp-search-wrap {
  padding: var(--space-sm) var(--space-lg);
  flex-shrink: 0;
  position: relative;
  container-type: inline-size;
  display: flex;  
  justify-content: center;
  width: 90cqw;
  max-width: 100%;  
}

.sp-search {
  width: 90cqw;
  max-width: 100%;
  padding: 10px 40px 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #fff;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}

.sp-search::placeholder {
  color: #555;
}

.sp-search:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

.sp-search-clear {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #999;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.sp-search-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

.sp-search-clear:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Scrollable results area */
.sp-results {
  flex: 0 1 auto;
  overflow-y: auto;
  padding: 4px var(--page-pad-x) 20px;
  min-height: 0;
  /* width: 100%; */
  touch-action: pan-y;
  overscroll-behavior: contain;
  container-type: size;
  container-name: sp-results;
}

/* When pills are hidden, results fill the space */
.sp-float-wrap.sp-pills-hidden~.sp-results {
  flex: 1;
}

/* Result card */
.sp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-xs);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 0.2s;
}

.sp-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Row 1: title + meta */
.sp-item-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-item-name {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-item-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: #555;
  white-space: nowrap;
}

/* Abstract snippet */
.sp-item-snippet {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Categories row */
.sp-item-cats {
  display: flex;
  gap: 4px;
  overflow-x: visible;
  scrollbar-width: none;
  touch-action: none;
  padding-bottom: 2px;
}

.sp-item-cats::-webkit-scrollbar {
  display: none;
}

/* Action buttons */
.sp-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.sp-act-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 14px;
  transition: all 0.15s;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}

.sp-act-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sp-act-btn:active {
  transform: scale(0.95);
}

/* Read button accent */
.sp-act-read {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
  color: var(--color-purple-light);
}

.sp-act-read:hover {
  background: rgba(139, 92, 246, 0.2);
}

/* Save button accent */
.sp-act-save {
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 20%, transparent);
  color: color-mix(in srgb, var(--color-green) 70%, transparent);
}

.sp-act-save:hover {
  background: color-mix(in srgb, var(--color-green) 18%, transparent);
  color: var(--color-green);
}

.sp-act-saved {
  background: color-mix(in srgb, var(--color-green) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 15%, transparent);
  color: color-mix(in srgb, var(--color-green) 50%, transparent);
  cursor: default;
}

/* Empty / loading state */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: #666;
}

.sp-empty p {
  margin: 4px 0;
  font-size: 15px;
}

.sp-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-sm);
}

/* Toast notification */
.sp-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: var(--space-sm) var(--space-xl);
  border-radius: 20px;
  font-size: var(--fs-sm);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: var(--z-system-toast);
  pointer-events: none;
}

.sp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Conveyor belt ── */
.sp-belt {
  flex-shrink: 0;
  overflow: hidden;
  padding: 10px 0 6px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.sp-belt-row {
  overflow: hidden;
  padding: 0.5em
}

.sp-belt-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.sp-belt-left {
  animation: sp-scroll-l linear infinite;
}

.sp-belt-right {
  animation: sp-scroll-r linear infinite;
}

.sp-belt-speed-1 {
  animation-duration: 1200s;
}

.sp-belt-speed-2 {
  animation-duration: 1200s;
}

.sp-belt-speed-3 {
  animation-duration: 1200s;
}

@keyframes sp-scroll-l {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes sp-scroll-r {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* ── Selected category filters bar ── */
.sp-filters {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 8px;
  flex-shrink: 0;
}

.sp-filters.visible {
  display: flex;
}

.sp-filter-x {
  background: color-mix(in srgb, var(--pill-color) 20%, transparent);
  border: none;
  color: var(--pill-color);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}

.sp-filter-x:hover {
  background: color-mix(in srgb, var(--pill-color) 35%, transparent);
}

@keyframes sp-filter-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Floating categories area ── */
.sp-float-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: max-height 0.35s ease, opacity 0.25s ease, flex 0.35s ease;
  overflow: hidden;
  /* justify-content: center; */
}

.sp-float-wrap.sp-pills-hidden {
  display: none !important;
}

.sp-float {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--space-md) * var(--pill-scale, 1)) calc(var(--space-sm) * var(--pill-scale, 1));
  padding: var(--space-sm) clamp(32px, 10vw, 80px);
  max-height: min-content;
  margin-top: 3em;
  box-sizing: border-box;
  --pill-scale: 0.9;
  touch-action: pan-y;
  /* vertical scroll native, horizontal drag via JS */
}

/* Refresh button */
.sp-refresh-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(1em);
  border: 1px solid rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 1em;
  transition: transform 0.3s ease, color 0.2s, background 0.2s;
  z-index: 2;
  padding: 0;
  line-height: 1;
}

.sp-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.sp-refresh-btn:active {
  transform: scale(0.9);
}

.sp-refresh-spin {
  animation: sp-refresh-spin-anim 0.5s ease-out;
}

@keyframes sp-refresh-spin-anim {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Hide belt when searching */
.sp-belt.sp-pills-hidden {
  display: none !important;
}

.sp-belt {
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  max-height: 250px;
}

/* Card-in-list rules now live in shared .card-list rules in _04-cards.css */

/* Sentinel for infinite scroll */
.sp-sentinel {
  height: 1px;
  width: 100%;
}

/* Pagination spinner at bottom of results */
.sp-pagination-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) 0;
  color: #666;
  gap: var(--space-sm);
}

.sp-pagination-spinner::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}/* ===== READ MODE ===== */

/* Read mode progress bar (thin bar below header) — dual bars for ref (blue→green) and AI (purple) */
.rm-progress-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  position: relative;
}

.rm-progress-fill {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 0 1px 1px 0;
  position: absolute;
  top: 0;
  left: 0;
}

.rm-progress-ref {
  background: linear-gradient(90deg, var(--color-cyan), var(--color-green));
}

.rm-progress-ai {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.read-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--navbar-h);
  /* Currently determines whether sprites are visible or not. I see no reason why not  */
  /* background: var(--color-bg); */
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  /* padding-bottom:  max(var(--orb-row-h), calc(env(safe-area-inset-bottom, 0px) + var(--orb-row-h)), calc(var(--safe-bottom) + var(--orb-row-h))); */
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

.read-mode-header {
  /* Migrated to #orb-row-center — hide legacy in-page header */
  display: none;
}

.read-mode-back {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.2s;
}

.read-mode-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.read-mode-header-actions {
  display: flex;
  gap: 4px;
}

.rm-header-pos {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.rm-header-title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-sm);
  text-align: center;
}

.rm-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.3s;
}

.rm-share-btn .icon {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.2s, filter 0.3s;
}

.rm-share-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.rm-share-btn:hover .icon {
  opacity: 0.9;
}

.rm-share-btn:active {
  transform: scale(0.9);
}

.rm-swipe-zone {
  flex: 1;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.rm-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-width: var(--content-max-w);
  margin: 0 auto;
}

.rm-article-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.5em;
  margin: 0.5em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform-origin: center center;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Thumbnail parallax background (sticky layer behind scrolling content) ── */
.rm-thumbnail-bg {
  display: none;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* margin-bottom: -70vh; */
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* border-radius: 16px 16px 0 0; */
  pointer-events: none;
}

.rm-thumbnail-bg.active {
  display: block;
}

.rm-article-card.rm-thumbnail-active {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.rm-article-card .rm-title,
.rm-article-card .rm-h1,
.rm-article-card .rm-h2,
.rm-article-card .rm-h3 {
  text-shadow: var(--text-shadow-color);
  color: #fff;

  display: block;              /* key */
  width: fit-content;          /* shrink to text */
  margin-inline: auto;         /* center horizontally */

  /* background-color: rgba(0, 0, 0, 0.6); */
  padding: 0.5em;
  border-radius: 999px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rm-article-card .rm-title{
  margin: 0;
  font-size: var(--fs-3xl);
}

.rm-article-card .rm-h1 {
  font-size: var(--fs-xl);
}

.rm-article-card .rm-h2 {
  font-size: var(--fs-lg);
}

.rm-article-card .rm-h3 {
font-size: var(--fs-md);
}

.rm-article-card .rm-text,
.rm-article-card .rm-ai-abstract,
.rm-article-card .rm-ai-takeaways,
.rm-article-card .rm-categories {
  border-radius: 6px;
  margin-left: 1em;
  margin-right: 1em;
}

.rm-article-card .rm-ai-abstract,
.rm-article-card .rm-ai-takeaways {
  background: rgba(0, 0, 0);
  padding: var(--space-sm);
  color: rgba(255, 255, 255, 0.85);
}

.rm-article-card.rm-thumbnail-active .rm-divider {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── Icon Bar (spec: [AI Summary | Thumbnail | TTS | Views | Brains | Shares]) ── */
.rm-icon-bar {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 999px;
  gap: 0.2em;
  padding: 0.2em;
  background: var(--color-bg);
  /* flex-wrap: wrap; */
}

.rm-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0,0,0);
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: all 0.2s;
}

.rm-icon-btn .tabler-icon {
  width: 18px;
  height: 18px;
}

.rm-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255);
}

.rm-icon-btn:active {
  transform: scale(0.9);
}

.rm-icon-btn.active,
.rm-icon-btn.rm-icon-active {
  background: rgba(255, 255, 255, 0.85);
  /* border-color: rgba(139, 92, 246); */
  color: #000000;
}

.rm-icon-btn.rm-icon-dotted {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
}

.rm-icon-btn.rm-icon-loading {
  animation: ai-btn-pulse 1.8s ease-in-out infinite;
  cursor: wait;
}

/* .rm-icon-btn.rm-icon-available {
  border-color: rgba(34, 197, 94, 0.4);
  color: rgba(34, 197, 94, 0.7);
} */

/* ── Engagement stats (Views, Brains, Shares) — same height as icon buttons ── */
.rm-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  /* color: rgba(255, 255, 255, 0.45); */
  white-space: nowrap;
  gap: 0.2em;
  height: 36px;
  min-width: 36px;
  /* padding: 0 8px; */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgb(0, 0, 0, 0.85);
}

.rm-stat .tabler-icon {
  width: 15px;
  height: 15px;
}

.rm-stat-count {
  font-variant-numeric: tabular-nums;
}

.rm-stat-brains {
  cursor: pointer;
  transition: all 0.2s;
}

.rm-stat-brains:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
}

.rm-stat-brains:active {
  transform: scale(0.92);
}

.rm-stat-brains.rm-stat-brains-active {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #a78bfa;
}

.rm-stat-brains .rm-brain-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.rm-stat-shares,
.rm-stat-comments {
  cursor: pointer;
  transition: all 0.2s;
}

.rm-stat-shares:hover,
.rm-stat-comments:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.rm-stat-shares:active,
.rm-stat-comments:active {
  transform: scale(0.92);
}

.rm-stat-comments.rm-stat-comments-active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.rm-title {
  text-shadow: var(--text-shadow-color);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: #fff;
  display: flex;
  justify-content: center;

}

.rm-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 1em;
  margin-top: 1em;
}

.rm-meta-bar {
  display: none;
  /* Replaced by rm-icon-bar */
}

.rm-meta-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: var(--space-2xs) var(--space-md);
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.rm-meta-share .icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.rm-meta-share:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.rm-meta-share:hover .icon {
  opacity: 0.85;
}

.rm-meta-share:active {
  transform: scale(0.95);
}

.rm-meta-count {
  font-size: var(--fs-xs);
  color: #555;
  margin-left: auto;
}

.rm-wikibites {
  display: flex;
  flex-direction: column;
}

.rm-wikibite {
  background-color: rgba(0, 0, 0);
  border-radius: 16px;
}

.rm-h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
  margin: var(--space-sm) 0;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.rm-h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: rgba(255, 255, 255);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.rm-text {
  background: rgb(0, 0, 0);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: rgba(255, 255, 255);
  padding: 1em;
  margin: 0;
}

.rm-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: var(--space-xl) 0;
}

/* Read mode loading & error */
.read-mode-loading,
.read-mode-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px;
  text-align: center;
  color: #888;
}

.rm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-md);
}

.rm-error-btn {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-xl);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.rm-error-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Read mode toast */
.rm-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: var(--space-sm) var(--space-xl);
  border-radius: 20px;
  font-size: var(--fs-sm);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: var(--z-system-toast);
  pointer-events: none;
}

.rm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Notification Nudge ──────────────────────────────────── */
/* Gentle contextual prompt shown after user engagement       */

.notification-nudge {
  position: fixed;
  bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  width: min(92vw, 380px);
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid color-mix(in srgb, var(--color-green) 25%, transparent);
  border-radius: 16px;
  padding: var(--space-md) var(--space-md);
  z-index: calc(var(--z-toast) + 500);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.notification-nudge.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.notification-nudge.hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(30px);
  pointer-events: none;
}

.nudge-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.nudge-icon {
  font-size: 1.5em;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.nudge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nudge-text strong {
  color: var(--text-primary, #e2e8f0);
  font-size: 0.92em;
  font-weight: 600;
}

.nudge-text span {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82em;
  line-height: 1.3;
}

.nudge-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nudge-enable {
  flex: 1;
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: 10px;
  background: var(--gradient-primary);
  color: #0a0c12;
  font-weight: 600;
  font-size: 0.85em;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nudge-enable:hover {
  opacity: 0.9;
}

.nudge-enable:active {
  opacity: 0.8;
}

.nudge-later {
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.nudge-later:hover {
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--text-primary, #e2e8f0);
}

.nudge-never {
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.9em;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.nudge-never:hover {
  opacity: 1;
}

/* Confirmation variant */
.nudge-confirmation {
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
}

.nudge-confirmation .nudge-content {
  margin-bottom: 0;
}

/* Balatro theme */
body.theme-balatro .notification-nudge {
  border-color: rgba(255, 70, 70, 0.25);
}

body.theme-balatro .nudge-enable {
  background: linear-gradient(135deg, #ff4646, #ff7b7b);
}

/* ── Inline Comments Section ── */
.rm-comments {
  margin-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-md);
}

.rm-comments[hidden] { display: none; }

.rm-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--space-sm);
}

.rm-comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rm-comment-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.rm-comment-body {
  flex: 1;
  min-width: 0;
}

.rm-comment-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.rm-comment-header strong {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

.rm-comment-time {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.3);
}

.rm-comment-content {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  word-break: break-word;
}

.rm-comment-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--fs-sm);
  padding: var(--space-md) 0;
}

.rm-comment-input-row {
  display: flex;
  gap: 8px;
  margin-top: var(--space-sm);
}

.rm-comment-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}

.rm-comment-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.rm-comment-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
}

.rm-comment-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.rm-comment-send:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

.rm-comment-send:disabled {
  opacity: 0.4;
  cursor: default;
}
/* ==================== RADIAL SOCIAL MENU ==================== */

/* ─── Social Orb — pinned to top-right corner ─── */
.social-orb {
  position: fixed;
  top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  right: calc(14px + max(env(safe-area-inset-right, 0px), var(--safe-right)));
  left: auto;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: linear-gradient(135deg,
    #f59e0b,                      /* amber */
    #fb7185,                      /* rose/coral */
    #ec4899);                     /* pink */
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-orbs);
  cursor: pointer;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(251, 113, 133, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: transform 0.35s var(--ease-spring),
              box-shadow 0.35s ease,
              border-color 0.3s ease;
  user-select: none;
  touch-action: none;
}

.social-orb:hover {
  background: linear-gradient(135deg,
    #fbbf24,
    #fb7185,
    #f472b6);
  border-color: rgba(251, 113, 133, 0.65);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(251, 113, 133, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.social-orb-icon {
  font-size: 18px;
  pointer-events: none;
  line-height: 1;
  filter: brightness(1.1);
}

.social-orb.orb-dragging {
  /* Kept for backward compat — orb is no longer draggable */
  cursor: pointer;
}

/* Orb glows when ring is open or token is being dragged toward it */
.social-orb.orb-target-mode {
  --orb-color: #fbbf24;
  transform: scale(1.3);
  background: linear-gradient(135deg,
    #fbbf24,
    #fb7185,
    #f472b6);
  border-color: rgba(251, 191, 36, 0.7);
  animation: orb-glow-pulse 1.2s ease-in-out infinite;
}

/* ─── Floating Greek-letter token (card shrink) ─── */
.radial-token {
  position: fixed;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--token-color, var(--color-green));
  background: color-mix(in srgb, var(--token-color, var(--color-green)) 15%, #0a0b0d);
  border: 2px solid color-mix(in srgb, var(--token-color, var(--color-green)) 40%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 16px color-mix(in srgb, var(--token-color, var(--color-green)) 30%, transparent);
  z-index: var(--z-modal);
  pointer-events: none;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.25s var(--ease-spring),
              opacity 0.2s ease;
  will-change: left, top, transform;
}

.radial-token.active {
  transform: scale(1);
  opacity: 1;
}

/* Card shrinks visually while token is being dragged */
.card.card-shrinking {
  opacity: 0.25;
  transform: scale(0.92);
  filter: grayscale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

/* ─── Radial ring container ─── */
.radial-ring {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-orbs) - 1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.radial-ring.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Radial node (friend circle or invite) ─── */
.radial-node {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s var(--ease-spring),
              opacity 0.25s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

/* Friend nodes — candy pastel colored */
.radial-node-friend {
  background: color-mix(in srgb, var(--candy-color, #FF6B9D) 25%, rgba(255, 255, 255, 0.08));
  border-color: color-mix(in srgb, var(--candy-color, #FF6B9D) 50%, transparent);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--candy-color, #FF6B9D) 30%, transparent);
}

.radial-node-friend .radial-node-text {
  color: var(--candy-color, #FF6B9D);
  text-shadow: 0 0 8px color-mix(in srgb, var(--candy-color, #FF6B9D) 40%, transparent);
}

.radial-node.node-visible {
  transform: scale(1);
  opacity: 1;
}

.radial-node-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

.radial-node-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.radial-node.node-hovered .radial-node-label {
  opacity: 1;
}

.radial-node-friend.node-hovered {
  transform: scale(1.25);
  border-color: var(--candy-color, #FF6B9D);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--candy-color, #FF6B9D) 30%, transparent),
    0 4px 24px color-mix(in srgb, var(--candy-color, #FF6B9D) 50%, transparent);
}

.radial-node.node-hovered {
  transform: scale(1.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.15),
    0 4px 20px rgba(255, 255, 255, 0.2);
}

.radial-node.node-sending {
  animation: node-pulse 0.5s ease infinite;
}

@keyframes node-pulse {
  0%, 100% { transform: scale(1.25); }
  50%      { transform: scale(1.15); }
}

.radial-node.node-success {
  border-color: var(--color-green);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-green) 50%, transparent);
  transform: scale(1.3);
}

/* Invite node (➕) — glass with subtle highlight */
.radial-node-invite {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  width: 52px;
  height: 52px;
}

.radial-node-invite .radial-node-text {
  font-size: 22px;
}
.radial-node-invite .tabler-icon {
  width: 22px;
  height: 22px;
}

/* ─── Backdrop ─── */
.radial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: calc(var(--z-orbs) - 2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.radial-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Confetti burst on successful share ─── */
.radial-confetti {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-toast);
}

.radial-confetti-piece {
  position: absolute;
  width: 5px;
  height: 5px;
  animation: confetti-burst 0.7s ease-out forwards;
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(cos(var(--angle)) * var(--distance)),
      calc(sin(var(--angle)) * var(--distance))
    ) scale(0);
    opacity: 0;
  }
}

/* Balatro theme overrides */
body.theme-balatro .social-orb {
  background: rgba(40, 8, 12, 0.8);
  border-color: rgba(255, 215, 0, 0.25);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 30, 58, 0.2) inset;
}

body.theme-balatro .radial-node {
  background: rgba(26, 10, 30, 0.15);
  border-color: rgba(255, 215, 0, 0.15);
}

body.theme-balatro .radial-node.node-hovered {
  border-color: var(--balatro-gold);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3), 0 4px 20px rgba(255, 215, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   Constellation — Social Graph View
   ═══════════════════════════════════════════════════════════ */

.social-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-add-btn {
  background: none;
  border: 1.5px dashed color-mix(in srgb, var(--color-green) 40%, transparent);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: color-mix(in srgb, var(--color-green) 70%, transparent);
}

.social-add-btn:hover {
  border-color: color-mix(in srgb, var(--color-green) 70%, transparent);
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
}

.constellation-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  touch-action: none;
}

.constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ─── Constellation Orbs ─────────────────────────────────── */

.constellation-orb {
  position: absolute;
  left: 0;
  top: 0;
  /* Per-orb sizing: base size × interaction scale (0.7 to 1.3) */
  --_s: calc(var(--orb-size, 48px) * var(--orb-scale, 1));
  width: var(--_s);
  height: var(--_s);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  /* transform set by JS (translate3d positioning) */
  /* Solid dark fill — replaces expensive backdrop-filter: blur(10px) */
  background: rgba(12, 12, 18);
  /* Coloured glowy outline — alpha driven by interaction intensity */
  border: 1.5px solid color-mix(in srgb, var(--orb-color, #fff) calc(var(--orb-border-alpha, 0.40) * 100%), transparent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4),
              0 0 10px color-mix(in srgb, var(--orb-color, #fff) calc(var(--orb-glow-alpha, 0.22) * 100%), transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

@media (hover: hover) {
  .constellation-orb:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 18px color-mix(in srgb, var(--orb-color, #fff) calc((var(--orb-glow-alpha, 0.22) + 0.20) * 100%), transparent),
                0 0 0 2px color-mix(in srgb, var(--orb-color, #fff) 40%, transparent);
  }
}

.constellation-orb-letter {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orb-color, #fff);
  opacity: var(--orb-letter-alpha);
  text-shadow: 0 0 8px color-mix(in srgb, var(--orb-color, #fff) calc(var(--orb-glow-alpha, 0.22) * 200%), transparent);
  pointer-events: none;
  user-select: none;
}

.constellation-orb-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s;
}

.constellation-orb:hover .constellation-orb-label,
.constellation-orb-lifted .constellation-orb-label {
  opacity: 1;
}

.constellation-orb-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-green);
  color: var(--color-bg);
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  animation: constellation-badge-pulse 2s ease-in-out infinite;
}

@keyframes constellation-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}

/* Unread messages: pulsing glow halo — uses shared .expanded-orb component */

/* Constellation background particles canvas */
.constellation-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-base);
  border-radius: inherit;
}



.constellation-orb-request-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: var(--color-amber);
  color: var(--color-bg);
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

/* Pending friend request orbs: dimmed, pulsing at edge */
.constellation-orb-request {
  opacity: 0.5;
  border-style: dashed;
  animation: constellation-request-pulse 2.5s ease-in-out infinite;
}

@keyframes constellation-request-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Suggested friend orbs: greyed-out but visible, with card-style shimmer */
.constellation-orb-suggested {
  opacity: 0.6;
  border-style: dotted;
  border-width: 1.5px;
  filter: saturate(0.35);
  --shimmer-color: var(--orb-color, rgba(180, 180, 200, 0.7));
  --shimmer-opacity: 1;
  --shimmer-duration: 6s;
  --shimmer-delay: 0s;
}

/* Circular ring mask — shimmer traces the border only */
.constellation-orb-suggested::before {
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}

.constellation-orb-suggested .constellation-orb-label {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.constellation-orb-suggested:hover .constellation-orb-label,
.constellation-orb-suggested:active .constellation-orb-label {
  opacity: 0.7;
}

/* "+" badge on suggested orbs */
.constellation-orb-suggested-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 40%, transparent);
  color: var(--color-green);
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

/* "via friend" text in suggested action sheet */
.suggested-via {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: -8px 0 12px;
}

/* Lifted (during drag) — transform set by JS (translate3d + scale) */
.constellation-orb-lifted {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 3px var(--orb-color, rgba(255, 255, 255, 0.3));
  z-index: var(--z-card);
}

/* Drop target highlight */
.constellation-drop-target {
  animation: constellation-drop-glow 0.5s ease-in-out infinite alternate;
}

@keyframes constellation-drop-glow {
  from {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-green) 30%, transparent),
                0 0 20px color-mix(in srgb, var(--color-green) 20%, transparent);
  }
  to {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-green) 50%, transparent),
                0 0 30px color-mix(in srgb, var(--color-green) 30%, transparent);
  }
}

.constellation-drop-connected {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0.5;
}

/* Ripple effect on new message */
.constellation-ripple::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--orb-color, var(--color-green));
  animation: constellation-ripple-anim 0.8s ease-out;
  pointer-events: none;
}

@keyframes constellation-ripple-anim {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Introduce animation — glow pulse on both orbs */
.constellation-orb-introduced {
  animation: constellation-intro-pulse 0.6s ease-in-out 3;
}

@keyframes constellation-intro-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-green) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-green) 30%, transparent),
                0 0 24px color-mix(in srgb, var(--color-green) 20%, transparent);
  }
}

/* Introduce connection line — dashed, animated stroke */
.constellation-intro-line {
  animation: constellation-intro-dash 0.5s linear infinite;
}

@keyframes constellation-intro-dash {
  to { stroke-dashoffset: -20; }
}

/* Confetti pieces */
.constellation-confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: constellation-confetti-burst 0.7s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes constellation-confetti-burst {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(0);
    opacity: 0;
  }
}

/* ─── Balatro theme overrides for constellation ───────────── */

body.theme-balatro .constellation-orb {
  background: rgba(40, 8, 12, 0.7);
  border-color: var(--orb-color, rgba(255, 215, 0, 0.15));
}



body.theme-balatro .constellation-orb-badge {
  background: #ff4646;
  color: #fff;
}

/* ─── Broadcast-style Notifications View ─────────────────── */

.recents-view {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* No height: 100dvh — inside .social-page's transform containing block,
     top/bottom: 0 sizes relative to the parent, not the viewport. */
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: calc(var(--z-modal) + 100);
  transition: transform 0.3s var(--ease-slide), opacity 0.25s ease;
  transform: translateY(0);
  /* Safe area — left/right; top clears the orb row */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
  /* Avoid double-counting bottom inset: composer already adds safe-area padding */
  padding-bottom: 0;
}

.recents-view.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.recents-header {
  display: none;  /* back+title now in #orb-row-center */
}

.recents-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.recents-search {
  padding: var(--space-xs) var(--space-md);
  flex-shrink: 0;
}

.recents-search input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}

.recents-search input:focus {
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
}

.recents-feed {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recents-empty {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--fs-sm);
}

/* ─── Recents Bubble Items (chat-style) ──────────────────── */

.recents-bubble {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.3s ease;
}

.recents-bubble:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.06);
}

.recents-bubble-unread {
  background: color-mix(in srgb, var(--color-green) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 12%, transparent);
}

.recents-bubble-system {
  background: color-mix(in srgb, var(--color-green) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 10%, transparent);
}

.recents-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

.recents-avatar-system {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  font-size: 1.1rem;
}

.recents-bubble-body {
  flex: 1;
  min-width: 0;
}

.recents-bubble-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.recents-bubble-header strong {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recents-bubble-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.recents-bubble-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recents-bubble-unread .recents-bubble-text {
  color: rgba(255, 255, 255, 0.72);
}

/* Inline accept/decline actions inside recents bubbles */
.recents-bubble-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.recents-btn-accept,
.recents-btn-decline {
  padding: 6px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.recents-btn-accept {
  color: var(--color-green);
  border-color: color-mix(in srgb, var(--color-green) 35%, transparent);
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
}

.recents-btn-accept:active {
  background: color-mix(in srgb, var(--color-green) 20%, transparent);
}

.recents-btn-decline:active {
  background: color-mix(in srgb, var(--color-red) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-red) 30%, transparent);
  color: var(--color-red);
}

/* ─── Broadcast Compose Bar ──────────────────────────── */

.broadcast-compose {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 11, 13, 0.95);
  flex-shrink: 0;
}

.broadcast-compose input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}

.broadcast-compose input:focus {
  border-color: rgba(96, 165, 250, 0.5);
}

.broadcast-compose input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.broadcast-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.broadcast-send-btn:active {
  background: rgba(96, 165, 250, 0.35);
  transform: scale(0.92);
}

.broadcast-send-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ─── Constellation Request Action Sheet ──────────────────── */

.constellation-request-sheet {
  position: absolute;
  inset: 0;
  z-index: var(--z-card-active);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease;
}

.constellation-request-sheet-inner {
  background: rgba(10, 11, 13, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
  max-width: 280px;
}

.constellation-request-sheet-inner p {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

.constellation-request-sheet-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.constellation-request-sheet-actions button {
  padding: 8px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.constellation-request-sheet-actions .btn-accept {
  color: var(--color-green);
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

.constellation-request-sheet-actions .btn-accept:hover {
  background: color-mix(in srgb, var(--color-green) 20%, transparent);
}

.constellation-request-sheet-actions .btn-decline:hover {
  background: color-mix(in srgb, var(--color-red) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-red) 30%, transparent);
  color: var(--color-red);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================================================================
   AI Summary — Inline Toggle within ReadMode
   =========================================================================== */

/* ── AI Summary Button (in meta bar) ── */

.rm-ai-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  padding: var(--space-2xs) var(--space-md);
  cursor: pointer;
  color: rgba(200, 170, 255, 0.9);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.rm-ai-summary-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.25));
  border-color: rgba(139, 92, 246, 0.5);
  color: #d4bbff;
  transform: scale(1.02);
}
.rm-ai-summary-btn:active {
  transform: scale(0.96);
}

/* Loading state — pulsing animation */
.rm-ai-summary-btn.ai-loading {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
  border-color: rgba(139, 92, 246, 0.2);
  color: rgba(200, 170, 255, 0.6);
  cursor: wait;
  animation: ai-btn-pulse 1.8s ease-in-out infinite;
}
.rm-ai-summary-btn.ai-loading:hover {
  transform: none;
}
@keyframes ai-btn-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; border-color: rgba(139, 92, 246, 0.5); }
}

/* Spinner inside loading button */
.rm-ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(200, 170, 255, 0.3);
  border-top-color: rgba(200, 170, 255, 0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Ready state — solid purple glow */
.rm-ai-summary-btn.ai-ready {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(59, 130, 246, 0.3));
  border-color: rgba(139, 92, 246, 0.7);
  color: #e0d0ff;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), inset 0 0 8px rgba(139, 92, 246, 0.1);
  animation: ai-btn-ready 2s ease-in-out 1;
}
@keyframes ai-btn-ready {
  0% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
  40% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5), inset 0 0 12px rgba(139, 92, 246, 0.15); }
  100% { box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), inset 0 0 8px rgba(139, 92, 246, 0.1); }
}
.rm-ai-summary-btn.ai-ready:hover {
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
}

/* Error state — subtle red tint */
.rm-ai-summary-btn.ai-error {
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(255, 180, 180, 0.8);
}

/* ── View Toggle (Original / AI Summary) ── */

.rm-view-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 2px;
  gap: 2px;
}

/* Loading state on toggle button */
.rm-view-toggle-btn.ai-loading {
  color: rgba(200, 170, 255, 0.6);
  cursor: wait;
  animation: ai-btn-pulse 1.8s ease-in-out infinite;
}
.rm-view-toggle-btn.ai-loading:hover {
  transform: none;
  background: transparent;
}

.rm-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2xs) var(--space-md);
  border-radius: 20px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.rm-view-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}
.rm-view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
}
.rm-view-toggle-btn.rm-toggle-ai.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.25));
  color: #e0d0ff;
}

.sm-remaining-inline {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── AI Abstract (shown above wikibites in AI view) ── */

.rm-ai-abstract {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(59, 130, 246, 0.06));
  border-left: 3px solid rgba(139, 92, 246, 0.4);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.rm-ai-abstract[hidden] {
  display: none;
}

/* ── Existing SM styles for AI wikibite content ── */

.sm-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: var(--space-2xs) var(--space-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
}
.sm-like-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.sm-like-btn.liked {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #a78bfa;
}
.sm-like-btn:active {
  transform: scale(0.95);
}

/* Brain icon in AI summary like button */
.sm-brain-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  transition: filter 0.2s, opacity 0.2s;
}
.sm-brain-icon.unbrained {
  filter: grayscale(1) brightness(0.5);
  opacity: 0.5;
}
.sm-like-btn.liked .sm-brain-icon {
  filter: none;
  opacity: 1;
}

.sm-views {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.4);
}

.sm-h1 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: rgba(200, 170, 255, 0.9);
  margin: var(--space-md) 0 var(--space-xs) 0;
}

.sm-equation {
  font-size: var(--fs-base);
  color: rgba(200, 170, 255, 0.9);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-xs) 0;
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* KaTeX overrides for dark theme */
.sm-equation .katex { color: rgba(200, 170, 255, 0.9); }
.sm-equation-fallback { font-style: italic; font-family: 'Georgia', serif; }
.rm-text .katex { color: inherit; }
.sm-abstract-text .katex { color: inherit; }

.sm-list {
  margin: var(--space-xs) 0;
  padding-left: var(--space-lg);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.sm-list li {
  margin-bottom: 4px;
}

/* Takeaways — 3 key insight bullets between abstract and article */
.sm-takeaways {
  margin: var(--space-sm) 0;
  padding-left: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.sm-takeaways li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-sm);
}
.sm-takeaways li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-accent, #8b5cf6);
  box-shadow: 0 0 6px var(--clr-accent, rgba(139, 92, 246, 0.6));
}
.sm-takeaways li:nth-child(2)::before {
  background: var(--clr-accent-alt, #06b6d4);
  box-shadow: 0 0 6px var(--clr-accent-alt, rgba(6, 182, 212, 0.6));
}
.sm-takeaways li:nth-child(3)::before {
  background: var(--clr-accent-ter, #f59e0b);
  box-shadow: 0 0 6px var(--clr-accent-ter, rgba(245, 158, 11, 0.6));
}
/* Read-mode dedicated takeaways block */
.rm-ai-takeaways {
  margin: var(--space-sm) 0 var(--space-md) 0;
}

.sm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-xs) 0;
}
.sm-table-wrap table,
.sm-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-sm) 0;
  font-size: var(--fs-sm);
  overflow-x: auto;
  display: block;
}
.sm-table-wrap table thead,
.sm-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.sm-table-wrap table tbody,
.sm-table tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.sm-table-wrap table th,
.sm-table th {
  background: rgba(139, 92, 246, 0.12);
  color: rgba(200, 170, 255, 0.9);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.sm-table-wrap table td,
.sm-table td {
  padding: var(--space-2xs) var(--space-sm);
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sm-table-wrap table tr:hover td,
.sm-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* ==================== LISTEN MODE / TTS PLAYER ==================== */

/* ── Listen Button (in icon bar — inherits .rm-icon-btn base) ── */
/* .rm-listen-btn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.15));
  border-color: rgba(34, 197, 94, 0.3);
  color: rgba(170, 240, 200, 0.9);
} */

/* ── Bottom Sheet Player ── */
.lm-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 3em;
  z-index: var(--z-page);
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.97), rgba(10, 14, 22, 0.99));
  border-top: 1px solid rgba(34, 197, 94, 0.2);
  padding: var(--space-md) var(--space-lg) calc(var(--space-xl) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-slide);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}
.lm-player--visible {
  transform: translateY(0);
}

.lm-player-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ── Pulsing Orb ── */
.lm-orb {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.lm-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.3);
  transition: all 0.4s ease;
}
.lm-orb-core {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.6), rgba(16, 185, 129, 0.3));
  transition: all 0.4s ease;
}
.lm-orb--active .lm-orb-ring {
  border-color: rgba(34, 197, 94, 0.6);
  animation: lm-ring-pulse 2s ease-in-out infinite;
}
.lm-orb--active .lm-orb-core {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.5));
  animation: lm-core-pulse 2s ease-in-out infinite;
}
.lm-orb--loading .lm-orb-ring {
  border-color: rgba(200, 200, 200, 0.3);
  animation: spin 1.2s linear infinite;
}
.lm-orb--loading .lm-orb-core {
  background: radial-gradient(circle, rgba(200, 200, 200, 0.4), rgba(150, 150, 150, 0.2));
  animation: lm-core-pulse 1s ease-in-out infinite;
}

@keyframes lm-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes lm-core-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}
/* ── Info ── */
.lm-info {
  flex: 1;
  min-width: 0;
}
.lm-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.lm-times {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.lm-time-sep {
  margin: 0 3px;
  opacity: 0.4;
}
.lm-error {
  font-size: var(--fs-xs);
  color: rgba(239, 68, 68, 0.8);
}
.lm-generating {
  font-size: var(--fs-xs);
  color: rgba(168, 162, 158, 0.9);
  animation: lm-pulse-text 1.5s ease-in-out infinite;
}
@keyframes lm-pulse-text {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Controls ── */
.lm-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.lm-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
  line-height: 1;
}
.lm-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lm-btn-retry {
  font-size: 18px;
  color: rgba(34, 197, 94, 0.8);
}
.lm-btn-retry:hover {
  color: rgba(34, 197, 94, 1);
  background: rgba(34, 197, 94, 0.15);
}
.lm-btn-close {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.lm-btn-close:hover {
  color: rgba(239, 68, 68, 0.8);
}
.lm-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(34, 197, 94, 0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Scrubber ── */
.lm-scrubber {
  margin-top: 10px;
  padding: 0 2px;
}
.lm-scrub-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
  transition: height 0.15s ease;
}
.lm-scrub-bar:hover {
  height: 6px;
}
.lm-scrub-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.lm-scrub-bar::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}
.lm-scrub-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

/* ── Sleep Timer ── */
.lm-sleep-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.lm-sleep-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}
.lm-sleep-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.lm-sleep-btn--active {
  border-color: rgba(99, 102, 241, 0.4);
  color: rgba(165, 180, 252, 0.9);
  background: rgba(99, 102, 241, 0.1);
}

/* ── Friends Activity Page ──────────────────────────────────────── */

/*
 * Scrollable card list with compact header.
 *
 * - transparent bg lets particles/Balatro shine through
 * - compact controls row: filter pills + friend selector on one line
 * - category bar below on its own line
 * - scrollable collapsed-card list filling the rest
 * - tap to expand a card (hides controls via card-list-expand-hidden)
 * - "Mine" filter shows/manages your own public posts
 */
#fa-page {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  z-index: var(--z-overlay);
  background: transparent;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Clear the orb row (music + social orbs) + safe-area */
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

.fa-container {
  display: flex; flex-direction: column;
  height: 100%; width: 100%;
  max-width: var(--content-max-w); margin: 0 auto;
  padding: 0 0 max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)) 0;
  position: relative;
}

/* ── Header ───────────────────────────────────────────────────── */

.fa-header {
  display: flex; align-items: center;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fa-back {
  background: none; border: none;
  color: var(--text-primary, #e0e0e0);
  font-size: 1.4rem; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
  transition: background 0.2s;
}
.fa-back:hover { background: rgba(255,255,255,0.08); }
.fa-header-title {
  display: flex; align-items: center; gap: 8px;
  flex: 1; font-size: 1.1rem; font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.fa-settings {
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  transition: background 0.2s;
}
.fa-settings .icon { width: 18px; height: 18px; opacity: 0.5; }
.fa-settings:hover { background: rgba(255,255,255,0.08); }

/* ── Compact Header Wrapper ────────────────────────────────────── */

.fa-controls {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Top row: single scrollable strip of filter pills + friend chips */
.fa-controls-top {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 10px;
  padding: 4px var(--space-md);
}
.fa-controls-top::-webkit-scrollbar { display: none; }

/* ── Filter Pills (chip-style, matches fa-fs-chip sizing) ───── */

.fa-filters {
  display: contents;  /* merge children into parent scroll */
}
.fa-filter-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  min-width: 52px;
  border: none;
  background: none;
  border-radius: 12px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.fa-filter-pill:hover { opacity: 0.85; }
.fa-filter-pill.active {
  opacity: 1;
  background: color-mix(in srgb, var(--color-green) 6%, transparent);
  color: var(--color-green);
}
.fa-filter-pill.active .fa-filter-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-green) 50%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-green) 15%, transparent), color-mix(in srgb, var(--color-cyan) 10%, transparent));
  color: var(--color-green);
}
.fa-filter-pill.active .fa-filter-label {
  color: var(--color-green);
}
.fa-filter-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: all 0.2s;
}
.fa-filter-label {
  font-size: 0.65rem;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  text-align: center;
  transition: color 0.2s;
}

/* ── Deck Area ────────────────────────────────────────────────── */

.fa-deck-area {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  overflow: visible;
  padding: 0;
  gap: 0;
  min-height: 0;
}

/* ── Friends Banner (above deck) ──────────────────────────────── */

.fa-friends-banner {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  padding: 6px 0 8px;
  min-height: 36px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.fa-friends-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.fa-avatars-cluster {
  display: flex; gap: 0;
}

.fa-friend-avatar {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(10, 11, 14, 0.8);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: calc(var(--avatar-index, 0) * -8px);
  animation: faAvatarBob 3s ease-in-out infinite;
  animation-delay: calc(var(--avatar-index, 0) * 0.4s);
  transition: transform 0.2s ease;
}
.fa-friend-avatar:first-child { margin-left: 0; }
.fa-friend-avatar:hover {
  transform: scale(1.15);
  z-index: var(--z-card);
}
.fa-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.fa-avatar-initial {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 0.72rem; font-weight: 700;
  color: #fff;
  border-radius: 50%;
}
.fa-avatar-overflow {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  font-size: 0.65rem; font-weight: 600;
  color: var(--text-secondary, #888);
}

.fa-liked-by {
  font-size: 0.78rem;
  color: var(--text-secondary, #888);
  line-height: 1.3;
}
.fa-liked-by strong {
  color: var(--text-primary, #ccc);
  font-weight: 600;
}

@keyframes faAvatarBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── Scrollable Card List ─────────────────────────────────────── */

.fa-card-list {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 16px);
  box-sizing: border-box;
  container-type: size;
  container-name: fa-card-list;
}

/* ── Card (reuses .card + card-collapsed / card-expanded-active from explore) ── */

.card.fa-explore-card {
  cursor: pointer;
  touch-action: pan-y; /* Allow native vertical scroll; CardPhysics handles horizontal */
}

/* Expanded: override touch-action so CardPhysics gets full control */
.card.fa-explore-card.card-expanded-active {
  height: calc(90cqh);
  cursor: grab;
  touch-action: none;
  z-index: var(--z-card-active);
}

.card.fa-explore-card.card-expanded-active .card-content {
  touch-action: none;
  overscroll-behavior: contain;
}

/* When a card is expanded in the FA list, hide siblings */
.fa-card-list:has(.card-expanded-active) .card:not(.card-expanded-active) {
  display: none;
}
/* AI loading placeholder (shimmer while auto-loading) */
.fa-ai-loading-placeholder {
  padding: 14px;
  margin-top: 4px;
}
.fa-ai-loading-shimmer {
  display: block;
  width: 100%; height: 60px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: faShimmer 1.5s ease-in-out infinite;
}
@keyframes faShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* wikibite excerpt under abstract */
.fa-card-wikibite {
  padding: 8px 14px 4px;
  margin-top: 6px;
}
.fa-wb-text {
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}

/* reference fallback (no AI summary) */
.fa-card-reference {
  border-left: 3px solid rgba(234, 179, 8, 0.4);
  padding: 10px 14px;
  margin-top: 4px;
  background: rgba(234, 179, 8, 0.06);
  border-radius: 0 10px 10px 0;
}
.fa-ref-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(234, 179, 8, 0.85);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.fa-ref-text {
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

/* audio badge next to title */
.fa-audio-badge {
  margin-left: 6px;
  font-size: 0.75em;
  vertical-align: middle;
  opacity: 0.7;
}

/* "Mine" remove button — sits in card-top-row left slot (greek-badge position) */
.fa-mine-remove {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #888);
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.fa-mine-remove:hover {
  background: rgba(220,50,50,0.15);
  border-color: rgba(220,50,50,0.4);
  color: var(--color-red);
}

/* ── Friend Corner Avatar (top-left of card — mirrors .fa-fs-avatar) ── */

.fa-friend-corner {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.fa-corner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa-corner-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.fa-corner-avatar-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.fa-corner-overflow {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary, #888);
  white-space: nowrap;
}

/* ── Friend Corner Tooltip ───────────────────────────────────── */

.fa-friends-tooltip {
  position: absolute;
  top: 52px;
  left: 12px;
  background: rgba(30, 32, 38, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: fa-tooltip-in 0.15s ease-out;
}

@keyframes fa-tooltip-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fa-ft-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.fa-ft-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.fa-ft-name {
  font-size: 0.78rem;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
}

/* ── Friend Selector (horizontal avatar row) ──────────────────── */

.fa-friend-selector {
  display: contents;  /* merge children into parent scroll */
}
.fa-fs-scroll {
  display: contents;  /* merge chips into parent scroll */
}

.fa-fs-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  min-width: 52px;
  border-radius: 12px;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.fa-fs-chip:hover { opacity: 0.85; }
.fa-fs-chip.active {
  opacity: 1;
  background: color-mix(in srgb, var(--color-green) 6%, transparent);
}
.fa-fs-chip.active .fa-fs-avatar,
.fa-fs-chip.active .fa-fs-all {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-green) 50%, transparent);
}
.fa-fs-chip.active .fa-fs-name {
  color: var(--color-green);
}

.fa-fs-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}
.fa-fs-avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.fa-fs-all {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}
.fa-fs-name {
  font-size: 0.65rem;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
  text-align: center;
  transition: color 0.2s;
}

/* ── FA Category Filter Bar (reuses explore-cat-chip styles) ──── */

.fa-cat-bar {
  display: none;
  padding: 0 16px 6px;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
}
.fa-cat-bar::-webkit-scrollbar { display: none; }
.fa-cat-bar.visible {
  display: flex;
  animation: explore-cat-bar-in 0.25s ease-out;
}
/* Inactive pills: dimmed, tappable to activate */
.fa-cat-bar .fa-cat-inactive {
  opacity: 0.5;
  cursor: pointer;
  border-style: dashed;
}
.fa-cat-bar .fa-cat-inactive:hover {
  opacity: 0.8;
}
/* Active pills: same as explore-cat-chip (full opacity) */
.fa-cat-bar .fa-cat-active {
  opacity: 1;
  cursor: default;
}

/* ── Comment Tap Target → replaced by inline comments ─────────── */

/* Legacy .fa-comment-tap removed — inline comments now live below the deck */

/* ── Inline Comments (below deck, click-to-expand) ────────────── */

.fa-comments-inline {
  width: 100%; max-width: 440px;
  padding: 4px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fa-comments-inline.visible {
  opacity: 1;
}

/* Preview row — always visible, click to expand */
.fa-ci-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.fa-ci-preview:hover {
  background: rgba(255,255,255,0.06);
}
.fa-ci-preview:active {
  transform: scale(0.98);
}

/* Preview body (name + time header + truncated text) */
.fa-ci-preview-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fa-ci-preview-body .fa-comment-header {
  margin-bottom: 0;
}
.fa-ci-preview-body .fa-ci-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fa-ci-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.fa-ci-label {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fa-ci-label strong {
  color: var(--text-primary, #ccc);
  font-weight: 600;
}
.fa-ci-count {
  font-size: 0.7rem;
  color: var(--text-secondary, #666);
  flex-shrink: 0;
}
.fa-ci-toggle {
  font-size: 0.7rem;
  color: var(--text-secondary, #666);
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Expanded comment list + input — hidden by default */
.fa-ci-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.34,1.56,0.64,1),
              opacity 0.25s ease;
}
.fa-comments-inline.expanded .fa-ci-expanded {
  max-height: 320px;
  opacity: 1;
}

.fa-ci-list {
  max-height: 230px;
  overflow-y: auto;
  padding: 10px 4px;
  display: flex; flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

.fa-ci-input-row {
  display: flex; gap: 8px;
  padding: 8px 4px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Comment Sheet (legacy modal — kept for backwards compat) ─── */

.fa-comment-sheet {
  position: fixed; inset: 0;
  z-index: var(--z-toast);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.fa-comment-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.fa-comment-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
}

.fa-comment-panel {
  position: relative;
  z-index: 1;
  background: rgba(17, 19, 23, 0.82);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px 20px 0 0;
  max-height: 60vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fa-comment-sheet.open .fa-comment-panel {
  transform: translateY(0);
}

.fa-comment-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fa-comment-close {
  background: none; border: none;
  color: var(--text-secondary, #888);
  font-size: 1.1rem; cursor: pointer;
  padding: 4px;
}

.fa-comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex; flex-direction: column;
  gap: 14px;
}

.fa-comment-item {
  display: flex; gap: 10px;
  align-items: flex-start;
}
.fa-comment-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.fa-comment-body {
  flex: 1;
  min-width: 0;
}
.fa-comment-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.fa-comment-header strong {
  font-size: 0.82rem;
  color: var(--text-primary, #ccc);
}
.fa-comment-time {
  font-size: 0.7rem;
  color: var(--text-secondary, #666);
}
.fa-comment-content {
  font-size: 0.85rem;
  color: var(--text-secondary, #aaa);
  line-height: 1.45;
}

.fa-comment-empty-full {
  text-align: center;
  padding: 30px 0;
  color: var(--text-secondary, #666);
  font-style: italic;
}

/* Input row */
.fa-comment-input-row {
  display: flex; gap: 8px;
  padding: 12px 20px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fa-comment-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary, #e0e0e0);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.fa-comment-input:focus {
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
}
.fa-comment-input::placeholder {
  color: var(--text-secondary, #666);
}
.fa-comment-send {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
  color: var(--color-green);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.fa-comment-send:hover {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-green) 50%, transparent);
}

/* ── Empty State ──────────────────────────────────────────────── */

.fa-empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 40px;
}
.fa-empty-state.hidden { display: none; }
.fa-empty-icon  { font-size: 3rem; opacity: 0.5; }
.fa-empty-title {
  font-size: 1.1rem; font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.fa-empty-desc {
  font-size: 0.85rem;
  color: var(--text-secondary, #888);
  max-width: 280px; line-height: 1.5;
}

/* ── Loading ──────────────────────────────────────────────────── */

.fa-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.fa-loading.hidden { display: none; }
.fa-loading-dots {
  display: flex; gap: 8px;
}
.fa-loading-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 50%, transparent);
  animation: faLoadPulse 1.2s ease-in-out infinite;
}
.fa-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.fa-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes faLoadPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Activity Privacy Section (in Account Modal) ──────────────── */

#activity-privacy-section .toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
#activity-privacy-section .section-hint {
  font-size: 0.78rem;
  color: var(--text-secondary, #777);
  margin-top: 4px; line-height: 1.4;
}

/* ── Balatro Theme Overrides ──────────────────────────────────── */

body.theme-balatro .card.fa-explore-card {
  background: linear-gradient(145deg,
    rgba(26,10,30,0.95) 0%,
    rgba(74,30,110,0.3)  50%,
    rgba(26,10,30,0.95) 100%);
  border: 2px solid rgba(255,215,0,0.3);
  box-shadow:
    0 0 20px rgba(196,30,58,0.3),
    0 0 40px rgba(74,30,110,0.2),
    inset 0 0 60px rgba(0,0,0,0.5);
}
body.theme-balatro .fa-filter-pill.active {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(196,30,58,0.10));
  border-color: rgba(255,215,0,0.4);
  color: #ffd700;
}
body.theme-balatro .fa-comment-send {
  border-color: rgba(255,215,0,0.3);
  background: rgba(255,215,0,0.08);
  color: #ffd700;
}
body.theme-balatro .fa-fab-comment:hover {
  border-color: rgba(255,215,0,0.5);
  background: rgba(255,215,0,0.08);
}

/* ==================== BACKGROUND MUSIC PLAYER ==================== */

/* Section wrapper */
#music-section .music-controls {
  margin-top: var(--space-sm);
}

/* Now-playing label */
.music-now-playing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) 0 var(--space-xs);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
}
.music-track-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  text-transform: capitalize;
}
.music-track-pos {
  flex-shrink: 0;
  margin-left: var(--space-xs);
  font-size: 0.75rem;
  opacity: 0.5;
}

/* Transport row */
.music-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0 var(--space-xs);
}
.music-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.music-btn:active {
  background: rgba(99,102,241,0.25);
  border-color: rgba(99,102,241,0.5);
}
.music-btn-play {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  border-color: rgba(99,102,241,0.4);
}
.music-btn.active {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.5);
  color: #818cf8;
}

/* Volume slider row */
.music-volume-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
}
.music-vol-icon {
  font-size: 0.85rem;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ─── Music SVG icon sizing ─── */
.icon-music {
  width: 1.2em;
  height: 1.2em;
  display: block;
  pointer-events: none;
}
.icon-music-vol {
  width: 1em;
  height: 1em;
  display: block;
  pointer-events: none;
}
.icon-music-orb {
  width: 1.1em;
  height: 1.1em;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.music-volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  outline: none;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #a5b4fc, #6366f1);
  box-shadow: 0 0 8px rgba(99,102,241,0.5);
  cursor: pointer;
}
.music-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #a5b4fc, #6366f1);
  box-shadow: 0 0 8px rgba(99,102,241,0.5);
  border: none;
  cursor: pointer;
}

/* Empty state hint */
.music-empty {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  padding: var(--space-xs) 0 0;
  line-height: 1.4;
}
.music-empty code {
  background: rgba(255,255,255,0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.76rem;
}

/* Persistent mini-player (bottom bar) — shown while music plays */
.music-mini-player {
  position: fixed;
  bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)) + 68px);
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-mini-player);
  background: rgba(20,20,40,0.92);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 14px;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.music-mini-player--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.music-mini-info {
  flex: 1;
  min-width: 0;
}
.music-mini-track {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.music-mini-status {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
}
.music-mini-note {
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Music Orb — Dedicated bottom-left music control
   Pulse ring syncs to BPM via --beat-period.
   Tap expands 7 arc buttons into 4th quadrant (lower-right).
   ═══════════════════════════════════════════════════════════════════ */

.morb {
  --beat-period: 0.5s;           /* overridden by JS from BPM */
  --morb-size: 2.5em;
  --morb-bg: linear-gradient(135deg,
    #7c3aed,                     /* vivid purple */
    #6366f1,                     /* indigo */
    #06b6d4);                    /* cyan */
  --morb-accent: rgba(139, 92, 246, 0.8);
  --morb-glow: rgba(124, 58, 237, 0.45);

  position: fixed;
  top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  left: calc(16px + max(env(safe-area-inset-left, 0px), var(--safe-left)));
  width: var(--morb-size);
  height: var(--morb-size);
  z-index: var(--z-orbs);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Layout anchor for arc buttons */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Pulse ring ─── */
.morb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--morb-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Only pulse when music is playing */
.morb--playing .morb-ring {
  opacity: 1;
  animation: morb-pulse var(--beat-period) ease-in-out infinite;
}

@keyframes morb-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0   var(--morb-glow); opacity: 0.9; }
  50%  { transform: scale(1.25); box-shadow: 0 0 18px var(--morb-glow); opacity: 0.35; }
  100% { transform: scale(1);    box-shadow: 0 0 0   var(--morb-glow); opacity: 0.9; }
}

/* ─── Core circle ─── */
.morb-core {
  position: relative;
  width: var(--morb-size);
  height: var(--morb-size);
  border-radius: 50%;
  background: var(--morb-bg);
  border: 1.5px solid rgba(196, 181, 253, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(124, 58, 237, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: transform 0.3s var(--ease-spring),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  z-index: 2;
}

.morb--expanded .morb-core {
  transform: scale(1.1);
  border-color: rgba(196, 181, 253, 0.7);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(124, 58, 237, 0.45),
    0 0 32px rgba(6, 182, 212, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

/* ─── Arc buttons (collapsed: hidden at orb center) ─── */
.morb-arc-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(16, 16, 28, 0.92);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  pointer-events: none;
  /* Collapsed state: at center, invisible */
  transform: translate(0, 0) scale(0.3);
  opacity: 0;
  transition: transform 0.35s var(--ease-spring),
              opacity 0.25s ease,
              background 0.15s ease;
  transition-delay: var(--arc-delay, 0ms);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
}

/* Expanded: fly out to arc position */
.morb--expanded .morb-arc-btn {
  transform: translate(var(--arc-x), var(--arc-y)) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.morb-arc-btn:active {
  transform: translate(var(--arc-x), var(--arc-y)) scale(0.85);
}

.morb-arc-btn--flash {
  background: var(--morb-accent) !important;
  transition: none !important;
}

/* ─── Balatro theme overrides ─── */
body.theme-balatro .morb {
  --morb-accent: rgba(239, 68, 68, 0.6);
  --morb-glow: rgba(239, 68, 68, 0.35);
}

body.theme-balatro .morb-core {
  border-color: rgba(239, 68, 68, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   Brain Orb — Liquid Fill Reward System
   ═══════════════════════════════════════════════════════════════════ */

/* Container: clips to the circular orb, sits behind the brain icon */
.brain-liquid-container {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-base);
}

/* The rising liquid body */
.brain-liquid-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease;
  border-radius: 0 0 50% 50% / 0 0 20% 20%;
  opacity: 0.75;
}

/* Liquid shimmer overlay for a glossy, alive feel */
.brain-liquid-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.15) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: liquidShimmer 2.5s ease-in-out infinite;
}

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

/* Pulse when a new swipe registers */
.brain-liquid-pulse {
  animation: orbLiquidPulse 0.5s ease-out !important;
}

@keyframes orbLiquidPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ─── Brain Mood — crossfade brain ↔ emoji ────────────────── */

/* Brain icon: sits above the liquid, fades out when emoji is showing */
.header-logo .icon-logo,
.footer-logo .icon-logo {
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.header-logo .icon-logo.brain-hidden,
.footer-logo .icon-logo.brain-hidden {
  opacity: 0 !important;
  transform: scale(0.7);
}

/* Emoji — centred over the brain, hidden by default */
.brain-mood {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, calc(var(--nav-orb-icon) * 0.85), 28px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.brain-mood.mood-visible {
  opacity: 1;
  transform: scale(1);
}

/* Sleeping — gentle bob while the emoji is visible */
@keyframes moodZzz {
  0%, 100% { transform: scale(1) translateY(0)   rotate(0deg);  }
  25%      { transform: scale(1) translateY(-2px) rotate(-4deg); }
  75%      { transform: scale(1) translateY(1px)  rotate(3deg);  }
}
.brain-mood.mood-zzz.mood-visible {
  animation: moodZzz 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   Celebration Overlay — Full brain, confetti, gold everything
   ═══════════════════════════════════════════════════════════════════ */

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-celebration);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center,
    #1a1610 0%,
    #0a0b0d 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.celebration-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.celebration-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Gold rotating light rays behind the brain */
.celebration-rays {
  position: absolute;
  width: min(80vw, 420px);
  height: min(80vw, 420px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.25) 15deg,
    transparent 30deg,
    transparent 45deg,
    rgba(255, 215, 0, 0.20) 60deg,
    transparent 75deg,
    transparent 90deg,
    rgba(255, 215, 0, 0.25) 105deg,
    transparent 120deg,
    transparent 135deg,
    rgba(255, 215, 0, 0.20) 150deg,
    transparent 165deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.25) 195deg,
    transparent 210deg,
    transparent 225deg,
    rgba(255, 215, 0, 0.20) 240deg,
    transparent 255deg,
    transparent 270deg,
    rgba(255, 215, 0, 0.25) 285deg,
    transparent 300deg,
    transparent 315deg,
    rgba(255, 215, 0, 0.20) 330deg,
    transparent 345deg,
    transparent 360deg
  );
  animation: celebrationRaysSpin 4s linear infinite;
  filter: blur(8px);
}

@keyframes celebrationRaysSpin {
  from { transform: rotate(0deg) scale(0.6); opacity: 0; }
  15%  { opacity: 1; transform: rotate(54deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.1); opacity: 0.8; }
}

/* Giant brain in the center */
.celebration-brain-container {
  position: relative;
  z-index: 2;
  animation: brainGlorify 2s ease-in-out infinite;
}

.celebration-brain {
  width: min(45vw, 200px);
  height: min(45vw, 200px);
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 60px rgba(255, 215, 0, 0.4))
          drop-shadow(0 0 90px rgba(255, 215, 0, 0.2));
  animation: brainBounce 0.6s ease-in-out infinite alternate;
}

.celebration-brain-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(255, 215, 0, 0.1) 40%,
    transparent 70%);
  animation: brainGlowPulse 1.2s ease-in-out infinite alternate;
}

@keyframes brainGlorify {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  25%      { transform: scale(1.08) rotate(1deg); }
  50%      { transform: scale(1.15) rotate(-1deg); }
  75%      { transform: scale(1.05) rotate(2deg); }
}

@keyframes brainBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

@keyframes brainGlowPulse {
  from { transform: scale(0.9); opacity: 0.5; }
  to   { transform: scale(1.2); opacity: 1; }
}

/* Celebration text */
.celebration-text {
  position: relative;
  z-index: 2;
  margin-top: var(--space-xl);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffd700;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.6);
  animation: celebrationTextPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.3s;
}

@keyframes celebrationTextPop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Confetti canvas */
.celebration-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ================================================================
   Shockwave ring behind brain on Level Up
   ================================================================ */
.celebration-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 3px solid rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4),
              inset 0 0 20px rgba(255, 215, 0, 0.2);
  animation: shockwaveExpand 1.2s ease-out 0.3s forwards;
  pointer-events: none;
}
@keyframes shockwaveExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60%  { opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ================================================================
   Stage 2: Level Counter Flip
   ================================================================ */
.celebration-text-exit {
  animation: textSlideOut 0.35s ease-in forwards;
}
.celebration-text-enter {
  animation: textSlideIn 0.4s ease-out forwards;
}
@keyframes textSlideOut {
  to { opacity: 0; transform: translateY(-30px) scale(0.9); }
}
@keyframes textSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.level-flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.level-old {
  opacity: 0.5;
  text-decoration: line-through;
  color: #aaa;
}
.level-arrow {
  color: #ffd700;
  animation: arrowPulse 0.6s ease-in-out infinite alternate;
}
.level-new {
  color: #ffd700;
  animation: levelNewPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes arrowPulse {
  from { transform: translateX(-3px); }
  to   { transform: translateX(3px); }
}
@keyframes levelNewPop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* ================================================================
   Stage 2: Reward Items (inline below level flip)
   ================================================================ */
.reward-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.reward-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,255,255,0.12));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  padding: var(--space-sm) var(--space-xl);
  font-size: 1rem;
  font-weight: 600;
  color: #ffd700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(255, 215, 0, 0.08);
}
.reward-item-enter {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  animation: rewardItemIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(0.3s + var(--ri) * 0.15s);
}
@keyframes rewardItemIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reward-item strong {
  font-size: 1.15em;
  color: #fff;
}

/* ================================================================
   Stage 3: Unlock Article Card
   ================================================================ */
.unlock-article-card {
  max-width: 340px;
  margin: 0 auto;
  text-align: left;
  animation: unlockCardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Reset celebration-text cascade — card uses normal app typography */
  font-weight: normal;
  letter-spacing: normal;
  color: #e5e7eb;
  text-shadow: none;
}
@keyframes unlockCardSlideIn {
  from { transform: translateY(60px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Inner .card inherits shared expanded-card layout — just add celebration flair */
.unlock-inner-card {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  /* Override feed-card sizing — fit content, don't stretch */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.unlock-inner-card .popularity-badge { display: none; }
.unlock-inner-card .card-top-row { display: none !important; }
.unlock-inner-card .card-content {
  padding: var(--space-md) var(--card-padding) var(--space-sm) !important;
  overflow: visible !important;
}
.unlock-inner-card .card-content .title {
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-xs) !important;
  color: #fff !important;
  text-align: left !important;
}
.unlock-inner-card .card-content .meta { display: none; }
.unlock-inner-card .extract {
  padding: 0 !important;
  font-size: var(--fs-base) !important;
  line-height: 1.6;
}
.unlock-inner-card .category-bubbles {
  padding: var(--space-xs) var(--card-padding) var(--space-xs) !important;
  margin-top: var(--space-xs) !important;
}

/* Flavour text (unlock_text) above the wikibite preview */
.unlock-flavour {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.unlock-article-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.unlock-added {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-green);
  font-weight: 600;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.unlock-btn-row {
  display: flex;
  gap: var(--space-sm);
}
.unlock-dismiss-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--button-radius);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.unlock-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.unlock-dismiss-btn:active {
  transform: scale(0.97);
}
.unlock-read-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: rgba(74, 222, 128, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--button-radius);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.unlock-read-btn:hover {
  background: rgba(74, 222, 128, 0.22);
}
.unlock-read-btn:active {
  transform: scale(0.97);
}

/* ================================================================
   Reading List: Trophy badge for unlocked items
   ================================================================ */
.rl-item-trophy {
  font-size: 0.85rem;
  margin-left: 4px;
  flex-shrink: 0;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  COMPREHENSIVE RESPONSIVE SYSTEM                                ║
   ║  Mobile-first • iPhone / Android / Tablet / Desktop             ║
   ║                                                                 ║
   ║  Breakpoints:                                                   ║
   ║    ≤380px   — Small phones (iPhone SE, Galaxy S21)              ║
   ║    381–428px — Standard phones (iPhone 14/15, Pixel 7)          ║
   ║    429–768px — Large phones / phablets (Max/Ultra, fold)        ║
   ║    769–1024px — Tablets portrait (iPad, Galaxy Tab)             ║
   ║    1025–1366px — Tablets landscape / small laptops              ║
   ║    ≥1367px  — Desktop / large screens                           ║
   ║                                                                 ║
   ║  Special:                                                       ║
   ║    landscape + max-height:500px — Landscape phones              ║
   ║    container queries — component-level responsiveness           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */


/* ──────────────────────────────────────────────────────────────────
   1. LANDSCAPE PHONES  (rotated phone, short viewport)
   Collapse vertical elements, slim navbar, horizontal card layout
   ────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --navbar-h: 44px;
    --nav-icon: clamp(0.9rem, 0.7rem + 1vw, 1.4rem);
    --nav-orb: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
    --nav-orb-icon: clamp(1.1rem, 0.8rem + 1.4vw, 1.8rem);
    --nav-gap: clamp(0.6rem, 0.3rem + 1.5vw, 1.5rem);
    --nav-orb-margin: clamp(0.5rem, 0.3rem + 1.2vw, 1.5rem);
    --card-padding: clamp(8px, 0.5rem + 0.5vw, 14px);
    --fs-lg: clamp(1rem, 0.85rem + 0.5vw, 1.3rem);
    --fs-xl: clamp(1.2rem, 1rem + 0.5vw, 1.5rem);
    --fs-2xl: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
    --orb-bar-h: calc(12px + 33px); /* 6px×2 padding + 33px orb */
  }

  /* Compact footer in landscape */
  footer {
    padding-top: 2px;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  /* Main content needs less top clearance */
  main {
    padding-top: max(44px, calc(env(safe-area-inset-top, 0px) + 8px), calc(var(--safe-top) + 8px));
  }

  /* Triple cards can go horizontal in landscape */
  .triple-card-container {
    flex-direction: row;
    gap: 6px;
  }

  .card.card-collapsed {
    flex: 1 1 0;
    min-width: 0;
  }

  .card-collapsed-row {
    grid-template-rows: 1fr 28px;
    padding: 0 10px 8px;
  }

  .card-collapsed-title {
    font-size: var(--fs-md);
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  /* Orb bar sits tighter to bottom */
  .orb-bar {
    bottom: calc(4px + var(--navbar-h));
    padding: 6px 20px;
    gap: 24px;
  }

  .orb-selector {
    width: 33px;
    height: 33px;
  }

  .orb-letter {
    font-size: 20px;
  }

  /* Music orb moves to avoid overlap */
  .morb {
    --morb-size: 36px;
    top: calc(8px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  }

  /* Social orb compact */
  .social-orb {
    width: 36px;
    height: 36px;
  }

  .social-orb-icon {
    font-size: 14px;
  }

  /* Refine page: tighter pill layout */
  .refine-header {
    padding: var(--space-sm) var(--space-lg) var(--space-xs);
  }

  .refine-header h1 {
    font-size: var(--fs-lg);
  }

  .refine-header p {
    font-size: var(--fs-sm);
    margin: 2px 0;
  }

  .refine-pills {
    padding: var(--space-xs) var(--space-lg);
    padding-bottom: 52px;
  }

  /* Read mode: compact header */
  .read-mode-header {
    padding: 6px 16px;
  }

  /* .rm-scroll {
    padding: 12px 16px 60px;
  } */

  .rm-title {
    font-size: 22px;
  }

  /* Full-screen pages: use all horizontal space */
  #rl-page, #sp-page, #account-page, .social-page {
    bottom: var(--navbar-h);
  }

  /* Explore category bar: adjust position */
  .explore-cat-bar {
    top: calc(8px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
    height: 36px;
    left: 54px;
    right: 54px;
  }

  /* Orb row center: match explore-cat-bar small-screen sizing */
  #orb-row-center {
    top: calc(8px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
    height: 36px;
    left: 54px;
    right: 54px;
  }
  .orc-back { font-size: 16px; padding: 2px 6px; }
  .orc-title { font-size: 13px; }

  /* Listen mode player: compact */
  .lm-player {
    padding: 10px 16px calc(8px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)));
  }

  /* Friends activity: smaller avatars */
  .fa-friend-avatar {
    width: 24px;
    height: 24px;
  }

  /* Friends activity: smaller corner avatars on cards */
  .fa-corner-avatar,
  .fa-corner-avatar-img,
  .fa-corner-avatar-initial {
    width: 28px;
    height: 28px;
  }

  /* Celebration overlay: smaller brain */
  .celebration-brain {
    width: min(25vh, 150px);
    height: min(25vh, 150px);
  }

  .celebration-text {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-top: 12px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   1b. SMALL PHONES  (≤380px — iPhone SE, Galaxy S21)
   Tighter spacing, smaller icons
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  :root {
    --footer-padding-y: clamp(8px, 0.5rem + 0.3vw, 12px);
    --footer-padding-x: clamp(8px, 0.5rem + 0.4vw, 14px);
    --header-padding-y: var(--footer-padding-y);
    --header-padding-x: var(--footer-padding-x);
    --card-padding: clamp(10px, 0.625rem + 0.5vw, 18px);
    --space-lg: clamp(12px, 0.75rem + 0.5vw, 18px);
    --space-xl: clamp(14px, 0.875rem + 0.6vw, 22px);
    --page-pad-x: 10px;
    --orb-bar-h: calc(20px + 43px); /* 10px×2 padding + 43px orb */
  }

  footer {
    gap: 4px;
  }

  .orb-bar {
    gap: 26px;
    padding: 10px 24px;
  }

  .icon-btn .icon {
    width: 2em;
    height: 2em;
  }

  .card-collapsed-title {
    font-size: var(--fs-md);
  }

  .rm-title {
    font-size: 20px;
  }

  .rm-text {
    font-size: 14px;
  }

  .modal-content {
    width: 92vw;
    padding: var(--space-md);
  }
}


/* ──────────────────────────────────────────────────────────────────
   2. LARGE PHONES / PHABLETS  (429px – 768px)
   Slightly wider content, breathing room
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 429px) and (orientation: portrait) {
  :root {
    --content-max-w: 540px;
    --page-pad-x: 20px;
  }

  /* Cards get a touch more padding */
  .card {
    border-radius: clamp(16px, 1rem + 0.5vw, 22px);
  }

  /* Search items: more spacious */
  .sp-item {
    padding: 16px 18px;
  }

  /* Read mode: more reading comfort */
  /* .rm-scroll {
    padding: 24px 20px 80px;
  } */

  /* Share sheet: center with max-width */
  .share-card {
    max-width: 440px;
    margin: 0 auto;
  }

  /* Modal content slightly wider */
  .modal-content {
    max-width: 420px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   3. TABLETS PORTRAIT  (769px – 1024px)
   Two-column lists, wider content, larger touch targets
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  :root {
    --content-max-w: 860px;
    --page-pad-x: 32px;
    --grid-cols: 2;
    --card-padding: clamp(18px, 1rem + 0.75vw, 28px);
    --card-radius: clamp(18px, 1rem + 0.6vw, 24px);
    --orb-bar-h: calc(28px + 53px); /* 14px×2 padding + 53px orb */
  }

  /* Center the main explore content with generous max-width */
  .main-container {
    max-width: var(--content-max-w);
  }

  /* Cards in explore: taller collapsed state for tablet comfort */
  .card.card-collapsed {
    min-height: 140px;
  }

  .card-collapsed-title {
    font-size: var(--fs-lg);
  }

  /* Greek badge: larger on tablet */
  .greek-badge {
    width: 48px;
    height: 48px;
    font-size: 26px;
    border-radius: 12px;
  }

  .popularity-badge {
    width: 48px;
    height: 48px;
  }

  /* Orb bar: bigger orbs for easier tapping */
  .orb-selector {
    width: 53px;
    height: 53px;
  }

  .orb-letter {
    font-size: 33px;
  }

  .orb-bar {
    gap: 40px;
    padding: 14px 34px;
  }

  /* Modal: wider on tablets */
  .modal-content {
    max-width: 520px;
    width: 80vw;
  }

  /* Full-page overlays: centered with max-width content */
  #rl-page .rl-search-wrap,
  #rl-page .rl-toolbar,
  #rl-page .rl-cat-bar {
    max-width: var(--content-max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }

  .rl-items {
    max-width: var(--content-max-w);
    /* margin: 0 auto; */
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }

  #sp-page .sp-search-wrap,
  #sp-page .sp-belt,
  #sp-page .sp-filters {
    max-width: var(--content-max-w);
    margin-left: auto;
    margin-right: auto;
    /* padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x); */
  }

  .sp-results {
    /* max-width: var(--content-max-w); */
    /* margin: 0 auto; */
    /* padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x); */
  }

  /* Read mode: comfortable reading width */
  .rm-scroll {
    max-width: 720px;
    /* padding: 32px 24px 80px; */
  }

  .rm-title {
    font-size: 32px;
  }

  .rm-text {
    font-size: 17px;
    line-height: 1.8;
  }

  /* Account page: centered content */
  .acct-body {
    max-width: var(--content-max-w);
    margin: 0 auto;
    padding: 0 var(--page-pad-x) 24px;
  }

  /* Social page: wider constellation area */
  .social-page {
    max-width: 100%;
  }

  /* Chat view: centered with readable width */
  .chat-messages {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px;
  }

  .chat-input-bar {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Share sheet: center and widen */
  .share-card {
    max-width: 480px;
  }

  /* Refine: wider pill area */
  .refine-header {
    max-width: 600px;
  }

  .refine-pills {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    padding-bottom: 80px;
  }

  /* Friends activity: wider cards */
  .fa-deck {
    max-width: 520px;
  }

  .fa-container {
    max-width: var(--content-max-w);
  }

  /* Notification nudge: wider */
  .notification-nudge {
    width: min(80vw, 440px);
  }

  /* Sign-in: wider form */
  .signin-container {
    max-width: 440px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   4. TABLETS LANDSCAPE / SMALL LAPTOPS  (1025px – 1366px)
   Sidebar-capable, 2-3 column layouts, desktop-style spacing
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  :root {
    --content-max-w: 960px;
    --page-pad-x: 40px;
    --grid-cols: 2;
    --card-padding: clamp(20px, 1.25rem + 0.8vw, 30px);
  }

  /* Wider explore area */
  .main-container {
    max-width: var(--content-max-w);
  }

  /* Triple card: more generous gaps */
  .triple-card-container {
    gap: 12px;
  }

  /* Read mode: ideal reading width */
  .rm-scroll {
    max-width: 760px;
    /* padding: 40px 32px 80px; */
  }

  .rm-title {
    font-size: 36px;
  }

  .rm-h2 {
    font-size: 26px;
  }

  .rm-text {
    font-size: 18px;
    line-height: 1.85;
  }

  /* Lists: can go 2-column */
  .rl-items {
    max-width: var(--content-max-w);
  }

  .sp-results {
    max-width: var(--content-max-w);
  }

  /* Modal: wider */
  .modal-content {
    max-width: 560px;
    width: 65vw;
  }

  /* Chat: comfortable reading width */
  .chat-messages {
    max-width: 760px;
  }

  .chat-input-bar {
    max-width: 760px;
  }

  /* Friends activity: centered and wider */
  .fa-deck {
    max-width: 560px;
  }

  /* Refine: more horizontal space for pills */
  .refine-pills {
    max-width: 900px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   5. DESKTOP / LARGE SCREENS  (≥1367px)
   Maximum content width, generous whitespace, multi-column
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1367px) {
  :root {
    --content-max-w: 1080px;
    --page-pad-x: 48px;
    --grid-cols: 3;
  }

  /* Maximum content width with centered layout */
  .main-container {
    max-width: var(--content-max-w);
  }

  /* Read mode: comfortable max */
  .rm-scroll {
    max-width: 800px;
    /* padding: 48px 40px 80px; */
  }

  /* Lists: 3-column capable */
  .rl-items {
    max-width: var(--content-max-w);
  }

  .sp-results {
    max-width: var(--content-max-w);
  }

  /* Modal: max comfortable width */
  .modal-content {
    max-width: 600px;
    width: 50vw;
  }

  /* Wider refine area for more pills */
  .refine-pills {
    max-width: 1000px;
  }

  /* Friends activity: wider deck */
  .fa-deck {
    max-width: 600px;
  }

  .fa-container {
    max-width: var(--content-max-w);
  }
}


/* ──────────────────────────────────────────────────────────────────
   6. CONTAINER QUERIES — component-level responsiveness
   Respond to actual container width, not viewport.
   Works inside split views, sidebars, and embedded contexts.
   ────────────────────────────────────────────────────────────────── */

/* Reading list: 2-column grid when container is wide enough */
@container rl-items (min-width: 580px) {
  .rl-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-content: start;
  }

  .rl-items .card {
    margin-bottom: 0;
  }
}

/* Reading list: 3-column at very wide containers */
@container rl-items (min-width: 880px) {
  .rl-items {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Search results: 2-column grid */
@container sp-results (min-width: 580px) {
  .sp-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-content: start;
  }

  .sp-item {
    margin-bottom: 0;
  }
}

/* Search results: 3-column at very wide containers */
@container sp-results (min-width: 880px) {
  .sp-results {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Main container: when wide enough, debug panels can be side-by-side */
@container main (min-width: 600px) {
  .debug-row {
    flex-direction: row;
  }

  .debug-panel {
    max-height: 200px;
  }
}

/* Card stack: increase collapsed card text at wider containers */
@container card-stack (min-width: 500px) {
  .card-collapsed-row {
    padding: var(--space-sm) var(--space-lg);
  }
  .card-top-row {
    padding: var(--space-xs) var(--space-lg);
  }
}

/* Reading list: match card-stack spacing at wider containers */
@container rl-items (min-width: 500px) {
  .card-collapsed-row {
    padding: var(--space-sm) var(--space-lg);
  }
  .card-top-row {
    padding: var(--space-xs) var(--space-lg);
  }
}

/* Social page: side-by-side inbox layout at wider containers */
@container social (min-width: 600px) {
  .social-tab-bar {
    max-width: 480px;
    margin-inline: auto;
  }
  .inbox-thread {
    padding-inline: var(--space-lg);
  }
}

@container social (min-width: 900px) {
  .social-tab-bar {
    max-width: 560px;
  }
}


/* ──────────────────────────────────────────────────────────────────
   7. SAFE-AREA HARDENING — consistent env() + var() fallback
   Every fixed/absolute overlay consistently handles all four
   safe-area edges with the max(env(), var(--safe-*)) pattern.
   ────────────────────────────────────────────────────────────────── */

/* Celebration overlay — was missing safe-area handling */
.celebration-overlay {
  padding: max(env(safe-area-inset-top, 0px), var(--safe-top))
           max(env(safe-area-inset-right, 0px), var(--safe-right))
           max(env(safe-area-inset-bottom, 0px), var(--safe-bottom))
           max(env(safe-area-inset-left, 0px), var(--safe-left));
}

/* Word warp loading overlay — ensure safe-area on all sides */
.word-warp-overlay {
  padding-top: max(env(safe-area-inset-top, 0px), var(--safe-top));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

/* Share sheet backdrop — ensure touch target avoids safe areas */
.share-sheet {
  padding-top: max(env(safe-area-inset-top, 0px), var(--safe-top));
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
  padding-bottom: 0; /* .share-card handles its own bottom safe-area */
}

/* Friends activity comment sheet — landscape safe-area */
.fa-comment-panel {
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

/* Notification nudge — safe-area left/right for landscape */
.notification-nudge {
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}


/* ──────────────────────────────────────────────────────────────────
   8. HOVER VS TOUCH DEVICE REFINEMENTS
   Fine-pointer devices (mouse) get hover effects.
   Coarse-pointer devices (touch) skip hover, get larger targets.
   ────────────────────────────────────────────────────────────────── */

/* Touch devices: ensure minimum 44px tap targets */
@media (pointer: coarse) {
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .rl-act-btn,
  .sp-act-btn {
    min-height: 36px;
    padding: 8px 14px;
  }

  .reaction-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 4px 10px;
  }

  /* Larger close/dismiss buttons on touch */
  .chat-back-btn,
  .acct-back,
  .rl-back,
  .sp-back,
  .read-mode-back,
  .fa-back {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Fine pointer (mouse): enable hover previews */
@media (pointer: fine) {
  .rl-items .card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .sp-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .recents-bubble:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}


/* ──────────────────────────────────────────────────────────────────
   9. PRINT STYLES — clean reading for article printouts
   ────────────────────────────────────────────────────────────────── */
@media print {
  /* Hide chrome */
  footer,
  .morb,
  .social-orb,
  .orb-bar,
  .explore-cat-bar,
  #orb-row-center,
  .bg-particle-canvas,
  .edge-glow,
  .radial-ring,
  .radial-backdrop,
  .share-sheet,
  .notification-nudge,
  .lm-player,
  .music-mini-player,
  .celebration-overlay {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card {
    background: none;
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
  }

  .rm-article-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .rm-title {
    color: #000;
  }

  .rm-text {
    color: #333;
    font-size: 12pt;
    line-height: 1.6;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}


/* ──────────────────────────────────────────────────────────────────
   10. HIGH CONTRAST / FORCED COLORS — accessibility
   ────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .card {
    border: 2px solid CanvasText;
  }

  .icon-btn .icon,
  .header-logo .icon,
  .footer-logo .icon {
    forced-color-adjust: auto;
  }

  .edge-glow {
    display: none;
  }

  .progress-bar::after {
    background: Highlight;
  }
}


/* ──────────────────────────────────────────────────────────────────
   11. ULTRA-WIDE / FOLDABLES  (≥1800px or aspect-ratio > 2)
   Prevent content from becoming too sparse
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1800px) {
  :root {
    --content-max-w: 1200px;
  }

  .rm-scroll {
    max-width: 840px;
  }
}

/* Foldable inner screen (e.g., Galaxy Fold unfolded: ~717px wide) */
@media (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {
  :root {
    --content-max-w: 600px;
  }

  /* Reading list: can start 2-column on fold */
  .rl-items {
    max-width: var(--content-max-w);
  }
}

/* ===== JOURNEYS HUB PAGE ===== */

#journeys-page {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: var(--space-lg);
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

/* ── Header ─────────────────────────────────────────────────── */

.journeys-header {
  display: none;  /* title now in #orb-row-center */
}
.journeys-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.journeys-subtitle {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: #888;
}

/* ── Prompt bar ─────────────────────────────────────────────── */

.journeys-prompt-bar {
  display: flex;
  gap: 8px;
  padding: var(--space-md) var(--space-lg);
  flex-shrink: 0;
}
.journeys-prompt-bar input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.journeys-prompt-bar input:focus {
  border-color: rgba(255,255,255,0.3);
}
.journeys-prompt-bar input::placeholder {
  color: #666;
}
.journeys-generate-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  min-width: 48px;
}
.journeys-generate-btn:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.14);
}
.journeys-improve-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  min-width: 44px;
}
.journeys-improve-btn:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.14);
}
.journeys-improve-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Example chips ──────────────────────────────────────────── */

.journeys-prompt-chips {
  display: flex;
  gap: 8px;
  padding: 0 var(--space-lg) var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.journeys-prompt-chips::-webkit-scrollbar { display: none; }

.journeys-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 14px;
  color: #aaa;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.journeys-chip:hover,
.journeys-chip:active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ── Loading spinner ────────────────────────────────────────── */

.journeys-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--space-xl) 0;
  color: #888;
  font-size: 14px;
}
.journeys-loading.hidden { display: none; }

.journeys-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Section layout ─────────────────────────────────────────── */

.journeys-section {
  padding: var(--space-md) 0;
}
.journeys-section.hidden { display: none; }

.journeys-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg) var(--space-sm);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.journeys-section-action {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 12px;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.journeys-section-action:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ── Horizontal scroll row ──────────────────────────────────── */

.journeys-scroll-row {
  display: flex;
  gap: 12px;
  padding: 0 var(--space-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  min-height: 250px; /* match .journey-cover height — reserves space while loading */
  align-items: center;
}
.journeys-scroll-row::-webkit-scrollbar { display: none; }

.journeys-placeholder {
  color: #555;
  font-size: 13px;
  padding: 24px 0;
  white-space: nowrap;
  min-height: 250px; /* match row height to prevent jump when replaced */
  display: flex;
  align-items: center;
}

/* ── Cover card ─────────────────────────────────────────────── */

.journey-cover {
  position: relative;
  width: 188px;
  min-width: 188px;
  height: 250px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1a1c22, #12131a);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.journey-cover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.journey-cover:active {
  transform: scale(0.97);
}

.journey-cover-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.journey-cover-thumb.loaded {
  opacity: 1;
}

.journey-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
  z-index: 1;
}

.journey-cover-body {
  position: relative;
  z-index: 2;
  padding: 12px;
}

.journey-cover-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journey-cover-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #999;
}

.journey-cover-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #f0c040;
  margin-top: 4px;
}
.journey-cover-rating .tabler-icon {
  width: 14px;
  height: 14px;
}
.journey-cover-rating.unrated {
  color: #666;
}

.journey-cover-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 2;
}
.journey-cover-progress-fill {
  height: 100%;
  background: #4ecdc4;
  border-radius: 0 2px 0 0;
  transition: width 0.3s ease;
}

.journey-cover-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: #4ecdc4;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.journey-cover-creator {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cover avatar / greek symbol badge (top-left) ─────────── */

.journey-cover-avatar,
.journey-cover-symbol {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

.journey-cover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.journey-cover-symbol {
  border-radius: 8px;
  font-family: 'Georgia', serif;
  font-size: 15px;
  border: 1.5px solid;
}

/* ── Sort Filter Pills (icon-only) ──────────────────────────── */

.journeys-filters {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  flex-shrink: 0;
}

.journeys-filter-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.journeys-filter-pill:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.journeys-filter-pill.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-green) 15%, transparent), color-mix(in srgb, var(--color-cyan) 10%, transparent));
  border-color: color-mix(in srgb, var(--color-green) 40%, transparent);
  color: var(--color-green);
}

.journeys-filter-icon {
  font-size: 1.05rem;
  display: flex;
  align-items: center;
}

.journeys-filter-icon .tabler-icon {
  width: 18px;
  height: 18px;
}

/* ── Your Journeys list ─────────────────────────────────────── */

#journeys-yours-list {
  padding: 0 var(--space-lg);
}

.journey-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.journey-list-item:hover {
  background: rgba(255,255,255,0.08);
}

.journey-list-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  color: #4ecdc4;
}

.journey-list-info {
  flex: 1;
  min-width: 0;
}
.journey-list-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journey-list-sub {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.journey-list-bar {
  width: 60px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.journey-list-bar-fill {
  height: 100%;
  background: #4ecdc4;
  border-radius: 2px;
  transition: width 0.3s ease;
}
/* ===== JOURNEY PLAYER ===== */

/* ── Journey position badge (replaces greek badge in collapsed) ── */
.journey-pos-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #4ecdc4;
  border: 1.5px solid rgba(78, 205, 196, 0.35);
  background: rgba(78, 205, 196, 0.10);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Journey collapsed card — inherits base .card.card-collapsed rules,
      these are journey-specific overrides only ── */

/* ── Journey progress bar — raise above pill physics layer ── */
.journey-active-card .progress-container {
  z-index: 10;
  position: relative;
}

/* ── Journey progress bar — full width, no overlap from pills ── */
.journey-active-card .progress-container {
  flex: 1;
  min-width: 0;
}

#journey-player {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  background: var(--color-bg);
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  /* Push content below the orb row: safe-area + 14px offset + 46px orb + 8px gap */
  padding-top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)) + 46px + 8px);
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

/* ── Progress bar ───────────────────────────────────────────── */

/* Position text (rendered inside #orb-row-center right slot) */
.journey-position-text {
  font-size: 13px;
  color: #888;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.journey-progress {
  position: relative;
  padding: 0 16px 10px;
  flex-shrink: 0;
}

.journey-progress-fill {
  position: absolute;
  top: 0; left: 16px;
  height: 3px;
  background: #4ecdc4;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.journey-progress-dots {
  display: flex;
  gap: 4px;
}

.journey-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  transition: background 0.3s;
  cursor: pointer;
}
.journey-dot.dot-liked {
  background: #4ecdc4;
}
.journey-dot.dot-skipped {
  background: rgba(255,180,80,0.5);
}
.journey-dot.dot-current {
  background: #fff;
}

/* ── Card area ──────────────────────────────────────────────── */

.journey-card-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.journey-active-card {
  width: 100%;
  max-width: 500px;
  border-radius: 18px;
  will-change: transform;
}

/* ── Rationale pill ─────────────────────────────────────────── */

.journey-rationale {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(78, 205, 196, 0.12);
  border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 12px 0;
  font-size: 13px;
  color: #7eddd6;
  line-height: 1.4;
}

.journey-rationale-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(78, 205, 196, 0.6);
  font-weight: 700;
}

/* ── Completion screen ──────────────────────────────────────── */

.journey-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  animation: jp-fadeIn 0.5s ease;
}
@keyframes jp-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.journey-complete-emoji {
  font-size: 56px;
  margin-bottom: 12px;
}
.journey-complete-emoji .tabler-icon {
  width: 56px;
  height: 56px;
}

.journey-complete h2 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}

.journey-complete-stats {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
  line-height: 1.5;
}

.journey-complete-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  max-width: 300px;
}
.journey-complete-dots .journey-dot {
  height: 6px;
}

/* ── Star rating ────────────────────────────────────────────── */

.journey-complete-rating {
  margin-bottom: 24px;
}

.journey-rating-label {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}

.journey-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.journey-star {
  font-size: 32px;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
  background: none;
  border: none;
  padding: 0;
}
.journey-star .tabler-icon {
  width: 32px;
  height: 32px;
}
.journey-star:hover {
  transform: scale(1.2);
}
.journey-star.star-active {
  color: #f0c040;
}

/* ── Completion action buttons ──────────────────────────────── */

.journey-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 350px;
  margin-bottom: 16px;
}

.journey-action-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.journey-action-btn:hover {
  background: rgba(255,255,255,0.12);
}
.journey-action-btn:active {
  transform: scale(0.95);
}

.journey-more-btn {
  background: rgba(78, 205, 196, 0.15);
  border-color: rgba(78, 205, 196, 0.3);
  color: #4ecdc4;
}

.journey-back-hub-btn {
  color: #888;
  font-size: 13px;
}

/* ── Confetti (spawned dynamically) ─────────────────────────── */

.journey-confetti-particle {
  position: absolute;
  top: 0; left: 50%;
  width: 6px; height: 6px;
  border-radius: 2px;
  pointer-events: none;
  animation: jp-confettiFall var(--duration, 2s) ease-in forwards;
}
@keyframes jp-confettiFall {
  0%   { transform: translate(-50%, -20px) rotate(0deg);   opacity: 1; }
  100% { transform: translate(var(--x, 0px), 80vh) rotate(720deg); opacity: 0; }
}

/* ── Error state ────────────────────────────────────────────── */

.journey-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: #888;
  font-size: 14px;
}
/* ===== EXTENDED STATS (account page) ===== */

/* Streak display */
.acct-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.streak-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.streak-flames {
  font-size: 1.8rem;
  line-height: 1;
}
.streak-count {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.streak-label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.streak-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
}

/* Weekly activity bars */
.acct-weekly-chart {
  min-height: 80px;
}
.weekly-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100px;
  padding-bottom: var(--space-sm);
}
.weekly-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.weekly-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--color-green, #4ade80), rgba(74,222,128,0.3));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  transition: height 0.4s ease;
}
.weekly-label {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
  white-space: nowrap;
}

/* Milestones */
.acct-milestones {
  min-height: 60px;
}
.milestone-progress {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.milestone-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.milestone-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  transition: background 0.2s;
}
.milestone-item.achieved {
  background: rgba(74,222,128,0.08);
  color: #fff;
}
.milestone-item.locked {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.3);
}
.milestone-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.milestone-label {
  flex: 1;
  line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════════
   Stats Ticker — personalised micro-message bar
   Thin glassmorphic strip that cycles contextual user messages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
/* Occupies the same slot as #orb-row-center and .explore-cat-bar:
   the gap between the music orb (left) and social orb (right).
   Auto-hides via sibling selectors when either element is visible. */
.stats-ticker {
  position: fixed;
  top: calc(14px + max(env(safe-area-inset-top, 0px), var(--safe-top)));
  left: 70px;
  right: 70px;
  height: 46px;
  z-index: calc(var(--z-orbs) - 2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  padding: 0 4px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.3s ease;
}

.stats-ticker.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Auto-hide when another element occupies the orb row ── */
#orb-row-center.visible ~ #stats-ticker,
.explore-cat-bar.visible ~ #stats-ticker {
  display: none !important;
}

/* ── Message viewport ── */
.stats-ticker__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Ensure viewport cannot capture clicks when ticker is hidden */
.stats-ticker.hidden .stats-ticker__viewport {
  pointer-events: none !important;
}

/* ── Individual message ── */
.stats-ticker__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  will-change: transform;
  /* JS drives transform + transition for RTL scroll-through */
}

/* Delta messages still use the old fade-in pattern */
.stats-ticker__msg.active-delta {
  opacity: 1;
  transform: translateY(0);
}

.stats-ticker__msg.exit {
  opacity: 0;
  transition: opacity 0.4s ease;
}



/* ── Text ── */
.stats-ticker__text {
  overflow: visible;
  white-space: nowrap;
}

/* ── Scrolling marquee (category deltas, long lists) ── */
.stats-ticker__marquee {
  display: inline-block;
  animation: ticker-scroll var(--marquee-duration, 18s) linear infinite;
  padding-right: var(--space-xl);
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--marquee-distance, -100%)); }
}

/* ── Category delta chips ── */
.stats-ticker__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  margin-right: var(--space-xs);
  background: rgba(255, 255, 255, 0.05);
}
.stats-ticker__delta.up      { color: var(--color-green); }
.stats-ticker__delta.down    { color: var(--color-red);   }
.stats-ticker__delta.neutral { color: rgba(255, 255, 255, 0.5); }
/* ===== PROFILE GALLERY PAGE ===== */

#profile-gallery-page {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--navbar-h);
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: max(var(--orb-row-h), calc(env(safe-area-inset-top, 0px) + var(--orb-row-h)), calc(var(--safe-top) + var(--orb-row-h)));
  padding-bottom: var(--space-lg);
  padding-left: max(env(safe-area-inset-left, 0px), var(--safe-left));
  padding-right: max(env(safe-area-inset-right, 0px), var(--safe-right));
}

/* ── Search bar ─────────────────────────────────────────────── */

.pg-search-bar {
  padding: var(--space-sm) var(--space-lg);
  flex-shrink: 0;
}

.pg-search-input {
  width: 100%;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}

.pg-search-input::placeholder {
  color: #555;
}

.pg-search-input:focus {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
}

/* ── Active profile banner ──────────────────────────────────── */

.pg-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 var(--space-lg) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 14px;
}

.pg-active-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.pg-active-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(74, 222, 128, 0.3);
}

.pg-active-title {
  font-size: var(--fs-sm);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-active-persona {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.pg-revert-btn {
  flex-shrink: 0;
}

/* ── Card grid ──────────────────────────────────────────────── */

.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
}

.pg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--card-radius);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring),
              border-color 0.2s,
              box-shadow 0.2s;
  text-align: center;
}

.pg-card:active {
  transform: scale(0.96);
}

.pg-card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.pg-card--active {
  border-color: rgba(74, 222, 128, 0.35);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.12);
}

.pg-card--active:hover {
  border-color: rgba(74, 222, 128, 0.45);
}

/* ── Card portrait ──────────────────────────────────────────── */

.pg-card-portrait {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-xs);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.1);
  transition: border-color 0.2s;
}

.pg-card--active .pg-card-portrait {
  border-color: rgba(74, 222, 128, 0.4);
}

.pg-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-card-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-green);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 8px 2px;
  border-radius: 6px 6px 0 0;
}

/* ── Card text ──────────────────────────────────────────────── */

.pg-card-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.2;
}

.pg-card-persona {
  font-size: var(--fs-2xs);
  color: var(--color-muted);
}

/* ── Empty / error states ───────────────────────────────────── */

.pg-empty,
.pg-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  padding: var(--space-2xl) 0;
}

.pg-error {
  color: var(--color-red);
}

/* ── Confirm modal ──────────────────────────────────────────── */

.pg-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-page) + 10);
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pg-confirm-card {
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: var(--space-xl) var(--space-lg);
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.pg-confirm-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-md);
  border: 2px solid rgba(255,255,255,0.12);
}

.pg-confirm-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-confirm-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.pg-confirm-persona {
  font-size: var(--fs-sm);
  color: var(--color-cyan);
  font-weight: 600;
  margin-bottom: 4px;
}

.pg-confirm-tagline {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--space-md);
}

.pg-confirm-desc {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-lg);
  line-height: 1.5;
}

.pg-confirm-actions {
  display: flex;
  gap: var(--space-sm);
}

.pg-confirm-actions button {
  flex: 1;
}

/* ── Account page – profile badge ───────────────────────────── */

.acct-profile-badge {
  margin-bottom: var(--space-sm);
}

.acct-profile-active {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
}

.acct-profile-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(74, 222, 128, 0.3);
}

.acct-profile-title {
  font-size: var(--fs-sm);
  color: #fff;
}