/* ============================================================
   live.html — Light theme overrides
   Activated by :root[data-theme="light"]
   Mirrors the cream/gold aesthetic of index-light / dashboard-light.
   The video stage stays dark on purpose for contrast.
   ============================================================ */

:root[data-theme="light"]{
  --bg:#FFF9F5;
  --surface:#FFF3EC;
  --card:#FFFFFF;
  --crimson:#7B0D1E;
  --crimson-soft:#FCE7EA;
  --crimson-action:#B02035;
  --gold:#D4A017;
  --gold-light:#F0C040;
  --gold-soft:#FBF1D6;
  --ink:#1A0608;
  --text:#1A0608;
  --muted:#6B5658;
  --line:rgba(123,13,30,.10);
  --line-strong:rgba(212,160,23,.45);
}

/* Ambient warm glow */
:root[data-theme="light"] body::before{
  background:
    radial-gradient(900px 500px at 90% -10%,rgba(212,160,23,.18),transparent 60%),
    radial-gradient(700px 600px at -10% 110%,rgba(123,13,30,.06),transparent 65%);
}

/* ===== TOP BAR ===== */
:root[data-theme="light"] .topbar{
  background:rgba(255,249,245,.92);
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .session-title strong{ color:var(--ink); }
:root[data-theme="light"] .session-title small{ color:var(--muted); }
:root[data-theme="light"] .session-title small i{ color:var(--gold); }

:root[data-theme="light"] .timer{
  background:#fff;border:1px solid var(--line-strong);color:var(--crimson);
  box-shadow:0 4px 12px rgba(123,13,30,.06);
}
:root[data-theme="light"] .timer i{ color:var(--gold); }

:root[data-theme="light"] .quick-meta{ color:var(--muted); }
:root[data-theme="light"] .quick-meta i{ color:var(--gold); }

:root[data-theme="light"] .icon-btn{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 2px 8px rgba(123,13,30,.04);
}
:root[data-theme="light"] .icon-btn:hover{
  border-color:var(--gold);color:var(--crimson);background:var(--gold-soft);
}

/* ===== STAGE — keep DARK on purpose (better video contrast) ===== */
/* No overrides for .stage / .stage-canvas / .whiteboard / .teacher-tile
   / .name-overlay / .reactions-strip / .controls / .ctrl-btn — these
   stay on the dark inline styles for stage readability. */

/* ===== SIDE PANEL ===== */
:root[data-theme="light"] .side{
  background:linear-gradient(180deg,#fff,var(--surface));
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(123,13,30,.06);
}
:root[data-theme="light"] .tabs{
  background:var(--gold-soft);
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .tab{ color:var(--muted); }
:root[data-theme="light"] .tab .count{
  background:rgba(123,13,30,.06);color:var(--muted);
}
:root[data-theme="light"] .tab:hover{ color:var(--ink); }
:root[data-theme="light"] .tab.active{
  background:#fff;color:var(--crimson);
  box-shadow:inset 0 0 0 1px var(--line-strong),0 4px 12px rgba(212,160,23,.12);
}
:root[data-theme="light"] .tab.active .count{
  background:var(--gold-soft);color:var(--crimson);
}

/* Participants list */
:root[data-theme="light"] .participants{ border-bottom:1px solid var(--line); }
:root[data-theme="light"] .participants-head h4{ color:var(--crimson); }
:root[data-theme="light"] .participants-head a{ color:var(--crimson); }
:root[data-theme="light"] .participant:hover{ background:var(--gold-soft); }
:root[data-theme="light"] .p-avatar::after{ border:2px solid #fff; }
:root[data-theme="light"] .p-info strong{ color:var(--ink); }
:root[data-theme="light"] .p-info small{ color:var(--muted); }
:root[data-theme="light"] .p-ico.muted-soft{
  background:var(--gold-soft);color:var(--muted);border:1px solid var(--line);
}

/* Chat */
:root[data-theme="light"] .chat-head{ border-bottom:1px solid var(--line); }
:root[data-theme="light"] .chat-head h4{ color:var(--crimson); }
:root[data-theme="light"] .chat-stream::-webkit-scrollbar-thumb{
  background:var(--line-strong);
}
:root[data-theme="light"] .msg-bubble{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
:root[data-theme="light"] .msg .who{ color:var(--crimson); }
:root[data-theme="light"] .msg .who small{ color:var(--muted); }
:root[data-theme="light"] .msg .who .badge-host{
  background:var(--gold-soft);color:var(--crimson);border:1px solid var(--line-strong);
}
/* Teacher message stays crimson gradient — looks good on cream too */

:root[data-theme="light"] .system-msg{
  background:var(--gold-soft);color:var(--muted);border:1px dashed var(--line);
}
:root[data-theme="light"] .system-msg i{ color:var(--crimson); }

/* Composer */
:root[data-theme="light"] .composer{
  background:var(--surface);border-top:1px solid var(--line);
}
:root[data-theme="light"] .comp-act{
  background:#fff;border:1px solid var(--line);color:var(--muted);
}
:root[data-theme="light"] .comp-act:hover{
  background:var(--gold-soft);color:var(--crimson);border-color:var(--line-strong);
}
:root[data-theme="light"] .comp-input{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(123,13,30,.04);
}
:root[data-theme="light"] .comp-input input{ color:var(--ink); }
:root[data-theme="light"] .comp-input input::placeholder{ color:var(--muted); }

/* ===== BOTTOM INFO STRIP ===== */
:root[data-theme="light"] .info-strip{
  background:linear-gradient(135deg,var(--crimson-soft),var(--gold-soft));
  border:1px solid var(--line-strong);
  box-shadow:0 8px 24px rgba(123,13,30,.08);
}
:root[data-theme="light"] .info-icon{
  background:#fff;color:var(--crimson);border:1px solid var(--line-strong);
}
:root[data-theme="light"] .info-item small{ color:var(--muted); }
:root[data-theme="light"] .info-item strong{ color:var(--ink); }
:root[data-theme="light"] .info-divider{ background:var(--line); }