/* Decorative light ribbons sit behind Listen, never above interactive content. */
@media (max-width: 900px) {
  html:root[data-theme="dark"][data-mobile-view="listen"]:not(.recognition-result-active) body { background: #090d10; }
  html:root[data-mobile-view="listen"]:not(.recognition-result-active) .listen-backdrop {
    top: 0; right: 0; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); left: 0;
    z-index: -1; overflow: hidden; opacity: 1; pointer-events: none;
  }
  html:root[data-mobile-view="listen"] .listen-backdrop > svg { display: none; }
  html:root[data-mobile-view="listen"] .listen-backdrop::before {
    position: absolute; top: 0; right: 0;
    width: 42%; min-width: 140px; max-width: 310px;
    height: 32vh; max-height: 260px;
    background: url("android-listen-corner.svg") top right / 100% 100% no-repeat;
    content: "";
  }
  html:root[data-mobile-view="listen"] .listen-backdrop::after {
    position: absolute; right: 0; bottom: 0; left: 0;
    height: 18vh; min-height: 96px; max-height: 156px;
    background: url("android-listen-waves.svg") bottom center / 100% 100% no-repeat;
    content: "";
  }
  html:root[data-mobile-view="listen"]:not(.recognition-result-active) .recognize-button:not(.is-listening):not(:disabled) .recognize-button-icon {
    box-sizing: border-box;
    border-width: 1px;
    border-color: rgba(255, 127, 40, .3);
    box-shadow: none;
    animation: none !important;
  }
  html:root[data-mobile-view="listen"]:not(.recognition-result-active) .recognize-button:not(.is-listening):not(:disabled) .recognize-button-icon::before {
    position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px;
    box-sizing: border-box;
    border: 4px solid #ff7f28; border-radius: inherit;
    box-shadow: 0 0 16px rgba(255, 127, 40, .22);
    content: ""; visibility: visible; opacity: 0; pointer-events: none;
    /* A real border fades correctly in software WebViews; inset shadows do not. */
    animation: androidIdleBreath 1.8s ease-in-out infinite !important;
  }
  html:root.android-dialog-open[data-mobile-view="listen"]:not(.recognition-result-active) .recognize-button:not(.is-listening):not(:disabled) .recognize-button-icon::before {
    animation-play-state: paused !important;
  }
}

@keyframes androidIdleBreath {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 1; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html:root[data-mobile-view="listen"]:not(.recognition-result-active) .recognize-button:not(.is-listening):not(:disabled) .recognize-button-icon::before {
    animation: none !important;
    will-change: auto;
  }
}