/* ============================================================
   Extras not cleanly covered by the Tailwind CDN.
   (Everything else lives in index.html as Tailwind utilities.)
   ============================================================ */

:root {
  /* Put your wallpaper at frontend/assets/wallpaper.jpg */
  --wallpaper: url('/assets/wallpaper.jpg');
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background-color: #070b18;
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}

/* Wallpaper + dark overlay (layered gradient over the image) */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #070b18;
  background-image:
    linear-gradient(165deg, rgba(10, 14, 30, 0.55) 0%, rgba(7, 11, 24, 0.78) 55%, rgba(7, 11, 24, 0.92) 100%),
    var(--wallpaper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Robust show/hide toggling (app.js depends on this) */
.hidden { display: none !important; }

/* Enlarged ("pinned") tile spans the full row, locked to 16:9 */
.focused { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9 !important; }

/* Active-speaker highlight ring */
.active-speaker {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px #6366f1 !important;
}

/* Local preview: the SDK mirrors the camera element by default, so we mirror
   the wrapper around it — mirror of a mirror = normal. */
.tile__video-wrap { position: absolute; inset: 0; overflow: hidden; }
.tile__video-wrap--local { transform: scaleX(-1); -webkit-transform: scaleX(-1); }

/* Tiles adopt their stream's real aspect ratio (app.js sets it once the
   video dimensions are known); 16:9 is just the pre-metadata default. */
.tile { aspect-ratio: 16 / 9; }
#video-grid { align-items: start; }

/* Connection status dot */
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: #64748b; }
.status-dot--connecting { background: #eab308; }
.status-dot--connected { background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.7); }
.status-dot--reconnecting { background: #fb923c; }
.status-dot--disconnected { background: #ef4444; }

/* Mic/cam "on" (red) state — toggled by app.js */
.btn-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}