/* ===== CSS Variables & Reset ===== */
:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;

  --green-400: #a3e635;
  --green-500: #84cc16;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --bg: #ffffff;
  --bg-secondary: var(--gray-50);
  --bg-card: #ffffff;
  --text: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);
  --border: var(--gray-200);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.2s ease;
}

[data-theme="dark"] {
  --bg: #0a1628;
  --bg-secondary: #111d33;
  --bg-card: #152238;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: #1e3a5f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100dvh;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== Impersonation banner =====
   Sticky top-of-viewport banner shown when an admin is impersonating
   a customer. NOT inside .app-shell so it spans the full viewport
   width — the impersonation context applies to whatever the admin is
   looking at, not just the centered Qbit column.

   Amber/orange palette: high enough contrast to never be missed, but
   not the panic-red of an error — this is debugging, not a fire. */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 9999;             /* above the app-header sticky too */
  background: #f59e0b;       /* amber-500 */
  color: #1a1a1a;            /* dark text on amber for contrast */
  border-bottom: 2px solid #b45309;  /* amber-700 — slight depth */
  box-shadow: 0 2px 8px rgba(180, 83, 9, .25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.impersonation-banner[hidden] { display: none; }

.impersonation-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.impersonation-banner-icon {
  font-size: 22px;
  flex: 0 0 auto;
}

.impersonation-banner-text {
  flex: 1 1 auto;
  min-width: 0;             /* prevents flex overflow on long emails */
  font-size: 13px;
  line-height: 1.45;
}
.impersonation-banner-line1 {
  font-weight: 600;
}
.impersonation-banner-line1 strong { font-weight: 700; }
.impersonation-banner-line2 {
  font-size: 12px;
  opacity: .85;
  font-variant-numeric: tabular-nums; /* countdown digits don't shimmy */
}

.impersonation-end-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #f59e0b;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, transform .08s;
  white-space: nowrap;
}
.impersonation-end-btn:hover {
  background: #2a2a2a;
}
.impersonation-end-btn:active {
  transform: scale(.97);
}

/* Push the rest of the page down a touch when the banner is showing.
   Without this, sticky headers can underlap the banner on certain
   scroll positions. The class is toggled on body by checkAndRender(). */
body.has-impersonation-banner .app-header {
  /* No layout change needed; the sticky banner sits ABOVE the header
     because of higher z-index. Reserved class for any future tweaks
     (e.g. adjusting top offsets on other sticky elements). */
}

/* Mobile — narrower padding, line2 wraps below line1 naturally via
   normal flow because of flex-direction on inner. */
@media (max-width: 640px) {
  .impersonation-banner-inner {
    padding: 8px 12px;
    gap: 10px;
  }
  .impersonation-banner-icon { font-size: 18px; }
  .impersonation-banner-text { font-size: 12px; }
  .impersonation-banner-line2 { font-size: 11px; }
  .impersonation-end-btn { padding: 6px 10px; font-size: 12px; }
}

/* ===== App Shell ===== */
.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
}

/* ===== Header ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

/* Deep-link landing buffer — when navigate() scrolls to a section via
   data-scroll-to (e.g. checklist items linking to Settings → Profile),
   the sticky .app-header above would otherwise cover the section's
   title and first input. scroll-margin-top tells the browser to leave
   ~80px of breathing room above the target so it lands cleanly under
   the header instead of behind it. */
.settings-group[id],
#auto-replenish-section,
#qbit-answer {
  scroll-margin-top: 80px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.menu-btn:hover {
  background: var(--bg-secondary);
}

.menu-btn svg {
  width: 24px;
  height: 24px;
}

.header-logo {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-share-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
}

.header-share-btn:hover {
  color: var(--blue-500);
  background: var(--bg-secondary);
}

/* Header Sign In button — only visible when signed out (display toggled
   in JS). Pill-shaped to look distinct from the other header icons. */
.header-signin-btn {
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500, #8b5cf6));
  color: #ffffff;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(59,130,246,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.header-signin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.header-signin-btn:active {
  transform: translateY(0);
  opacity: 0.9;
}
/* Signed-in state — same button, but Sign OUT shouldn't shout the way
   Sign IN does. Subtle gray pill with a soft border, no shadow, no
   gradient. Still tappable, just intentionally less prominent so it
   doesn't compete with primary actions on the page. */
.header-signin-btn.is-signout {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 600;
}
.header-signin-btn.is-signout:hover {
  background: var(--border);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

/* Profile menu — wraps the avatar button + the dropdown panel below it.
   Position: relative anchors the absolutely-positioned dropdown to it.
   Click-outside detection lives in JS (ProfileMenu.bindOutsideClose). */
.profile-menu-wrap {
  position: relative;
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-400), var(--purple-400));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.header-avatar:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(59, 130, 246, .35); }
.header-avatar:active { transform: scale(0.96); }
.header-avatar:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.header-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  position: absolute; inset: 0;
}

/* Dropdown panel anchored under the avatar. Right-aligned so it doesn't
   overflow the viewport on narrow screens. */
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--bg-card, var(--bg));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.10);
  padding: 8px;
  z-index: 250;
  animation: profile-menu-in .14s ease-out;
}
@keyframes profile-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.profile-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 8px;
}
.profile-menu-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-400), var(--purple-400));
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.4rem;
  overflow: visible;
  flex-shrink: 0;
}
.profile-menu-avatar:hover .profile-menu-avatar-camera { transform: scale(1.08); }
.profile-menu-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  position: absolute; inset: 0;
}
.profile-menu-avatar-initial {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
}
.profile-menu-avatar-camera {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-card, var(--bg));
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.profile-menu-name-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-menu-name {
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.profile-menu-email {
  font-size: 0.78rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}

.profile-menu-divider {
  height: 1px; background: var(--border); margin: 6px 4px;
}

.profile-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none; border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit; font-size: 0.92rem;
  text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.profile-menu-item:hover { background: var(--bg-secondary, rgba(0,0,0,.04)); }
.profile-menu-item svg { color: var(--text-muted); flex-shrink: 0; }
.profile-menu-item:hover svg { color: var(--text); }
.profile-menu-item-danger { color: #b91c1c; }
.profile-menu-item-danger svg { color: #b91c1c; }
.profile-menu-item-danger:hover { background: #fee2e2; color: #991b1b; }
.profile-menu-item-danger:hover svg { color: #991b1b; }
[data-theme="dark"] .profile-menu-item-danger { color: #fca5a5; }
[data-theme="dark"] .profile-menu-item-danger svg { color: #fca5a5; }
[data-theme="dark"] .profile-menu-item-danger:hover { background: rgba(220,38,38,.18); color: #fecaca; }
[data-theme="dark"] .profile-menu-item-danger:hover svg { color: #fecaca; }

.profile-menu-badge {
  margin-left: auto;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-400));
  color: #fff;
  padding: 2px 8px; border-radius: 10px;
}

/* ===== Knowledge Base stub page ===== */
.kb-stub-card {
  max-width: 640px; margin: 24px auto;
  padding: 36px 28px;
  background: var(--bg-card, var(--bg));
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
}
.kb-stub-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(168,85,247,.12));
  color: var(--blue-500);
}
.kb-stub-card h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; }
.kb-stub-lede { margin: 0 auto 24px; font-size: 0.95rem; line-height: 1.55; color: var(--text-secondary); max-width: 520px; }
.kb-stub-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; text-align: left; }
.kb-stub-feature {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: var(--bg-secondary, rgba(0,0,0,.03));
  border-radius: 12px;
}
.kb-stub-feature strong { font-size: 0.88rem; }
.kb-stub-feature span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.kb-stub-foot { margin-top: 8px; font-size: 0.82rem; }
@media (max-width: 600px) {
  .kb-stub-features { grid-template-columns: 1fr; }
}

/* ===== Slide-out Menu ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--bg);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.slide-menu.open {
  transform: translateX(0);
}

.menu-header {
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.menu-header:hover {
  background: rgba(59, 130, 246, 0.06);
}

.menu-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--blue-200);
}

[data-theme="dark"] .menu-avatar {
  box-shadow: 0 0 0 3px var(--blue-700);
}

.menu-user-info h3 {
  font-size: 1rem;
  font-weight: 600;
}

.menu-user-info p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.menu-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.menu-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background var(--transition);
  cursor: pointer;
}

.menu-nav a:hover,
.menu-nav a.active {
  background: var(--bg-secondary);
}

.menu-nav a.active {
  color: var(--blue-500);
}

.menu-nav a svg {
  width: 22px;
  height: 22px;
  opacity: 0.7;
}

.menu-nav a.active svg {
  opacity: 1;
}

/* Sign-in CTA — only shown when signed out. Gradient highlight makes it
   the most obvious action for a new/returning unauthenticated user. */
.menu-signin-link {
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.12));
  color: var(--blue-500) !important;
  font-weight: 700 !important;
  margin: 8px 14px;
  border-radius: 10px;
  padding: 13px 18px !important;
  border: 1px solid rgba(59,130,246,0.25);
}
.menu-signin-link:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(139,92,246,0.20)) !important;
}
.menu-signin-link svg {
  opacity: 1 !important;
  color: var(--blue-500);
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 20px;
}

.menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* ===== Pages ===== */
.page {
  display: none;
  padding: 0 20px 100px;
  animation: fadeIn 0.25s ease;
}

.page.active {
  display: block;
}

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

/* ===== Home Page ===== */
.hero {
  text-align: center;
  padding: 32px 0 24px;
}

.hero-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 4px;
  position: relative;
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.3));
}

.speech-bubble {
  position: absolute;
  top: -4px;
  /* Anchor the bubble's LEFT edge just inside the avatar's right side
     (the bottom-left "tail" overlaps Qbit's cheek). The bubble then grows
     RIGHTWARD as content grows — so "Hi Maximilian!" extends out to the
     right instead of crawling leftward into Qbit's face. */
  left: calc(100% - 22px);
  right: auto;
  background: var(--green-400);
  color: #1a2e05;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px 12px 12px 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;     /* keep the greeting on one line */
  max-width: 160px;        /* safety net for very long names — won't break layout */
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-tagline {
  color: var(--blue-500);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.hero p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Add to Homescreen Banner */
.pwa-banner {
  background: linear-gradient(135deg, var(--blue-500), var(--purple-600));
  color: white;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.pwa-banner:hover {
  transform: scale(1.01);
}

.pwa-banner svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.pwa-banner-text {
  flex: 1;
}

.pwa-banner-text strong {
  display: block;
  font-size: 0.9rem;
}

.pwa-banner-text span {
  font-size: 0.78rem;
  opacity: 0.85;
}

.pwa-banner-close {
  background: none;
  border: none;
  color: white;
  opacity: 0.7;
  cursor: pointer;
  padding: 4px;
  font-size: 1.2rem;
  line-height: 1;
}

.pwa-banner-close:hover {
  opacity: 1;
}

/* Greeting Flow */
.greeting-flow {
  margin-bottom: 24px;
}

.greeting-flow h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.greeting-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

/* Setup Prompt */
.setup-prompt {
  margin-bottom: 16px;
}

.setup-prompt-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px dashed var(--blue-400);
  border-radius: var(--radius-sm);
  color: var(--blue-500);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.setup-prompt-link:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.14));
  transform: translateY(-1px);
}

.setup-prompt-link svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Category context panel — appears between greeting + search box when
   a Quick-Action card is clicked. Replaces the old "auto-fire a sample
   query" behavior with a guided descriptor of what Qbit can help with
   in that category. (Scott #31.) */
.category-context {
  margin: 0 auto 16px;
  max-width: 680px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.06));
  border: 1px solid rgba(59,130,246,0.20);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(59,130,246,0.06);
  text-align: left;
  animation: category-context-in .22s ease-out;
}
[data-theme="dark"] .category-context {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.10));
  border-color: rgba(59,130,246,0.35);
}
@keyframes category-context-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.category-context-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.category-context-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.category-context-title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.category-context-close {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.category-context-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
[data-theme="dark"] .category-context-close:hover {
  background: rgba(255,255,255,0.08);
}
.category-context-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.category-context-body b, .category-context-body strong { color: var(--text); }

/* "Or try this:" + suggested prompt — restructured (Scott #37):
   the caption is now a separate label sitting ABOVE the button, and the
   button gets a full-width row with the prompt allowed to wrap. Solves
   the ellipsis-truncation problem the inline-pill version had when
   prompts ran longer than ~50 characters. */
.category-context-try-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  /* gap removed (was 6px) — label sits flush against the prompt button
     below. Per Scott: prior spacing made the label feel detached. */
  gap: 0;
}
.category-context-try-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Tighten line-height so the label baseline sits closer to the button
     above it. Default 1.5 left ~6px of visual whitespace under the text;
     1.2 cuts it nearly in half. Combined with gap:0 this lands the label
     directly hugging the button — no daylight in between. */
  line-height: 1.2;
  margin-bottom: 4px;
}
.category-context-try {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .08s;
}
.category-context-try:hover {
  border-color: var(--blue-400);
  background: rgba(59,130,246,0.04);
}
.category-context-try:active { transform: scale(0.99); }
.category-context-try-prompt {
  flex: 1;
  /* Allow the prompt to wrap onto multiple lines if needed — no more
     ellipsis truncation. line-height kept tight for compact appearance. */
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}
.category-context-try-arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--blue-500);
  transition: transform .15s;
}
.category-context-try:hover .category-context-try-arrow {
  transform: translateX(3px);
}

/* Subtle "active" feedback on the card the user clicked, so they remember
   which category they activated. */
.action-card.is-active-category {
  outline: 2px solid var(--blue-400);
  outline-offset: -1px;
  background: rgba(59,130,246,0.04);
}

/* Search / Input Area */
.search-area {
  position: relative;
  margin-bottom: 28px;
}

.search-input {
  width: 100%;
  /* Left padding bumped from 20px → 52px to make room for the paperclip
     attach button absolutely-positioned on the left edge. Right padding
     unchanged — still clears the send button. */
  padding: 16px 52px 16px 52px;
  border: 2px solid var(--border);
  border-radius: 28px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.search-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.search-btn svg {
  width: 20px;
  height: 20px;
}

/* ===== Image attach button + thumbnail strip =====
   Paperclip button sits on the LEFT edge of the search bar (mirrors
   the send-button placement on the right). Subtle by default — it's
   a secondary affordance. Lights up on hover/focus to confirm it's
   interactive. */
.search-attach-btn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}
.search-attach-btn:hover,
.search-attach-btn:focus-visible {
  background: rgba(59, 130, 246, 0.10);
  color: var(--blue-500);
  outline: none;
}
.search-attach-btn svg {
  width: 18px;
  height: 18px;
}

/* The attached-image strip sits ABOVE the search bar — a row of small
   thumbnails with X buttons for removal. Hidden by default (the
   [hidden] attribute does the work; this just makes the visible state
   look right). */
.search-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.search-attachment-chip {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.search-attachment-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition);
}
.search-attachment-remove:hover {
  background: rgba(220, 38, 38, 0.9); /* red-600 */
}

/* ===== Chat page (page-chat) =====
   Immersive full-viewport conversation experience. Sits as a fixed
   overlay between the global app-header and the viewport bottom.
   The global header (.app-header) stays visible above; the global
   page-trademark footer is hidden behind this overlay (intentional —
   chat is a focused experience, no marketing chrome).

   Why position: fixed? The earlier attempt used `min-height: calc(...)`
   in normal flow and ran into two problems we kept fighting:
     (1) The chat-page-header tried `position: sticky; top: 0`, which
         collided with the global app-header (also sticky at top:0)
         and hid behind it (lower z-index).
     (2) The chat-input-area used `position: sticky; bottom: 0`,
         but sticky's contract is "stop sticking when the parent's
         bottom edge enters view." The global trademark footer below
         the chat page yanked the parent bottom into view as the
         user scrolled, so the input would un-stick and float
         mid-page.

   Fixing the parent to the viewport (top: 64px to clear the global
   header, bottom: 0) gives the inner flex column DETERMINISTIC
   dimensions. Thread scrolls inside a known-size container — no
   sticky tricks needed, no flex-basis-auto trap from prior rounds. */
#page-chat.active {
  display: flex !important;       /* override default .page block */
  flex-direction: column;
  position: fixed;
  /* 64px clearance matches the visible height of .app-header
     (12px top padding + ~40px content + 12px bottom padding). */
  top: 64px;
  /* Lift the overlay's bottom 40px so the global page-trademark
     footer (pinned via :has() rule below) sits visibly beneath
     the chat surface. Without the lift, the trademark would
     overlap the bottom of the input bar. */
  bottom: 40px;
  /* Match the .app-shell column width (480px centered) so the
     chat visually aligns with the global Qbit header above it.
     The header lives inside .app-shell which is max-width:480px;
     making the chat overlay the same width keeps every divider
     line + bg edge in lockstep across the page transition.
     If the .app-shell width ever changes (e.g. a wider desktop
     redesign), update this max-width to match. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 0;
  margin: 0;
  background: var(--bg);
  z-index: 5;                     /* under app-header (z:100), above body */
}

/* Pin the global trademark footer to the viewport bottom WHILE THE
   CHAT PAGE IS ACTIVE. On every other page the trademark sits at
   the bottom of the scrolled content (its natural document-flow
   position); only the chat page — which uses a fixed-position
   overlay — needs the trademark to be force-pinned so it shows
   below the overlay's bottom edge. :has() lets us scope this
   without touching the trademark's CSS for other pages.
   Width matches the .app-shell column (480px centered) so the
   trademark text is below the centered chat overlay, not floating
   off to the side. */
body:has(#page-chat.active) .page-trademark {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 6;                     /* above chat overlay (z:5) */
  background: var(--bg);
  padding: 8px 16px 12px;
}
/* Hide page-footer-links on the chat page — the trademark is
   the only piece we need to keep visible; the Privacy/Terms/About
   links would crowd the small bottom strip. */
body:has(#page-chat.active) .page-footer-links {
  display: none;
}

.chat-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  /* No max-width — full viewport. Each section below centers its
     own content at 760px via calc-padding. */
  margin: 0;
  min-height: 0;                  /* allow children to shrink for scroll */
  overflow: hidden;               /* outer wrapper; thread handles its own scroll */
}

/* Sub-header inside the chat page. No sticky needed — the parent
   #page-chat is itself fixed, so this naturally sits at the top.
   The whole chat overlay is constrained to .app-shell's 480px
   width, so simple padding suffices (no calc-centering needed). */
.chat-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;                 /* never crushed by the thread below */
}
.chat-page-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.chat-back-btn,
.chat-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chat-back-btn:hover,
.chat-new-btn:hover,
.chat-back-btn:focus-visible,
.chat-new-btn:focus-visible {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue-500);
  border-color: var(--blue-300, var(--border));
  outline: none;
}
.chat-back-label,
.chat-new-label {
  /* Hide labels on narrow viewports — keep just the icons to save
     horizontal space on phones. */
}
@media (max-width: 480px) {
  .chat-back-label,
  .chat-new-label {
    display: none;
  }
  .chat-back-btn,
  .chat-new-btn {
    padding: 8px 10px;
  }
}

/* Thread — scrolls inside the chat-page flex column. The parent
   #page-chat is position:fixed with definite top + bottom, so the
   flex layout has DETERMINISTIC available space and `flex: 1 1 0
   + min-height: 0` lets the thread shrink correctly when content
   overflows.
   --
   Centering pattern: thread is FULL WIDTH so the scrollbar sits at
   the right edge of the viewport (where users expect it on chat
   apps). Inner turns are centered with `align-items: center` and
   `max-width: 760px` on each .qbit-turn (see further down). This
   way long-line wrapping looks like a chat-app reading column,
   not a banner stretched edge-to-edge.
   --
   overflow-y:scroll (not auto) so the scrollbar gutter is always
   visible — macOS hides auto-mode bars until hover. */
.chat-thread {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* don't leak wheel scroll out to body */
  display: flex;
  flex-direction: column;
  align-items: center;            /* center inner .qbit-turn cards */
  gap: 18px;
  padding: 18px 16px;
  background: var(--bg);

  /* Custom scrollbar styling — match the rest of the brand. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Each turn (Q + A bubble pair) is centered in the wide thread at
   a comfortable reading width. Width:100% lets it shrink on mobile;
   max-width caps it at 760px on desktop. */
.chat-thread .qbit-turn {
  width: 100%;
  max-width: 760px;
}
.chat-thread::-webkit-scrollbar {
  width: 8px;
}
.chat-thread::-webkit-scrollbar-track {
  background: transparent;
}
.chat-thread::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.chat-thread::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Bottom input bar. Sits at the bottom of the flex column —
   no sticky / fixed needed since the parent is itself fixed and
   the column has bounded height. flex-shrink: 0 keeps it from
   collapsing under a long thread. */
.chat-input-area {
  flex-shrink: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 10px 14px env(safe-area-inset-bottom, 10px);
  /* Subtle top shadow so the input visually separates from
     scrolled-up content above. */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chat-input-row {
  position: relative;
  display: flex;
  align-items: center;
}
.chat-attach-btn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}
.chat-attach-btn:hover,
.chat-attach-btn:focus-visible {
  background: rgba(59, 130, 246, 0.10);
  color: var(--blue-500);
  outline: none;
}
.chat-attach-btn svg {
  width: 18px;
  height: 18px;
}
.chat-input {
  width: 100%;
  padding: 14px 50px 14px 50px;
  border: 2px solid var(--border);
  border-radius: 28px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.chat-input::placeholder {
  color: var(--text-muted);
}
.chat-input:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.chat-send-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.chat-send-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* A single turn = user's question bubble + Qbit's answer bubble. The
   visual distinction between the two is subtle but consistent: the
   question is right-aligned with a tinted background, the answer is
   left-aligned with no background (lets it feel like Qbit "speaking"). */
.qbit-turn {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qbit-turn-question {
  align-self: flex-end;
  max-width: 85%;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(139, 92, 246, 0.10));
  border: 1px solid rgba(59, 130, 246, 0.20);
  border-radius: 14px 14px 4px 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word;
}
.qbit-turn-question-text {
  /* nothing extra; just gives JS a stable target for text content */
}

/* Image thumbnails inside a question bubble (multimodal turns). Small,
   rounded, capped so a 4-image attachment doesn't dominate the bubble. */
.qbit-turn-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.qbit-turn-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.qbit-turn-answer {
  align-self: flex-start;
  max-width: 92%;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  /* No background — Qbit "speaks" plainly to the user. */
}
.qbit-turn-answer p {
  margin: 0 0 10px 0;
}
.qbit-turn-answer p:last-child {
  margin-bottom: 0;
}
.qbit-turn-answer code {
  background: var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* Markdown headings inside an answer bubble. The formatter maps
   markdown # → <h2>, ## → <h3>, ### → <h4> (skipping h1 since the
   panel header is already the page-level heading). Sized to feel
   like section labels within Qbit's reply, not big banner-style
   titles — answers shouldn't look louder than the question above. */
.qbit-turn-answer h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 14px 0 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.qbit-turn-answer h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 12px 0 4px;
  color: var(--text);
}
.qbit-turn-answer h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qbit-turn-answer h2:first-child,
.qbit-turn-answer h3:first-child,
.qbit-turn-answer h4:first-child {
  margin-top: 0;
}

/* Markdown lists. Tight indent on the left so they don't wrap
   awkwardly inside the bubble's max-width. */
.qbit-turn-answer ul,
.qbit-turn-answer ol {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.qbit-turn-answer li {
  margin: 3px 0;
  line-height: 1.5;
}
.qbit-turn-answer ul ul,
.qbit-turn-answer ol ol,
.qbit-turn-answer ul ol,
.qbit-turn-answer ol ul {
  margin: 4px 0;
}

/* Horizontal rule — section divider for multi-day itineraries etc.
   Subtle, not a thick page-break. */
.qbit-turn-answer hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
  height: 0;
}

/* Markdown links — Qbit is now instructed to drop links to official
   websites whenever it mentions a real place or business. Style them
   so they're obviously clickable without screaming for attention. */
.qbit-turn-answer a {
  color: var(--blue-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
  transition: color var(--transition);
}
.qbit-turn-answer a:hover,
.qbit-turn-answer a:focus-visible {
  color: var(--purple-500);
  text-decoration-thickness: 2px;
  outline: none;
}

/* Markdown tables — typically used by Qbit for label/value pairs in
   travel itineraries, comparison rows, etc. Compact, readable, and
   tucked inside the answer bubble's max-width without overflowing. */
.qbit-md-table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.92rem;
  width: 100%;
}
.qbit-md-table th,
.qbit-md-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  /* Wrap long content gracefully — DALL-E URL fallbacks and
     restaurant addresses can be long. */
  word-break: break-word;
}
.qbit-md-table th {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(59, 130, 246, 0.04);
  border-bottom: 2px solid var(--border);
}
.qbit-md-table tr:last-child td {
  border-bottom: none;
}
/* When the model produces a label/value table (empty header row,
   first column = bold labels, second column = values), give the
   first column a hint of weight so it reads as a label. */
.qbit-md-table tbody td:first-child {
  font-weight: 600;
  white-space: nowrap;
  padding-right: 14px;
}
.qbit-turn-loading {
  /* While we're waiting for the API, the answer bubble holds the
     thinking spinner. No extra styling needed — the .qbit-thinking
     animation does the visual work. */
}

/* ===== Reply area =====
   Persistent follow-up input pinned at the bottom of the panel. Has
   its own paperclip + thumbnail strip (paired to replyAttacher in JS).
   The send button is the same purple gradient as the top search bar's
   send button so users feel like the controls match. */
.qbit-reply-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  background: var(--bg);
}
.qbit-reply-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
/* Reply chips reuse the .search-attachment-chip styling — same DOM
   shape, same look. The factory in app.js renders both with the
   same template. */

.qbit-reply-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.qbit-reply-attach-btn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}
.qbit-reply-attach-btn:hover,
.qbit-reply-attach-btn:focus-visible {
  background: rgba(59, 130, 246, 0.10);
  color: var(--blue-500);
  outline: none;
}
.qbit-reply-attach-btn svg {
  width: 16px;
  height: 16px;
}

.qbit-reply-input {
  width: 100%;
  padding: 12px 48px 12px 46px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.qbit-reply-input::placeholder {
  color: var(--text-muted);
}
.qbit-reply-input:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.qbit-reply-send {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.qbit-reply-send:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);
}
.qbit-reply-send svg {
  width: 16px;
  height: 16px;
}

/* ===== "Qbit is thinking…" indicator =====
   Branded as walking paw prints — three paws that fade in →
   hold → fade out in sequence, giving the sense of Qbit
   padding up to deliver an answer. On-brand and instantly
   recognizable (matches Scott's paw motif used elsewhere). */
.qbit-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.qbit-thinking em {
  font-style: italic;
  font-size: 0.92em;
}

/* Container for the 3 paws. Inline-flex so they sit in a row
   with consistent spacing; gap controls the gait length. */
.qbit-thinking-paws {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The paw SVG itself — sized small enough to live inside an
   answer bubble's spinner area, brand-blue color. The fill is
   currentColor so future skins (dark mode etc.) can re-tint via
   parent color. */
.qbit-paw {
  width: 16px;
  height: 16px;
  fill: var(--blue-500);
  opacity: 0;
  /* The walking animation — two paws visible at any moment,
     staggered to suggest forward motion. 1.4s cycle is long
     enough to feel deliberate, short enough that the user knows
     something's happening. */
  animation: qbit-paw-step 1.4s infinite ease-in-out;
  /* Slight downward bob during fade-out — feels like a footstep
     planting then lifting. */
  transform-origin: center;
}

/* Stagger: paw 2 starts 0.2s after paw 1, paw 3 another 0.2s
   later. Each completes its full 1.4s cycle, looping. With three
   paws and a 1.4s cycle staggered by 0.2s, there are always 1–2
   paws visible — never blank, never crowded. */
.qbit-thinking-paws .qbit-paw:nth-child(2) { animation-delay: 0.2s; }
.qbit-thinking-paws .qbit-paw:nth-child(3) { animation-delay: 0.4s; }

@keyframes qbit-paw-step {
  0%, 100% { opacity: 0;   transform: translateY(2px); }
  20%      { opacity: 1;   transform: translateY(0); }
  60%      { opacity: 1;   transform: translateY(0); }
  80%      { opacity: 0;   transform: translateY(2px); }
}

.qbit-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.action-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-align: center;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-400);
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 1.4rem;
}

.action-icon.search { background: rgba(59, 130, 246, 0.12); }
.action-icon.write { background: rgba(139, 92, 246, 0.12); }
.action-icon.calendar { background: rgba(236, 72, 153, 0.12); }
.action-icon.travel { background: rgba(16, 185, 129, 0.12); }
.action-icon.research { background: rgba(245, 158, 11, 0.12); }
.action-icon.homework { background: rgba(99, 102, 241, 0.12); }
.action-icon.games { background: rgba(239, 68, 68, 0.12); }
.action-icon.private { background: rgba(20, 184, 166, 0.12); }

.action-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.action-card p {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Share Card */
.share-card {
  background: linear-gradient(135deg, #eef2ff, #f0e6ff);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 28px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

[data-theme="dark"] .share-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border-color: var(--border);
}

.share-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.share-card-content {
  display: flex;
  align-items: center;
  /* Tighter horizontal gap (was 14px) to give the subtitle enough
     room to fit on one line at this card's typical desktop width.
     Combined with the smaller avatar below — Scott #14. */
  gap: 10px;
  /* Tighter gap between the text/avatar block and the gradient Share
     button below (Scott #13). 14px → 8px. */
  margin-bottom: 8px;
}

/* Natural block flow inside the text column — h3 directly above p with
   the small margin defined on .share-card-text h3. Earlier we forced a
   space-around spread to "center" the subtitle vertically, but that
   made the headline ↔ subtitle gap feel inflated. Scott prefers tight. */
.share-card-text {
  flex: 1;
  min-width: 0;
}

.share-qbit-wrapper {
  position: relative;
  flex-shrink: 0;
}

.share-card-avatar {
  /* Down from 80px so the subtitle fits on one line at desktop width
     without wrapping (Scott #14). 64px still reads as a clearly
     recognizable Qbit waving — verified visually. */
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.25));
}

.share-speech-bubble {
  position: absolute;
  /* Settled at -10px after a couple iterations: -8px crowded the headline
     once we tightened the text spacing, -18px floated way too high above
     the card. -10px sits the bubble just above the card's top edge with
     clear separation from the headline's band below.
     left value scales proportionally with the avatar (was 58px for the
     80px avatar, now 46px for the 64px avatar — same ~72% offset). */
  top: -10px;
  left: 46px;
  background: var(--green-400);
  color: #1a2e05;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 12px 12px 12px 2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.share-card-text h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.share-card-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.share-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: white;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity var(--transition);
}

.share-card:hover .share-card-btn {
  opacity: 0.9;
}

/* Menu Share Link */
.menu-share-link {
  color: var(--blue-500) !important;
}

/* ===== About Page ===== */
.about-hero {
  text-align: center;
  padding: 32px 0 24px;
}

.about-hero img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.3));
}

.about-hero h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.about-hero .subtitle {
  color: var(--blue-500);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.about-description {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.about-description p + p {
  margin-top: 12px;
}

.faq-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-left: 4px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color var(--transition);
}

.faq-item:hover {
  border-color: var(--blue-400);
}

.faq-question {
  padding: 16px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.faq-question::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.faq-item.open .faq-question::after {
  transform: rotate(-135deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 18px 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  max-height: 200px;
}

/* Inline contextual links inside FAQ answers (e.g. "buy credit packs in
   Settings ›" → deep-links to Settings → Ads section). Looks like a
   real text link with brand-colored underline + chevron, no external-
   link styling. The chevron is included in the HTML (›) so it animates
   with hover. */
.faq-inline-link {
  color: var(--blue-500);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--blue-400);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), padding-left var(--transition);
  white-space: nowrap;
}

.faq-inline-link:hover {
  color: var(--purple-500);
  border-bottom-color: var(--purple-500);
  border-bottom-style: solid;
}

.faq-inline-link:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Settings Page ===== */
.settings-header {
  padding: 28px 0 20px;
}

.settings-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
}

.settings-header p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-top: 4px;
}

.settings-group {
  margin-bottom: 24px;
}

/* Advanced Settings link at bottom of Settings page */
.settings-advanced-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  margin-top: 8px;
  margin-bottom: 24px;
  transition: border-color var(--transition), background var(--transition);
}

.settings-advanced-link:hover {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

[data-theme="dark"] .settings-advanced-link:hover {
  background: rgba(59, 130, 246, 0.08);
}

.settings-advanced-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-advanced-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
}

.settings-advanced-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.settings-advanced-chevron {
  font-size: 1.4rem;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
}

.settings-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 4px 10px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Save Changes button — auto-injected by JS into every settings-card
   that contains an editable input. Auto-save still happens on change;
   this button is purely the "I see that it saved" reassurance every
   user has been trained to expect from settings pages.

   Click → 1.5s green "Saved!" pulse → revert. Disabled during pulse. */
.settings-save-btn {
  display: block;
  width: calc(100% - 36px);
  margin: 0 18px 16px 18px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500, #8b5cf6));
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(59,130,246,0.20);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.25s ease;
}
.settings-save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,130,246,0.30);
}
.settings-save-btn:active:not(:disabled) {
  transform: translateY(0);
}
.settings-save-btn:disabled {
  cursor: default;
  opacity: 1; /* override default disabled fade — we manage state via .is-saved */
}
/* Confirmed state — bright green, no gradient. Communicates success. */
.settings-save-btn.is-saved {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 2px 10px rgba(34,197,94,0.30);
}

.setting-item {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
}

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

/* The auto-injected Save Changes button (.settings-save-btn) sits as the
   actual last-child inside .settings-card, which means the LAST visible
   .setting-item still gets a border-bottom — surfacing as a thin line
   right above the gradient button. Strip it explicitly. (Scott noticed.)
   :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+. */
.setting-item:has(+ .settings-save-btn) {
  border-bottom: none;
}

/* Genius Credits Balance row in the Ads section — gold gradient pill so
   the number reads as the *valuable* / treasure-like object on this card.
   Per Scott: gold (not brand blue) makes credits feel earned/owned in a
   way that brand blue doesn't. Updates live (no refresh) after a query
   or a purchase. */
.settings-credits-balance {
  /* Two-tone gold: deeper amber on the lower-right, lighter honey on the
     upper-left, brushed-metal feel without being garish. */
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #422006; /* dark espresso for max contrast on gold */
  font-weight: 800;
  font-size: 1.05rem;
  padding: 6px 16px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255,255,255,0.5);
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* Brief flash when the value changes — applied via .credits-flash class */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.settings-credits-balance.credits-flash {
  animation: credits-flash 0.7s ease-out 1;
}
@keyframes credits-flash {
  0%   { transform: scale(1);    box-shadow: 0 2px 8px rgba(245,158,11,0.30), inset 0 1px 0 rgba(255,255,255,0.5); }
  35%  { transform: scale(1.08); box-shadow: 0 4px 16px rgba(245,158,11,0.65), inset 0 1px 0 rgba(255,255,255,0.7); }
  100% { transform: scale(1);    box-shadow: 0 2px 8px rgba(245,158,11,0.30), inset 0 1px 0 rgba(255,255,255,0.5); }
}

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

.setting-label {
  font-size: 0.92rem;
  font-weight: 500;
}

.setting-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Lock badge shown next to a setting label when that setting is gated.
   Currently used by SafeSearch (locks until age-verified 18+). */
.setting-lock-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary);
  vertical-align: middle;
}
/* The class rule above has the same specificity as [hidden]{display:none}
   from the user-agent stylesheet — and author styles win on a tie, which
   means setting `badge.hidden = true` in JS had no visual effect. Result:
   the "🔒 Locked" badge persisted even after the user verified 18+ and
   the toggle was unlocked. Explicit override fixes it. (Scott bug.) */
.setting-lock-badge[hidden] { display: none; }
[data-theme="dark"] .setting-lock-badge {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

/* When a row is locked, dim the toggle and stop pointer events on it.
   The label/click handler still receives clicks so we can show the
   "why is this locked?" explanation. */
.setting-item.is-locked .toggle {
  opacity: 0.55;
  cursor: not-allowed;
}
.setting-item.is-locked .toggle input {
  pointer-events: none;
}

/* Inline link inside a setting description — used by the SafeSearch lock
   to jump to the My Birthday field. Underline + brand blue so it reads
   as a real link rather than body text. */
.setting-link {
  color: var(--blue-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.setting-link:hover { color: var(--blue-600); }

/* Pulse-highlight animation. Applied briefly to a target row when the
   user clicks "jump to birthday" — gives a clear visual cue about
   which field needs filling out. ~1.5s total, plays once. */
@keyframes pulse-attention {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
  40%  { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.pulse-attention {
  border-radius: 12px;
  animation: pulse-attention 1.5s ease-out 1;
}

.setting-input {
  width: 100%;
  max-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}

.setting-input:focus {
  border-color: var(--blue-400);
}

.setting-item-full {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.setting-input-full {
  max-width: none !important;
  width: 100%;
}

.location-inputs {
  display: flex;
  gap: 8px;
  width: 100%;
}

.location-input {
  max-width: none !important;
  min-width: 0;
  flex: 1;
  padding: 8px 10px !important;
  font-size: 0.85rem !important;
}

.setting-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  transition: border-color var(--transition);
}

.setting-textarea::placeholder {
  color: var(--text-muted);
}

.setting-textarea:focus {
  border-color: var(--blue-400);
}

/* Radio Buttons */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  padding: 4px 0;
}

.radio-option input[type="radio"] {
  display: none;
}

.radio-mark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s;
}

[data-theme="dark"] .radio-mark {
  border-color: var(--gray-600);
}

.radio-option input:checked ~ .radio-mark {
  border-color: var(--blue-500);
}

.radio-option input:checked ~ .radio-mark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-500);
}

.radio-text {
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ===== Credit Packs ===== */
.credit-packs {
  padding: 16px 18px 12px;
  border-top: 1px solid var(--border);
}

.credit-packs-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-600);
  margin-bottom: 14px;
  text-align: center;
}

[data-theme="dark"] .credit-packs-title {
  color: var(--blue-400);
}

.credit-pack-options {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.credit-pack-option {
  flex: 1;
  cursor: pointer;
}

.credit-pack-option input[type="radio"] {
  display: none;
}

.credit-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color var(--transition), background var(--transition);
  text-align: center;
  gap: 3px;
  position: relative;
}

.credit-pack-option input:checked + .credit-pack-card {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

[data-theme="dark"] .credit-pack-option input:checked + .credit-pack-card {
  background: rgba(59, 130, 246, 0.1);
}

.credit-pack-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-500);
  color: white;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.credit-pack-best .credit-pack-badge {
  background: #7C3AED;
}

.credit-pack-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.credit-pack-amount {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.credit-pack-total {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue-600);
}

[data-theme="dark"] .credit-pack-total {
  color: var(--blue-400);
}

.credit-usage-info {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  margin-bottom: 14px;
}

.credit-usage-row {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0;
  line-height: 1.35;
}

.credit-usage-row strong {
  color: var(--text);
}

/* Stripe Card Placeholder */
.stripe-placeholder {
  margin-bottom: 14px;
}

.stripe-placeholder-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.stripe-card-mock {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.stripe-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex: 1;
}

.stripe-field-full {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.stripe-field-row {
  display: flex;
}

.stripe-field-row .stripe-field {
  border-bottom: none;
}

.stripe-field-row .stripe-field:first-child {
  border-right: 1px solid var(--border);
}

.stripe-field-icon {
  font-size: 1rem;
}

.stripe-field-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: inherit;
}

.credit-go-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  letter-spacing: 0.3px;
}

.credit-go-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.credit-go-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* ===== Stripe Embedded Checkout ===== */
/* The container Stripe.js mounts its iframe into. Fixed min-height so the
   layout doesn't jump while Stripe initializes. */
.stripe-checkout-container {
  margin: 12px 0;
  min-height: 420px;
  border-radius: 10px;
  overflow: hidden;
}

/* Friendly placeholder shown until the user picks a pack and clicks Go */
.stripe-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin: 12px 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.06));
  border: 1px dashed var(--blue-400);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stripe-prompt-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stripe-prompt-text {
  line-height: 1.4;
}

/* Success card shown after a paid checkout */
.stripe-success {
  text-align: center;
  padding: 28px 20px 20px;
  margin: 12px 0;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(5, 150, 105, 0.3);
  border-radius: 14px;
  animation: stripe-success-in 0.4s ease-out;
}

@keyframes stripe-success-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.stripe-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, var(--blue-500));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.stripe-success-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.stripe-success-msg {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.stripe-success-close {
  padding: 10px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition);
}

.stripe-success-close:hover {
  background: var(--bg-secondary, var(--bg-card));
  border-color: var(--blue-400);
}

.credit-replenish-row {
  border-bottom: none !important;
  padding: 10px 0 !important;
}

.credit-disclaimer {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding-top: 4px;
}

.setting-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* ===== Unified dropdown arrow =====
   Browser-default <select> arrows have inconsistent placement across
   Chrome / Safari / Firefox and on dark themes the contrast often
   makes them disappear into the input border. Replace with a custom
   SVG chevron, positioned with explicit padding so the arrow has
   breathing room from the right edge AND the option text never runs
   into it.
   The mid-gray stroke (#7b8794) reads cleanly on both light and dark
   backgrounds — same approach we use for the support-row chevron. */
.setting-select,
.custom-social-platform {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 36px;            /* leave room for the chevron */
}
/* Hide the legacy IE/Edge-Legacy arrow if any browser still ships one. */
.setting-select::-ms-expand,
.custom-social-platform::-ms-expand {
  display: none;
}

/* Toggle Switch */
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.2s;
}

[data-theme="dark"] .toggle-slider {
  background: var(--gray-600);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--blue-500);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Important Dates */
.dates-hint {
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
  /* Removed border-bottom (Scott #16) — the italic styling + muted color
     already separate the hint from the data below, no divider needed.
     Matches the cleaner look of the other settings cards. */
}

.date-entry-birthday {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe, #e8e0ff);
  border: 2px solid #a78bfa;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #a78bfa;
}

[data-theme="dark"] .date-entry-birthday {
  background: linear-gradient(135deg, #2d1f3d, #1f2a4a, #2d1f3d);
  border-color: #a855f7;
}

.birthday-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.birthday-icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  flex-shrink: 0;
}

.birthday-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.birthday-label {
  font-size: 1rem;
  font-weight: 700;
  color: #7c3aed;
  letter-spacing: 0.01em;
}

[data-theme="dark"] .birthday-label {
  color: #c4b5fd;
}

.birthday-sub {
  font-size: 0.78rem;
  color: #6d28d9;
  opacity: 0.7;
}

[data-theme="dark"] .birthday-sub {
  color: #c4b5fd;
  opacity: 0.6;
}

.birthday-date-input {
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #a78bfa;
  background: rgba(255,255,255,0.7);
  color: var(--text);
  cursor: pointer;
}

[data-theme="dark"] .birthday-date-input {
  border-color: #a855f7;
  background: rgba(255,255,255,0.08);
}

.birthday-trigger {
  border: 1.5px solid #a78bfa !important;
  background: rgba(255,255,255,0.7) !important;
  min-width: 120px !important;
  max-width: 150px !important;
}

[data-theme="dark"] .birthday-trigger {
  border-color: #a855f7 !important;
  background: rgba(255,255,255,0.08) !important;
}

.dates-section {
  margin-top: 0;
}

.date-entry {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}

.date-entry:last-child {
  border-bottom: none;
}

.date-entry input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}

.date-entry input:focus {
  border-color: var(--blue-400);
}

.date-entry input[type="date"] {
  max-width: 160px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Date trigger button — replaces invisible date input when empty */
.date-trigger-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.date-overlay-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  font: inherit;
  color: transparent;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}

/* On Safari/iOS, expand the calendar picker indicator to cover the whole input */
.date-overlay-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  background: transparent;
}

.date-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 130px;
  max-width: 160px;
  white-space: nowrap;
  transition: border-color var(--transition);
}

/* When overlay input is hovered/focused, style the visible button */
.date-trigger-wrap:hover .date-trigger,
.date-overlay-input:focus + .date-trigger,
.date-overlay-input:focus ~ .date-trigger {
  border-color: var(--blue-400);
}

.date-trigger:hover,
.date-trigger:focus {
  border-color: var(--blue-400);
}

.date-trigger svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  flex-shrink: 0;
}

.date-trigger-value {
  color: var(--text);
}

.add-date-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: var(--blue-500);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  transition: background var(--transition);
}

.add-date-btn:hover {
  background: var(--bg-secondary);
}

/* ===== Custom Socials — "+ Add Another" rows =====
   Each user-added social link is a flex row: [platform select]
   [optional Other-name input][URL input][× remove]. The Other-name
   input is hidden by the `hidden` attribute when not in use, and
   the row layout naturally collapses to "select | url | ×" — no
   layout shift workaround needed.
   Each row has its OWN horizontal padding (instead of the list
   container) so the row's border-top spans the full card width
   and visually aligns with the .setting-item separators above it.
   Earlier version put padding on the list, which inset the borders
   and made them look truncated next to the edge-to-edge .setting-item
   borders — caught by Jimmy 2026-05-02. */
.custom-socials-list {
  display: flex;
  flex-direction: column;
}

.custom-social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}

.custom-social-platform {
  flex: 0 0 130px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
}
.custom-social-platform:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100, rgba(59,130,246,.15));
}

.custom-social-other-name {
  flex: 0 0 130px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}
.custom-social-other-name:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100, rgba(59,130,246,.15));
}
.custom-social-other-name[hidden] { display: none; }

.custom-social-url {
  flex: 1 1 auto;
  min-width: 0;             /* lets the input shrink instead of overflowing */
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}
.custom-social-url:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100, rgba(59,130,246,.15));
}

.custom-social-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.custom-social-remove:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.add-social-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: var(--blue-500);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  transition: background var(--transition);
}
.add-social-btn:hover { background: var(--bg-secondary); }

/* ===== Hardcoded socials — hide button =====
   Tiny × in the TOP-RIGHT corner of an EMPTY hardcoded social row,
   letting the user collapse fields they don't use. Hidden by default
   (the JS adds .has-hide-button when the URL is empty). When clicked,
   the row hides and the platform reappears as a "Restore X" option
   in the "+ Add Another" dropdown below.

   Position-absolute (anchored to the row, which is position: relative)
   instead of an inline flex item — keeps the × out of the input row's
   tab order visually and survives narrow-viewport flex-wrap (where an
   inline × ends up awkwardly stacked under the input).

   Visually subtle — we don't want to draw the eye away from the URL
   input itself. Becomes salient only on row hover. */
.setting-item-social {
  position: relative;
}
.setting-social-hide {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: none;             /* hidden by default; JS toggles via .has-hide-button */
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
  /* Sit above the input visually so a tap on the corner of an
     overlapping input still hits the × (matches modal-close pattern). */
  z-index: 1;
}
.setting-item-social.has-hide-button .setting-social-hide {
  display: flex;
}
.setting-item-social:hover .setting-social-hide {
  opacity: 1;
}
.setting-social-hide:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  opacity: 1;
}

/* Hide-row visibility — toggled by the JS .is-hidden class so we can
   re-show the row with a single removeClass when the user picks the
   platform from the Add Another dropdown. Don't use [hidden] because
   the .setting-item layout depends on display:flex which the [hidden]
   attribute would override with display:none. */
.setting-item-social.is-hidden {
  display: none !important;
}

/* Mobile — stack vertically so the URL input has room. The platform
   select + name input stay on one line; the URL goes below; the ×
   sits at the right of the name input row. */
@media (max-width: 540px) {
  .custom-social-row {
    flex-wrap: wrap;
  }
  .custom-social-platform { flex: 1 1 0; }
  .custom-social-url {
    order: 99;        /* pushes URL onto its own row */
    flex: 1 1 100%;
  }
  .custom-social-other-name { flex: 1 1 0; }
}

.remove-date-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.remove-date-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ===== Terms & Privacy Pages ===== */
.legal-page {
  padding-top: 32px;
}

.legal-page h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.legal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.legal-content h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--text);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}

.legal-content ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.legal-content li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 4px;
}

.legal-updated {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-style: italic;
}

.legal-content h3 {
  font-size: 0.96rem;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--text);
}

.legal-content p.legal-emphasis {
  background: var(--bg-secondary);
  border-left: 3px solid var(--blue-500);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  margin: 12px 0;
}

[data-theme="dark"] .legal-content p.legal-emphasis {
  background: rgba(59, 130, 246, 0.08);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.legal-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.78rem;
  background: var(--bg);
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.legal-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.legal-table td:not(:last-child) {
  border-right: 1px solid var(--border);
}

.legal-table th:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* ===== Share Modal ===== */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.share-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.share-modal {
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-modal-overlay.open .share-modal {
  transform: translateY(0);
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.share-modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.share-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 8px;
}

.share-modal-close:hover {
  background: var(--bg-secondary);
}

.share-modal-desc {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-bottom: 20px;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  font-family: inherit;
}

.share-option:hover {
  background: var(--bg-secondary);
  transform: translateY(-2px);
}

.share-option-icon {
  font-size: 1.6rem;
  line-height: 1;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gray-700);
}

/* ===== Safe Area (notch devices) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

/* =========================================
   INSTALL MODAL (Add to Home Screen)
   ========================================= */
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.install-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 40, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.install-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 22px;
  max-width: 440px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 24px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: auth-slide-up 0.32s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.install-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 50%;
  transition: background var(--transition);
}

.install-modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.install-modal-header {
  text-align: center;
  margin-bottom: 22px;
}

.install-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
}

.install-modal-header h2 {
  font-size: 1.28rem;
  margin: 0 0 4px;
  color: var(--text);
}

.install-modal-header p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Steps */
.install-step {
  display: flex;
  gap: 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg-secondary);
  border-radius: 12px;
  align-items: flex-start;
}

.install-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.install-step-content {
  flex: 1;
  min-width: 0;
}

.install-step-title {
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.install-step-title strong {
  font-weight: 700;
}

.install-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 5px;
  color: var(--blue-500);
  vertical-align: middle;
  margin: 0 2px;
}

[data-theme="dark"] .install-share-icon {
  color: var(--blue-400);
}

.install-step-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* Success note at bottom of iOS flow */
.install-success-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 11px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 14px;
  line-height: 1.4;
}

.install-success-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Done button */
.install-modal-done {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  background: var(--blue-500);
  color: white;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.install-modal-done:hover {
  background: var(--blue-600);
}

/* =========================================
   AUTH MODAL (Signup / Login)
   ========================================= */
/* ===== Password Modal =====
   Mirrors auth-modal styling for visual consistency. Two flows
   (change vs set-first-password) share the same DOM; JS toggles
   the "Current password" field's visibility based on user state.
   Animation, overlay, close-button, header treatment all match
   auth-modal so the two feel like siblings rather than strangers. */
.password-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.password-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 40, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.password-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 22px;
  max-width: 440px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 22px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: auth-slide-up 0.32s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.password-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 50%;
  transition: background var(--transition);
}
.password-modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.password-modal-header {
  text-align: center;
  margin-bottom: 18px;
}
.password-modal-avatar {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 50%;
  object-fit: cover;
}
.password-modal-header h2 {
  font-size: 1.28rem;
  margin: 0 0 6px;
  color: var(--text);
}
.password-modal-header p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Form fields — mirror .auth-field spacing/typography */
.password-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.password-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.password-field label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}
.password-field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.password-field input[type="password"]:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100, rgba(59,130,246,.15));
}

.password-error {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-left: 3px solid #ef4444;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}

[data-theme="dark"] .password-error {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
}

.password-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.password-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, transform .08s, opacity .15s;
}
.password-btn:active { transform: scale(0.98); }
.password-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.password-btn-cancel {
  background: var(--bg-secondary);
  color: var(--text);
}
.password-btn-cancel:hover { background: var(--bg-tertiary, var(--border)); }
.password-btn-submit {
  background: var(--blue-500);
  color: #fff;
}
.password-btn-submit:hover:not(:disabled) {
  background: var(--blue-600, var(--blue-500));
  filter: brightness(1.05);
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 40, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.auth-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 22px;
  max-width: 440px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 22px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: auth-slide-up 0.32s cubic-bezier(0.22, 1.4, 0.36, 1);
}

@keyframes auth-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 50%;
  transition: background var(--transition);
}

.auth-modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

/* Header */
.auth-modal-header {
  text-align: center;
  margin-bottom: 18px;
}

.auth-modal-avatar {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.auth-modal-header h2 {
  font-size: 1.32rem;
  margin: 0 0 4px;
  color: var(--text);
}

.auth-modal-header p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Welcome bonus banner */
.auth-bonus-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fbbf24;
  border-radius: 12px;
  margin-bottom: 18px;
}

[data-theme="dark"] .auth-bonus-banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.5);
}

.auth-bonus-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.auth-bonus-text {
  font-size: 0.84rem;
  color: #78350f;
  line-height: 1.4;
}

[data-theme="dark"] .auth-bonus-text {
  color: #fbbf24;
}

.auth-bonus-text strong {
  font-weight: 700;
}

/* "Show password" toggle — wraps every input[type="password"] at boot.
   The wrap fills its parent's width; the input takes the full width
   minus extra right padding to clear the eye button; the button
   absolutely positions to the right of the field. Works for all 3
   password inputs (signup, login, future change-password flow). */
.password-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-wrap input {
  width: 100%;
  padding-right: 42px;
}
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.password-toggle:hover { color: var(--text); background: var(--bg-secondary, rgba(0,0,0,.05)); }
.password-toggle:active { transform: translateY(-50%) scale(0.95); }
.password-toggle:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* OAuth row */
.auth-oauth-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  opacity: 1;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}

/* Enabled OAuth buttons (e.g., Google) get a hover state */
.auth-oauth-btn:hover:not([disabled]) {
  background: var(--bg-secondary, #f8fafc);
  border-color: var(--blue-400);
}

.auth-oauth-btn:active:not([disabled]) {
  opacity: 0.85;
}

/* Disabled OAuth buttons (e.g., Apple — still "Coming soon") get the
   muted look + not-allowed cursor + Soon badge. Was the default before;
   now scoped to actually-disabled buttons only so Google can be live. */
.auth-oauth-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.auth-oauth-apple svg { color: var(--text); }
.auth-oauth-email svg { color: var(--text); }

/* Email button: third button in the OAuth row. Clicking expands the
   email/password form below. Hidden once the form is expanded so the
   user only sees one path forward. */
.auth-oauth-email {
  /* Inherits .auth-oauth-btn baseline styles. Nothing extra needed —
     this rule exists as a documentation hook in case we want to tweak
     later (e.g. weight the email path slightly differently from OAuth). */
}

/* When the modal is in its default "collapsed" state, hide the divider
   and both forms. Only the 3 buttons (Apple/Google/Email) are shown.
   The "Already have a Qbit? Sign in" toggle row stays visible so a
   returning user landing on the signup screen can still switch modes. */
.auth-email-collapsed .auth-divider,
.auth-email-collapsed .auth-form {
  display: none !important;
}

/* When the user has clicked "Sign up/in with Email" (collapsed class
   removed), hide the email button itself — they've expressed their
   intent, no need to keep nudging them. Apple/Google stay visible
   in case they change their mind. */
.auth-modal:not(.auth-email-collapsed) .auth-oauth-email {
  display: none;
}

.auth-oauth-soon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--text-secondary);
  color: var(--bg);
  padding: 3px 7px;
  border-radius: 8px;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 14px 0 16px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  padding: 0 12px;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}

.auth-field input {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}

.auth-field input:focus {
  border-color: var(--blue-400);
}

/* Age verification row */
.auth-age-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0 2px;
  line-height: 1.4;
}

.auth-age-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
  cursor: pointer;
}

.auth-tos-link {
  color: var(--blue-500);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

[data-theme="dark"] .auth-tos-link {
  color: var(--blue-400);
}

/* Submit button */
.auth-submit-btn {
  margin-top: 6px;
  padding: 13px;
  background: var(--blue-500);
  color: white;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-submit-btn:hover:not(:disabled) {
  background: var(--blue-600);
}

.auth-submit-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

.auth-submit-spinner {
  font-size: 1rem;
  animation: auth-spin 1.2s linear infinite;
}

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

/* Error */
.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.4;
}

[data-theme="dark"] .auth-error {
  color: #fca5a5;
}

/* Toggle (signup <-> login) */
.auth-toggle {
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.auth-toggle-btn {
  background: none;
  border: none;
  color: var(--blue-500);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0 4px;
  text-decoration: underline;
}

[data-theme="dark"] .auth-toggle-btn {
  color: var(--blue-400);
}

/* Legal */
.auth-legal {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 14px;
  margin-bottom: 0;
  line-height: 1.5;
}

.auth-legal a {
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

/* Hide bonus banner in login mode (the 100-credit gift only applies to
   new accounts, so showing it during sign-in would be misleading). */
.auth-modal.is-login .auth-bonus-banner {
  display: none;
}

/* OAuth buttons (Google/Apple) intentionally show in BOTH signup AND login
   mode. Returning users who originally signed up via Google need to sign
   back in the same way — hiding the buttons in login mode left them
   stranded with only an email/password form. */

/* Forgot-password link — small, right-aligned under the password field.
   Plain text style so it doesn't compete with the Sign In submit button. */
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 4px 0;
}
.auth-forgot-link {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 0.85rem;
  color: var(--blue-500);
  cursor: pointer;
  text-decoration: none;
}
.auth-forgot-link:hover {
  text-decoration: underline;
}

/* Global trademark footer (visible on every page) */
.page-trademark {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  /* Small top padding to balance with .page-footer-links above (combined
     8px gap). Generous bottom padding handles iOS safe-area + breathing
     room below. */
  padding: 4px 16px 24px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .page-trademark {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* =========================================
   MY QBIT PAGE STYLES
   ========================================= */


/* Identity row inside the credits card (consolidated section) */
.credits-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.credits-identity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
}

.credits-identity-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.credits-identity-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: white;
  line-height: 1.2;
}

.plan-badge {
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,0.3);
}

.plan-badge-genius {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1f2937;
  border-color: rgba(251, 191, 36, 0.6);
  font-weight: 700;
}

.credits-card-divider {
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 0 0 18px;
}

/* Credits Card */
.myqbit-credits-card {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: white;
  padding: 22px 20px;
  border-radius: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.credits-card-label {
  font-size: 0.74rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  line-height: 1.3;
}

.credits-card-number {
  font-size: 2.6rem;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 14px;
  line-height: 1;
}

.credits-card-bar {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.credits-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #60a5fa);
  border-radius: 3px;
  transition: width 0.3s;
}

.credits-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  opacity: 0.9;
  margin-bottom: 16px;
}

.credits-card-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 50px;
  margin-bottom: 6px;
}

.sparkline-bar {
  flex: 1;
  background: rgba(255,255,255,0.4);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s;
}

.sparkline-today {
  background: #34d399;
}

.credits-card-sparkline-label {
  font-size: 0.7rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.credits-buy-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.credits-buy-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* Collapsible cards (Usage Breakdown / Query History) */
.collapse-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

/* Spacing between stacked collapsibles (but not after a title) */
.collapse-card + .collapse-card {
  margin-top: 10px;
}

/* Spacing between a credits card / settings card and a following collapsible */
.myqbit-credits-card + .collapse-card,
.settings-card + .collapse-card {
  margin-top: 10px;
}

.collapse-card[open] {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.collapse-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  padding-right: 42px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.collapse-summary::-webkit-details-marker {
  display: none;
}

.collapse-summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1;
}

.collapse-card[open] .collapse-summary::after {
  content: '−';
}

.collapse-summary-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.collapse-summary-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
}

.collapse-summary-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.collapse-content {
  border-top: 1px solid var(--border);
  padding: 4px 0;
  animation: collapse-fade-in 0.25s ease;
}

.collapse-content-flush {
  padding: 0;
}

@keyframes collapse-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Usage Breakdown legacy title (no longer used but kept for safety) */
.usage-breakdown-title {
  padding: 14px 18px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.usage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.usage-row:last-child {
  border-bottom: none;
}

.usage-icon {
  font-size: 1.2rem;
}

.usage-label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.usage-value {
  color: var(--text-secondary);
}

.usage-value strong {
  color: var(--text);
  font-size: 1rem;
}

/* History */
.history-search {
  padding: 12px 14px;
  margin: 12px 14px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.history-search input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
}

.history-search input::placeholder {
  color: var(--text-muted);
}

.history-filters {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
}

.history-chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 20px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.history-chip.active {
  background: var(--blue-500);
  color: white;
  border-color: var(--blue-500);
}

.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

.history-empty svg {
  margin-bottom: 12px;
  opacity: 0.4;
}

.history-empty p {
  margin: 4px 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.history-empty-sub {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
}

/* ===== Query History rows (real list) ===== */
.history-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  transition: background var(--transition);
  /* Click-to-replay landed 2026-05-03 — rows are now interactive
     (role="button" tabindex="0" in app.js). Cursor + active state
     make that affordance obvious. */
  cursor: pointer;
}

.history-row:last-child {
  border-bottom: none;
}

.history-row:hover {
  background: rgba(59, 130, 246, 0.04);
}
.history-row:focus-visible {
  outline: none;
  background: rgba(59, 130, 246, 0.08);
  box-shadow: inset 3px 0 0 var(--blue-500);
}
.history-row:active {
  background: rgba(59, 130, 246, 0.10);
}

.history-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.history-row-time {
  letter-spacing: 0.02em;
}

.history-row-credit {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.history-row-credit-free {
  background: var(--border);
  color: var(--text-muted);
}

.history-row-q {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  /* Truncate at 2 lines if very long */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-row-a {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  /* Truncate at 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Font Selection */
.font-preview {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
  transition: font-family 0.2s, font-size 0.2s, line-height 0.2s;
}

.font-options {
  display: flex;
  gap: 8px;
  width: 100%;
}

.font-option {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.font-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.font-option span {
  display: block;
  padding: 9px 8px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.font-option input:checked + span {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}

[data-theme="dark"] .font-option input:checked + span {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-400);
}

.font-size-control {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.font-size-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.font-size-control input[type="range"] {
  flex: 1;
  accent-color: var(--blue-500);
}

.line-spacing-options {
  display: flex;
  gap: 8px;
  width: 100%;
}

.line-chip {
  flex: 1;
  padding: 9px;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--transition);
}

.line-chip.active {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}

[data-theme="dark"] .line-chip.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-400);
}

/* Health Coming Soon */
.health-coming-soon {
  position: relative;
  padding: 24px 20px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px dashed #f59e0b;
}

[data-theme="dark"] .health-coming-soon {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.5);
}

.coming-soon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f59e0b;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-preview {
  text-align: center;
  padding: 8px 0;
}

.health-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.health-preview h3 {
  font-size: 1.08rem;
  margin: 0 0 8px;
  color: var(--text);
}

.health-preview p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 6px 0;
}

.health-features {
  list-style: none;
  padding: 12px 0;
  margin: 12px 0;
  text-align: left;
}

.health-features li {
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.health-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #f59e0b;
  font-weight: 700;
}

.health-disclaimer {
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.76rem !important;
  font-style: italic;
  margin-top: 14px !important;
}

[data-theme="dark"] .health-disclaimer {
  background: rgba(0,0,0,0.2);
}

/* Settings info note — small explanatory bar shown at the top of cards
   that need to communicate context (e.g. "Quiet times are managed by your
   device's Do Not Disturb"). Subtle background, distinct from setting items. */
.settings-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06));
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.settings-info-note strong {
  color: var(--text);
}
.settings-info-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Quiet Hours (UI removed; styles kept for any orphan markup, can be
   pruned once we're confident nothing else uses them) */
.quiet-hours-config {
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.quiet-hours-row {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.quiet-hours-time {
  flex: 1 1 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.quiet-hours-time label {
  display: block;
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quiet-hours-time input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
}

.quiet-hours-time input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.quiet-hours-days label {
  display: block;
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.day-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.day-chip {
  flex: 1;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 50%;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.day-chip.active {
  background: var(--blue-500);
  color: white;
  border-color: var(--blue-500);
}

.setting-item-thin {
  padding: 10px 0 !important;
  border-bottom: none !important;
}

/* Connected Apps */
.connected-section-label {
  padding: 12px 18px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.connected-app {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.connected-app:last-child {
  border-bottom: none;
}

.connected-app-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.connected-icon-apple-music { background: linear-gradient(135deg, #fa57c1, #b249f8); color: white; }
.connected-icon-spotify { background: #1db954; color: white; }
.connected-icon-pandora { background: linear-gradient(135deg, #00a0ee, #005c9c); color: white; }
.connected-icon-netflix { background: #e50914; color: white; }
.connected-icon-hulu { background: #1ce783; color: white; }
.connected-icon-youtube { background: #ff0000; color: white; }
.connected-icon-youtube-music { background: linear-gradient(135deg, #ff0000, #282828); color: white; }

.connected-app-info {
  flex: 1;
  min-width: 0;
}

.connected-app-name {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
}

.connected-app-status {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.status-green { background: #10b981; }
.status-red { background: #ef4444; }
.status-amber { background: #f59e0b; }

.connected-app-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 10px;
}

.connect-btn {
  padding: 7px 14px;
  background: var(--blue-500);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.connect-btn:hover {
  background: var(--blue-600);
}

/* Family Insights */
.family-intro {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .family-intro {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.04));
}

.family-intro-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.family-intro-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.family-intro-text strong {
  font-size: 0.9rem;
  color: var(--text);
}

.family-intro-text span {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.family-config {
  border-top: 1px solid var(--border);
}

.family-verify-btn {
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--blue-500);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-start;
}

.frequency-options {
  display: flex;
  gap: 8px;
  width: 100%;
}

.frequency-option {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.frequency-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.frequency-option span {
  display: block;
  padding: 9px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.frequency-option input:checked + span {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}

[data-theme="dark"] .frequency-option input:checked + span {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-400);
}

.family-includes {
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.family-includes-title {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.family-include-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.family-include-row input[type="checkbox"] {
  accent-color: var(--blue-500);
  width: 18px;
  height: 18px;
}

.family-include-row em {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.family-sample-btn {
  margin: 14px 18px;
  padding: 10px;
  width: calc(100% - 36px);
  background: var(--bg);
  border: 1px solid var(--blue-500);
  color: var(--blue-600);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

[data-theme="dark"] .family-sample-btn {
  color: var(--blue-400);
  border-color: var(--blue-400);
}

/* Privacy Links */
.setting-link-btn {
  background: none;
  border: none;
  color: var(--blue-500);
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
}

.setting-link-btn.signout-btn {
  color: var(--text-secondary);
}

/* Back to Settings — matches the Save Changes button in COLOR (gradient
   blue→purple + white text) per Scott. Keeps its own dimensions so it
   sits cleanly above Delete account at full width without the
   .settings-save-btn's card-relative inset. */
.back-to-settings-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500, #8b5cf6));
  border: none;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.20);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.back-to-settings-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.30);
}
.back-to-settings-btn:active { transform: translateY(1px); }

/* Delete Account — sits BELOW Back to Settings. Margin reduced so the
   two buttons read as a stacked pair rather than separate sections. */
.delete-account-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  font-size: 0.86rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}

.delete-account-btn:hover {
  color: #dc2626;
  border-color: #dc2626;
}

/* Delete Modal */
/* ============================================================
   Qbit Toast Modal — branded replacement for native alert()
   ============================================================ */
.qbit-toast {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qbit-toast-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.qbit-toast-content {
  position: relative;
  background: var(--bg);
  border-radius: 20px;
  max-width: 380px;
  width: 100%;
  padding: 28px 24px 22px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: qbit-toast-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qbit-toast-pop {
  from { transform: scale(0.9) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}
.qbit-toast-avatar {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px auto;
  filter: drop-shadow(0 6px 14px rgba(59,130,246,0.25));
}
.qbit-toast-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Slightly darker than text-muted for better legibility — sits between
     muted and full text color so it reads as a subtle eyebrow label. */
  color: #4b5563;
  margin-bottom: 10px;
}
[data-theme="dark"] .qbit-toast-title {
  color: #9ca3af;
}
.qbit-toast-message {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 22px;
  font-weight: 500;
}
.qbit-toast-btn {
  display: inline-block;
  padding: 12px 36px;
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500, #8b5cf6));
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(59,130,246,0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qbit-toast-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59,130,246,0.40);
}
.qbit-toast-btn:active {
  transform: translateY(0);
}

.delete-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.delete-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.delete-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.delete-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.delete-modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}

.delete-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 4px;
}

.delete-modal-body {
  padding: 18px 20px;
}

.delete-warning {
  padding: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-theme="dark"] .delete-warning {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.delete-warning strong {
  color: #dc2626;
  font-size: 0.92rem;
}

.delete-warning span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.delete-list-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.delete-list {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.6;
}

.delete-export {
  margin-bottom: 16px;
}

.delete-export-btn {
  width: 100%;
  padding: 10px;
  background: var(--blue-50);
  border: 1px solid var(--blue-500);
  color: var(--blue-600);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

[data-theme="dark"] .delete-export-btn {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue-400);
}

.delete-confirm-row label {
  display: block;
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.delete-confirm-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
}

.delete-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}

.delete-cancel-btn,
.delete-confirm-btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.delete-cancel-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
}

.delete-confirm-btn {
  background: #dc2626;
  border: none;
  color: white;
}

.delete-confirm-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

[data-theme="dark"] .delete-confirm-btn:disabled {
  background: var(--gray-600);
}

/* =========================================
   LEARN PAGE STYLES
   ========================================= */

/* Checklist */
.checklist-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.checklist-progress-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.checklist-progress-text strong {
  color: var(--blue-600);
}

[data-theme="dark"] .checklist-progress-text strong {
  color: var(--blue-400);
}

.checklist-progress-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  border-radius: 3px;
  transition: width 0.4s;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

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

.checklist-item:hover {
  background: var(--bg-secondary);
}

.checklist-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all var(--transition);
}

.checklist-item.completed .checklist-check {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

.checklist-item.completed .checklist-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
}

.checklist-text {
  font-size: 0.9rem;
  color: var(--text);
  transition: color var(--transition);
}

.checklist-item.completed .checklist-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Prompt cards */
.prompt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.prompt-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  min-height: 100px;
}

.prompt-card:hover {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

[data-theme="dark"] .prompt-card:hover {
  background: rgba(59, 130, 246, 0.08);
}

.prompt-card-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blue-600);
  letter-spacing: 0.6px;
}

[data-theme="dark"] .prompt-card-tag {
  color: var(--blue-400);
}

.prompt-card-text {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.4;
  font-style: italic;
}

/* Tutorials */
.tutorial-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.tutorial-row:last-child {
  border-bottom: none;
}

.tutorial-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tutorial-info {
  flex: 1;
}

.tutorial-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}

.tutorial-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Tips */
.tip-row {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.tip-row:last-child {
  border-bottom: none;
}

.tip-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.tip-content {
  flex: 1;
}

.tip-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.tip-text {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* FAQ — each item is its own self-contained card */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.faq-item[open] {
  border-color: var(--blue-300, #93c5fd);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

[data-theme="dark"] .faq-item[open] {
  border-color: rgba(96, 165, 250, 0.4);
}

.faq-item summary {
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 42px;
  user-select: none;
  -webkit-user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 300;
  transition: transform var(--transition);
  line-height: 1;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  padding: 4px 16px 14px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 0;
}

/* Support row */
.support-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.support-row:last-child {
  border-bottom: none;
}

.support-row:hover {
  background: var(--bg-secondary);
}

/* Ask Qbit inline input */
.support-ask-qbit {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.support-ask-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.support-ask-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.support-ask-input {
  flex: 1;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  min-width: 0;
}

.support-ask-input:focus {
  border-color: var(--blue-400);
}

.support-ask-input::placeholder {
  color: var(--text-muted);
}

.support-ask-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-500);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}

.support-ask-btn:hover {
  background: var(--blue-600);
}

.support-ask-btn:active {
  transform: scale(0.92);
}

.support-ask-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

[data-theme="dark"] .support-ask-btn:disabled {
  background: var(--gray-600);
}

.support-icon {
  font-size: 1.6rem;
}

.support-info {
  flex: 1;
}

.support-title {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
}

.support-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.support-chevron {
  color: var(--text-muted);
  font-size: 1.3rem;
}

/* Font preview variants */
.font-preview.font-sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.font-preview.font-serif { font-family: Georgia, "Times New Roman", serif; }
.font-preview.font-dyslexic { font-family: "Comic Sans MS", "OpenDyslexic", sans-serif; letter-spacing: 0.04em; }

/* ===== Home Tips & Ideas button =====
   Sits below the Share card. Deep-links to Tips & Tricks on Setup & Support. */
.home-tips-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px dashed var(--blue-400);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.home-tips-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.14));
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
}

.home-tips-icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
}

.home-tips-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.home-tips-text strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.home-tips-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.home-tips-chev {
  flex-shrink: 0;
  color: var(--blue-500);
  opacity: 0.7;
}

/* ===== Checklist — clickable items with chevron ===== */
.checklist-item {
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.checklist-item:hover:not(.complete) {
  background: rgba(59, 130, 246, 0.06);
}

.checklist-item:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: -2px;
  border-radius: 6px;
}

.checklist-chev {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.1rem;
  opacity: 0.5;
  transition: opacity var(--transition), transform var(--transition);
}

.checklist-item:hover:not(.complete) .checklist-chev {
  opacity: 1;
  color: var(--blue-500);
  transform: translateX(2px);
}

.checklist-item.complete .checklist-chev {
  display: none;
}

/* ===== Query History — Delete history button ===== */
.history-footer {
  display: flex;
  justify-content: center;
  padding: 12px 16px 4px;
}

.history-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.history-delete-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.3);
}

.history-delete-btn svg {
  flex-shrink: 0;
}

/* ===== Global footer links =====
   Sit just above .page-trademark on every page. Same font color/size as
   the trademark line — visually a single muted footer block, just with
   the legal links above the trademark notice. Visible to OAuth verifiers
   (Google, Apple) so they can crawl Privacy/Terms straight from the
   home page HTML.

   The margin-top: -40px keeps the whole two-line footer block tight to
   the bottom of the page content (this offset used to live on
   .page-trademark; moved here so it doesn't pull the trademark UP over
   the links). */
.page-footer-links {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  /* padding-bottom: 4px gives a small visual gap to the trademark line below.
     Combined with .page-trademark's padding-top: 4px, the two lines have an
     8px gap — tight enough to feel like one footer block, loose enough to
     read as two distinct lines. */
  padding: 16px 16px 4px;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.page-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 4px;
  transition: color var(--transition);
}

.page-footer-links a:hover {
  color: var(--blue-500);
}

.page-footer-links span {
  user-select: none;
  margin: 0 2px;
}