/* SmartVoiceX WebGL background + liquid-glass side-card
   Single full-screen canvas (behind DOM) that renders:
   - animated blue/purple blob field
   - liquid-glass rounded-rect effect aligned to .side-card[data-liquid-glass]
*/

:root{
  --svx-bg-fallback: #07070a;
}

html{
  background: var(--svx-bg-fallback);
  height: 100%;
  min-height: 100%;
}

/* If WebGL fails, ensure we keep a visible background */
.no-webgl body{
  background: var(--svx-bg-fallback) !important;
}

body{
  /* Keep a solid fallback background that always extends the full page,
     including iOS Safari scroll/overscroll quirks.
     The WebGL canvas sits above this background and below the DOM.
  */
  background: var(--svx-bg-fallback) !important;
  min-height: 100%;
}

#svx-webgl-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Ensure anything that relies on stacking stays above the background canvas */
main, .topbar, .topbar-bg{
  position: relative;
  z-index: 1;
}