/* ═══════════════════════════════════════════════════════════════
   APPLE LIQUID GLASS — WanderBeastAI Design System
   Adapted for dark sci-fi / aurora aesthetic

   Three material layers:
     glass-thin   → subtle surface (chips, memory bar, hints)
     glass-base   → primary cards & panels
     glass-chrome → heavy chrome (topbar, modals, sidebars)

   Accents glow through the glass:
     glass-saffron → primary CTA tint
     glass-cyan    → info / atlas / active tab
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  /* Glass material backgrounds */
  --gl-thin:     rgba(10, 16, 36, 0.42);
  --gl-base:     rgba(9,  15, 32, 0.60);
  --gl-thick:    rgba(8,  13, 28, 0.76);
  --gl-chrome:   rgba(7,  12, 26, 0.88);

  /* Specular (light-catch) tones */
  --gl-spec:         rgba(255, 255, 255, 0.13);
  --gl-spec-bright:  rgba(255, 255, 255, 0.22);
  --gl-spec-dim:     rgba(255, 255, 255, 0.06);
  --gl-spec-cyan:    rgba(56,  189, 248, 0.20);
  --gl-spec-saffron: rgba(255, 140,   0, 0.22);

  /* Backdrop filter recipes */
  --gl-blur-thin:   blur(18px) saturate(160%) brightness(0.97);
  --gl-blur-base:   blur(32px) saturate(180%) brightness(0.94);
  --gl-blur-thick:  blur(52px) saturate(200%) brightness(0.92);
  --gl-blur-chrome: blur(64px) saturate(220%) brightness(0.90);

  /* Updated border-radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — composable glass layers
   ═══════════════════════════════════════════════════════════════ */

.glass-thin {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

.glass-base {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass-chrome {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   TOPBAR / CHROME
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border-bottom: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.tab-nav {
  gap: 3px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-md);
  border: 1px solid var(--gl-spec-dim);
}

.tab-btn {
  border-radius: calc(var(--r-md) - 2px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.tab-btn:hover {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border-color: var(--gl-spec);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.tab-btn.active {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.16) 0%, rgba(255, 140, 0, 0.06) 100%),
    var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border-color: rgba(255, 140, 0, 0.35);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 140, 0, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(255, 140, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.35);
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* Primary — saffron glass */
.primary-button {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 160, 30, 0.22) 0%, rgba(255, 100, 0, 0.12) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(255, 140, 0, 0.45);
  border-radius: var(--r-md);
  color: #FFE0A0;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 4px 20px rgba(255, 140, 0, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.4);
  transition: all 0.22s ease;
}

.primary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.primary-button:hover {
  border-color: rgba(255, 160, 0, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 28px rgba(255, 140, 0, 0.30),
    0 12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Secondary — thin glass */
.secondary-button {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  color: var(--text);
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.22s ease;
}

.secondary-button:hover {
  background: var(--gl-base);
  border-color: var(--gl-spec-bright);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Auth choice buttons */
.primary-button#guestEntryBtn {
  background:
    linear-gradient(160deg, rgba(56, 189, 248, 0.20) 0%, rgba(15, 184, 160, 0.10) 100%),
    var(--gl-base);
  border-color: rgba(56, 189, 248, 0.40);
  color: #B0E8FF;
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.25),
    0 4px 24px rgba(56, 189, 248, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.4);
}
.primary-button#guestEntryBtn:hover {
  border-color: rgba(56, 189, 248, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.35),
    0 4px 32px rgba(56, 189, 248, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.45);
}


/* ═══════════════════════════════════════════════════════════════
   INPUTS & SELECTS
   ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
.auth-input {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--gl-spec-dim);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
.auth-input:focus {
  border-color: var(--saffron);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(255, 140, 0, 0.14),
    0 0 16px rgba(255, 140, 0, 0.10);
  outline: none;
}

/* Selects */
select,
.gv2-select,
.lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:
    var(--gl-thin)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  background-size: auto, 10px 6px;
  padding-right: 28px;
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus,
.gv2-select:focus {
  border-color: var(--saffron);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 0 0 3px rgba(255, 140, 0, 0.14);
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH CARD / LOGIN VIEW
   ═══════════════════════════════════════════════════════════════ */

.auth-card {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-2xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Auth form tabs */
.auth-tabs {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-md);
  border: 1px solid var(--gl-spec-dim);
  padding: 3px;
  gap: 3px;
}

.auth-tab {
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 600;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.18) 0%, rgba(255, 80, 0, 0.08) 100%),
    var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border-color: rgba(255, 140, 0, 0.35);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Auth choice buttons shown before login form */
.auth-show-form-btn {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 2px 8px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════
   APP VIEW PANELS & CONTROLS
   ═══════════════════════════════════════════════════════════════ */

/* Map pane control strip */
.control-strip {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Sidebar */
#chatSidebar,
.sidebar {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border-right: 1px solid var(--gl-spec);
  box-shadow:
    inset -1px 0 0 var(--gl-spec-dim),
    inset 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* Chat input bar */
.chat-input-bar {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border-top: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Chat textarea inside the input bar */
#chatInput {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--gl-spec-dim);
}

#chatInput:focus {
  border-color: rgba(255, 140, 0, 0.45);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(255, 140, 0, 0.12),
    0 0 20px rgba(255, 140, 0, 0.08);
}

/* Send button */
#sendBtn {
  background:
    linear-gradient(160deg, rgba(255, 160, 30, 0.28) 0%, rgba(255, 100, 0, 0.16) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(255, 140, 0, 0.45);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.25),
    0 4px 16px rgba(255, 140, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

#sendBtn:hover {
  border-color: rgba(255, 160, 0, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.3),
    0 6px 24px rgba(255, 140, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
   MEMORY BAR
   ═══════════════════════════════════════════════════════════════ */

.memory-bar {
  background: var(--gl-thin);
  backdrop-filter: var(--gl-blur-thin);
  -webkit-backdrop-filter: var(--gl-blur-thin);
  border-bottom: 1px solid var(--gl-spec);
  border-top: 1px solid var(--gl-spec-dim);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

.memory-chip {
  background:
    linear-gradient(160deg, rgba(15, 184, 160, 0.18) 0%, rgba(15, 184, 160, 0.08) 100%),
    var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 184, 160, 0.30);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(100, 240, 210, 0.20),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.memory-clear-btn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.memory-clear-btn:hover {
  border-color: rgba(255, 77, 77, 0.45);
  color: var(--risk);
  box-shadow:
    inset 0 1px 0 rgba(255, 77, 77, 0.2),
    0 0 12px rgba(255, 77, 77, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-panel {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-2xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 40px 80px rgba(0, 0, 0, 0.65),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.025);
}

.modal-header {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--gl-spec);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: inset 0 1px 0 var(--gl-spec-bright);
}

#closeSettingsBtn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

#closeSettingsBtn:hover {
  border-color: rgba(255, 77, 77, 0.4);
  color: var(--risk);
  box-shadow:
    inset 0 1px 0 rgba(255, 77, 77, 0.15),
    0 0 12px rgba(255, 77, 77, 0.12);
}

.settings-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-save-btn {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.20) 0%, rgba(255, 100, 0, 0.10) 100%),
    var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 140, 0, 0.38);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.22),
    0 4px 16px rgba(255, 140, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.22s ease;
}

.settings-save-btn:hover {
  border-color: rgba(255, 160, 0, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.28),
    0 6px 24px rgba(255, 140, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.settings-memory-item {
  background: var(--gl-thin);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.25);
}


/* ═══════════════════════════════════════════════════════════════
   TRAVEL GUIDE PANE
   ═══════════════════════════════════════════════════════════════ */

.gv2-layout {
  background: transparent;
}

.gv2-filters {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border-right: 1px solid var(--gl-spec);
  box-shadow:
    inset -1px 0 0 var(--gl-spec-dim),
    4px 0 20px rgba(0, 0, 0, 0.35);
}

.gv2-filters-head {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--gl-spec);
  box-shadow: inset 0 1px 0 var(--gl-spec-bright);
}

.gv2-filters-body {
  background: transparent;
}

/* Guide step dots — keep their brand colors but add glass to the connecting line */
.gv2-step-line {
  background: linear-gradient(to bottom, var(--gl-spec-cyan), transparent);
}

/* Type preference buttons */
.gv2-type-btn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.gv2-type-btn:hover {
  border-color: rgba(255, 140, 0, 0.4);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.2),
    0 0 12px rgba(255, 140, 0, 0.12);
}

.gv2-type-btn.active {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.30) 0%, rgba(255, 100, 0, 0.14) 100%),
    var(--gl-thin);
  border-color: rgba(255, 140, 0, 0.60);
  color: #FFD070;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.30),
    0 0 16px rgba(255, 140, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Apply Filters button */
.gv2-apply-btn {
  background:
    linear-gradient(160deg, rgba(255, 160, 30, 0.26) 0%, rgba(255, 100, 0, 0.14) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(255, 140, 0, 0.50);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 6px 24px rgba(255, 140, 0, 0.20),
    0 8px 28px rgba(0, 0, 0, 0.4);
  transition: all 0.22s ease;
}

.gv2-apply-btn:hover {
  border-color: rgba(255, 160, 0, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.35),
    0 8px 32px rgba(255, 140, 0, 0.30),
    0 12px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Guide view / map view toggle */
.gv2-view-btn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.gv2-view-btn.active {
  background:
    linear-gradient(160deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.10) 100%),
    var(--gl-thin);
  border-color: rgba(56, 189, 248, 0.45);
  color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.22),
    0 0 16px rgba(56, 189, 248, 0.14);
}

/* Hotel cards */
.gv2-hotel-card {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.gv2-hotel-card:hover {
  background: var(--gl-base);
  border-color: var(--gl-spec-bright);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.gv2-hotel-card.selected {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.16) 0%, rgba(255, 100, 0, 0.08) 100%),
    var(--gl-thin);
  border-color: rgba(255, 140, 0, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.22),
    0 0 20px rgba(255, 140, 0, 0.14);
}

/* Selects in guide pane */
.gv2-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:
    rgba(6, 10, 22, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  background-size: auto, 10px 6px;
  padding-right: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Time inputs in guide */
.gv2-time-input {
  background: rgba(6, 10, 22, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.gv2-time-input:focus {
  border-color: var(--saffron);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(255, 140, 0, 0.14);
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════
   AI RESPONSE CARDS (itinerary, plan cards)
   ═══════════════════════════════════════════════════════════════ */

.plan-card,
.itinerary-card,
.day-card,
.response-card,
.plan-header,
.plan-option-btn,
.refinement-btn,
.refine-bar,
.chat-msg.assistant .msg-content {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* User message bubbles */
.chat-msg.user .msg-content {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.18) 0%, rgba(255, 100, 0, 0.08) 100%),
    var(--gl-thin);
  border: 1px solid rgba(255, 140, 0, 0.30);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Plan option active / selected */
.plan-option-btn.active,
.plan-option-btn:focus {
  background:
    linear-gradient(160deg, rgba(56, 189, 248, 0.20) 0%, rgba(14, 165, 233, 0.10) 100%),
    var(--gl-thin);
  border-color: rgba(56, 189, 248, 0.45);
  color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.22),
    0 0 20px rgba(56, 189, 248, 0.12);
}


/* ═══════════════════════════════════════════════════════════════
   DESTINATION / REGION CARDS (map sidebar)
   ═══════════════════════════════════════════════════════════════ */

.dest-card,
.destination-card,
.region-card,
.map-sidebar-card,
.state-info-card,
.poi-card {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 8px 28px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.dest-card:hover,
.destination-card:hover,
.region-card:hover {
  background: var(--gl-thick);
  border-color: var(--gl-spec-bright);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}


/* ═══════════════════════════════════════════════════════════════
   CHIPS & BADGES
   ═══════════════════════════════════════════════════════════════ */

.chip {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: rgba(255, 140, 0, 0.40);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.18),
    0 0 12px rgba(255, 140, 0, 0.12);
}

.chip.active {
  background:
    linear-gradient(160deg, rgba(255, 140, 0, 0.22) 0%, rgba(255, 100, 0, 0.10) 100%),
    var(--gl-thin);
  border-color: rgba(255, 140, 0, 0.50);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.25),
    0 0 16px rgba(255, 140, 0, 0.14);
}

.safety-badge {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════
   ATLAS / MAP PANEL (sidebar inside map pane)
   ═══════════════════════════════════════════════════════════════ */

.map-side-panel,
.atlas-sidebar,
.map-info-panel,
#mapSidebarCard,
.atlas-control-group {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Atlas layer toggle buttons */
.atlas-layer-btn,
.map-control-btn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.atlas-layer-btn:hover,
.map-control-btn:hover {
  border-color: var(--gl-spec-cyan);
  color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.18),
    0 0 12px rgba(56, 189, 248, 0.12);
}

.atlas-layer-btn.active,
.map-control-btn.active {
  background:
    linear-gradient(160deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.10) 100%),
    var(--gl-thin);
  border-color: rgba(56, 189, 248, 0.45);
  color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(150, 230, 255, 0.22),
    0 0 16px rgba(56, 189, 248, 0.14);
}


/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE HERO ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Hero CTA button */
.wc-btn-primary {
  background:
    linear-gradient(160deg, rgba(255, 160, 30, 0.26) 0%, rgba(255, 100, 0, 0.14) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(255, 140, 0, 0.50);
  border-radius: var(--r-pill);
  color: #FFD070;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 8px 32px rgba(255, 140, 0, 0.22),
    0 16px 40px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-btn-primary:hover {
  border-color: rgba(255, 160, 0, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.35),
    0 12px 40px rgba(255, 140, 0, 0.32),
    0 20px 48px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px) scale(1.02);
}

/* Cinematic / landing feature cards */
.wc-feature-card,
.wc-card,
.feature-card,
.landing-card {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-feature-card:hover,
.wc-card:hover {
  border-color: var(--gl-spec-bright);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Region cards in landing carousel */
.wc-region-card,
.region-panel {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 20px 60px rgba(0, 0, 0, 0.5);
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS — glass-aware thin style
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ═══════════════════════════════════════════════════════════════
   QUICK STARTERS
   ═══════════════════════════════════════════════════════════════ */

.quick-starter-btn,
.starter-btn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.28);
  transition: all 0.2s ease;
}

.quick-starter-btn:hover,
.starter-btn:hover {
  background: var(--gl-base);
  border-color: rgba(255, 140, 0, 0.35);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(255, 140, 0, 0.10);
  transform: translateX(2px);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — reduce blur on low-power devices
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .glass-thin,
  .glass-base,
  .glass-chrome,
  .topbar,
  .tab-btn,
  .modal-panel,
  .auth-card,
  .memory-bar,
  .gv2-filters,
  .chat-input-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Force GPU compositing on key glass surfaces for perf */
.topbar,
.modal-panel,
.auth-card,
.gv2-filters,
.chat-input-bar {
  will-change: backdrop-filter;
  transform: translateZ(0);
}


/* ═══════════════════════════════════════════════════════════════
   CINEMATIC LANDING PAGE — glass surfaces
   ═══════════════════════════════════════════════════════════════ */

/* Landing nav bar */
.wi-landing-nav {
  background: rgba(5, 9, 22, 0.52);
  backdrop-filter: blur(40px) saturate(200%) brightness(0.92);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.92);
  border-bottom: 1px solid var(--gl-spec);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 4px 24px rgba(0, 0, 0, 0.5);
}

/* "Get App" pill */
.wi-get-app {
  background: var(--gl-thin);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--gl-spec-bright);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 4px 16px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.wi-get-app:hover {
  background: var(--gl-base);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 28px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* "Login" gold pill */
.wi-login-nav-btn {
  background:
    linear-gradient(160deg, rgba(201, 162, 39, 0.20) 0%, rgba(201, 162, 39, 0.08) 100%),
    var(--gl-thin);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 80, 0.22),
    0 4px 16px rgba(201, 162, 39, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.wi-login-nav-btn:hover {
  border-color: rgba(201, 162, 39, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 80, 0.30),
    0 6px 24px rgba(201, 162, 39, 0.22);
  transform: translateY(-2px);
}

/* Hero "Start Planning" CTA */
.wi-start-btn {
  background:
    linear-gradient(160deg, rgba(255, 160, 30, 0.28) 0%, rgba(255, 90, 0, 0.15) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(255, 140, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 80, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 8px 36px rgba(255, 140, 0, 0.24),
    0 16px 48px rgba(0, 0, 0, 0.42);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.wi-start-btn:hover {
  border-color: rgba(255, 170, 0, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 100, 0.38),
    0 12px 48px rgba(255, 140, 0, 0.34),
    0 20px 56px rgba(0, 0, 0, 0.48);
  transform: translateY(-2px);
}

/* Ghost CTA button */
.wc-btn-ghost {
  background: var(--gl-thin);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--gl-spec-bright);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.wc-btn-ghost:hover {
  background: var(--gl-base);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

/* Intelligence feature cards */
.wci-card {
  background: var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.45);
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.wci-card:hover {
  border-color: rgba(201, 162, 39, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 80, 0.20),
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(201, 162, 39, 0.08);
  transform: translateY(-2px);
}

/* Profile / pricing tier cards */
.wcpt-card {
  background: var(--gl-chrome);
  backdrop-filter: var(--gl-blur-chrome);
  -webkit-backdrop-filter: var(--gl-blur-chrome);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 16px 48px rgba(0, 0, 0, 0.5);
}
.wcpt-card--registered { border-color: rgba(255, 255, 255, 0.14); }
.wcpt-card--premium {
  background:
    linear-gradient(160deg, rgba(201, 162, 39, 0.12) 0%, rgba(201, 162, 39, 0.04) 100%),
    var(--gl-chrome);
  border-color: rgba(201, 162, 39, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 80, 0.22),
    0 0 60px rgba(201, 162, 39, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.5);
}
.wcpt-card--premium:hover {
  border-color: rgba(201, 162, 39, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(240, 210, 80, 0.28),
    0 0 88px rgba(201, 162, 39, 0.14),
    0 20px 56px rgba(0, 0, 0, 0.55);
}

/* Region floating card (hero overlay) */
.wi-region-card {
  background: var(--gl-thick);
  backdrop-filter: var(--gl-blur-thick);
  -webkit-backdrop-filter: var(--gl-blur-thick);
  border: 1px solid var(--gl-spec-bright);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-bright),
    0 24px 60px rgba(0, 0, 0, 0.50),
    0 4px 16px rgba(0, 0, 0, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   TOPBAR ACTION ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Language selector pill */
#langSelect,
.lang-select {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-pill);
  background: rgba(6, 10, 22, 0.60);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Settings gear button */
#settingsBtn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.28);
  transition: all 0.2s ease;
}
#settingsBtn:hover {
  background: var(--gl-base);
  border-color: rgba(255, 140, 0, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.18),
    0 0 14px rgba(255, 140, 0, 0.12);
}

/* New conversation button */
#newChatBtn {
  background: var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gl-spec);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--gl-spec-dim),
    0 2px 8px rgba(0, 0, 0, 0.28);
  transition: all 0.2s ease;
}
#newChatBtn:hover {
  background: var(--gl-base);
  border-color: rgba(255, 140, 0, 0.38);
  color: var(--saffron);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 80, 0.18),
    0 0 14px rgba(255, 140, 0, 0.10);
  transform: translateY(-1px);
}

/* Plan with BeastMind AI button */
#gv2PlanAIBtn {
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.26) 0%, rgba(109, 40, 217, 0.14) 100%),
    var(--gl-base);
  backdrop-filter: var(--gl-blur-base);
  -webkit-backdrop-filter: var(--gl-blur-base);
  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(200, 160, 255, 0.22),
    0 6px 24px rgba(139, 92, 246, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.4);
  transition: all 0.22s ease;
}
#gv2PlanAIBtn:hover {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(200, 160, 255, 0.30),
    0 8px 32px rgba(139, 92, 246, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.44);
  transform: translateY(-1px);
}

/* Live AI status pill */
#aiStatusPill,
.ai-status-pill {
  background:
    linear-gradient(160deg, rgba(16, 212, 131, 0.22) 0%, rgba(16, 212, 131, 0.08) 100%),
    var(--gl-thin);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 212, 131, 0.38);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(100, 240, 180, 0.22),
    0 0 16px rgba(16, 212, 131, 0.14);
}