:root {
  --bg-rgb: 11, 12, 16;
  --bg: #0b0c10;
  --bg-elevated: #101218;
  --card: #15171f;
  --card-hover: #1b1e28;
  --card-active: #232733;
  --border: #262a35;
  --border-strong: #34394a;
  --text: #f2f3f7;
  --text-dim: #9aa1b2;
  --text-faint: #666c7d;
  --accent: #7c5cff;
  --accent-2: #22d3c5;
  --accent-soft: rgba(124, 92, 255, 0.14);
  --like: #ff4d7d;
  --nebula-pink: #ec4899;
  --gold: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --radius: 16px;
}

/* ---------- Light mode palette ---------- */
:root[data-mode="light"] {
  --bg-rgb: 243, 244, 249;
  --bg: #f3f4f9;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-hover: #eef0f7;
  --card-active: #e2e5f2;
  --border: #e3e5ee;
  --border-strong: #ccd0e0;
  --text: #15161c;
  --text-dim: #5c6070;
  --text-faint: #8b8f9f;
  --accent: #6d3ff2;
  --accent-2: #0d9c8f;
  --accent-soft: rgba(109, 63, 242, 0.09);
  --like: #d6265a;
  --nebula-pink: #d1257a;
  --gold: #b3760a;
  --shadow-sm: 0 1px 2px rgba(30, 32, 48, 0.07);
  --shadow-md: 0 8px 24px rgba(30, 32, 48, 0.09);
  --shadow-lg: 0 20px 60px rgba(30, 32, 48, 0.15);
}

/* ---------- Midnight: near-black, ice-blue accent — sleeker/cooler than
   the default violet theme, still full space ambience ---------- */
:root[data-mode="midnight"] {
  --bg-rgb: 6, 8, 15;
  --bg: #06080f;
  --bg-elevated: #0a0d18;
  --card: #0e1220;
  --card-hover: #141a2c;
  --card-active: #1c2338;
  --border: #1c2436;
  --border-strong: #2a3450;
  --text: #e8ecfa;
  --text-dim: #8b93ac;
  --text-faint: #576079;
  --accent: #4f7cff;
  --accent-2: #38e1ff;
  --accent-soft: rgba(79, 124, 255, 0.16);
  --like: #ff5c8a;
  --nebula-pink: #7c9bff;
  --gold: #ffd166;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Aurora: deep green-black with an aurora borealis accent —
   teal/mint against a violet counter-glow ---------- */
:root[data-mode="aurora"] {
  --bg-rgb: 6, 21, 18;
  --bg: #061512;
  --bg-elevated: #081a16;
  --card: #0d221c;
  --card-hover: #123028;
  --card-active: #184036;
  --border: #1c3a30;
  --border-strong: #285244;
  --text: #eafff4;
  --text-dim: #8fc9b3;
  --text-faint: #4f7a68;
  --accent: #2dd4a7;
  --accent-2: #a78bfa;
  --accent-soft: rgba(45, 212, 167, 0.16);
  --like: #ff6fa5;
  --nebula-pink: #34e0c9;
  --gold: #ffdd6b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
}

/* ---------- Sunset: warm dusk maroon/charcoal with coral + amber accents
   — the "golden hour" theme ---------- */
:root[data-mode="sunset"] {
  --bg-rgb: 24, 10, 18;
  --bg: #180a12;
  --bg-elevated: #200e18;
  --card: #2a121e;
  --card-hover: #351726;
  --card-active: #422032;
  --border: #3d1c2c;
  --border-strong: #55283e;
  --text: #fdf1f6;
  --text-dim: #d9a9bd;
  --text-faint: #8f6478;
  --accent: #ff6b4a;
  --accent-2: #ffb454;
  --accent-soft: rgba(255, 107, 74, 0.16);
  --like: #ff4d7d;
  --nebula-pink: #ff8bcb;
  --gold: #ffcf6b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
}

/* ---------- Blackhole: near-black void with a deep violet accretion glow ---------- */
:root[data-mode="blackhole"] {
  --bg-rgb: 14, 10, 20;
  --bg: #0e0a14;
  --bg-elevated: #120d1a;
  --card: #171022;
  --card-hover: #1d1529;
  --card-active: #261a37;
  --border: #241a33;
  --border-strong: #35244a;
  --text: #f1ecfb;
  --text-dim: #a89bc4;
  --text-faint: #635a7a;
  --accent: #7c3aed;
  --accent-2: #c084fc;
  --accent-soft: rgba(124, 58, 237, 0.18);
  --like: #ff5c9d;
  --nebula-pink: #c084fc;
  --gold: #ffd166;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.65);
}

/* ---------- Solar Flare: charcoal-red with a hot orange/gold burst ---------- */
:root[data-mode="solarflare"] {
  --bg-rgb: 26, 10, 5;
  --bg: #1a0a05;
  --bg-elevated: #200d07;
  --card: #29110a;
  --card-hover: #33160c;
  --card-active: #421d10;
  --border: #3a1c10;
  --border-strong: #522a17;
  --text: #fff2e8;
  --text-dim: #d9ab8f;
  --text-faint: #8f6a54;
  --accent: #f97316;
  --accent-2: #facc15;
  --accent-soft: rgba(249, 115, 22, 0.18);
  --like: #ff4d4d;
  --nebula-pink: #fb7185;
  --gold: #facc15;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Deep Space: navy-black with indigo/blue accent ---------- */
:root[data-mode="deepspace"] {
  --bg-rgb: 7, 11, 26;
  --bg: #070b1a;
  --bg-elevated: #0a0f22;
  --card: #0e142c;
  --card-hover: #131b3a;
  --card-active: #1a2450;
  --border: #1a2140;
  --border-strong: #262f5c;
  --text: #eef1ff;
  --text-dim: #9aa4d6;
  --text-faint: #545c8a;
  --accent: #4338ca;
  --accent-2: #60a5fa;
  --accent-soft: rgba(67, 56, 202, 0.2);
  --like: #ff5c8a;
  --nebula-pink: #818cf8;
  --gold: #fde68a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Martian Dust: rust-brown desert night ---------- */
:root[data-mode="martian"] {
  --bg-rgb: 26, 13, 5;
  --bg: #1a0d05;
  --bg-elevated: #201107;
  --card: #2a160a;
  --card-hover: #351b0c;
  --card-active: #44240f;
  --border: #3a200f;
  --border-strong: #522d16;
  --text: #fbf0e6;
  --text-dim: #d6ac8d;
  --text-faint: #8c6c52;
  --accent: #c2410c;
  --accent-2: #fb923c;
  --accent-soft: rgba(194, 65, 12, 0.2);
  --like: #ff5c4d;
  --nebula-pink: #fca5a5;
  --gold: #f2c14e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Lunar Silver: bright, cool steel-grey — a second light theme ---------- */
:root[data-mode="lunar"] {
  --bg-rgb: 226, 232, 240;
  --bg: #e2e8f0;
  --bg-elevated: #f4f6fa;
  --card: #ffffff;
  --card-hover: #eef1f6;
  --card-active: #e1e6ee;
  --border: #d6dce6;
  --border-strong: #b9c2d2;
  --text: #1a2032;
  --text-dim: #5b6478;
  --text-faint: #8a92a5;
  --accent: #475569;
  --accent-2: #64748b;
  --accent-soft: rgba(71, 85, 105, 0.1);
  --like: #c53d6b;
  --nebula-pink: #94a3b8;
  --gold: #a3792a;
  --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.08);
  --shadow-md: 0 8px 24px rgba(30, 41, 59, 0.1);
  --shadow-lg: 0 20px 60px rgba(30, 41, 59, 0.16);
}

/* ---------- Galaxy Swirl: violet-to-pink multi-hue nebula ---------- */
:root[data-mode="galaxyswirl"] {
  --bg-rgb: 18, 10, 26;
  --bg: #120a1a;
  --bg-elevated: #170d20;
  --card: #1e112b;
  --card-hover: #261637;
  --card-active: #331d4a;
  --border: #2b1a3f;
  --border-strong: #3d2559;
  --text: #f8ecff;
  --text-dim: #c69bdc;
  --text-faint: #7a5c8f;
  --accent: #a855f7;
  --accent-2: #ec4899;
  --accent-soft: rgba(168, 85, 247, 0.2);
  --like: #ec4899;
  --nebula-pink: #f472b6;
  --gold: #ffd97d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Ion Storm: charged teal-black with electric cyan/blue ---------- */
:root[data-mode="ionstorm"] {
  --bg-rgb: 4, 20, 26;
  --bg: #04141a;
  --bg-elevated: #071b22;
  --card: #0a232c;
  --card-hover: #0e2c37;
  --card-active: #133a47;
  --border: #123039;
  --border-strong: #1a4552;
  --text: #e9fbff;
  --text-dim: #8fc7d6;
  --text-faint: #4f7d8a;
  --accent: #0ea5e9;
  --accent-2: #22d3ee;
  --accent-soft: rgba(14, 165, 233, 0.2);
  --like: #ff5c8a;
  --nebula-pink: #67e8f9;
  --gold: #fcd34d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Cosmic Dust: magenta-black with rose/lilac accent ---------- */
:root[data-mode="cosmicdust"] {
  --bg-rgb: 26, 5, 18;
  --bg: #1a0512;
  --bg-elevated: #210818;
  --card: #2b0d20;
  --card-hover: #35112a;
  --card-active: #451638;
  --border: #3a1230;
  --border-strong: #521a43;
  --text: #ffeef8;
  --text-dim: #dd9fc3;
  --text-faint: #8f5c78;
  --accent: #be185d;
  --accent-2: #f0abfc;
  --accent-soft: rgba(190, 24, 93, 0.2);
  --like: #f0abfc;
  --nebula-pink: #f472b6;
  --gold: #ffd97d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Void Mono: true grayscale, no color accent at all ---------- */
:root[data-mode="voidmono"] {
  --bg-rgb: 20, 20, 22;
  --bg: #141416;
  --bg-elevated: #191a1c;
  --card: #1f2023;
  --card-hover: #26282b;
  --card-active: #313336;
  --border: #2c2e32;
  --border-strong: #3d4044;
  --text: #f2f2f3;
  --text-dim: #9c9ea3;
  --text-faint: #616366;
  --accent: #e4e4e7;
  --accent-2: #a1a1aa;
  --accent-soft: rgba(228, 228, 231, 0.12);
  --like: #d4d4d8;
  --nebula-pink: #a1a1aa;
  --gold: #d4d4d8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ---------- Obsidian Gold: black-and-gold, a luxury/high-contrast theme ---------- */
:root[data-mode="obsidiangold"] {
  --bg-rgb: 13, 11, 6;
  --bg: #0d0b06;
  --bg-elevated: #120f08;
  --card: #18140b;
  --card-hover: #201a0e;
  --card-active: #2b2312;
  --border: #292110;
  --border-strong: #3d3117;
  --text: #fbf6e8;
  --text-dim: #cbb987;
  --text-faint: #7d7250;
  --accent: #d4af37;
  --accent-2: #f5d576;
  --accent-soft: rgba(212, 175, 55, 0.18);
  --like: #ff6b6b;
  --nebula-pink: #f5d576;
  --gold: #f5d576;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.65);
}

/* The ambient nebula glows (body::before/after, defined below) are tuned
   per theme so each one reads as its own place, not a recolored default. */
:root[data-mode="midnight"] body::before { background: radial-gradient(circle, rgba(79,124,255,0.22), transparent 70%); }
:root[data-mode="midnight"] body::after { background: radial-gradient(circle, rgba(56,225,255,0.16), transparent 70%); }
:root[data-mode="aurora"] body::before { background: radial-gradient(circle, rgba(45,212,167,0.22), transparent 70%); }
:root[data-mode="aurora"] body::after { background: radial-gradient(circle, rgba(167,139,250,0.18), transparent 70%); }
:root[data-mode="sunset"] body::before { background: radial-gradient(circle, rgba(255,107,74,0.24), transparent 70%); }
:root[data-mode="sunset"] body::after { background: radial-gradient(circle, rgba(255,180,84,0.18), transparent 70%); }
:root[data-mode="blackhole"] body::before { background: radial-gradient(circle, rgba(124,58,237,0.24), transparent 70%); }
:root[data-mode="blackhole"] body::after { background: radial-gradient(circle, rgba(192,132,252,0.16), transparent 70%); }
:root[data-mode="solarflare"] body::before { background: radial-gradient(circle, rgba(249,115,22,0.26), transparent 70%); }
:root[data-mode="solarflare"] body::after { background: radial-gradient(circle, rgba(250,204,21,0.16), transparent 70%); }
:root[data-mode="deepspace"] body::before { background: radial-gradient(circle, rgba(67,56,202,0.26), transparent 70%); }
:root[data-mode="deepspace"] body::after { background: radial-gradient(circle, rgba(96,165,250,0.16), transparent 70%); }
:root[data-mode="martian"] body::before { background: radial-gradient(circle, rgba(194,65,12,0.26), transparent 70%); }
:root[data-mode="martian"] body::after { background: radial-gradient(circle, rgba(251,146,60,0.16), transparent 70%); }
:root[data-mode="galaxyswirl"] body::before { background: radial-gradient(circle, rgba(168,85,247,0.26), transparent 70%); }
:root[data-mode="galaxyswirl"] body::after { background: radial-gradient(circle, rgba(236,72,153,0.18), transparent 70%); }
:root[data-mode="ionstorm"] body::before { background: radial-gradient(circle, rgba(14,165,233,0.26), transparent 70%); }
:root[data-mode="ionstorm"] body::after { background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 70%); }
:root[data-mode="cosmicdust"] body::before { background: radial-gradient(circle, rgba(190,24,93,0.26), transparent 70%); }
:root[data-mode="cosmicdust"] body::after { background: radial-gradient(circle, rgba(240,171,252,0.16), transparent 70%); }
:root[data-mode="voidmono"] body::before { background: radial-gradient(circle, rgba(228,228,231,0.14), transparent 70%); }
:root[data-mode="voidmono"] body::after { background: radial-gradient(circle, rgba(161,161,170,0.1), transparent 70%); }
:root[data-mode="obsidiangold"] body::before { background: radial-gradient(circle, rgba(212,175,55,0.22), transparent 70%); }
:root[data-mode="obsidiangold"] body::after { background: radial-gradient(circle, rgba(245,213,118,0.14), transparent 70%); }

/* Lunar Silver is a bright theme like Daylight — fade the starfield the same way */
:root[data-mode="lunar"] #starfield,
:root[data-mode="lunar"] #shooting-stars { opacity: 0; }
:root[data-mode="lunar"] body::before,
:root[data-mode="lunar"] body::after { opacity: 0.25; }
:root[data-mode="lunar"] .auth-hero { background: radial-gradient(circle at 30% 20%, #eef1f6 0%, #e2e8f0 60%); }
:root[data-mode="lunar"] .hero-content h1,
:root[data-mode="lunar"] .hero-content p,
:root[data-mode="lunar"] .hero-points li { color: var(--text); }

* { box-sizing: border-box; }

/* Scrollbars are hidden everywhere in the app — every scrollable panel
   (comments, chat threads, conversation list, modals, pickers, story trays…)
   keeps full scroll functionality, it just never shows the OS/browser
   scrollbar track+thumb, matching the app's own chrome instead. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

:root[data-mode="light"] #starfield,
:root[data-mode="light"] #shooting-stars { opacity: 0; }
:root[data-mode="light"] body::before,
:root[data-mode="light"] body::after { opacity: 0.3; }
:root[data-mode="light"] .auth-hero { background: radial-gradient(circle at 30% 20%, #ece7ff 0%, #f3f4f9 60%); }
:root[data-mode="light"] .hero-content h1,
:root[data-mode="light"] .hero-content p,
:root[data-mode="light"] .hero-points li { color: var(--text); }

/* ---------- Boot loading screen (see index.html for why this exists) ---------- */
.boot-loading {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.boot-loading.hidden { display: none; }
.boot-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: boot-spin 0.7s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* ---------- Ambient space background ---------- */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; transition: opacity 0.4s ease; }

body::before, body::after {
  content: ''; position: fixed; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none;
}
body::before {
  width: 700px; height: 700px; top: -260px; left: -220px;
  background: radial-gradient(circle, rgba(124,92,255,0.22), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
body::after {
  width: 620px; height: 620px; bottom: -240px; right: -200px;
  background: radial-gradient(circle, rgba(34,211,197,0.16), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}

#shooting-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.shooting-star {
  position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.9);
  animation: shoot 1.6s linear forwards;
}
.shooting-star::before {
  content: ''; position: absolute; top: 50%; right: 0; width: 90px; height: 1px; transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}
@keyframes shoot {
  from { transform: translate(0,0); opacity: 1; }
  to { transform: translate(-420px, 260px); opacity: 0; }
}

.hidden { display: none !important; }
button { font-family: inherit; }
a { color: inherit; }

/* ---------- Icons ---------- */
.icon { width: 22px; height: 22px; flex-shrink: 0; }
.icon-lg { width: 28px; height: 28px; }
.icon-xs { width: 13px; height: 13px; }

/* ---------- Shared primitives ---------- */
.primary-btn {
  border: none; border-radius: 999px; background: linear-gradient(135deg, var(--accent), #9c7bff);
  color: white; font-weight: 600; font-size: 14px; padding: 10px 22px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(124,92,255,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,92,255,0.45); }
.primary-btn:active { transform: translateY(0); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.primary-btn.full-width { width: 100%; padding: 12px; }

.secondary-btn {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
  padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.secondary-btn:hover { background: var(--card-hover); border-color: var(--text-faint); }

.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; position: relative;
  display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-strong); }
.ai-btn { color: var(--accent-2); border-color: rgba(34,211,197,0.3); }
.ai-btn:hover { background: rgba(34,211,197,0.1); }

.rail-icon-btn {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; border-radius: 8px;
  padding: 6px; display: inline-flex; transition: background 0.15s ease, color 0.15s ease;
}
.rail-icon-btn:hover { background: var(--card-hover); color: var(--text); }

.badge {
  position: absolute; top: -2px; right: -2px; background: var(--like); color: white;
  font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
  border: 2px solid var(--bg);
}

.field-label { display: block; font-size: 12px; color: var(--text-dim); margin: 14px 0 6px; font-weight: 500; }
.error { color: var(--like); font-size: 13px; min-height: 16px; margin: 10px 0 0; }

.otp-hint { font-size: 13px; color: var(--text-dim); margin: 4px 0 0; }
.link-btn {
  background: none; border: none; padding: 0; color: var(--accent);
  font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--text-dim); cursor: default; text-decoration: none; }

/* ---------- Avatars ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; font-weight: 700; flex-shrink: 0; background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm);
}
.avatar-xs { width: 26px; height: 26px; font-size: 11px; }
.avatar-sm { width: 36px; height: 36px; font-size: 14px; }
.avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.avatar-xl { width: 88px; height: 88px; font-size: 32px; border: 4px solid var(--bg); }

/* ---------- Auth screen ---------- */
#auth-screen { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 100vh; }
.auth-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #1c1440 0%, #0b0c10 60%);
  padding: 60px; border-right: 1px solid var(--border);
}
.hero-glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,255,0.35), transparent 70%);
  top: -200px; left: -150px; filter: blur(20px); animation: drift 12s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(60px, 80px); } }
.hero-content { position: relative; max-width: 440px; }
.hero-brand {
  display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: var(--accent-2); margin-bottom: 28px;
}
.hero-content h1 { font-size: 34px; line-height: 1.25; margin: 0 0 14px; font-weight: 800; }
.hero-content p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hero-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.hero-points .icon { color: var(--accent-2); }

.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 360px; }
.tabs { display: flex; gap: 8px; margin-bottom: 24px; background: var(--card); padding: 4px; border-radius: 12px; }
.tab-btn {
  flex: 1; padding: 10px; border-radius: 9px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active { background: var(--accent); color: white; }
.auth-form input {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14px; transition: border-color 0.15s ease;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .primary-btn { margin-top: 22px; }

@media (max-width: 860px) {
  #auth-screen { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}

/* ---------- App shell ---------- */
#app-shell { display: grid; grid-template-columns: 240px minmax(0,600px) 300px; justify-content: center; gap: 24px; min-height: 100vh; padding: 0 20px; transition: grid-template-columns 0.2s ease; }

/* Comms goes full-width: drop the 600px column cap and hide the
   suggestions rail so the conversation list + thread can use the space
   the way Messenger/Instagram DMs do. */
#app-shell.messages-mode { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 0 24px; }
#app-shell.messages-mode .right-rail { display: none; }

.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 5px; padding: 24px 10px;
}
.rail-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--accent-2);
  font-weight: 800; font-size: 19px; padding: 8px 12px; margin-bottom: 12px;
}
.rail-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text);
  padding: 11px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer;
  background: transparent; border: none; width: 100%; text-align: left; position: relative;
  transition: background 0.15s ease;
}
.rail-item:hover { background: var(--card); }
.rail-item.active { background: var(--accent-soft); color: var(--accent); }
.rail-item.active .icon { color: var(--accent); }
.rail-post-btn { color: white; background: linear-gradient(135deg, var(--accent), #9c7bff); margin-top: 6px; box-shadow: 0 2px 10px rgba(124,92,255,0.3); }
.rail-post-btn:hover { background: linear-gradient(135deg, var(--accent), #9c7bff); filter: brightness(1.08); }
.rail-spacer { flex: 1; }
.rail-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.rail-username { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  #app-shell { grid-template-columns: 76px minmax(0,600px) 0; }
  #app-shell.messages-mode { grid-template-columns: 76px minmax(0,1fr); }
  /* !important: the base .right-rail rule further down the file is
     unconditional and declared after this block, so without it the
     cascade would let that later rule win and the panel would stay
     visible and overflow on tablet/phone widths. */
  .right-rail { display: none !important; }
  .rail-label { display: none; }
  .rail-brand .rail-label, .rail-item .rail-label { display: none; }
  .rail-item { justify-content: center; padding: 12px; }
  .rail-user { justify-content: center; }
  .rail-username { display: none; }
}

.content { padding: 24px 0 60px; min-width: 0; }
/* Solid (not blurred) on purpose: a backdrop-filter blur here smears the
   starfield's small bright dots behind it into one flat, oddly-lit band
   that reads as a rendering glitch rather than a header — a fully opaque
   fill avoids that while still keeping the header readable when the page
   scrolls under it. */
.content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; position: sticky; top: 0; background: var(--bg); padding: 10px 0; z-index: 5; }
.content-header h1 { font-size: 20px; margin: 0; }


/* ---------- Right rail ---------- */
.right-rail { padding: 24px 0; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: fit-content; }
.rail-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.rail-card-header { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.rail-about p { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.rail-about b { color: var(--text); }
.rail-footer { color: var(--text-faint); font-size: 12px; padding: 0 4px; }

/* ---------- Composer ---------- */
.composer {
  display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.composer-main { flex: 1; min-width: 0; }
.composer textarea {
  width: 100%; min-height: 60px; resize: vertical; background: transparent;
  border: none; color: var(--text); font-size: 16px; outline: none; font-family: inherit;
}
.composer textarea::placeholder { color: var(--text-faint); }
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.compose-counter { font-size: 11px; color: var(--text-faint); margin-right: 4px; }
.ai-status { font-size: 12px; color: var(--text-dim); }
.ai-suggestion { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(34,211,197,0.08); border: 1px dashed var(--accent-2); font-size: 13px; white-space: pre-wrap; color: var(--text); }
.compose-image-preview { position: relative; margin-top: 10px; display: inline-block; }
.compose-image-preview img { max-width: 100%; max-height: 240px; border-radius: 12px; display: block; }
.compose-image-preview button { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.65); color: white; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.compose-image-preview button .icon { width: 14px; height: 14px; }

/* ---------- Feed / posts ---------- */
.feed { display: flex; flex-direction: column; gap: 16px; }
.post {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  animation: post-in 0.35s ease both;
}
.post:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
@keyframes post-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.post.post-focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: post-focus-pulse 2.2s ease; }
@keyframes post-focus-pulse { 0% { box-shadow: 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 3px var(--accent-soft); } }

.post-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.post-author-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.post-author-names { display: flex; flex-direction: column; line-height: 1.3; }
.post-author { font-weight: 600; font-size: 14px; }
.post-author .handle { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.post-time { color: var(--text-faint); font-size: 12px; }
.post-body { font-size: 15px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 10px; }
.mention-link { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
/* A fixed-height card for every post photo (Instagram-style) instead of
   whatever aspect ratio the uploaded file happened to have — object-fit:
   cover crops to fill it so the feed reads as a uniform grid of cards. */
.post-image { width: 100%; height: 420px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; display: block; border: 1px solid var(--border); background: var(--bg-elevated); }
@media (max-width: 640px) { .post-image { height: 320px; } }

.ai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent-2); border: 1px solid rgba(34,211,197,0.35); padding: 3px 9px; border-radius: 10px; flex-shrink: 0; }
.post-kebab-wrap { position: relative; flex-shrink: 0; }
.post-kebab-btn {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px;
  line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.post-kebab-btn:hover { background: var(--card-hover); color: var(--text); }
.post-menu { top: 32px; right: 0; }

.post-actions { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.post-actions button {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; transition: background 0.15s ease, color 0.15s ease;
}
.post-actions .like-btn:hover { background: rgba(251,191,36,0.1); color: var(--gold); }
.post-actions .comment-toggle-btn:hover { background: var(--card-hover); color: var(--text); }

.like-btn.liked { color: var(--gold); }
.like-btn.liked .like-icon { fill: var(--gold); stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(251,191,36,0.7)); }
.like-icon { transition: transform 0.15s ease; }
.like-btn.pop .like-icon { animation: star-pop 0.45s ease; }
@keyframes star-pop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.4) rotate(-10deg); } 60% { transform: scale(0.9) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

.follow-btn {
  margin-left: auto; border: 1px solid var(--accent) !important; color: var(--accent) !important;
  padding: 5px 14px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important;
}
.follow-btn:hover { background: var(--accent-soft) !important; }
.follow-btn.following { background: var(--accent) !important; color: white !important; }
.follow-btn.following:hover { background: #6b4ce6 !important; }
.follow-btn.requested { background: var(--card) !important; color: var(--text-dim) !important; border-color: var(--border-strong) !important; }
.follow-btn.small { padding: 5px 12px !important; font-size: 12px !important; }

.comments-panel { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Only ~2 comments show before the list scrolls — keeps a post from growing
   unbounded when it has a long comment thread. Scrollbar hidden globally below. */
.comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 150px; overflow-y: auto; }
.comment { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; background: var(--bg-elevated); padding: 8px 12px; border-radius: 10px; }
.comment b { margin-right: 6px; color: var(--accent-2); }
.comment.comment-reply { margin-left: 26px; background: var(--card); border-left: 2px solid var(--accent-soft); }
.comment-avatar-link { flex-shrink: 0; margin-top: 1px; }
.comment-content { flex: 1; min-width: 0; }
.comment-author { margin-right: 6px; color: var(--accent-2); font-weight: 600; text-decoration: none; }
.comment-author:hover { text-decoration: underline; }
.comment-body { color: var(--text); word-break: break-word; }
.comment-edit-input {
  width: 100%; margin-top: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit;
}
.comment-edit-input:focus { outline: none; }
.comment-meta-row { display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.comment-time { font-size: 11px; color: var(--text-faint); }
.comment-like-btn, .comment-edit-btn, .comment-reply-btn {
  display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none;
  color: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.comment-like-btn:hover, .comment-edit-btn:hover, .comment-reply-btn:hover { background: var(--card-hover); color: var(--text); }
.comment-like-btn .icon { width: 12px; height: 12px; }
.comment-like-btn.liked { color: var(--accent-2); }
.comment-like-btn.liked .icon { fill: var(--accent-2); color: var(--accent-2); }
.comment-reply-banner { padding: 6px 4px; margin-bottom: 6px; border-top: none; }
.comment-form { display: flex; gap: 8px; align-items: center; }
.comment-input {
  flex: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 13px;
}
.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-form button[type="submit"] {
  border: none; background: var(--accent); color: white; border-radius: 999px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.comment-form .emoji-trigger-btn { flex-shrink: 0; }

/* ---------- Skeleton loaders ---------- */
.skel { display: inline-block; border-radius: 8px; background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 37%, var(--card) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.skel-line { height: 14px; border-radius: 7px; margin-left: 10px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-post .post-header { display: flex; align-items: center; margin-bottom: 12px; }
.skeleton-post .skel-line + .skel-line { margin-top: 8px; margin-left: 0; display: block; }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; color: var(--text-dim); padding: 50px 20px; font-size: 14px; }
.empty-state .icon { width: 36px; height: 36px; color: var(--text-faint); margin-bottom: 10px; }

/* ---------- Profile page ---------- */
.profile-cover { height: 120px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(120deg, #241a52, #12303a); margin-bottom: -44px; }
.profile-header {
  display: flex; gap: 20px; align-items: flex-end; background: var(--card);
  border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); padding: 20px; margin-bottom: 20px;
}
.profile-info { flex: 1; padding-top: 6px; }
.profile-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-name-row h2 { margin: 0; font-size: 21px; }
.profile-username { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.profile-bio { font-size: 14px; margin: 10px 0; white-space: pre-wrap; color: var(--text); }
.profile-stats { display: flex; gap: 18px; }
.stat-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0; }
.stat-btn:hover { color: var(--text); }
.stat-btn b { color: var(--text); }
.edit-btn, #profile-follow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
}
.edit-btn:hover, #profile-follow-btn:hover { background: var(--accent-soft); }
#profile-follow-btn.following { background: var(--accent); color: white; }

/* ---------- Overlays / flyouts ---------- */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.5); display: flex; animation: fade-in 0.15s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.search-panel {
  width: 380px; max-width: 90vw; height: 100%; background: var(--bg-elevated); border-right: 1px solid var(--border);
  padding: 18px; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.search-panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.search-panel-header h3 { margin: 0; flex: 1; font-size: 17px; }
.search-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; }
.search-input-wrap .icon { width: 18px; height: 18px; color: var(--text-faint); }
#search-input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 14px; outline: none; }
.search-results { margin-top: 4px; }

.notif-panel-standalone { margin: auto; width: 420px; max-width: 92vw; max-height: 80vh; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; overflow-y: auto; box-shadow: var(--shadow-lg); }
.notif-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; align-items: flex-start; }
.notif-item.unread { background: var(--accent-soft); }
.notif-item .avatar { margin-top: 1px; }
.notif-text { font-size: 13.5px; line-height: 1.4; }
.notif-text b { font-weight: 600; }
.notif-time { color: var(--text-faint); font-size: 11.5px; margin-top: 3px; }
.notif-icon-wrap { position: relative; }
.notif-type-icon { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-elevated); }
.notif-type-icon .icon { width: 10px; height: 10px; color: white; }
.notif-type-icon.like { background: var(--like); }
.notif-type-icon.comment { background: var(--accent-2); }
.notif-type-icon.follow { background: var(--accent); }
.notif-type-icon.follow_request { background: var(--accent); }
.notif-type-icon.mention { background: #f59e0b; }
.notif-body { flex: 1; min-width: 0; }
.notif-request-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-request-actions .primary-btn, .notif-request-actions .secondary-btn { padding: 6px 14px; font-size: 12.5px; }

/* ---------- Modals ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; animation: fade-in 0.15s ease; }
.modal { width: 400px; max-width: 90vw; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modal-in 0.18s ease; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.upload-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent-2); cursor: pointer; border: 1px solid var(--border); padding: 7px 13px; border-radius: 999px; }
.upload-label:hover { background: var(--card-hover); }
.modal input[type="text"], .modal input[type="date"], .modal select, .modal textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14px; margin-bottom: 4px; font-family: inherit;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--accent); }
.modal textarea { min-height: 70px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.nickname-modal-hint { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.nickname-input-row { display: flex; align-items: center; gap: 8px; }
.nickname-input-row input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; margin-bottom: 0; }
.nickname-input-row .emoji-trigger-btn { flex: 0 0 auto; }

.bio-field-row { display: flex; align-items: flex-start; gap: 8px; }
.bio-field-row textarea { flex: 1 1 auto; width: auto; min-width: 0; margin-bottom: 0; }
.bio-field-row .emoji-trigger-btn { flex: 0 0 auto; margin-top: 2px; }
.field-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Custom select (Gender / Birthday) ----------
   Stands in for a native <select>/<input type="date">, whose open state is
   drawn by the OS and can't be restyled — this popover uses the exact same
   look as every other menu in the app (.dropdown-menu) instead. */
.custom-select { position: relative; }
.custom-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); font-size: 14px; font-family: inherit; margin-bottom: 4px; cursor: pointer; text-align: left;
}
.custom-select-btn:hover { border-color: var(--border-strong); }
.custom-select.open .custom-select-btn { border-color: var(--accent); }
.custom-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-label.placeholder { color: var(--text-faint); }
.custom-select-chevron { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); transition: transform 0.15s ease; }
.custom-select.open .custom-select-chevron { transform: rotate(180deg); }
/* Position (left/top/width) is set inline by initCustomSelect, in `fixed`
   coordinates computed from the trigger button — the menu lives at the end
   of <body>, not nested in the scrolling modal, so CSS here only covers
   its look, not its placement. Needs a z-index above .modal-overlay (100),
   since living at the body level (not nested in the modal's own stacking
   context) means DOM order no longer settles that — .dropdown-menu's
   default of 20 would render it behind the modal it belongs to. */
.custom-select-menu { z-index: 150; }
.custom-select-menu button.selected { color: var(--accent-2); background: var(--accent-soft); }
.custom-select-menu-scroll { max-height: 210px; overflow-y: auto; }

.birthday-select-row { display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; gap: 6px; }
.custom-select-compact .custom-select-btn { padding: 11px 10px; font-size: 13.5px; }

.emoji-trigger-btn {
  font-size: 17px; line-height: 1; background: transparent; border: 1px solid var(--border);
  border-radius: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--text);
}
.emoji-trigger-btn:hover { background: var(--card-hover); }
/* Above .ui-modal-backdrop's z-index of 420 too — the nickname prompt's
   emoji button opens this same popover, so it must out-rank whatever
   modal it was triggered from, not just the profile-edit modal. */
.picker-popover.generic-emoji-popover { z-index: 430; }

.profile-meta-row { font-size: 13px; color: var(--text-dim); margin: 2px 0 6px; }

.crop-rotate-row { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }

/* ---------- People list (search / followers / following / suggested) ---------- */
.people-list { display: flex; flex-direction: column; gap: 2px; }
.person-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 6px; border-radius: 11px; transition: background 0.15s ease; }
.person-row:hover { background: var(--card-hover); }
.person-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }

/* ---------- Recent searches (search flyout, shown when the box is empty) ---------- */
.recent-search-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.recent-search-header span { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.recent-search-clear-all { background: transparent; border: none; color: var(--accent-2); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; font-family: inherit; }
.recent-search-clear-all:hover { text-decoration: underline; }
.recent-search-remove-btn {
  background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 6px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.recent-search-remove-btn:hover { background: var(--card-active); color: var(--text); }
.person-names { display: flex; flex-direction: column; min-width: 0; }
.person-display-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-username { font-size: 12px; color: var(--text-dim); }

/* ---------- Cosmic rank ---------- */
.rank-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text-dim); cursor: pointer; margin: 8px 0 0;
}
.rank-chip .rank-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rank-chip.small { font-size: 10.5px; padding: 1px 8px 1px 6px; margin: 0; border-color: transparent; background: transparent; }
.rank-chip.small .rank-dot { width: 5px; height: 5px; }

.rank-chip[data-tier="stargazer"] { color: #9aa1b2; }
.rank-chip[data-tier="stargazer"] .rank-dot { background: #9aa1b2; }
.rank-chip[data-tier="comet"] { color: var(--accent-2); border-color: rgba(34,211,197,0.35); }
.rank-chip[data-tier="comet"] .rank-dot { background: var(--accent-2); box-shadow: 0 0 6px rgba(34,211,197,0.7); }
.rank-chip[data-tier="star"] { color: var(--accent); border-color: rgba(124,92,255,0.4); }
.rank-chip[data-tier="star"] .rank-dot { background: var(--accent); box-shadow: 0 0 6px rgba(124,92,255,0.7); }
.rank-chip[data-tier="nova"] { color: var(--nebula-pink); border-color: rgba(236,72,153,0.4); }
.rank-chip[data-tier="nova"] .rank-dot { background: var(--nebula-pink); box-shadow: 0 0 6px rgba(236,72,153,0.7); }
.rank-chip[data-tier="supernova"] { color: var(--gold); border-color: rgba(251,191,36,0.5); }
.rank-chip[data-tier="supernova"] .rank-dot { background: var(--gold); box-shadow: 0 0 8px rgba(251,191,36,0.9); animation: pulse-glow 1.6s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.rank-detail {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; color: var(--text-dim); margin-top: 8px; max-width: 340px;
}
.rank-detail b { color: var(--text); }

.post-meta-row { display: flex; align-items: center; gap: 8px; }

/* ---------- Message button (profile) ---------- */
.message-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
}
.message-btn:hover { background: var(--card-hover); border-color: var(--text-faint); }

/* ---------- Comms / messaging ---------- */
.messages-shell {
  display: grid; grid-template-columns: 300px 1fr;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; height: calc(100vh - 150px); min-height: 440px; box-shadow: var(--shadow-sm);
}
.conversations-pane { border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; }
.conversations-list { display: flex; flex-direction: column; gap: 2px; }
.conversation-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; padding: 10px 8px; border-radius: 12px; cursor: pointer; color: inherit;
  transition: background 0.15s ease; font-family: inherit;
}
.conversation-row:hover { background: var(--card-hover); }
.conversation-row.active { background: var(--accent-soft); }
.conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.conv-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-preview { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-row.unread .conv-preview { color: var(--text); font-weight: 500; }
.conv-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 6px rgba(34,211,197,0.7); flex-shrink: 0; }

.thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.thread-pane > .empty-state { margin: auto; max-width: 260px; }
.thread-active { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
#thread-menu { top: 34px; right: 0; }
.msg-caption { font-size: 13px; margin-top: 4px; }
.message-row.flash .message-bubble { animation: flash-highlight 1s ease; }
@keyframes flash-highlight { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent-2); } }
.thread-header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.thread-back-btn { display: none; margin-right: 6px; }
.thread-author-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.thread-name { font-weight: 600; font-size: 14.5px; }
.thread-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.message-bubble { max-width: 68%; padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.message-bubble.sent { align-self: flex-end; background: linear-gradient(135deg, var(--accent), #9c7bff); color: white; border-bottom-right-radius: 4px; }
.message-bubble.received { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.thread-form { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }
.thread-form input {
  flex: 1; padding: 11px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14px; font-family: inherit;
}
.thread-form input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 700px) {
  .messages-shell { grid-template-columns: 1fr; height: auto; }
  .conversations-pane { border-right: none; border-bottom: 1px solid var(--border); max-height: 240px; }
}

/* ---------- Conversation row: kebab + menu ---------- */
.conversation-row { position: relative; display: flex; align-items: center; }
.conversation-row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: none; padding: 10px 8px; border-radius: 12px; cursor: pointer; color: inherit;
  transition: background 0.15s ease; font-family: inherit;
}
.conversation-row-main:hover { background: var(--card-hover); }
.conversation-row.active .conversation-row-main { background: var(--accent-soft); }
.conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.conv-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-preview { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-row.unread .conv-preview { color: var(--text); font-weight: 500; }
.conv-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.conv-pin-icon { color: var(--gold); width: 12px; height: 12px; }
.conv-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 6px rgba(34,211,197,0.7); flex-shrink: 0; }
.conv-kebab-btn {
  position: absolute; right: 4px; background: var(--bg-elevated); border: none; color: var(--text-dim);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 8px; border-radius: 8px; opacity: 0; transition: opacity 0.15s ease;
}
.conversation-row:hover .conv-kebab-btn { opacity: 1; }
.conv-menu { top: 34px; right: 4px; }
.archived-section { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.archived-toggle { width: 100%; text-align: left; background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; font-weight: 600; padding: 8px; cursor: pointer; border-radius: 10px; }
.archived-toggle:hover { background: var(--card-hover); color: var(--text); }

/* ---------- Generic dropdown menu ---------- */
.dropdown-menu {
  position: absolute; z-index: 20; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; min-width: 170px;
}
.dropdown-menu button {
  background: transparent; border: none; color: var(--text); text-align: left; font-size: 13px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; font-family: inherit;
}
.dropdown-menu button:hover { background: var(--card-hover); }
.dropdown-menu button.danger { color: var(--like); }
.dropdown-menu button.active-state { color: var(--accent-2); }

/* ---------- Thread header extras ---------- */
.thread-header { position: relative; justify-content: space-between; }
.thread-header-names { display: flex; flex-direction: column; line-height: 1.3; }
.thread-presence { font-size: 11px; color: var(--text-faint); }
.thread-presence.online { color: var(--accent-2); }
.thread-header-actions { display: flex; align-items: center; gap: 2px; position: relative; }

/* ---------- Search-in-thread ---------- */
.thread-search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.thread-search-bar .icon { width: 16px; height: 16px; color: var(--text-faint); }
.thread-search-bar input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 13.5px; outline: none; font-family: inherit; }
.thread-search-count { font-size: 11.5px; color: var(--text-faint); }
.message-row.search-hidden { display: none; }
.message-bubble.search-match { outline: 2px solid var(--accent-2); }

/* ---------- Pinned messages bar ---------- */
.pinned-bar { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; max-height: 90px; overflow-y: auto; }
.pinned-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.pinned-row .icon { width: 12px; height: 12px; color: var(--gold); flex-shrink: 0; }
.pinned-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinned-row:hover { color: var(--text); }

/* ---------- Message rows / bubbles ---------- */
.thread-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
/* Scrolling stays fully working (wheel/trackpad/keyboard) — this only
   hides the visible track/thumb, in every engine that renders one. */
.thread-messages { scrollbar-width: none; -ms-overflow-style: none; }
.thread-messages::-webkit-scrollbar { display: none; width: 0; height: 0; }
.message-row { display: flex; flex-direction: column; max-width: 78%; position: relative; }
.message-row.sent { align-self: flex-end; align-items: flex-end; }
.message-row.received { align-self: flex-start; align-items: flex-start; }
.message-row + .message-row { margin-top: 6px; }

/* In-thread system notices ("X turned on disappearing messages…") — a
   plain centered pill, not part of either side's message column. */
.message-row.system-row { align-self: center; max-width: 90%; align-items: center; }
.system-message-pill {
  background: var(--card); border: 1px solid var(--border); color: var(--text-faint);
  font-size: 12px; padding: 6px 14px; border-radius: 999px; text-align: center; line-height: 1.4;
}

.message-bubble-wrap { display: flex; align-items: flex-end; gap: 6px; position: relative; }
.message-row.sent .message-bubble-wrap { flex-direction: row-reverse; }

.message-bubble { max-width: 100%; padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.message-row.sent .message-bubble { background: linear-gradient(135deg, var(--accent), #9c7bff); color: white; border-bottom-right-radius: 4px; }
.message-row.received .message-bubble { background: var(--bg-elevated); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.message-bubble.unsent { font-style: italic; opacity: 0.6; background: transparent !important; border: 1px dashed var(--border-strong) !important; color: var(--text-dim) !important; }
.message-bubble.sticker-bubble { background: transparent !important; border: none !important; padding: 0; font-size: 52px; line-height: 1; }
.message-bubble .msg-image { max-width: 240px; max-height: 300px; border-radius: 12px; display: block; cursor: zoom-in; }
.message-bubble .msg-image + .msg-caption { margin-top: 6px; }

.msg-reply-quote {
  border-left: 3px solid rgba(255,255,255,0.5); padding: 4px 8px; margin-bottom: 6px; border-radius: 6px;
  font-size: 12px; background: rgba(255,255,255,0.08); opacity: 0.9;
}
.message-row.received .msg-reply-quote { border-left-color: var(--accent-2); background: rgba(34,211,197,0.08); }

.msg-actions-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
  border-radius: 50%; width: 26px; height: 26px; font-size: 14px; line-height: 1; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s ease; align-self: center;
}
.message-row:hover .msg-actions-btn { opacity: 1; }

.msg-action-panel {
  display: flex; flex-direction: column; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; position: absolute; z-index: 15; top: 30px; min-width: 190px;
}
.message-row.sent .msg-action-panel { right: 0; }
.message-row.received .msg-action-panel { left: 0; }
.msg-action-panel.flip-up { top: auto; bottom: 30px; }
.msg-quick-reactions { display: flex; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.msg-quick-reactions button { background: transparent; border: none; font-size: 18px; cursor: pointer; border-radius: 8px; padding: 4px 6px; transition: transform 0.1s ease, background 0.1s ease; }
.msg-quick-reactions button:hover { background: var(--card-hover); transform: scale(1.2); }
.msg-action-panel button.msg-action-item { background: transparent; border: none; color: var(--text); text-align: left; font-size: 12.5px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.msg-action-panel button.msg-action-item:hover { background: var(--card-hover); }
.msg-action-panel button.msg-action-item.danger { color: var(--like); }

/* Instagram-sized reaction badges: bigger emoji, and pulled up to overlap
   the bottom corner of the bubble like a little attached badge instead of
   a tiny separate row underneath. */
.msg-reactions-row { display: flex; gap: 4px; margin-top: -14px; margin-bottom: 6px; flex-wrap: wrap; position: relative; z-index: 3; }
.message-row.sent .msg-reactions-row { justify-content: flex-end; padding-right: 4px; }
.message-row.received .msg-reactions-row { justify-content: flex-start; padding-left: 34px; }
.msg-reaction-pill {
  display: inline-flex; align-items: center; gap: 4px; background: var(--bg-elevated); border: none;
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.25));
  border-radius: 999px; padding: 3px 9px; font-size: 15px; line-height: 1.2; cursor: pointer; transition: transform 0.1s ease;
}
.msg-reaction-pill .msg-reaction-count { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.msg-reaction-pill.mine { background: var(--accent-soft); }
.msg-reaction-pill:hover { transform: scale(1.08); }

.msg-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; padding: 0 4px; }
.msg-status { display: inline-flex; align-items: center; color: var(--text-faint); }
.msg-status .icon { width: 13px; height: 13px; }
.msg-status.seen { color: var(--accent-2); }
.msg-meta .msg-edited { font-style: italic; }
.msg-pinned-flag { color: var(--gold); display: inline-flex; align-items: center; gap: 2px; }
.msg-pinned-flag .icon { width: 10px; height: 10px; }

.typing-indicator { padding: 0 18px 8px; }
.typing-dots { display: inline-flex; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 9px 14px; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: typing-bounce 1.2s ease infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Composer banners (reply / edit) ---------- */
.composer-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; background: var(--bg-elevated); border-top: 1px solid var(--border); flex-shrink: 0; }
.composer-banner-text { font-size: 12.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.composer-banner-label { font-weight: 600; color: var(--accent-2); font-size: 11px; }
.composer-banner button { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 6px; }
.composer-banner button:hover { background: var(--card-hover); }

.thread-blocked-notice { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--bg-elevated); border-top: 1px solid var(--border); flex-shrink: 0; color: var(--text-dim); font-size: 13px; }
.thread-blocked-notice svg { flex-shrink: 0; color: var(--danger, #ff5c7a); }
.thread-blocked-notice span { flex: 1; }
.thread-blocked-notice button { background: var(--accent-2); color: #fff; border: none; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.thread-blocked-notice button:hover { opacity: 0.9; }

/* ---------- Thread composer tools + pickers ---------- */
.thread-form { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-top: 1px solid var(--border); flex-shrink: 0; position: relative; }
.thread-tool-btn { padding: 7px 9px; font-size: 16px; }
.thread-tool-btn.active { color: var(--accent-2); border-color: rgba(34,211,197,0.4); background: rgba(34,211,197,0.1); }

/* The "more tools" toggle only exists for the narrow-phone layout below —
   on anything wider, .thread-tools-extra uses display:contents so its five
   buttons sit inline in .thread-form exactly as if this wrapper weren't
   there at all, and the toggle button itself stays hidden. */
.thread-tools-extra { display: contents; }
.thread-tools-toggle-btn { display: none; }

/* ---------- View-once photos ---------- */
.view-once-bubble {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: rgba(124,92,255,0.12); border: 1px dashed var(--accent); color: var(--accent);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.view-once-bubble:hover { background: rgba(124,92,255,0.2); }
.view-once-bubble.opened {
  background: var(--bg-elevated); border: 1px dashed var(--border-strong); color: var(--text-faint); cursor: default;
}
/* ---------- Documents & contact cards in chat ---------- */
.msg-document {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; min-width: 190px;
  background: var(--bg-elevated); border: 1px solid var(--border); text-decoration: none; color: inherit; font-family: inherit;
}
.message-row.received .msg-document { background: rgba(0,0,0,0.15); }
.msg-document:hover { border-color: var(--border-strong); }
.msg-document-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-document-icon .icon { width: 16px; height: 16px; }
.msg-document-info { display: flex; flex-direction: column; min-width: 0; }
.msg-document-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.msg-document-size { font-size: 11px; color: var(--text-faint); }

.msg-contact {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; min-width: 190px;
  background: var(--bg-elevated); border: 1px solid var(--border); text-decoration: none; color: inherit;
}
.message-row.received .msg-contact { background: rgba(0,0,0,0.15); }
.msg-contact:hover { border-color: var(--border-strong); }
.msg-contact-info { display: flex; flex-direction: column; min-width: 0; }
.msg-contact-name { font-size: 13px; font-weight: 600; color: var(--text); }
.msg-contact-sub { font-size: 11px; color: var(--accent-2); }

.contact-picker-modal { width: 380px; max-width: 92vw; }
.contact-picker-modal #contact-picker-search {
  width: 100%; margin: 10px 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text); font-size: 13.5px; outline: none; font-family: inherit; box-sizing: border-box;
}
.contact-picker-modal #contact-picker-list { max-height: 320px; overflow-y: auto; }

/* ---------- Crop-before-send ---------- */
.crop-modal { width: 480px; max-width: 92vw; }
.crop-stage {
  position: relative; width: 100%; height: 340px; background: #000; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin: 10px 0; touch-action: none;
}
.crop-stage img { max-width: 100%; max-height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.crop-box {
  position: absolute; border: 2px solid white; box-shadow: 0 0 0 2000px rgba(0,0,0,0.5); cursor: move; touch-action: none;
}
.crop-handle {
  position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; border: 2px solid var(--accent);
  touch-action: none;
}
.crop-handle[data-handle="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
.crop-handle[data-handle="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; }

.view-once-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-faint);
  margin-top: 6px; font-weight: 500;
}
.message-bubble.sent .view-once-tag { color: rgba(255,255,255,0.75); }
.thread-form input[type="text"] {
  flex: 1; padding: 11px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14px; font-family: inherit;
}
.thread-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

.picker-popover {
  position: absolute; bottom: 62px; left: 18px; width: 300px; max-height: 260px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; z-index: 20;
}
.picker-section-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 6px; }
.picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 8px; }
.picker-grid button { background: transparent; border: none; font-size: 20px; padding: 5px; border-radius: 8px; cursor: pointer; line-height: 1; }
.picker-grid button:hover { background: var(--card-hover); }
.picker-grid button.hidden { display: none; }
.sticker-grid button { font-size: 28px; }
.emoji-search-wrap { margin-bottom: 8px; }
.emoji-search-input {
  width: 100%; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px; font-family: inherit;
}
.emoji-search-input:focus { outline: none; border-color: var(--accent); }
.emoji-search-input::placeholder { color: var(--text-faint); }
.emoji-empty-msg { font-size: 13px; color: var(--text-faint); text-align: center; padding: 18px 0; }

/* ---------- Chat themes ----------
   #theme-grid (this picker) and #settings-theme-grid (the whole-app
   Appearance picker further down) both used a bare `.theme-swatch` class,
   so whichever rule came later in the file won for BOTH pickers — that's
   what made these look inconsistent. Scoped by container id so each
   picker keeps its own uniform shape. */
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 4px 2px; }
.theme-option { display: flex; flex-direction: column; align-items: center; gap: 5px; background: transparent; border: none; cursor: pointer; font-family: inherit; }
#theme-grid .theme-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); position: relative; box-sizing: border-box; }
.theme-option.active .theme-swatch::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-2);
}
.theme-option .theme-label { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.theme-option:hover .theme-label { color: var(--text); }
.conv-theme-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); }

.thread-active[data-theme="supernova"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #b45309, #f59e0b); }
.thread-active[data-theme="supernova"] .message-row.received .message-bubble { border-color: rgba(245,158,11,0.35); }
.thread-active[data-theme="supernova"] .thread-messages { background: radial-gradient(circle at 75% 10%, rgba(245,158,11,0.10), transparent 55%); }

.thread-active[data-theme="blackhole"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #14101f, #4c1d95); }
.thread-active[data-theme="blackhole"] .message-row.received .message-bubble { border-color: rgba(76,29,149,0.45); background: #0c0a14; }
.thread-active[data-theme="blackhole"] .thread-messages { background: radial-gradient(circle at 50% 0%, rgba(76,29,149,0.14), transparent 60%); }

.thread-active[data-theme="aurora"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #059669, #22d3c5); }
.thread-active[data-theme="aurora"] .message-row.received .message-bubble { border-color: rgba(34,211,197,0.35); }
.thread-active[data-theme="aurora"] .thread-messages { background: radial-gradient(circle at 25% 15%, rgba(5,150,105,0.10), transparent 55%); }

.thread-active[data-theme="solarflare"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #b91c1c, #f97316); }
.thread-active[data-theme="solarflare"] .message-row.received .message-bubble { border-color: rgba(249,115,22,0.35); }
.thread-active[data-theme="solarflare"] .thread-messages { background: radial-gradient(circle at 70% 15%, rgba(249,115,22,0.10), transparent 55%); }

.thread-active[data-theme="deepspace"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #1e3a8a, #4338ca); }
.thread-active[data-theme="deepspace"] .message-row.received .message-bubble { border-color: rgba(67,56,202,0.4); }
.thread-active[data-theme="deepspace"] .thread-messages { background: radial-gradient(circle at 30% 10%, rgba(30,58,138,0.16), transparent 55%); }

.thread-active[data-theme="martian"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #9a3412, #c2410c); }
.thread-active[data-theme="martian"] .message-row.received .message-bubble { border-color: rgba(194,65,12,0.35); }
.thread-active[data-theme="martian"] .thread-messages { background: radial-gradient(circle at 70% 20%, rgba(194,65,12,0.10), transparent 55%); }

.thread-active[data-theme="lunar"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #94a3b8, #e2e8f0); color: #1a1d29; }
.thread-active[data-theme="lunar"] .message-row.received .message-bubble { border-color: rgba(148,163,184,0.4); }
.thread-active[data-theme="lunar"] .thread-messages { background: radial-gradient(circle at 30% 10%, rgba(148,163,184,0.12), transparent 55%); }

.thread-active[data-theme="galaxyswirl"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #7c3aed, #ec4899 55%, #3b82f6); }
.thread-active[data-theme="galaxyswirl"] .message-row.received .message-bubble { border-color: rgba(236,72,153,0.35); }
.thread-active[data-theme="galaxyswirl"] .thread-messages { background: radial-gradient(circle at 60% 10%, rgba(124,58,237,0.14), transparent 60%); }

.thread-active[data-theme="ionstorm"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.thread-active[data-theme="ionstorm"] .message-row.received .message-bubble { border-color: rgba(14,165,233,0.35); }
.thread-active[data-theme="ionstorm"] .thread-messages { background: radial-gradient(circle at 25% 15%, rgba(14,165,233,0.10), transparent 55%); }

.thread-active[data-theme="cosmicdust"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #be185d, #f0abfc); }
.thread-active[data-theme="cosmicdust"] .message-row.received .message-bubble { border-color: rgba(240,171,252,0.35); }
.thread-active[data-theme="cosmicdust"] .thread-messages { background: radial-gradient(circle at 70% 15%, rgba(190,24,93,0.10), transparent 55%); }

.thread-active[data-theme="voidmono"] .message-row.sent .message-bubble { background: linear-gradient(135deg, #27272a, #52525b); }
.thread-active[data-theme="voidmono"] .message-row.received .message-bubble { background: #e4e4e7; border-color: #a1a1aa; color: #18181b; }
.thread-active[data-theme="voidmono"] .thread-messages { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 60%); }

/* ---------- Full-screen image viewer ---------- */
#image-viewer-overlay { align-items: center; justify-content: center; flex-direction: column; }
/* Crop photo (and the contact-share picker) can be opened from inside an
   already-open modal (e.g. "Change photo" inside Edit profile) — without
   this they inherit the base .overlay's lower z-index (90 vs .modal-overlay's
   100) and its default top-left alignment, so they'd render pinned to the
   corner AND behind the other modal's full-screen backdrop, silently
   swallowing clicks on their own buttons. */
#crop-overlay, #contact-picker-overlay { align-items: center; justify-content: center; z-index: 120; }
.image-viewer-img { max-width: 88vw; max-height: 86vh; border-radius: 8px; box-shadow: var(--shadow-lg); }
.image-viewer-close { position: absolute; top: 20px; right: 24px; background: rgba(0,0,0,0.5); }

.boot-error-banner {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--bg); z-index: 999; padding: 24px; text-align: center;
}
.boot-error-banner p { max-width: 360px; color: var(--text-dim); font-size: 14.5px; margin: 0; }

/* ---------- In-app confirm/prompt modal + toasts ---------- */
/* z-index 420: above every other overlay in the app, including the story
   viewer (400) and its own reactions modal (410) — uiConfirm/uiPrompt can be
   triggered from inside any of those (e.g. "Delete this story?"), and it
   needs to render contained within/on top of whatever called it, never
   behind it. */
.ui-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  z-index: 420; animation: fade-in 0.15s ease;
}
.ui-modal {
  width: 380px; max-width: 90vw; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-lg); animation: modal-in 0.18s ease;
}
.ui-modal h3 { margin: 0 0 8px; font-size: 16.5px; }
.ui-modal p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); white-space: pre-line; }
.ui-modal-input-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ui-modal-input {
  flex: 1 1 auto; min-width: 0; width: auto; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14px; font-family: inherit;
}
.ui-modal-input:focus { outline: none; border-color: var(--accent); }
.ui-modal-input-row .emoji-trigger-btn { flex: 0 0 auto; }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.danger-btn {
  background: var(--like); color: white; border: none; border-radius: 999px; padding: 10px 20px;
  font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease;
}
.danger-btn:hover { opacity: 0.88; }
.danger-btn:active { transform: translateY(1px); }

.toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-lg);
  border-radius: 12px; padding: 11px 18px; font-size: 13.5px; max-width: 90vw; opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left: 3px solid var(--like); }
.toast-success { border-left: 3px solid var(--accent); }

/* ---------- @mention autocomplete ---------- */
.mention-dropdown {
  position: absolute; z-index: 250; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 220px; overflow-y: auto;
}
.mention-option {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.mention-option .handle { color: var(--text-faint); font-weight: 400; }
.mention-option.active, .mention-option:hover { background: var(--accent-soft); }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; }
.settings-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.settings-card h3 { margin: 0 0 14px; font-size: 15.5px; }
.settings-form input[type="password"], .settings-form input[type="text"] {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 13.5px; font-family: inherit; margin-bottom: 2px;
}
.settings-form input:focus { outline: none; border-color: var(--accent); }

/* ---------- Modern account form (name/username/password) ---------- */
.modern-form .field-label { margin: 0 0 6px; }
.modern-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.modern-field { flex: 1; min-width: 160px; }
.input-shell {
  display: flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 0 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-shell-icon { color: var(--text-faint); flex-shrink: 0; }
/* Beats .settings-form input[type="text"/"password"] on specificity so the
   shell (not the bare input) carries the box/border — otherwise inputs
   inside a shell render as a visible double box. */
.settings-form .input-shell input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 0; color: var(--text);
  font-size: 13.5px; font-family: inherit; width: auto; margin-bottom: 0;
}
.input-shell input:focus { outline: none; }
.modern-divider { height: 1px; background: var(--border); margin: 22px 0; }
.modern-submit-btn { margin-top: 14px; border-radius: 999px; padding: 10px 20px; }

/* ---------- Modern mute-notifications panel (duration only, no modal) ---------- */
.mute-panel { margin-top: 6px; }
.mute-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mute-panel-icon {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--card-hover); color: var(--text-faint); flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.mute-panel-icon.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; }
.mute-panel-head-text { flex: 1; min-width: 0; }
.mute-panel-head-text .settings-hint { margin-top: 2px; }
.mute-unmute-btn {
  background: var(--card-hover); border: 1px solid var(--border-strong); color: var(--text); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.mute-unmute-btn:hover { background: var(--card-active); }

.mute-duration-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mute-chip {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mute-chip:hover { border-color: var(--border-strong); color: var(--text); }
.mute-chip.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.mute-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; border: none; border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: filter 0.15s ease;
}
.mute-cta-btn:hover { filter: brightness(1.08); }
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px;
}
.settings-toggle-row:last-of-type { border-bottom: none; }
.settings-hint { color: var(--text-faint); font-size: 12px; margin-top: 3px; font-weight: 400; line-height: 1.4; }
.settings-subheader { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin: 18px 0 8px; }
.settings-danger { border-color: rgba(255,77,125,0.3); }
.settings-danger p.settings-hint { margin: 6px 0 12px; }

.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; cursor: pointer;
  transition: background 0.15s ease;
}
.switch-track::before {
  content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: white;
  border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(17px); }

.settings-request-row, .settings-blocked-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.settings-request-row:last-child, .settings-blocked-row:last-child { border-bottom: none; }
.settings-request-names, .settings-blocked-names { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.settings-request-names b, .settings-blocked-names b { font-size: 13.5px; }
.settings-request-names span, .settings-blocked-names span { font-size: 12px; color: var(--text-faint); }
.settings-request-actions { display: flex; gap: 6px; }
.settings-request-actions button { padding: 6px 12px; font-size: 12.5px; }

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ---------- Profile: block menu + private/blocked notices ---------- */
.profile-more-wrap { position: relative; }
.profile-more-menu { top: 40px; right: 0; }
.private-notice {
  display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; color: var(--text-dim); font-size: 13px;
}
.private-notice .icon { color: var(--text-faint); flex-shrink: 0; }
.private-notice b { color: var(--text); display: block; font-size: 14px; margin-bottom: 2px; }

/* ---------- Story tray ---------- */
.story-tray { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; margin-bottom: 4px; }
.story-tray::-webkit-scrollbar { display: none; }
.story-tray-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: none; font-family: inherit; flex-shrink: 0; width: 68px;
}
.story-ring {
  width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: var(--border-strong);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.story-ring.unseen { background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--nebula-pink)); }
.story-ring .avatar { width: 100%; height: 100%; border: 2px solid var(--bg); }
.story-add-badge {
  position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: white; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); font-size: 14px; font-weight: 700; line-height: 1;
}
.story-tray-label {
  font-size: 11px; color: var(--text-dim); max-width: 66px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Story viewer ---------- */
.story-viewer-overlay { background: #000; z-index: 400; align-items: center; justify-content: center; }
/* "Who viewed this" and story reactions/replies both open ON TOP of the
   (paused) story, not behind it — the generic .modal-overlay z-index
   (100) sits below the story viewer's (400), which used to mean these
   modals rendered invisibly behind the story and only became visible
   once the story's own auto-advance timer fired and closed it out from
   under them. */
#story-viewers-modal.modal-overlay,
#story-reactions-modal.modal-overlay { z-index: 410; background: rgba(0,0,0,0.75); }
.story-viewer {
  position: relative; width: min(420px, 100vw); height: min(100vh, 860px); background: #000;
  overflow: hidden; display: flex; flex-direction: column;
}
.story-progress-bars { display: flex; gap: 4px; padding: 10px 10px 0; position: relative; z-index: 5; }
.story-progress-bar { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.story-progress-bar-fill { height: 100%; width: 0%; background: white; }
.story-progress-bar.done .story-progress-bar-fill { width: 100%; }
.story-progress-bar.active .story-progress-bar-fill { animation: story-fill linear forwards; animation-duration: var(--story-duration, 5s); }
@keyframes story-fill { from { width: 0%; } to { width: 100%; } }
.story-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; position: relative; z-index: 5; color: white; }
.story-viewer-author { display: flex; align-items: center; gap: 9px; text-decoration: none; color: white; }
.story-viewer-names { display: flex; flex-direction: column; line-height: 1.3; }
.story-viewer-name { font-weight: 600; font-size: 13.5px; }
.story-viewer-time { font-size: 11.5px; color: rgba(255,255,255,0.6); }
.story-viewer-actions { display: flex; gap: 4px; }
.story-viewer-actions .rail-icon-btn { color: white; }
.story-viewer-actions .rail-icon-btn:hover { background: rgba(255,255,255,0.15); }
.story-viewer-media { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; }
.story-viewer-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-text-slide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px;
  text-align: center; font-size: 22px; font-weight: 700; color: white; line-height: 1.4; word-break: break-word;
}
.story-tap-zone { position: absolute; top: 0; bottom: 0; width: 35%; background: transparent; border: none; cursor: pointer; z-index: 3; padding: 0; }
.story-tap-zone-left { left: 0; }
.story-tap-zone-right { right: 0; }
.story-viewer-viewers-btn {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,0.4); color: white; border: none; border-radius: 999px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.story-viewer-viewers-btn:hover { background: rgba(0,0,0,0.6); }
.story-viewer-music-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.45); color: #fff; border: none;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 70%;
}
.story-viewer-music-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-viewer-media .story-overlay-item { pointer-events: none; cursor: default; z-index: 2; }

/* ---------- Story reactions + reply (viewer-only, not shown on your own story) ---------- */
.story-viewer-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
.story-reaction-row { display: flex; justify-content: center; gap: 10px; }
.story-reaction-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12);
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.story-reaction-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.15); }
.story-reaction-btn.sent { animation: story-reaction-pop 0.4s ease; }
@keyframes story-reaction-pop { 0% { transform: scale(1); } 45% { transform: scale(1.5) translateY(-6px); } 100% { transform: scale(1); } }
/* The emoji copy that floats up from the tapped reaction button and fades
   out — the clear "this was sent" confirmation the tap itself needed. */
.story-reaction-flyer {
  position: absolute; transform: translate(-50%, 0); font-size: 22px; pointer-events: none; z-index: 7;
  animation: story-reaction-fly 1.1s ease-out forwards;
}
@keyframes story-reaction-fly {
  0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -120px) scale(1.6); opacity: 0; }
}
.story-reply-form { display: flex; align-items: center; gap: 8px; }
.story-reply-form input {
  flex: 1; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08); color: white; font-size: 13.5px; outline: none; font-family: inherit;
}
.story-reply-form input::placeholder { color: rgba(255,255,255,0.6); }
.story-reply-form input:focus { border-color: white; }
.story-reply-send-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.story-reply-send-btn .icon { width: 16px; height: 16px; }
.story-reply-send-btn:disabled { opacity: 0.4; cursor: default; }

/* Story-reply/reaction messages in a chat thread get a small header above
   the normal bubble instead of blending in as an ordinary message. */
.story-ref-tag {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim);
  margin-bottom: 5px; padding: 6px; border-radius: 16px; max-width: 230px;
  background: var(--bg-elevated); border: 1px solid var(--border); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.story-ref-tag:hover { border-color: var(--border-strong); background: var(--card-hover); }
.story-ref-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ref-tag .story-ref-thumb { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; background: var(--card-hover); flex-shrink: 0; }

/* ---------- Story creation: full-screen WYSIWYG composer ----------
   Mirrors .story-viewer's own size/shape exactly (same min(420px,100vw) x
   min(100vh,860px) box, same #000 background, same overflow:hidden) so
   whatever the user builds here — photo, text, overlays, song placement —
   is pixel-for-pixel what they'll see when the story actually plays back.
   Everything (topbar, canvas, sticker picker, bottombar) is layered with
   position:absolute inside one full-bleed box instead of stacking as
   separate boxed sections, which is what used to make it impossible to
   tell where things would really land. */
.story-composer-overlay { background: #000; align-items: center; justify-content: center; }
.story-composer {
  position: relative; width: min(420px, 100vw); height: min(100vh, 860px); background: #000;
  overflow: hidden; display: flex; flex-direction: column;
}
.story-create-tabs { margin-top: 0; display: flex; gap: 6px; }
.story-composer .story-create-tabs .tab-btn {
  color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08);
}
.story-composer .story-create-tabs .tab-btn.active { color: #fff; background: rgba(255,255,255,0.22); }

.story-canvas-wrap { position: absolute; inset: 0; overflow: hidden; }

#story-create-photo-pane, #story-create-text-pane { position: absolute; inset: 0; }
.story-composer-upload-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,0.85); background: #16161f; font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; border-radius: 0; padding: 0;
}
.story-photo-preview { position: absolute; inset: 0; margin: 0; border-radius: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }
.story-photo-preview img { width: 100%; height: 100%; max-height: none; object-fit: contain; display: block; }
#story-create-photo-pane:has(> #story-photo-preview:not(.hidden)) .story-composer-upload-label { display: none; }
.story-text-preview {
  position: absolute; inset: 0; margin: 0; border-radius: 0; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: 40px; background: #7c5cff;
}
.story-text-preview textarea {
  width: 100%; background: transparent; border: none; color: white; font-size: 22px; font-weight: 700;
  text-align: center; resize: none; min-height: 160px; outline: none; font-family: inherit;
}
.story-text-preview textarea::placeholder { color: rgba(255,255,255,0.6); }
.story-color-swatches {
  position: absolute; left: 0; right: 0; bottom: 180px; z-index: 4; display: flex; gap: 10px;
  flex-wrap: wrap; justify-content: center; padding: 0 16px;
}
.story-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.story-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 3px #fff; }

/* ---------- Story composer chrome: topbar, bottombar, overlays, song/sticker pickers ---------- */
.story-composer-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 12px 12px 0;
}
.story-composer-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,0.4); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.story-composer-icon-btn:hover { background: rgba(0,0,0,0.6); }
.story-composer-topbar-spacer { width: 34px; flex-shrink: 0; }
.story-overlay-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 0; z-index: 3; }
.story-overlay-item {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: grab; user-select: none; touch-action: none;
  display: flex; align-items: center; gap: 4px;
}
.story-overlay-item:active { cursor: grabbing; }
.story-overlay-item.dragging { z-index: 5; }
.story-overlay-item .story-overlay-remove {
  display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; flex-shrink: 0; padding: 0;
}
.story-overlay-item:hover .story-overlay-remove, .story-overlay-item.dragging .story-overlay-remove { display: flex; }
.story-overlay-item.text-overlay {
  font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.18); padding: 6px 12px; border-radius: 10px; max-width: 260px;
  white-space: pre-wrap; word-break: break-word; text-align: center;
}
.story-overlay-item.text-overlay.editing { cursor: text; }
.story-overlay-item.text-overlay.editing span[contenteditable="true"] { outline: 1px dashed rgba(255,255,255,0.6); cursor: text; }
.story-overlay-item.sticker-overlay { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }

/* Bottombar: sits over the bottom of the canvas, Instagram-style, instead
   of below it — duration pills, the Text/Sticker/Song tools and the Share
   button are all visible directly against the real story background. */
.story-composer-bottombar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.story-composer-duration-row .field-label { margin: 0 0 6px; color: rgba(255,255,255,0.75); }
.story-compose-toolbar { display: flex; gap: 8px; margin-top: 0; flex-wrap: wrap; }
.story-tool-btn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.story-tool-btn:hover { background: rgba(255,255,255,0.22); }

.story-duration-options { display: flex; gap: 8px; margin-top: 0; flex-wrap: wrap; }
.story-duration-option {
  background: rgba(255,255,255,0.1) ; border: 1.5px solid rgba(255,255,255,0.2); color: #fff; border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.story-duration-option.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.story-composer-share-btn { width: 100%; }

.story-sticker-picker {
  position: absolute; left: 14px; right: 14px; bottom: 168px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px; background: rgba(10,10,16,0.82); backdrop-filter: blur(6px); border-radius: 12px;
  max-height: 160px; overflow-y: auto;
}
.story-sticker-picker button {
  font-size: 26px; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 8px; line-height: 1;
}
.story-sticker-picker button:hover { background: rgba(255,255,255,0.14); }

/* Pinned to a fixed spot near the top of the story — not draggable. Every
   story shows its song badge in the same place (viewer badge matches),
   so there's nothing to preview here that isn't already what viewers see. */
.story-song-chip {
  position: absolute; left: 50%; top: 68px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); color: #fff;
  width: fit-content; max-width: 85%; font-size: 13px; user-select: none; z-index: 4;
}
.story-song-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.story-song-chip #story-song-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-song-chip button { background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; display: flex; padding: 2px; flex-shrink: 0; }
.story-song-chip button:hover { color: #fff; }

/* Font/color/size toolbar — shown while a story text overlay is being
   edited, Instagram-style, so text placement doesn't stay stuck at one
   fixed look. Pinned to the bottom of the canvas, above the overlay layer. */
.story-text-style-toolbar {
  position: absolute; left: 8px; right: 8px; bottom: 178px; z-index: 6;
  background: rgba(10,10,16,0.72); backdrop-filter: blur(6px); border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.story-font-swatches { display: flex; gap: 6px; overflow-x: auto; }
.story-font-swatches::-webkit-scrollbar { display: none; }
.story-font-swatch {
  flex-shrink: 0; background: rgba(255,255,255,0.1); border: 1.5px solid transparent; color: white;
  border-radius: 10px; padding: 6px 12px; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.story-font-swatch.active { border-color: white; background: rgba(255,255,255,0.22); }
.story-text-style-row { display: flex; align-items: center; gap: 8px; }
.story-text-color-swatches { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.story-text-color-swatches::-webkit-scrollbar { display: none; }
.story-text-color-swatch {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.story-text-color-swatch.active { border-color: white; box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }
.story-text-color-custom {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 1.5px dashed rgba(255,255,255,0.7); display: block;
}
.story-text-color-custom input[type="color"] { width: 130%; height: 130%; margin: -15%; cursor: pointer; border: none; padding: 0; background: none; }
.story-text-size-controls { display: flex; gap: 4px; flex-shrink: 0; }
.story-text-size-controls button {
  background: rgba(255,255,255,0.1); border: none; color: white; width: 26px; height: 26px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.story-text-size-controls button:hover { background: rgba(255,255,255,0.22); }

/* ---------- Highlights ---------- */
.highlights-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px; margin-top: -4px; }
.highlights-row:empty { display: none; }
.highlights-row::-webkit-scrollbar { display: none; }
.highlight-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent;
  border: none; cursor: pointer; font-family: inherit; flex-shrink: 0; width: 68px;
}
.highlight-cover {
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--card); display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); overflow: hidden;
}
.highlight-cover.add-new { border-style: dashed; }
.highlight-cover img { width: 100%; height: 100%; object-fit: cover; }
.highlight-label {
  font-size: 11px; color: var(--text-dim); max-width: 66px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.highlight-story-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; max-height: 240px; overflow-y: auto; }
.highlight-pick-item {
  position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent;
  cursor: pointer; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; padding: 2px;
}
.highlight-pick-item.selected { border-color: var(--accent); }
.highlight-pick-item img { width: 100%; height: 100%; object-fit: cover; }
.highlight-pick-text { font-size: 9px; color: white; text-align: center; overflow: hidden; }
.highlight-pick-check {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: white; display: none; align-items: center; justify-content: center; font-size: 10px;
}
.highlight-pick-item.selected .highlight-pick-check { display: flex; }
#highlight-title-input { margin-top: 4px; }

/* ---------- Music picker (settings) ---------- */
.music-track-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 340px; overflow-y: auto; }
.music-track-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; background: transparent; width: 100%; text-align: left; font-family: inherit; }
.music-track-row:hover { background: var(--card-hover); }
.music-track-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.music-track-play-btn { width: 34px; height: 34px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; flex-shrink: 0; }
.music-track-play-btn .icon { width: 16px; height: 16px; }
.music-track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.music-track-title-row { font-size: 13.5px; font-weight: 600; color: var(--text); }
.music-track-mood { font-size: 11.5px; color: var(--text-faint); }
.music-track-selected-badge { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: white; display: none; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.music-track-row.selected .music-track-selected-badge { display: flex; }

/* ---------- Profile music widget ---------- */
.profile-music-widget {
  display: inline-flex; align-items: center; gap: 10px; margin: 10px 0; padding: 7px 14px 7px 7px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elevated); cursor: pointer;
  max-width: 260px; font-family: inherit;
}
.profile-music-widget:hover { background: var(--card-hover); }
.profile-music-play-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-music-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; }
.profile-music-bars span { width: 3px; background: var(--accent-2); border-radius: 2px; height: 4px; opacity: 0.4; display: block; }
.profile-music-widget.playing .profile-music-bars span { opacity: 1; animation: music-bar 0.9s ease-in-out infinite; }
.profile-music-widget.playing .profile-music-bars span:nth-child(1) { animation-delay: 0s; }
.profile-music-widget.playing .profile-music-bars span:nth-child(2) { animation-delay: 0.2s; }
.profile-music-widget.playing .profile-music-bars span:nth-child(3) { animation-delay: 0.4s; }
@keyframes music-bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.profile-music-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.profile-music-title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.profile-music-artist { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* A post's music sits right under the header, before the caption/photo —
   plays automatically only while the post is actually on screen (see the
   feed IntersectionObserver in app.js), with its own mute control so it
   never competes with a post's caption/image for space. */
.post-music-widget.profile-music-widget { margin: 8px 0 10px; padding: 6px 8px 6px 6px; max-width: 100%; cursor: default; }
.post-music-widget .profile-music-title,
.post-music-widget .profile-music-artist { max-width: 130px; }
.post-music-mute-btn {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.post-music-mute-btn:hover { background: var(--card-hover); color: var(--text); }

.music-search-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 8px 12px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-strong); }
.music-search-row .icon { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.music-search-row input { flex: 1; border: none; background: none; outline: none; color: var(--text); font-size: 13px; font-family: inherit; }
.music-empty-hint { padding: 14px 4px; color: var(--text-faint); font-size: 12.5px; text-align: center; }

/* ---------- Song trim picker (which part of the song plays) ----------
   A classic overlapping dual-range-input slider: two native <input
   type="range"> stacked on the same track, each with pointer-events
   disabled except on its own thumb, plus a visual fill bar underneath
   showing the selected window. Native inputs, not a hand-rolled drag —
   deliberately, since a custom pointer-drag widget is exactly what made
   story text placement fiddly before; range inputs are reliable and
   accessible out of the box. */
.music-trim-track-label { font-size: 13px; color: var(--text-faint); margin: 2px 0 14px; }
.music-trim-slider-wrap { position: relative; height: 28px; margin: 6px 4px 2px; }
.music-trim-fill {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%);
  border-radius: 999px; background: var(--border-strong); overflow: hidden;
}
.music-trim-fill::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--trim-start, 0%); right: var(--trim-end, 0%);
  background: var(--accent); border-radius: 999px;
}
.music-trim-slider-wrap input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.music-trim-slider-wrap input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.music-trim-slider-wrap input[type="range"]::-moz-range-track { background: transparent; height: 28px; }
.music-trim-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  margin-top: 5px; cursor: grab;
}
.music-trim-slider-wrap input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: grab;
}
.music-trim-time-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.music-trim-time-row span { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 34px; }
.music-trim-preview-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elevated);
  color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.music-trim-preview-btn:hover { background: var(--card-hover); }
.music-trim-preview-btn.playing { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Appearance: theme picker ---------- */
.theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 8px; }
.theme-swatch-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: var(--bg-elevated); cursor: pointer; font-family: inherit; }
.theme-swatch-btn:hover { border-color: var(--accent); }
.theme-swatch-btn.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-swatch-btn .theme-swatch { width: 100%; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.theme-swatch-label { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.theme-swatch-btn.selected .theme-swatch-label { color: var(--accent); }

/* =====================================================================
   Mobile / small-screen layout
   Below 640px the side rail becomes a fixed bottom tab bar (like a
   native app), content goes full-width single column, and cards/forms
   tighten their padding so nothing overflows a phone viewport.
   ===================================================================== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  #app-shell {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 12px;
  }
  #app-shell.messages-mode { grid-template-columns: 1fr; padding: 0 10px; }
  .right-rail { display: none; }

  /* ---- Bottom tab bar ---- */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; width: 100%;
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--bg-rgb), 0.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); border-right: none;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    z-index: 60; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-brand { display: none; }
  .rail-item {
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 6px 12px; font-size: 9.5px; flex: 0 0 auto; width: auto; border-radius: 12px;
  }
  .rail-item .rail-label, .rail-brand .rail-label { display: block; font-size: 9.5px; font-weight: 600; }
  .rail-item .icon { width: 21px; height: 21px; }
  .rail-post-btn { padding: 6px 14px; }
  .rail-spacer { display: none; }
  .rail-user { border-top: none; margin-top: 0; padding: 6px 10px; flex-shrink: 0; gap: 6px; }
  .rail-username { display: none; }
  .badge { top: 0; right: -1px; }

  /* Leave room at the bottom of every screen for the fixed tab bar */
  .content { padding: 14px 0 84px; }
  .content-header { padding: 8px 0; }
  .content-header h1 { font-size: 18px; }

  /* ---- Auth ---- */
  .auth-form-panel { padding: 24px 18px; }

  /* ---- Composer / feed ---- */
  .composer { padding: 14px; gap: 10px; margin-bottom: 16px; }
  .composer-row { flex-wrap: wrap; row-gap: 8px; }
  .ai-btn span { display: none; }
  .post { padding: 14px; }
  .post-actions { flex-wrap: wrap; }
  .message-bubble { max-width: 82%; }

  /* ---- Profile ---- */
  .profile-cover { height: 84px; }
  .profile-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .avatar-xl { width: 72px; height: 72px; font-size: 26px; }
  .profile-name-row { gap: 8px; }
  .profile-name-row h2 { font-size: 18px; }
  .profile-stats { gap: 14px; }

  /* ---- Comms / messaging: stack list and thread, full height ---- */
  .messages-shell {
    grid-template-columns: 1fr; height: calc(100vh - 128px); min-height: 380px;
  }
  .conversations-pane { border-right: none; max-height: none; }
  #app-shell.messages-mode .messages-shell.thread-is-open .conversations-pane { display: none; }
  #app-shell.messages-mode .messages-shell:not(.thread-is-open) .thread-pane { display: none; }
  .thread-form { padding: 10px 10px; gap: 4px; }
  .thread-header { padding: 10px 12px; }
  .thread-messages { padding: 12px; }
  .thread-back-btn { display: inline-flex; }
  .thread-tool-btn { padding: 6px 7px; }

  /* Six-plus icon buttons in one row never fit a phone screen, so on this
     layout only the emoji button and a single "+" toggle stay in the main
     row; the rest (photo, view-once, document, contact, stickers) open in
     a small popover above the input when the "+" is tapped. */
  .thread-tools-toggle-btn { display: inline-flex; }
  .thread-tools-toggle-btn .icon { transform: rotate(45deg); transition: transform 0.15s ease; }
  .thread-tools-toggle-btn.open .icon { transform: rotate(0deg); }
  .thread-tools-extra {
    display: none; position: absolute; bottom: 100%; left: 8px; margin-bottom: 8px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
    padding: 8px; gap: 4px; box-shadow: var(--shadow-md); z-index: 20;
  }
  .thread-tools-extra.open { display: flex; }
  .thread-input, #thread-input { min-width: 0; }

  /* ---- Modals / popovers stay within the viewport ---- */
  .modal, .ui-modal { width: calc(100vw - 32px); padding: 18px; }
  .picker-popover { width: calc(100vw - 40px); left: 10px; right: 10px; }
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
  .mention-dropdown { max-width: calc(100vw - 32px); }
  .notif-panel-standalone { width: calc(100vw - 24px); padding: 14px; }
  .search-panel { width: 100vw; max-width: 100vw; padding: 14px; }

  /* ---- Settings ---- */
  .settings-card { padding: 16px; }
}