/* ─────────────────────────────────────────────────────────────
   ShukaHub redesign — Black, Orange, Gold (2026-06-04 v2)
   Brand-accurate dark theme with editorial typography.
   Pure visual layer, loaded after style.css.
   Disable: remove the <link> in index.html.

/* Remove Android WebView blue tap highlight on all elements */
* { -webkit-tap-highlight-color: transparent; }
   ───────────────────────────────────────────────────────────── */

/* ═══ PALETTE & TOKENS ═════════════════════════════════════════ */
:root {
  --accent:           #E07A00;   /* brand orange (primary) */
  --accent2:          #f0891a;   /* lifted orange (gradient stop) */
  --accent-deep:      #c46a00;   /* dark orange (active) */
  --accent-glow:      rgba(224, 122, 0, 0.4);
  --gold:             #E07A00;   /* same as accent */
  --gold-soft:        #f0891a;
  --gold-deep:        #c46a00;
  --gold-glint:       #f4a23a;   /* one subtle warm highlight tone */

  --bg1:              #050505;
  --bg2:              #000000;
  --panel:            #0e0e10;
  --panel2:           #16161a;

  --ink-deep:         #000000;
  --ink-mid:          #0a0a0c;

  --text:             #ffffff;
  --muted:            #9a9a9d;
  --muted-warm:       #b8a888;
  --line:             #1a1a1f;
  --hairline:         rgba(224, 122, 0, 0.10);
  --hairline-strong:  rgba(224, 122, 0, 0.22);

  --bubble-me-text:   #1a1100;
  --mention:          #1F85FF;   /* negative of #E07A00 orange */

  --shadow-sm:        0 4px 12px -4px rgba(0, 0, 0, 0.6);
  --shadow:           0 12px 32px -12px rgba(0, 0, 0, 0.75);
  --shadow-lg:        0 28px 70px -20px rgba(0, 0, 0, 0.9);
  --gold-glow-sm:     0 0 0 1px rgba(224, 122, 0, 0.18), 0 4px 14px -4px rgba(224, 122, 0, 0.35);
  --gold-glow:        0 0 0 1px rgba(224, 122, 0, 0.25), 0 10px 28px -8px rgba(224, 122, 0, 0.45);
  --inner-hi:         inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --font-display:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-auth:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, monospace;

  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
}

/* ═══ GLOBAL TYPOGRAPHY ════════════════════════════════════════ */
*, *::before, *::after { font-family: var(--font-body); }
input, textarea, button, select { font-family: var(--font-body); }

/* ═══ BODY + BACKDROP ══════════════════════════════════════════ */
body {
  background:
    radial-gradient(ellipse 70vw 60vh at 15% -5%, rgba(224, 122, 0, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60vw 55vh at 100% 105%, rgba(224, 122, 0, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #050505 0%, #000000 100%);
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.005em;
}

body:not(.logged-in)::before {
  background:
    radial-gradient(ellipse 60vw 50vh at 20% 15%, rgba(224, 122, 0, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50vw 45vh at 85% 90%, rgba(224, 122, 0, 0.09) 0%, transparent 55%);
  animation: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
}


/* ═══ AUTH SCREEN ══════════════════════════════════════════════ */
.auth-page {
  background:
    radial-gradient(ellipse 70vw 80vh at 80% 50%, rgba(224, 122, 0, 0.10) 0%, transparent 55%),
    #000000;
}

.auth-left {
  background:
    radial-gradient(ellipse at center, rgba(224, 122, 0, 0.16) 0%, transparent 65%),
    linear-gradient(160deg, #0c0c0e 0%, #000000 100%);
  border-right: 1px solid var(--hairline);
}

.auth-left::before,
.auth-left::after { display: none; }

.auth-brand-logo {
  filter: drop-shadow(0 4px 18px rgba(224, 122, 0, 0.32));
}

.auth-right {
  background: linear-gradient(180deg, #050505 0%, #000000 100%);
}

.auth-form-wrap { max-width: 380px; }

.auth-heading h1 {
  font-family: var(--font-auth);
  font-weight: 800;
  font-style: normal;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 8px;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.auth-heading p {
  font-family: var(--font-auth);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}

.auth-tabs {
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 0;
  margin-bottom: 24px;
}

.auth-tab {
  background: transparent !important;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 18px;
  font-family: var(--font-auth);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  font-style: normal;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.auth-tab:hover { color: var(--gold); }

.auth-tab-active,
.auth-tab.auth-tab-active {
  color: var(--gold) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

.auth-field { margin-bottom: 18px; }

.auth-field label {
  font-family: var(--font-auth);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

input[type="text"], input[type="password"], input[type="email"], textarea,
.auth-field input {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: var(--font-auth) !important;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.auth-pw-wrap input {
  padding-right: 46px !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(154, 154, 157, 0.6);
  font-style: normal;
  font-family: var(--font-auth);
}

input:focus, textarea:focus,
.auth-field input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(224, 122, 0, 0.12) !important;
}

.auth-btn {
  position: relative;
  background: var(--accent, #E07A00) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  font-family: var(--font-auth);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  box-shadow:
    0 10px 26px -6px rgba(224, 122, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px -8px rgba(224, 122, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

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

.auth-btn:disabled,
.auth-google-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none !important;
}

.auth-btn.is-loading { color: transparent !important; }

.auth-btn.is-loading::after,
.auth-google-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  animation: authBtnSpin 0.7s linear infinite;
}

.auth-btn.is-loading::after {
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

.auth-google-btn.is-loading { position: relative; }
.auth-google-btn.is-loading > * { opacity: 0; }
.auth-google-btn.is-loading::after {
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: #1a1a1a;
}

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

.auth-forgot-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-auth);
  font-style: normal;
  font-size: 13px;
  margin-top: 14px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  letter-spacing: 0;
  transition: color 0.2s var(--ease-out);
}

.auth-forgot-btn:hover { color: var(--gold); }

.auth-remember {
  font-family: var(--font-auth);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.auth-msg {
  font-size: 13px;
  font-family: var(--font-auth);
  font-style: normal;
  color: var(--accent);
  min-height: 18px;
  margin-bottom: 6px;
}

.auth-left-footer a {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.auth-github-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: #ffffff;
}

.auth-github-btn:hover {
  background: rgba(224, 122, 0, 0.08);
  color: var(--gold);
  border-color: var(--accent);
}

/* ═══ TOPBAR ═══════════════════════════════════════════════════ */
.topbar {
  background: #000000;
  border-bottom: 1px solid var(--hairline);
  height: 64px;
  padding: 0 22px;
  z-index: 1500;
}

.logo-img {
  height: 44px;
  filter: drop-shadow(0 2px 10px rgba(224, 122, 0, 0.3));
}

.logo span {
  background: none;
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  padding: 0;
  letter-spacing: -0.01em;
}

.profileIcon {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 122, 0, 0.12), var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}

.profileIcon:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 5px rgba(224, 122, 0, 0.2), var(--shadow);
}

.gear-btn, #userSearchBtn { color: var(--accent); }
#userSearchBtn svg { color: var(--gold); }

.hamburger-btn {
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.hamburger-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(224, 122, 0, 0.06);
}

/* ═══ SIDEBAR ══════════════════════════════════════════════════ */
.sidebar {
  background: #000000;
  border-right: 1px solid var(--hairline);
  position: relative;
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--accent-glow) 40%, var(--accent-glow) 60%, transparent 100%);
  opacity: 0.3;
  pointer-events: none;
}

.sidebar-header h3,
.sidebar h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.sidebar-divider {
  background: var(--hairline);
  height: 1px;
  margin: 14px 16px;
}

.sidebar-dots-btn,
.sidebar-tools-btn {
  color: var(--muted);
  background: transparent;
  border: none;
}

.sidebar-dots-btn:hover,
.sidebar-tools-btn:hover {
  color: var(--gold);
  background: rgba(224, 122, 0, 0.06);
}

.sidebar-btn {
  background: rgba(224, 122, 0, 0.08);
  border: 1px solid rgba(224, 122, 0, 0.28);
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 8px;
  padding: 8px 18px;
  display: block;
  width: fit-content;
  margin: 6px auto 10px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.sidebar-btn:hover {
  background: rgba(224, 122, 0, 0.16);
  border-color: var(--accent);
  color: var(--gold-soft);
}

/* Friend / group rows — gold bar on hover */
#friendsList > div,
#groupsList > div,
.friend-row,
.group-row {
  position: relative;
  padding: 10px 16px 10px 20px;
  border-radius: 0;
  transition: background 0.2s var(--ease-out);
  cursor: pointer;
}

#friendsList > div::before,
#groupsList > div::before,
.friend-row::before,
.group-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease-out);
  border-radius: 0 2px 2px 0;
}

#friendsList > div:hover,
#groupsList > div:hover,
.friend-row:hover,
.group-row:hover {
  background: rgba(224, 122, 0, 0.04);
}

#friendsList > div:hover::before,
#groupsList > div:hover::before,
.friend-row:hover::before,
.group-row:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.friend-name {
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.unread-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.friend-row img,
.group-icon {
  border: 1.5px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}

/* ═══ CHAT CONTAINER + HEADER ══════════════════════════════════ */
.chatContainer { background-color: var(--ink-deep); }

.chatContainer::before {
  background:
    radial-gradient(ellipse 60vw 50vh at 50% 100%, rgba(224, 122, 0, 0.04) 0%, transparent 50%),
    rgba(0, 0, 0, 0.82);
}

/* Floating chat header — frameless, messages scroll behind it */
.chat-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 10px 18px !important;
  min-height: 0 !important;
  z-index: 9;
  pointer-events: none;
  overflow: visible !important;
}

.chat-header > * { pointer-events: auto; }

#chatHeaderText {
  font-size: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.chatBox { padding-top: 52px !important; }

/* Extra darkening at top of chat — helps the floating title stay readable */
.chatContainer::before {
  background:
    radial-gradient(ellipse 60vw 50vh at 50% 100%, rgba(224, 122, 0, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.82) 90px, rgba(0, 0, 0, 0.82) 100%) !important;
}

/* Search button hidden — accessible via chatMoreBtn dropdown */
#chatSearchBtn { display: none !important; }

/* ── Chat "more" button + fixed dropdown ─────────────────────── */
.chat-more-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.55) !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}
.chat-more-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

.chat-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  color: #f0f0f0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.chat-more-item:hover { background: rgba(255,255,255,0.1) !important; color: #ffb347 !important; }

body.light-mode #chatMoreMenu { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
body.light-mode .chat-more-item { color: #1a1a2e !important; }

/* Hide hamburger on normal Android (valera keeps it). Swipe from left edge still opens drawer. */
body.capacitor-android:not(.valera-variant) .hamburger-btn { display: none !important; }

#chatHeaderText {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  font-variation-settings: 'opsz' 60;
  color: #ffffff;
  letter-spacing: -0.01em;
  flex: 1;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.2s var(--ease-out);
}

.icon-btn:hover {
  color: var(--gold);
  border-color: var(--accent);
  background: rgba(224, 122, 0, 0.08);
}

.chat-placeholder {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 0.01em;
  text-align: center;
  padding: 60px 20px;
}

/* ═══ MESSAGE BUBBLES — signature ═══════════════════════════════
   Your messages: gold-to-orange gradient with deep ink text.
   Other messages: pure black with subtle gold-tinted hairline.
   ───────────────────────────────────────────────────────────── */
.message {
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  padding: 11px 15px;
  border-radius: 14px;
  max-width: 70%;
  position: relative;
  font-weight: 400;
}

.message.me {
  background: var(--accent);
  color: var(--bubble-me-text);
  border: 1px solid var(--accent-deep);
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 22px -8px rgba(224, 122, 0, 0.4);
}

.message.other {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm), var(--inner-hi);
}

.message.me .msg-text-content,
.message.me .reply-chip,
.message.me a {
  color: var(--bubble-me-text);
}

.message.me .reply-chip {
  background: rgba(26, 17, 0, 0.10);
  border-left-color: rgba(26, 17, 0, 0.40);
  color: rgba(26, 17, 0, 0.75);
}

.message.me .msg-edited {
  color: rgba(26, 17, 0, 0.5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  margin-left: 6px;
}

.message.other .msg-edited {
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  margin-left: 6px;
}

.sender-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  color: var(--gold);
  padding-left: 42px;
  letter-spacing: 0.02em;
}

.chat-avatar {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
}

.reply-chip {
  font-family: var(--font-body);
  background: rgba(224, 122, 0, 0.1);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11.5px;
  padding: 4px 8px;
  margin-bottom: 6px;
}

.message-row-wrapper { animation: msgIn 0.35s var(--ease-out) backwards; }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ CHAT INPUT ═══════════════════════════════════════════════ */
/* Floating chat input — messages scroll *under* it, stay visible through */
.chatContainer { position: relative; }

.chatBox {
  padding-bottom: 84px !important;
}

.chat-footer {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 16px 14px;
  z-index: 10;
  pointer-events: none;  /* let clicks pass through the empty footer area */
}

.chat-footer > * { pointer-events: auto; }  /* but the pill + buttons stay clickable */

.message-row {
  background: rgba(18, 18, 22, 0.22) !important;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  outline: none !important;
  border-radius: 26px;
  padding: 6px 6px 6px 18px;
  box-shadow:
    0 14px 30px -14px rgba(0, 0, 0, 0.55) !important;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.message-row:focus-within {
  background: rgba(18, 18, 22, 0.32) !important;
  transform: translateY(-2px);
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  outline: none !important;
  box-shadow:
    0 18px 40px -14px rgba(0, 0, 0, 0.7) !important;
}

/* Fade-out gradient above the floating input — visually separates without hiding */
.chatContainer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 8;
}

.message-row #messageInput,
.message-row input,
.message-row textarea {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 14.5px;
  padding: 8px 4px !important;
  font-family: var(--font-body) !important;
}

.message-row #messageInput::placeholder,
.message-row input::placeholder {
  color: rgba(154, 154, 157, 0.55);
  font-style: italic;
  font-family: var(--font-display);
}

.send-btn {
  background: var(--accent, #E07A00) !important;
  color: var(--bubble-me-text, #1a1100) !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow:
    0 6px 16px -4px rgba(224, 122, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.send-btn svg { color: #1a1100; fill: #1a1100; }

.send-btn:hover {
  transform: scale(1.08);
  box-shadow:
    0 10px 24px -4px rgba(224, 122, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.message-row .img-pick-btn,
.message-row button[type="button"]:not(.send-btn) {
  color: var(--muted);
  background: transparent;
  border: none;
  transition: color 0.2s var(--ease-out);
}

.message-row .img-pick-btn:hover { color: var(--gold); }

/* ═══ OVERLAYS — ensure modals and settings fully cover chat ═══ */
.modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 5000 !important;
}

.settings-overlay {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  z-index: 9000 !important;
}

.modal-box {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%) !important;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(224, 122, 0, 0.08),
    var(--inner-hi);
  padding: 28px;
  position: relative;
}

.modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-glow) 50%, transparent 100%);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}

.lightbox-close {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.lightbox-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.profile-modal-name,
#groupModalName {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  font-variation-settings: 'opsz' 80;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.profile-modal-bio,
#groupModalDesc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ═══ SETTINGS MENU (must clearly sit above chat) ══════════════ */
.profileMenu {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 16px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(224, 122, 0, 0.10),
    var(--inner-hi);
  z-index: 9500 !important;
  position: absolute;
}

.menu-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.menu-label {
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.settings-tab {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 6px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

/* .settings-tab.active gets its highlight only in the desktop sidebar
   (see the min-width:700px block below) — the mobile root list drills
   into a new screen on tap, so "active" has no meaningful mobile look. */

/* ─── Settings sections (flat, minimal — no card borders/gradients) ─── */
.settings-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  position: relative;
  box-shadow: none !important;
}

.settings-section:hover {
  border-color: transparent !important;
}

.settings-section-danger {
  border-color: transparent !important;
  background: transparent !important;
}

.settings-section-label {
  position: static !important;
  display: block;
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 4px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ─── Settings rows ─── */
.settings-row {
  padding: 13px 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0;
  transition: background 0.15s var(--ease-out) !important;
  margin: 0 !important;
}

.settings-row:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.03);
}

.settings-row-icon {
  background: transparent !important;
  border: none !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 15px !important;
  opacity: 0.85;
}

.settings-row-text {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em !important;
  color: var(--text) !important;
}

.settings-row-arrow {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  opacity: 0.5;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.settings-row:hover .settings-row-arrow {
  opacity: 0.9;
  transform: translateX(2px);
}

.settings-row-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.settings-row-logout .settings-row-text { color: #ff5c5c !important; }
.settings-row-delete .settings-row-text { color: #ff5252 !important; }
.settings-row-logout .settings-row-icon { background: rgba(255, 138, 101, 0.10) !important; border-color: rgba(255, 138, 101, 0.22) !important; }
.settings-row-delete .settings-row-icon { background: rgba(255, 82, 82, 0.10) !important; border-color: rgba(255, 82, 82, 0.22) !important; }

/* ─── Toggle pill ─── */
.settings-toggle {
  width: 46px !important;
  height: 26px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 13px !important;
  border: 1px solid var(--hairline);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out) !important;
}

.settings-toggle::after {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
  left: 2px !important;
  background: #f5f5f5 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.28s var(--ease-out), background 0.25s var(--ease-out) !important;
}

.settings-toggle.toggle-on {
  background: var(--accent) !important;
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 3px rgba(224, 122, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.settings-toggle.toggle-on::after {
  transform: translateX(20px) !important;
  background: #ffffff !important;
}

/* ─── Decoration ring picker ─── */
.deco-option {
  border-radius: 12px !important;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out) !important;
}

.deco-option:hover {
  border-color: rgba(224, 122, 0, 0.4) !important;
  transform: translateY(-2px);
}

.deco-option.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(224, 122, 0, 0.2), var(--shadow-sm) !important;
}

.deco-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.deco-option.active .deco-label { color: var(--gold); }

/* ─── Section entry animation when settings opens ─── */
.settings-menu-open .settings-section { animation: settingsSectionIn 0.45s var(--ease-out) backwards; }
.settings-menu-open .settings-section:nth-of-type(1) { animation-delay: 0.05s; }
.settings-menu-open .settings-section:nth-of-type(2) { animation-delay: 0.10s; }
.settings-menu-open .settings-section:nth-of-type(3) { animation-delay: 0.15s; }
.settings-menu-open .settings-section:nth-of-type(4) { animation-delay: 0.20s; }
.settings-menu-open .settings-section:nth-of-type(5) { animation-delay: 0.25s; }

@keyframes settingsSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── "Remember me" — make it actually readable ─── */
.auth-remember {
  color: var(--text) !important;
  font-size: 13px !important;
  opacity: 0.85;
}

.auth-remember input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.settings-profile-header {
  background: rgba(224, 122, 0, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.2s var(--ease-out);
}

.settings-profile-header:hover {
  background: rgba(224, 122, 0, 0.07);
  border-color: rgba(224, 122, 0, 0.4);
}

.settings-profile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}

.settings-profile-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Hide the "Get the App" section when already running inside the Android wrapper */
body.capacitor-android #getAppSection { display: none !important; }

/* Toggles — ON state.
 * NOTE: Use longhand `background-color` + `background-image` with literal hex values.
 * `background: var(...)` shorthand resolves longhand sub-properties via "pending
 * substitution" which cascades unreliably and ends up rendering as transparent. */
.settings-toggle.toggle-on,
.toggle-on,
[class*="toggle"][class*="-on"] {
  background-color: var(--accent, #E07A00) !important;
  background-image: linear-gradient(180deg, var(--accent2, #f0891a) 0%, var(--accent, #E07A00) 100%) !important;
  color: var(--bubble-me-text, #1a1100) !important;
  border-color: var(--accent, #E07A00) !important;
}

/* Search dropdown menus (search users, profile menu) — also sit above chat */
.search-menu,
#userSearchMenu,
#toolsMenu {
  z-index: 9500 !important;
}

/* ═══ GROUP LEAVE BUTTON ═══════════════════════════════════════ */
.group-modal-icon {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 122, 0, 0.12);
}

.group-leave-btn {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ═══ PINNED MSG BANNER ════════════════════════════════════════ */
.pinned-msg-banner {
  background: linear-gradient(90deg, rgba(224, 122, 0, 0.10) 0%, rgba(224, 122, 0, 0.04) 100%);
  border-bottom: 1px solid rgba(224, 122, 0, 0.25);
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ═══ WALLPAPER PICKER ═════════════════════════════════════════ */
.wallpaper-picker {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%) !important;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 9400 !important;
}

.wallpaper-picker-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
}

.wallpaper-swatch {
  border-radius: 8px;
  border: 2px solid var(--hairline);
}

.wallpaper-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 122, 0, 0.2);
}

.wallpaper-remove-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
}

.wallpaper-remove-btn:hover {
  background: rgba(224, 122, 0, 0.06);
  color: var(--gold);
}

/* ═══ REACTIONS ════════════════════════════════════════════════ */
.reaction-picker {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 4px 6px;
}

.reaction-picker-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

.reaction-picker-btn:hover {
  background: rgba(224, 122, 0, 0.14);
  transform: scale(1.18);
}

/* ═══ FILE CHIPS ═══════════════════════════════════════════════ */
.file-chip {
  background: rgba(224, 122, 0, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}

.message.me .file-chip {
  background: rgba(26, 17, 0, 0.12);
  border-color: rgba(26, 17, 0, 0.25);
}

.file-chip-icon { color: var(--accent); }
.message.me .file-chip-icon { color: #1a1100; }

.file-chip-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.file-chip-dl {
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}

.message.me .file-chip-dl { color: #1a1100; }
.file-chip-dl:hover { transform: translateY(2px); }

/* ═══ SEARCH RESULTS ═══════════════════════════════════════════ */
.search-result-name {
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
}

.search-result-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.search-add-btn {
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--accent) 100%);
  border: none;
  color: #1a1100;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}

.search-add-btn:hover { transform: translateY(-1px); }

/* ═══ CHAT SEARCH BAR ══════════════════════════════════════════ */
.chat-search-bar {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 18px;
}

.chat-search-bar input {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid var(--hairline) !important;
  color: #ffffff !important;
  font-size: 13px !important;
}

.chat-search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* ═══ MESSAGE STATUS / TIMESTAMP ═══════════════════════════════ */
.msg-status,
.message-time,
.msg-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* ═══ SCROLLBARS ═══════════════════════════════════════════════ */
.chatBox::-webkit-scrollbar { width: 6px; }
.chatBox::-webkit-scrollbar-track { background: transparent; }
.chatBox::-webkit-scrollbar-thumb {
  background: rgba(224, 122, 0, 0.14);
  border-radius: 3px;
}
.chatBox::-webkit-scrollbar-thumb:hover { background: rgba(224, 122, 0, 0.4); }

.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(224, 122, 0, 0.10);
  border-radius: 3px;
}

/* ═══ MENTIONS ═════════════════════════════════════════════════ */
.mention,
.msg-text-content a {
  color: var(--mention);
  text-decoration: none;
  border-bottom: 1px dotted var(--mention);
}

.message.me .mention {
  color: #0F4FAA;
  border-bottom-color: rgba(15, 79, 170, 0.5);
}

.message.me a {
  color: #4a2f00;
  border-bottom-color: rgba(74, 47, 0, 0.5);
}

/* ═══ NOTIFICATIONS ════════════════════════════════════════════ */
.in-app-notification,
[class*="notification"][class*="toast"] {
  background: linear-gradient(180deg, #0e0e10 0%, #050505 100%);
  border: 1px solid rgba(224, 122, 0, 0.35);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-family: var(--font-body);
}

/* ═══ PAGE LOAD ANIMATIONS ═════════════════════════════════════ */
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-heading {
  animation: pageReveal 0.7s var(--ease-out) backwards;
  animation-delay: 0.05s;
}

.auth-field:nth-of-type(1) { animation: pageReveal 0.6s var(--ease-out) backwards; animation-delay: 0.15s; }
.auth-field:nth-of-type(2) { animation: pageReveal 0.6s var(--ease-out) backwards; animation-delay: 0.22s; }
.auth-remember, .auth-msg  { animation: pageReveal 0.6s var(--ease-out) backwards; animation-delay: 0.30s; }
.auth-btn                  { animation: pageReveal 0.6s var(--ease-out) backwards; animation-delay: 0.35s; }
.auth-forgot-btn           { animation: pageReveal 0.6s var(--ease-out) backwards; animation-delay: 0.42s; }

/* ═══ LIGHT MODE (lightly tuned) ═══════════════════════════════ */
body.light-mode {
  --bg1: #faf6ed;
  --bg2: #f0e9d8;
  --panel: #ffffff;
  --panel2: #fbf6ea;
  --text: #0a0a0c;
  --muted: #6a5d4b;
  --line: #e8dcc4;
  --hairline: rgba(0, 0, 0, 0.08);
  background:
    radial-gradient(ellipse 80vw 60vh at 10% -10%, rgba(224, 122, 0, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #faf6ed 0%, #f0e9d8 100%);
}

body.light-mode .chatContainer { background-color: #faf6ed; }
body.light-mode .chatContainer::before { background: rgba(255, 252, 245, 0.55); }
body.light-mode .sidebar { background: #ffffff; border-right: 1px solid var(--hairline); }
body.light-mode .topbar { background: #ffffff; border-bottom: 1px solid var(--hairline); }
body.light-mode .modal-box { background: #ffffff !important; }
body.light-mode .profileMenu { background: #ffffff !important; }
body.light-mode .message.other {
  background: #ffffff;
  color: #0a0a0c;
  border: 1px solid var(--hairline);
}

/* ═══ SAVED MESSAGES SIDEBAR ROW ══════════════════════════════ */
.saved-msg-row {
  margin: 8px 8px 0;
  border-radius: 8px;
  background: rgba(224, 122, 0, 0.08);
  border: 1px solid rgba(224, 122, 0, 0.22);
  padding: 10px 14px !important;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.saved-msg-row::before { display: none; }

.saved-msg-row:hover {
  background: rgba(224, 122, 0, 0.14) !important;
  border-color: var(--accent) !important;
}

.saved-msg-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.saved-msg-row .friend-name { color: var(--gold); font-style: italic; font-family: var(--font-display); }

/* ═══ PRESENCE DOTS ════════════════════════════════════════════ */
.status-dot { display: none; transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.status-dot.online { display: block; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.status-dot.idle   { display: block; background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.55); }
.status-dot.dnd    { display: block; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.55); }

/* Custom status text in profile modal */
.profile-modal-custom-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(254, 139, 0, 0.07);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 5px 12px 5px 8px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text);
}

.profile-modal-custom-status-emoji { font-style: normal; font-size: 15px; }

/* Presence picker in settings */
.presence-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.presence-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.presence-option:hover { border-color: rgba(254, 139, 0, 0.3); background: rgba(254, 139, 0, 0.04); }

.presence-option.active {
  border-color: var(--accent);
  background: rgba(254, 139, 0, 0.08);
  box-shadow: 0 0 0 2px rgba(254, 139, 0, 0.12);
}

.presence-option-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}

.presence-option-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.55); }
.presence-option-dot.idle   { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.55); }
.presence-option-dot.dnd    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.55); }
.presence-option-dot.invisible { background: var(--muted); }

.presence-option-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.presence-option.active .presence-option-label { color: var(--gold); }

.custom-status-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 4px;
}

.custom-status-emoji {
  width: 44px !important;
  padding: 10px !important;
  text-align: center;
  font-size: 18px !important;
  flex-shrink: 0;
}

.custom-status-text {
  flex: 1;
  min-width: 0;
}

/* ═══ COLOR PICKER APPLY BUTTON FIX ═══════════════════════════ */
.cp-apply {
  width: auto !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  flex-shrink: 0;
}

/* ═══ DELETED MESSAGE TOMBSTONE ════════════════════════════════ */
.msg-deleted-bubble {
  background: transparent !important;
  border: 1px dashed var(--hairline) !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  pointer-events: none;
  max-width: 280px;
}

.msg-deleted-bubble em { font-style: italic; }
.msg-deleted-icon { font-style: normal; font-size: 13px; opacity: 0.7; }

/* ═══ DATE SEPARATORS ═════════════════════════════════════════ */
.msg-date-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 16px 10px;
  pointer-events: none;
}

.msg-date-sep-line {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.msg-date-sep-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(224, 122, 0, 0.06);
  border: 1px solid rgba(224, 122, 0, 0.15);
  border-radius: 999px;
}

/* ═══ CUSTOM GROUP EMOJI ═══════════════════════════════════════ */
.custom-emoji-inline {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  object-fit: contain;
  border-radius: 3px;
  display: inline-block;
}

.custom-emoji-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 3px 4px 3px 0;
  font-size: 13px;
  color: var(--text);
}

.custom-emoji-chip code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ═══ MARKDOWN IN MESSAGES ═════════════════════════════════════ */
.msg-text-content strong { font-weight: 700; }
.msg-text-content em { font-style: italic; }
.msg-text-content s { opacity: 0.65; }

.msg-text-content code,
.msg-code {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}

.message.me code,
.message.me .msg-code {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1100;
}

.msg-codeblock {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-x: auto;
  max-width: 100%;
}

.message.me .msg-codeblock {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(0, 0, 0, 0.22);
  color: #1a1100;
}

.msg-quote {
  display: inline-block;
  background: rgba(224, 122, 0, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
  margin: 2px 0;
  font-style: italic;
  color: var(--muted);
  opacity: 0.95;
}

.message.me .msg-quote {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.7);
}

/* ═══ TOAST NOTIFICATIONS ══════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}

.toast {
  pointer-events: auto;
  background: linear-gradient(180deg, #1a1626 0%, #0e0b17 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 12px 16px 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(254, 139, 0, 0.08);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  min-width: 220px;
  max-width: 360px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.toast.toast-show { opacity: 1; transform: translateX(0); }
.toast.toast-hide { opacity: 0; transform: translateY(-8px); }

.toast-icon {
  width: 24px; height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  font-style: normal;
}

.toast-info  { border-color: rgba(224, 122, 0, 0.25); }
.toast-info  .toast-icon { background: rgba(224, 122, 0, 0.15); color: var(--accent); font-style: italic; }

.toast-success { border-color: rgba(82, 200, 120, 0.30); }
.toast-success .toast-icon { background: rgba(82, 200, 120, 0.18); color: #6ed98a; }

.toast-warning { border-color: rgba(255, 184, 71, 0.30); }
.toast-warning .toast-icon { background: rgba(255, 184, 71, 0.18); color: #ffcc66; }

.toast-error { border-color: rgba(255, 82, 82, 0.32); }
.toast-error .toast-icon { background: rgba(255, 82, 82, 0.18); color: #ff7070; }

.toast-msg { flex: 1; line-height: 1.4; }

@media (max-width: 600px) {
  .toast-container { left: 12px; right: 12px; bottom: 88px; align-items: stretch; }
  .toast { min-width: 0; max-width: 100%; }
}

/* ═══ CONFIRM MODAL ════════════════════════════════════════════ */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}

.confirm-modal-overlay.confirm-modal-open { opacity: 1; }

.confirm-modal-box {
  background: linear-gradient(180deg, #1a1626 0%, #0e0b17 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(254, 139, 0, 0.10);
  padding: 24px;
  min-width: 280px;
  max-width: 420px;
  width: 100%;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.2s var(--ease-out);
}

.confirm-modal-open .confirm-modal-box { transform: scale(1) translateY(0); }

.confirm-modal-danger { border-color: rgba(255, 82, 82, 0.35); }

.confirm-modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  font-variation-settings: 'opsz' 80;
  color: var(--cream, #ffffff);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.confirm-modal-msg {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.confirm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.confirm-modal-cancel,
.confirm-modal-ok {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.2s var(--ease-out);
  border: 1px solid transparent;
}

.confirm-modal-cancel {
  background: transparent;
  color: var(--muted);
  border-color: var(--hairline-strong);
}

.confirm-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.confirm-modal-ok {
  background: var(--accent);
  color: #1a1100;
  border-color: var(--accent-deep);
  box-shadow: 0 6px 16px -4px rgba(224, 122, 0, 0.35);
}

.confirm-modal-ok:hover { transform: translateY(-1px); }

.confirm-modal-ok-danger {
  background: linear-gradient(180deg, #ff5252 0%, #c91f1f 100%);
  color: #ffffff;
  border-color: #c91f1f;
  box-shadow: 0 6px 16px -4px rgba(255, 82, 82, 0.45);
}

/* ═══ MOBILE TUNING ════════════════════════════════════════════ */
@media (max-width: 768px) {
  .auth-heading h1 { font-size: 32px; }
  #chatHeaderText { font-size: 17px; }
  .message { max-width: 82%; font-size: 14px; }
}

/* ═══ MOBILE AUTH OVERFLOW FIX ═════════════════════════════════ */
html, body { overflow-x: hidden; }

@media (max-width: 880px) {
  .auth-right {
    padding: 28px 18px !important;
    width: 100% !important;
    left: 0 !important;
    overflow-x: hidden;
  }
  .auth-form-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .auth-tabs {
    width: 100%;
    box-sizing: border-box;
  }
  .auth-tab {
    min-width: 0;
    padding: 10px 6px !important;
    font-size: 14px !important;
  }
  .auth-field {
    width: 100%;
    box-sizing: border-box;
  }
  .auth-field input,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .auth-btn {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ─── GOOGLE SIGN-IN BUTTON ──────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.auth-google-btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  transition: background 0.15s, box-shadow 0.15s;
  padding: 0 16px !important;
  margin-top: 2px;
}
.auth-google-btn:hover {
  background: #f5f5f5 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
.auth-google-btn:active {
  transform: scale(0.98);
}

@media (max-width: 500px) {
  .auth-heading h1 { font-size: 28px; }
  .auth-right { padding: 20px 14px !important; }
  .auth-brand-logo { height: 80px; }
}

/* ── Link preview cards ──────────────────────────────────── */
.lp-holder { margin-top: 6px; }
.link-preview-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(224,122,0,0.25);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  max-width: 320px;
  transition: background .15s;
  cursor: pointer;
}
.link-preview-card:hover { background: rgba(255,255,255,0.1); }
.lp-image {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
}
.lp-body { padding: 8px 10px; }
.lp-site { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 3px; }
.lp-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; color: var(--text-primary, #f0f0f0); }
.lp-desc { font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Onboarding modal ────────────────────────────────────── */
.onboarding-box {
  max-width: 380px;
  text-align: center;
  padding: 32px 28px 24px;
}
.onboarding-emoji { font-size: 36px; margin-bottom: 10px; }
.onboarding-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.onboarding-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.onboarding-section { text-align: left; margin-bottom: 4px; }
.onboarding-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.onboarding-search-row { display: flex; gap: 8px; }
.onboarding-search-row input { margin-bottom: 0; flex: 1; }
.onboarding-search-btn {
  height: 46px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.onboarding-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 12px;
}
.onboarding-result-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.onboarding-result-info { flex: 1; min-width: 0; }
.onboarding-result-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onboarding-result-sub { font-size: 12px; color: var(--muted); }
.onboarding-add-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.onboarding-add-btn:disabled { opacity: .6; cursor: default; }
.onboarding-searching, .onboarding-not-found { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center; }
.onboarding-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin: 18px 0 14px;
}
.onboarding-divider::before, .onboarding-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.onboarding-invite-btn {
  width: 100%;
  height: 44px;
  background: rgba(224,122,0,0.12);
  color: var(--accent);
  border: 1.5px solid rgba(224,122,0,0.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.onboarding-invite-btn:hover { background: rgba(224,122,0,0.2); }
.onboarding-skip {
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Invite link buttons ─────────────────────────────────── */
.profile-invite-link-btn {
  width: calc(100% - 0px);
  height: 40px;
  margin-top: 10px;
  background: rgba(224,122,0,0.1);
  color: var(--accent);
  border: 1.5px solid rgba(224,122,0,0.25);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.profile-invite-link-btn:hover { background: rgba(224,122,0,0.18); }
.group-invite-link-btn {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  margin-bottom: 6px;
  background: rgba(224,122,0,0.1);
  color: var(--accent);
  border: 1.5px solid rgba(224,122,0,0.25);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.group-invite-link-btn:hover { background: rgba(224,122,0,0.18); }

/* ── Android-only settings rows ─────────────────────────────── */
.android-only { display: none !important; }
body.capacitor-android .android-only { display: flex !important; }

/* ── Mobile / Android message bar tightening ─────────────────── */
@media (max-width: 600px) {
  .chat-footer {
    padding: 6px 12px 10px !important;
  }
  .message-row {
    padding: 4px 4px 4px 12px !important;
  }
  .send-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .chatContainer::after {
    height: 70px !important;
  }
}

/* ═══ SETTINGS SIDEBAR LAYOUT — desktop only ════════════════════ */
@media (min-width: 700px) {
  body.settings-menu-open #settingsMenu {
    display: grid !important;
    grid-template-columns: 1fr 200px minmax(0, 720px) 1fr !important;
    grid-template-rows: auto auto 1fr !important;
  }

  #settingsMenu .settings-menu-header,
  #settingsMenu .settings-profile-header {
    grid-column: 2 / 4 !important;
  }

  /* Scale up the header area */
  #settingsMenu .settings-menu-header {
    padding: 20px 32px !important;
    font-size: 20px !important;
  }

  #settingsMenu .settings-profile-header {
    padding: 18px 32px !important;
    gap: 18px !important;
  }

  #settingsMenu .settings-profile-img {
    width: 58px !important;
    height: 58px !important;
  }

  #settingsMenu .settings-profile-name {
    font-size: 18px !important;
  }

  #settingsMenu .settings-profile-sub {
    font-size: 13px !important;
  }

  /* Left nav */
  #settingsTabs {
    grid-column: 2 !important;
    grid-row: 3 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-bottom: none !important;
    border-right: 1px solid var(--hairline) !important;
    padding: 20px 12px !important;
    gap: 3px !important;
    overflow-x: unset !important;
    overflow-y: auto !important;
    background: transparent !important;
  }

  #settingsTabs .settings-tab {
    border-bottom: none !important;
    border-radius: 9px !important;
    padding: 13px 16px !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    color: var(--muted) !important;
    background: transparent !important;
  }

  #settingsTabs .settings-tab.active {
    color: var(--gold) !important;
    background: rgba(224, 122, 0, 0.12) !important;
    border-left: 2px solid var(--accent) !important;
    padding-left: 14px !important;
  }

  #settingsTabs .settings-tab:hover:not(.active) {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.8) !important;
  }

  /* Right content */
  .settings-inner {
    grid-column: 3 !important;
    grid-row: 3 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 32px 48px 60px !important;
  }

  /* Scale up section cards */
  #settingsMenu .settings-section {
    padding: 8px 22px !important;
    border-radius: 16px !important;
    margin-top: 40px !important;
  }

  #settingsMenu .settings-section-label {
    font-size: 11px !important;
    top: -10px !important;
    left: 18px !important;
  }

  #settingsMenu .settings-row {
    padding: 14px 0 !important;
    font-size: 15px !important;
  }

  #settingsMenu .settings-row-label {
    font-size: 15px !important;
  }

  #settingsMenu .settings-row-sub {
    font-size: 13px !important;
  }
}

/* ═══ PROFILE BANNERS (Discord-style) ══════════════════════════ */
/* Lives inside #profileModal's full-screen .modal-box (padding 20px 16px, radius 0) */
.profile-modal-banner {
  position: relative;
  width: calc(100% + 32px);
  margin: -20px -16px 0;
  height: 110px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-deep, #c46a00) 0%, var(--accent) 100%);
}

.banner-edit-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out);
}
.banner-edit-btn:hover { background: rgba(0, 0, 0, 0.7); }

.banner-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  padding: 12px 2px 4px;
}

.banner-swatch {
  height: 34px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s var(--ease-out);
}
.banner-swatch:hover { border-color: rgba(255, 255, 255, 0.4); }
.banner-swatch.active { border-color: var(--accent); }

/* Banner photo/GIF as the full profile-window background */
#profileModal.has-banner-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Scrim keeps name/bio/stats readable over any photo */
#profileModal.has-banner-image::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.72) 42%,
    rgba(0, 0, 0, 0.90) 100%);
  pointer-events: none;
  z-index: 0;
}
/* The box itself goes transparent so the photo shows through, and the
   header strip too so there's no seam across the top. */
#profileModal.has-banner-image .modal-box {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
#profileModal.has-banner-image .modal-box::before { display: none; }
#profileModal.has-banner-image .profile-modal-banner { background: none !important; }

/* Close + settings buttons: matched size, symmetric, pinned while scrolling */
/* Scoped through .modal-box so this matches the specificity of the
   content-centering rule in style.css and wins on cascade order — the
   buttons must never inherit that rule's width. */
#profileModal .modal-box .lightbox-close,
#profileModal .modal-box .profile-modal-settings-btn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  z-index: 5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
#profileModal .modal-box .profile-modal-settings-btn { left: 14px; right: auto; width: 38px; height: 38px; }
#profileModal .modal-box .lightbox-close { right: 14px; left: auto; width: 38px; height: 38px; }
#profileModal .lightbox-close:hover,
#profileModal .profile-modal-settings-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
#profileModal .lightbox-close:active,
#profileModal .profile-modal-settings-btn:active { transform: scale(0.94); }

/* Avatar overlaps the banner, Discord-style */
.avatar-on-banner {
  margin-top: -34px;
  z-index: 2;
}
.avatar-on-banner .profile-modal-avatar {
  box-shadow: 0 0 0 4px var(--panel);
}

/* ═══ MICRO-INTERACTIONS ═══════════════════════════════════════ */
.modal-overlay { animation: shOverlayFade 0.18s var(--ease-out); }
.modal-box     { animation: shModalPop 0.24s var(--ease-out); }

@keyframes shOverlayFade { from { opacity: 0; } }
@keyframes shModalPop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}

.pma-btn:active,
.settings-tab:active,
.settings-row:active,
.deco-option:active,
.font-size-btn:active,
.banner-swatch:active,
.self-edit-save-btn:active { transform: scale(0.97); }

/* ═══ X-STYLE FEED: handles, share, post-detail view ═══════════ */
.timeline-card-handle,
.cpp-handle {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* X-style action hover colors */
.pc-comment:hover { color: #1d9bf0; }
.pc-repost:hover  { color: #00ba7c; }
.pc-like:hover    { color: #f91880; }
.pc-share:hover   { color: var(--accent); }

/* Banner image upload tile */
.banner-swatch-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  font-size: 15px;
}
.banner-swatch-upload:hover { border-color: var(--accent); }

/* Post pinned above its comments (post-detail view) */
#commentsPostPreview:empty { display: none; }
#commentsPostPreview {
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.cpp-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
}
.cpp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
  flex-shrink: 0;
}
.cpp-name { font-weight: 800; font-size: 14px; color: var(--text); }
.cpp-time { font-size: 12px; color: var(--muted); }
.cpp-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cpp-media {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
  margin-top: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
}

/* ═══ GUEST MODE (browse without an account) ════════════════════ */
.guest-cta {
  position: fixed;
  right: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 2500;
  width: auto;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--gold-glow-sm);
  transition: transform 0.15s var(--ease-out);
}
.guest-cta:hover { transform: translateY(-1px); }
.guest-cta:active { transform: scale(0.97); }
body:not(.guest-mode) .guest-cta { display: none; }

/* Guests see the whole page, including the composer and stories — the
   login prompt appears only when they actually try to write something. */
body.guest-mode .timeline-composer textarea { cursor: pointer; }

/* "Continue browsing" close button on the auth overlay */
.auth-browse-btn {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 10001;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.auth-browse-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

/* ═══════════════════════════════════════════════════════════════
   PERSONALIZATION LAYER
   Glass surfaces, profile effects, and motion controls. Everything
   here is opt-in per user — none of it is on by default.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --glass-blur: 0px;
  --glass-alpha: 1;
}
body.glass-subtle { --glass-blur: 14px; --glass-alpha: 0.62; }
body.glass-strong { --glass-blur: 26px; --glass-alpha: 0.38; }

/* Frosted surfaces. color-mix keeps each surface's own hue, just
   translucent, so glass works with every theme rather than graying out. */
body[class*="glass-"] .topbar,
body[class*="glass-"] .bottom-nav,
body[class*="glass-"] .chat-footer .chat-input-pill,
body[class*="glass-"] .modal-box,
body[class*="glass-"] .settings-menu,
body[class*="glass-"] .social-topbar,
body[class*="glass-"] .post-compose-box,
body[class*="glass-"] .comments-box {
  background: color-mix(in srgb, var(--panel) calc(var(--glass-alpha) * 100%), transparent) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Futuristic edge: a faint accent hairline along the top of glass panels */
body[class*="glass-"] .topbar,
body[class*="glass-"] .social-topbar {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Browsers without backdrop-filter get a solid surface instead of an
   unreadable transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[class*="glass-"] .topbar,
  body[class*="glass-"] .bottom-nav,
  body[class*="glass-"] .modal-box,
  body[class*="glass-"] .settings-menu,
  body[class*="glass-"] .social-topbar {
    background: var(--panel) !important;
  }
}

/* ── Profile effects (animated overlays) ────────────────────────
   Sit above the banner, below the content, and never eat clicks. */
.profile-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.profile-fx::before,
.profile-fx::after {
  content: "";
  position: absolute;
  inset: -20%;
  will-change: transform, opacity;
}

/* Embers — warm motes drifting up */
.profile-fx-embers::before,
.profile-fx-embers::after {
  background-image:
    radial-gradient(2px 2px at 20% 80%, var(--accent) 40%, transparent 45%),
    radial-gradient(2px 2px at 70% 90%, var(--accent2) 40%, transparent 45%),
    radial-gradient(1.5px 1.5px at 45% 85%, var(--accent) 40%, transparent 45%),
    radial-gradient(1.5px 1.5px at 88% 75%, var(--accent2) 40%, transparent 45%);
  background-size: 340px 340px;
  opacity: 0.55;
  animation: fxRise 14s linear infinite;
}
.profile-fx-embers::after { animation-duration: 22s; animation-delay: -7s; opacity: 0.32; }

/* Sparkle — slow twinkling field */
.profile-fx-sparkle::before,
.profile-fx-sparkle::after {
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, #fff 45%, transparent 50%),
    radial-gradient(2px 2px at 62% 42%, #fff 45%, transparent 50%),
    radial-gradient(1.5px 1.5px at 82% 18%, #fff 45%, transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 68%, #fff 45%, transparent 50%);
  background-size: 260px 260px;
  opacity: 0.5;
  animation: fxTwinkle 5s ease-in-out infinite;
}
.profile-fx-sparkle::after { animation-delay: -2.5s; background-size: 190px 190px; opacity: 0.3; }

/* Snow — soft drift down */
.profile-fx-snow::before,
.profile-fx-snow::after {
  background-image:
    radial-gradient(2.5px 2.5px at 25% 15%, rgba(255,255,255,0.9) 45%, transparent 50%),
    radial-gradient(2px 2px at 68% 30%, rgba(255,255,255,0.8) 45%, transparent 50%),
    radial-gradient(3px 3px at 45% 8%, rgba(255,255,255,0.75) 45%, transparent 50%);
  background-size: 300px 300px;
  opacity: 0.6;
  animation: fxFall 16s linear infinite;
}
.profile-fx-snow::after { animation-duration: 26s; animation-delay: -9s; opacity: 0.35; }

/* Aurora — slow drifting light curtains */
.profile-fx-aurora::before {
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 75% 35%, color-mix(in srgb, var(--accent2) 24%, transparent) 0%, transparent 60%);
  filter: blur(24px);
  animation: fxDrift 18s ease-in-out infinite alternate;
}

/* Grid — futuristic perspective scan */
.profile-fx-grid::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.5;
  animation: fxScan 9s linear infinite;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

@keyframes fxRise    { to { transform: translate3d(0, -340px, 0); } }
@keyframes fxFall    { to { transform: translate3d(0, 300px, 0); } }
@keyframes fxScan    { to { transform: translate3d(0, 46px, 0); } }
@keyframes fxTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }
@keyframes fxDrift {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 2%, 0) scale(1.12); }
}

/* ── Name effects ───────────────────────────────────────────── */
.name-fx-glow {
  text-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.name-fx-pulse { animation: fxNamePulse 2.6s ease-in-out infinite; }
@keyframes fxNamePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* ── Motion intensity ───────────────────────────────────────────
   "off" kills all motion; the OS-level reduced-motion preference is
   honored separately in style.css and always wins. */
body.motion-off *,
body.motion-off *::before,
body.motion-off *::after {
  animation: none !important;
  transition: none !important;
}
body.motion-off .profile-fx { display: none; }

@media (prefers-reduced-motion: reduce) {
  .profile-fx { display: none; }
  .name-fx-pulse { animation: none; }
}

/* ── Personalization controls (settings) ───────────────────────── */
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px;
  padding: 4px 2px;
}

.theme-preset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  width: 100%;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.theme-preset:hover { border-color: rgba(255, 255, 255, 0.32); }
.theme-preset:active { transform: scale(0.97); }
.theme-preset.active { border-color: var(--accent); }

/* Miniature of the theme: surface block with its accent bar */
.theme-preset-swatch {
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 5px;
  overflow: hidden;
}
.theme-preset-bar {
  height: 6px;
  width: 62%;
  border-radius: 999px;
}
.theme-preset-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.01em;
}
.theme-preset.active .theme-preset-name { color: var(--accent); }

/* Segmented controls */
.seg-row {
  display: flex;
  gap: 6px;
  padding: 4px 2px;
}
.seg-row-wrap { flex-wrap: wrap; }

.seg-btn {
  flex: 1 1 auto;
  min-width: 62px;
  width: auto;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out),
              background 0.15s var(--ease-out), transform 0.12s var(--ease-out);
}
.seg-btn:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.seg-btn:active { transform: scale(0.96); }
.seg-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ═══ WELCOME HERO (first login) ═══════════════════════════════
   Full-bleed cinematic step shown once, after signup. Content is
   visible by default — the animations only enhance the entrance, so
   nothing is hidden if they never run (hidden tabs, headless render). */
.onboarding-box.ob-box-hero {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: none;
  border-radius: 0;
  padding: 0;
  background: radial-gradient(ellipse 90vw 70vh at 50% 42%,
                color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%),
              linear-gradient(180deg, #050505 0%, #000 100%) !important;
  overflow: hidden;
}
.onboarding-box.ob-box-hero .ob-dots,
.onboarding-box.ob-box-hero > .lightbox-close { display: none; }

.ob-hero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 22px calc(40px + env(safe-area-inset-bottom, 0px));
  gap: 0;
}

/* ── Orbital mark ── */
.ob-hero-stage {
  position: relative;
  width: min(240px, 56vw);
  height: min(240px, 56vw);
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  flex-shrink: 0;
}
.ob-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  opacity: 0.85;
}
.ob-orbit-2 { inset: 13%; border-style: dashed; opacity: 0.5; }
.ob-orbit-3 { inset: 26%; opacity: 0.32; }

.ob-core {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent2, #f0891a), var(--accent));
  box-shadow: 0 0 44px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
.ob-core-glyph {
  position: relative;
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  z-index: 1;
}

/* ── Type ── */
.ob-hero-title {
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 14px;
  max-width: 15ch;
}
.ob-hero-sub {
  font-size: clamp(0.95rem, 3.6vw, 1.12rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 34ch;
  margin: 0 0 22px;
}

.ob-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}
.ob-chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}

.ob-hero-btn {
  width: auto;
  min-width: 220px;
  padding: 15px 34px;
  font-size: 15.5px;
}
.ob-skip-btn {
  margin-top: 14px;
  width: auto;
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s var(--ease-out);
}
.ob-skip-btn:hover { color: var(--text); }

/* ── Entrance: enhances an already-visible layout ── */
.ob-hero.ob-play .ob-hero-stage { animation: obPop 0.75s var(--ease-out) backwards; }
.ob-hero.ob-play .ob-hero-title { animation: obRise 0.65s var(--ease-out) 0.14s backwards; }
.ob-hero.ob-play .ob-hero-sub   { animation: obRise 0.65s var(--ease-out) 0.24s backwards; }
.ob-hero.ob-play .ob-hero-chips { animation: obRise 0.65s var(--ease-out) 0.34s backwards; }
.ob-hero.ob-play .ob-hero-btn   { animation: obRise 0.65s var(--ease-out) 0.44s backwards; }
.ob-hero.ob-play .ob-skip-btn   { animation: obRise 0.65s var(--ease-out) 0.52s backwards; }

/* Ambient motion, transform/opacity only */
.ob-hero.ob-play .ob-orbit-1 { animation: obSpin 26s linear infinite; }
.ob-hero.ob-play .ob-orbit-2 { animation: obSpin 18s linear infinite reverse; }
.ob-hero.ob-play .ob-orbit-3 { animation: obSpin 12s linear infinite; }
.ob-hero.ob-play .ob-core    { animation: obBreathe 4.5s ease-in-out infinite; }

@keyframes obPop  { from { opacity: 0; transform: scale(0.86); } }
@keyframes obRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes obSpin { to { transform: rotate(360deg); } }
@keyframes obBreathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.07); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-hero.ob-play .ob-hero-stage,
  .ob-hero.ob-play .ob-hero-title,
  .ob-hero.ob-play .ob-hero-sub,
  .ob-hero.ob-play .ob-hero-chips,
  .ob-hero.ob-play .ob-hero-btn,
  .ob-hero.ob-play .ob-skip-btn { animation: obFade 0.3s ease-out backwards; }
  .ob-hero.ob-play .ob-orbit-1,
  .ob-hero.ob-play .ob-orbit-2,
  .ob-hero.ob-play .ob-orbit-3,
  .ob-hero.ob-play .ob-core { animation: none; }
  @keyframes obFade { from { opacity: 0; } }
}

@media (min-height: 760px) {
  .ob-hero-stage { width: min(300px, 60vw); height: min(300px, 60vw); }
}

/* ═══ SEO INTRO (no-JS / crawler view) ═════════════════════════
   Only ever rendered inside <noscript>, so it never reaches users
   who have the app running. Styled so a no-JS visitor gets a
   readable page rather than raw unstyled text. */
.seo-intro {
  max-width: 68ch;
  margin: 0 auto;
  padding: 48px 22px;
  color: var(--text);
  line-height: 1.6;
}
.seo-intro h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 18px;
}
.seo-intro h2 {
  font-size: 1.15rem;
  margin: 28px 0 8px;
  color: var(--accent);
}
.seo-intro p { margin-bottom: 12px; color: var(--muted); text-wrap: pretty; }
.seo-intro a { color: var(--accent); }

/* ═══ COMMENTS / POST DETAIL ════════════════════════════════════
   The Post and delete buttons never set a width, so they inherited
   `button { width: 100% }` from the legacy reset in style.css and
   stretched across the row. */
.comments-box {
  width: min(94vw, 460px);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 0;
}

/* Post preview and comments scroll together, like a post-detail page;
   only the composer stays pinned. */
.comments-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px 10px;
  padding: 0 4px;
}
.comments-list {
  flex: none;
  overflow: visible;
  margin-bottom: 0;
  gap: 14px;
}
.comments-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  padding: 6px 0 8px;
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}
/* Leave room for the floating close button */
#commentsPostPreview:not(:empty) { padding-right: 34px; }

.comment-row { align-items: flex-start; gap: 10px; }
.comment-avatar { width: 32px; height: 32px; }
.comment-body { min-width: 0; word-break: break-word; }
.comment-name { display: inline; }
.comment-text { display: inline; color: var(--text); }

/* Icon-sized, not full-width */
.comment-delete {
  width: auto;
  min-width: 0;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.comment-delete:hover { opacity: 1; color: #ff6b6b; }

.comments-input-row {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}
.comments-input-row input { min-width: 0; }
.comments-input-row button {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.12s var(--ease-out), opacity 0.15s var(--ease-out);
}
.comments-input-row button:hover { opacity: 0.92; }
.comments-input-row button:active { transform: scale(0.96); }

@media (max-width: 520px) {
  .comments-box { width: 100%; max-height: 88vh; }
}
.comment-time {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
}