/* SG Chat Web Client — call UI (video grid, mic/cam/leave controls).
   Colors/spacing/type come from tokens.css (loaded first in index.html).

   Deliberate deviation from the light theme used elsewhere: real calls are
   full-video, so the call screen uses a dark background (matches WhatsApp/
   Messenger Kids call-screen conventions — dark chrome makes video tiles
   pop and avoids a jarring bright-white glow during a video call). */

.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.roster-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.roster-list li:last-child { border-bottom: none; }
.roster-name { font-weight: 600; color: var(--color-text); }
.roster-meta { font-size: var(--text-xs); margin-left: var(--space-2); color: var(--color-text-muted); }

/* --- Call stage (dark treatment, local vars derived from token colors) --- */
#view-call {
  /* Darkened version of --color-text (--sg-ink) for the call stage —
     named locally since tokens.css only defines the light-theme surfaces
     and this is the one place the app intentionally goes dark. */
  --call-stage-bg: #1c1712;
  --call-tile-bg: #120e0b;
}

#call-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  background: var(--call-stage-bg);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  min-height: 96px;
}
#call-video-grid.is-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}
#call-video-grid.is-idle::before {
  content: "No one is on the call yet";
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.participant-tile {
  background: var(--call-tile-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
}
.participant-tile video {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #000;
  display: block;
}
.participant-tile .tile-label {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.call-controls {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.call-controls button.active {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
#call-status {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}