/* --------------------------------------------------------------------------
   Mobile bottom navigation — luxury water-lens override
   Scoped to the global mobile nav only, so the shared Liquid Glass material
   elsewhere in the app remains unchanged.
   -------------------------------------------------------------------------- */

nav[aria-label="Mobile Navigation"].ss-liquid-glass {
  left: 50%;
  right: auto;
  width: calc(100vw - 2.5rem);
  max-width: calc(100vw - 2.5rem);
  transform: translateX(-50%);
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(145% 175% at 50% -18%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.11) 22%, transparent 48%),
    radial-gradient(72% 150% at -6% 48%, rgba(255, 255, 255, 0.18) 0%, transparent 62%),
    radial-gradient(72% 150% at 106% 48%, rgba(255, 255, 255, 0.16) 0%, transparent 62%),
    radial-gradient(122% 125% at 50% 48%, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.055) 64%, rgba(255, 255, 255, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 44%, rgba(15, 23, 42, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 24px 58px -30px rgba(15, 23, 42, 0.46),
    0 8px 26px -22px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px) saturate(210%) contrast(1.06) brightness(1.035);
  backdrop-filter: blur(12px) saturate(210%) contrast(1.06) brightness(1.035);
}

nav[aria-label="Mobile Navigation"].ss-liquid-glass::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(96% 92% at 50% 50%, transparent 44%, rgba(255, 255, 255, 0.035) 69%, rgba(255, 255, 255, 0.11) 100%);
  -webkit-backdrop-filter: blur(21px) saturate(235%) contrast(1.09) brightness(1.055);
  backdrop-filter: blur(21px) saturate(235%) contrast(1.09) brightness(1.055);
  -webkit-mask-image: radial-gradient(132% 168% at 50% 50%, transparent 63%, rgba(0, 0, 0, 0.72) 84%, #000 100%);
  mask-image: radial-gradient(132% 168% at 50% 50%, transparent 63%, rgba(0, 0, 0, 0.72) 84%, #000 100%);
}

nav[aria-label="Mobile Navigation"].ss-liquid-glass::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.2) 5%, transparent 13%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.13) 0%, transparent 19%),
    radial-gradient(44% 22% at 19% 3%, rgba(255, 255, 255, 0.27) 0%, transparent 74%),
    radial-gradient(36% 18% at 78% 7%, rgba(255, 255, 255, 0.2) 0%, transparent 76%),
    radial-gradient(88% 128% at -2% 46%, rgba(255, 255, 255, 0.22) 0%, transparent 56%),
    radial-gradient(88% 128% at 102% 46%, rgba(255, 255, 255, 0.2) 0%, transparent 56%);
  opacity: 0.97;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -12px 24px -20px rgba(15, 23, 42, 0.38);
}

/* Active destination: a smaller, clearer water droplet inside the bar. */
nav[aria-label="Mobile Navigation"] .ss-liquid-pill {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(120% 135% at 50% 28%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.075) 42%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -8px 16px -14px rgba(15, 23, 42, 0.3),
    0 9px 20px -17px rgba(15, 23, 42, 0.52);
  -webkit-backdrop-filter: blur(8px) saturate(225%) contrast(1.065) brightness(1.045);
  backdrop-filter: blur(8px) saturate(225%) contrast(1.065) brightness(1.045);
}

nav[aria-label="Mobile Navigation"] .ss-liquid-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(13px) saturate(225%);
  backdrop-filter: blur(13px) saturate(225%);
  -webkit-mask-image: radial-gradient(120% 150% at 50% 50%, transparent 58%, #000 100%);
  mask-image: radial-gradient(120% 150% at 50% 50%, transparent 58%, #000 100%);
}

nav[aria-label="Mobile Navigation"] .ss-liquid-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 18%),
    radial-gradient(72% 78% at 18% 5%, rgba(255, 255, 255, 0.2) 0%, transparent 65%),
    radial-gradient(62% 76% at 96% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 68%);
}

nav[aria-label="Mobile Navigation"] .ss-liquid-pill > * {
  position: relative;
  z-index: 2;
}

.dark nav[aria-label="Mobile Navigation"].ss-liquid-glass {
  background:
    radial-gradient(145% 175% at 50% -18%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 22%, transparent 48%),
    radial-gradient(72% 150% at -6% 48%, rgba(255, 255, 255, 0.075) 0%, transparent 62%),
    radial-gradient(72% 150% at 106% 48%, rgba(255, 255, 255, 0.07) 0%, transparent 62%),
    radial-gradient(122% 125% at 50% 48%, rgba(255, 255, 255, 0.014) 0%, rgba(255, 255, 255, 0.028) 64%, rgba(255, 255, 255, 0.065) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 44%, rgba(0, 0, 0, 0.2) 100%);
  border-color: rgba(255, 255, 255, 0.115);
  box-shadow:
    0 26px 62px -30px rgba(0, 0, 0, 0.84),
    0 9px 28px -22px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(13px) saturate(190%) contrast(1.075) brightness(1.045);
  backdrop-filter: blur(13px) saturate(190%) contrast(1.075) brightness(1.045);
}

.dark nav[aria-label="Mobile Navigation"].ss-liquid-glass::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 5%, transparent 14%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0%, transparent 19%),
    radial-gradient(44% 22% at 19% 3%, rgba(255, 255, 255, 0.12) 0%, transparent 74%),
    radial-gradient(36% 18% at 78% 7%, rgba(255, 255, 255, 0.09) 0%, transparent 76%),
    radial-gradient(88% 128% at -2% 46%, rgba(255, 255, 255, 0.09) 0%, transparent 56%),
    radial-gradient(88% 128% at 102% 46%, rgba(255, 255, 255, 0.08) 0%, transparent 56%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -12px 24px -20px rgba(0, 0, 0, 0.72);
}

.dark nav[aria-label="Mobile Navigation"] .ss-liquid-pill {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(120% 135% at 50% 28%, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.07) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.19),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -8px 16px -14px rgba(0, 0, 0, 0.55),
    0 9px 20px -17px rgba(0, 0, 0, 0.75);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav[aria-label="Mobile Navigation"].ss-liquid-glass {
    background: rgba(252, 249, 245, 0.9);
  }

  .dark nav[aria-label="Mobile Navigation"].ss-liquid-glass {
    background: rgba(24, 24, 30, 0.9);
  }
}

/* Voice assistant microphone orb ------------------------------------------
   Siri-like edge light on touch. The glow appears immediately on press and
   stays softly alive while the microphone is recording. */
button[aria-label="Frage sprechen"],
button[aria-label="Aufnahme beenden"] {
  isolation: isolate;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

button[aria-label="Frage sprechen"]::before,
button[aria-label="Aufnahme beenden"]::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -2;
  pointer-events: none;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 8% 52%, rgba(142, 222, 255, 0.98) 0%, transparent 30%),
    radial-gradient(circle at 29% 22%, rgba(115, 165, 255, 0.94) 0%, transparent 34%),
    radial-gradient(circle at 53% 10%, rgba(166, 137, 255, 0.92) 0%, transparent 36%),
    radial-gradient(circle at 80% 27%, rgba(244, 164, 225, 0.92) 0%, transparent 34%),
    radial-gradient(circle at 94% 63%, rgba(255, 193, 157, 0.88) 0%, transparent 31%),
    conic-gradient(from 210deg, #8edeff, #73a5ff 24%, #a689ff 48%, #f4a4e1 72%, #ffc19d 88%, #8edeff);
  filter: blur(14px) saturate(1.18);
  opacity: 0;
  transform: scale(0.84);
  transition:
    opacity 115ms ease,
    transform 170ms cubic-bezier(0.18, 0.86, 0.22, 1),
    filter 170ms ease;
}

button[aria-label="Frage sprechen"]::after,
button[aria-label="Aufnahme beenden"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 3;
  pointer-events: none;
  border-radius: 9999px;
  border: 1.25px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 4px 1px rgba(255, 255, 255, 0.96),
    0 0 13px 3px rgba(188, 174, 255, 0.42),
    inset 0 0 8px rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 95ms ease,
    transform 150ms cubic-bezier(0.18, 0.86, 0.22, 1);
}

button[aria-label="Frage sprechen"]:active::before,
button[aria-label="Aufnahme beenden"]:active::before {
  opacity: 0.96;
  transform: scale(1.05);
  filter: blur(13px) saturate(1.25);
}

button[aria-label="Frage sprechen"]:active::after,
button[aria-label="Aufnahme beenden"]:active::after {
  opacity: 1;
  transform: scale(1);
}

/* Recording state: keep a calmer version of the glow visible after the tap. */
button[aria-label="Aufnahme beenden"]::before {
  opacity: 0.7;
  transform: scale(1.01);
  animation: ss-voice-orb-breathe 1.45s ease-in-out infinite;
}

button[aria-label="Aufnahme beenden"]::after {
  opacity: 0.86;
  transform: scale(1);
}

@keyframes ss-voice-orb-breathe {
  0%, 100% {
    opacity: 0.56;
    transform: scale(0.98);
    filter: blur(14px) saturate(1.14);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.07);
    filter: blur(16px) saturate(1.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  button[aria-label="Aufnahme beenden"]::before {
    animation: none;
  }
}