/* ============================================================
   Liquid Glass layer (1.4.2)
   Apple's current material language, applied to BreatheFirst's
   controls and floating surfaces: translucent fills that refract
   the aurora behind them, a bright specular edge on top, a soft
   inner glow at the bottom, capsule corners, and tinted glass for
   the primary actions. Loaded after ambience.css so it inherits
   every preset's tokens. Blur is spent only where it pays
   (bars, drawers, panels, floating buttons); small controls use
   gradient glass so scrolling stays smooth on phones.
   ============================================================ */
:root {
  --lg-blur: 24px;
  --lg-sat: 180%;
  --lg-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.10) 100%);
  --lg-stroke: rgba(255, 255, 255, 0.22);
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -10px 18px rgba(255, 255, 255, 0.04);
  --lg-drop: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --lg-radius: 999px;
}

/* ---------- Small controls: gradient glass, no blur ---------- */
.btn-secondary, .pattern-btn, .game-tab, .b-mode-btn, .petal-btn, .calm-toggle, .reset-cta, .hero-badge,
.hero-audio-btn, .calm-chip, .sos-close, .reset-close, .nav-close, .mood-btn, .affirmation-nav button, .worksheet-tab,
.imax-pill, .cinema-control, .btn-ghost, .tab-btn, .chip {
  background: var(--lg-fill) !important;
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-edge), var(--lg-drop) !important;
  color: #fff;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-secondary:hover, .pattern-btn:hover, .game-tab:hover, .b-mode-btn:hover, .petal-btn:hover, .calm-toggle:hover, .reset-cta:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.16) 100%) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  transform: translateY(-1px);
}
.btn-secondary:active, .pattern-btn:active, .game-tab:active, .b-mode-btn:active, .petal-btn:active, .calm-toggle:active { transform: translateY(0) scale(0.985); }

/* Selected state: tinted glass in the preset accent, still translucent */
.pattern-btn.active, .game-tab.active, .b-mode-btn.active, .petal-btn[aria-pressed="true"], .calm-toggle[aria-pressed="true"], .calm-chip.active, .calm-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--mint-glow) 0%, rgba(255, 255, 255, 0.06) 60%, var(--mint-glow) 100%) !important;
  border-color: var(--glass-border-strong) !important;
  box-shadow: var(--lg-edge), 0 0 0 1px var(--mint-glow), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 26px var(--mint-glow) !important;
}

/* ---------- Primary actions: tinted liquid glass ---------- */
.btn-primary, .breathing-btn, .affirmation-btn, button.primary, .nav-cta, .newsletter-form button, .ios-healthkit-card-btn, .sos-start-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.10), inset 0 -12px 20px rgba(255, 255, 255, 0.12), 0 14px 34px var(--mint-glow), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  border-radius: var(--lg-radius) !important;
}

/* ---------- Floating surfaces: real blur ---------- */
.navbar, .nav-links, #aiChatPanel, .ai-chat-panel, .sos-content, .reset-overlay .sos-content, .onboarding-card, .modal-content, .worksheet-modal, .search-widget, .toast, .crisis-banner {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.navbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 40px rgba(0, 0, 0, 0.35); }
@media (max-width: 768px) {
  .nav-links { background: linear-gradient(160deg, rgba(20, 32, 58, 0.72), rgba(6, 12, 26, 0.80)) !important; border-left: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22), -20px 0 60px rgba(0, 0, 0, 0.5); }
}

/* Floating round and capsule buttons */
.ai-chat-btn, .sos-calm-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -8px 16px rgba(255, 255, 255, 0.10), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px var(--mint-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(16px) saturate(var(--lg-sat)); backdrop-filter: blur(16px) saturate(var(--lg-sat));
}
.menu-toggle { background: var(--lg-fill) !important; border: 1px solid var(--lg-stroke) !important; border-radius: 14px; padding: 10px; box-shadow: var(--lg-edge) !important; }

/* ---------- Cards: glass slab with a light rim, no blur ---------- */
.topic-card, .tip-card, .native-card, .level-card, .affirmation-card, .newsletter-card, .mood-card, .stat-card, .glass-card, .games-container, .breathing-container, .cbt-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0.06) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -14px 28px rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.42) !important;
}

/* ---------- Calm chat: glass panel instead of the old purple header and flat navy body ---------- */
.ai-chat-panel { background: linear-gradient(180deg, rgba(10, 20, 40, 0.62), rgba(4, 10, 22, 0.74)) !important; border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18), -24px 0 70px rgba(0, 0, 0, 0.55) !important; }
.ai-chat-header { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -10px 20px rgba(255, 255, 255, 0.03) !important; }
.ai-chat-header .ai-chat-title { color: #fff !important; font-family: var(--font-display) !important; letter-spacing: 0.01em; }
.ai-chat-header .ai-chat-status { color: var(--text-secondary) !important; }
.ai-chat-avatar { background: var(--lg-fill) !important; border: 1px solid var(--lg-stroke) !important; box-shadow: var(--lg-edge) !important; border-radius: 50% !important; }
.ai-chat-close { background: var(--lg-fill) !important; border: 1px solid var(--lg-stroke) !important; border-radius: 50% !important; width: 36px; height: 36px; box-shadow: var(--lg-edge) !important; color: #fff !important; }
.ai-chat-messages { background: transparent !important; }
.ai-chat-msg.ai-msg { background: var(--lg-fill) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 24px rgba(0, 0, 0, 0.30) !important; color: #fff !important; border-radius: 22px 22px 22px 8px !important; }
.ai-chat-msg.user-msg { background: linear-gradient(135deg, var(--mint-glow), rgba(255, 255, 255, 0.06)) !important; border: 1px solid var(--glass-border-strong) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(0, 0, 0, 0.30) !important; color: #fff !important; border-radius: 22px 22px 8px 22px !important; }
.ai-chat-disclaimer { background: rgba(255, 255, 255, 0.04) !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; color: var(--text-muted) !important; }
.ai-chat-disclaimer a { color: var(--mint) !important; }
.ai-chat-input-row { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; }
/* style-glass.css sets `body .ai-chat-input { background: #fff !important }`; out-rank it. */
html body .ai-chat-panel .ai-chat-input { background: var(--lg-fill) !important; background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid var(--lg-stroke) !important; box-shadow: var(--lg-edge) !important; color: #fff !important; border-radius: 999px !important; }
html body .ai-chat-panel .ai-chat-input::placeholder { color: var(--text-muted) !important; }
html body .ai-chat-panel .ai-chat-input:focus { border-color: var(--glass-border-strong) !important; box-shadow: var(--lg-edge), 0 0 0 3px var(--mint-glow) !important; outline: none; }
.ai-chat-send { background: linear-gradient(135deg, var(--mint) 0%, var(--mint-dark) 100%) !important; color: #03101C !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px var(--mint-glow) !important; }
.ai-chat-send:disabled { opacity: 0.45; }

/* The hamburger turns into the close control when the drawer is open; the second close button is redundant. */
@media (max-width: 768px) { html body .navbar .nav-links .nav-close { display: none !important; } }

/* Ambience dots read as glass beads */
.ambience-dot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35) !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.ambience-dot[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--mint-glow), 0 4px 12px rgba(0, 0, 0, 0.4) !important; }

/* Calm mode keeps glass but drops the glow halos */
html[data-calm="on"] .pattern-btn.active, html[data-calm="on"] .game-tab.active, html[data-calm="on"] .b-mode-btn.active, html[data-calm="on"] .petal-btn[aria-pressed="true"], html[data-calm="on"] .calm-toggle[aria-pressed="true"] {
  box-shadow: var(--lg-edge), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
@media (prefers-reduced-transparency: reduce) {
  .navbar, .nav-links, #aiChatPanel, .ai-chat-btn, .sos-calm-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navbar { background: rgba(6, 12, 26, 0.96) !important; }
}