/*
 * Cirel embed widget styles.
 *
 * The widget itself (aura + controls) lives inside the iframe at
 * /agent/embed.html — that's where the AgentAudioVisualizerAura
 * component renders. This stylesheet just keeps the iframe container
 * tidy on the host page (no extra scrollbar, transparent background)
 * and provides a fallback if the host site loaded this CSS but the
 * widget JS hasn't injected the iframe yet.
 *
 * If you want to restyle the aura/buttons themselves, edit the
 * EmbedApp component in src/web/frontend/src/embed/EmbedApp.tsx and
 * rebuild the frontend.
 */

#cirel-demo {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: block;
}

#cirel-demo iframe {
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: dark;
  display: block;
}

/* Until the iframe loads, show nothing in the host — better than a
   flash of broken styling. The iframe itself takes over once injected. */
#cirel-demo:empty {
  min-height: 540px;
}