/* ==========================================================================
   MyissuesLearn — Classroom System (shared) v1.0
   Used by: live-classroom.html, instructor-room.html (Charity door, :8085)
            private-classroom.html (MyissuesLearn, :8765)
   Keep the copies in both Frontend_Source/ and the Charity public_html root identical.
   ========================================================================== */

/* ---------- Light theme tokens for the two Charity group rooms ---------- */
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]){
  color-scheme: light;
  --bg-base:#EEF2F8; --bg-surface:#F7F9FC; --bg-elevated:#FFFFFF; --bg-card:#FFFFFF; --bg-hover:#E6EDF7; --bg-panel:#F4F7FB; --bg-deep:#E4EAF3;
  --border-subtle:rgba(13,35,64,.09); --border-mid:rgba(13,35,64,.15); --border-strong:rgba(13,35,64,.28);
  --border-s:rgba(13,35,64,.09); --border-m:rgba(13,35,64,.15);
  --text-primary:#0D2340; --text-secondary:#3B4C66; --text-muted:#5B6B83; --text-disabled:#8A97AB;
  --text-p:#0D2340; --text-s:#3B4C66; --text-m:#5B6B83;
  --gold:#946500; --gold-dark:#7A5200; --gold-bright:#B87A00;
  --gold-glow:rgba(148,101,0,.16); --gold-bg:rgba(148,101,0,.10); --gold-dim:rgba(148,101,0,.10); --gold-border:rgba(148,101,0,.34);
  --green:#0A7C4A; --green-dim:rgba(10,124,74,.11);
  --red:#C62828;   --red-dim:rgba(198,40,40,.10);
  --blue:#1A5FB4;  --blue-dim:rgba(26,95,180,.10);
  --amber:#A8600A; --amber-dim:rgba(168,96,10,.12);
  --purple:#6D28D9;--purple-dim:rgba(109,40,217,.10);
  --teal:#0A7C6E;  --teal-dim:rgba(10,124,110,.11);
  --caption-bg:rgba(8,21,43,.90);
}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) ::-webkit-scrollbar-thumb{background:rgba(13,35,64,.22)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .class-meta-item svg,
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .ih-meta-item svg{color:var(--text-muted)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .conn-bar:nth-child(4){background:rgba(13,35,64,.16)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .eng-meter-bar{background:rgba(13,35,64,.10)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .student-tile:hover{background:var(--bg-hover)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .student-tile-attention{background:var(--amber-dim)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .qa-upvote,
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .caption-lang-select{background:var(--bg-elevated);color:var(--text-secondary);border-color:var(--border-mid)}
html[data-theme="light"][data-page-role]:not([data-page-role="PRIVATE_TUTORING"]) .ai-cohost-panel{background:linear-gradient(160deg,#EDF3FC,#FFFFFF);border-color:var(--gold-border)}
/* slide stage, avatars, captions stay navy in both themes: they are "screens", not chrome */

/* One-on-one room: map shared components onto its own tokens (no changes to its design) */
html[data-page-role="PRIVATE_TUTORING"]{--bg-elevated:var(--solid);--bg-card:var(--solid);--bg-panel:var(--panel);--bg-hover:var(--panel-2);
  --border-subtle:var(--line);--border-mid:var(--line-2);--text-primary:var(--text);--text-secondary:var(--text-2);--text-muted:var(--muted);
  --cs-gold:var(--accent);--gold-bg:var(--chip-bg);--gold-border:var(--accent)}
html[data-page-role="PRIVATE_TUTORING"] .cs-hbtn.cs-gold:hover,html[data-page-role="PRIVATE_TUTORING"] .cs-dialog .cs-primary{color:var(--accent-ink)}
.cs-opt{display:inline-flex}
@media (max-width:900px){.cs-opt{display:none !important}}

/* ---------- Shared buttons (header actions) ---------- */
.cs-hbtn{
  height:30px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font:600 .72rem/1 'Inter',-apple-system,'Segoe UI',sans-serif;white-space:nowrap;cursor:pointer;
  color:var(--text-secondary,#9fb0c8);background:var(--bg-elevated,#142a4a);
  border:1px solid var(--border-mid,rgba(255,255,255,.14));border-radius:8px;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.cs-hbtn:hover{background:var(--bg-hover,#1b3a63);color:var(--text-primary,#fff)}
.cs-hbtn:active{transform:scale(.97)}
.cs-hbtn:focus-visible,.cs-dialog button:focus-visible,.cs-dialog select:focus-visible,.cs-dialog textarea:focus-visible,.cs-dialog input:focus-visible{outline:2px solid var(--cs-gold,var(--gold,#c4a052));outline-offset:2px}
.cs-hbtn svg{width:13px;height:13px;flex-shrink:0}
.cs-hbtn.cs-gold{color:var(--cs-gold,var(--gold,#c4a052));border-color:var(--gold-border,rgba(196,160,82,.45));background:var(--gold-bg,rgba(196,160,82,.1))}
.cs-hbtn.cs-gold:hover{background:var(--cs-gold,var(--gold,#c4a052));color:#0d2340}
html[data-theme="light"] .cs-hbtn.cs-gold:hover{color:#fff}
.cs-drawer-btn{display:none}

/* ---------- Toast ---------- */
.cs-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);z-index:100000;max-width:min(92vw,520px);
  padding:10px 16px;border-radius:10px;font:500 .8rem/1.35 'Inter',-apple-system,sans-serif;
  background:var(--bg-card,#142a4a);color:var(--text-primary,#fff);border:1px solid var(--gold-border,rgba(196,160,82,.45));
  box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.cs-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Dialog ---------- */
.cs-scrim-dlg{position:fixed;inset:0;z-index:99990;background:rgba(5,12,26,.62);display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.cs-scrim-dlg.on{display:flex}
.cs-dialog{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:16px;
  background:var(--bg-card,#142a4a);color:var(--text-primary,#fff);border:1px solid var(--border-mid,rgba(255,255,255,.14));
  box-shadow:0 24px 70px rgba(0,0,0,.45);font-family:'Inter',-apple-system,'Segoe UI',sans-serif}
.cs-dialog header{padding:18px 20px 12px;border-bottom:1px solid var(--border-subtle,rgba(255,255,255,.08))}
.cs-dialog .cs-eyebrow{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-gold,var(--gold,#c4a052))}
.cs-dialog h2{margin:4px 0 0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.cs-dialog .cs-body{padding:14px 20px;display:grid;gap:12px}
.cs-dialog .cs-ctx{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.76rem;padding:10px 12px;border-radius:10px;background:var(--bg-panel,rgba(255,255,255,.04));border:1px solid var(--border-subtle,rgba(255,255,255,.08))}
.cs-dialog .cs-ctx dt{color:var(--text-muted,#8ea0ba);font-weight:600}
.cs-dialog .cs-ctx dd{margin:0;font-weight:600;color:var(--text-primary,#fff);overflow-wrap:anywhere}
.cs-dialog label{display:grid;gap:5px;font-size:.72rem;font-weight:700;color:var(--text-secondary,#b6c4d8)}
.cs-dialog select,.cs-dialog textarea,.cs-dialog input{font:500 .84rem/1.4 inherit;font-family:inherit;color:var(--text-primary,#fff);background:var(--bg-elevated,#0f2340);border:1px solid var(--border-mid,rgba(255,255,255,.18));border-radius:8px;padding:8px 10px;width:100%}
.cs-dialog textarea{resize:vertical;min-height:64px}
.cs-dialog footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 20px 18px;border-top:1px solid var(--border-subtle,rgba(255,255,255,.08))}
.cs-dialog .cs-primary{background:var(--cs-gold,var(--gold,#c4a052));color:#0d2340;border-color:transparent}
html[data-theme="light"] .cs-dialog .cs-primary{color:#fff}
.cs-dialog .cs-note{font-size:.68rem;color:var(--text-muted,#8ea0ba)}

/* ---------- One-on-one: handoff banner ---------- */
.cs-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border-radius:12px;
  background:var(--gold-bg,rgba(196,160,82,.12));border:1px solid var(--gold-border,rgba(196,160,82,.4));color:var(--text-primary,#fff);font-size:.8rem;font-weight:600}
.cs-banner b{color:var(--cs-gold,var(--gold,#c4a052))}
.cs-banner .cs-hbtn{margin-left:auto}
html[data-theme="light"] .cs-banner{color:#0D2340}

/* ==========================================================================
   RESPONSIVE (Charity group rooms) — panels become drawers, nothing overflows
   ========================================================================== */
html[data-page-role="LIVE_STUDENT"] .workspace,
html[data-page-role="INSTRUCTOR"] .workspace{position:relative;min-height:0}
html[data-page-role] body{min-width:0}
html[data-page-role="LIVE_STUDENT"] .center-column,
html[data-page-role="INSTRUCTOR"] .center-col{min-width:0;min-height:0}
.cs-panel-scrim{display:none}

@media (max-width:1100px){
  html[data-page-role="LIVE_STUDENT"] .left-panel,
  html[data-page-role="LIVE_STUDENT"] .right-panel,
  html[data-page-role="INSTRUCTOR"] .panel-left,
  html[data-page-role="INSTRUCTOR"] .panel-right{
    display:flex !important;position:absolute;top:0;bottom:0;z-index:60;width:min(320px,80vw);max-width:80vw;
    background:var(--bg-surface,#0f2340);box-shadow:0 0 40px rgba(0,0,0,.4);
    transition:transform .24s cubic-bezier(.32,.72,0,1);visibility:hidden;
  }
  html[data-page-role="LIVE_STUDENT"] .left-panel,html[data-page-role="INSTRUCTOR"] .panel-left{left:0;transform:translateX(-105%)}
  html[data-page-role="LIVE_STUDENT"] .right-panel,html[data-page-role="INSTRUCTOR"] .panel-right{right:0;left:auto;transform:translateX(105%)}
  html[data-page-role] [data-cs-open="true"]{transform:none !important;visibility:visible}
  .cs-panel-scrim{position:absolute;inset:0;z-index:55;background:rgba(5,12,26,.55);display:block;opacity:0;pointer-events:none;transition:opacity .2s}
  .cs-panel-scrim.on{opacity:1;pointer-events:auto}
  .cs-drawer-btn{display:inline-flex}

  /* header zones: stop reserving the side-panel widths */
  html[data-page-role="LIVE_STUDENT"] .header-logo-zone,
  html[data-page-role="LIVE_STUDENT"] .header-right,
  html[data-page-role="INSTRUCTOR"] .ih-logo,
  html[data-page-role="INSTRUCTOR"] .ih-right{width:auto !important;min-width:0;padding-left:10px;padding-right:10px;border:0}
  html[data-page-role="LIVE_STUDENT"] .header-class-info,
  html[data-page-role="INSTRUCTOR"] .ih-center{min-width:0;padding:0 10px}
  html[data-page-role="LIVE_STUDENT"] .class-title,
  html[data-page-role="INSTRUCTOR"] .ih-class-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html[data-page-role="LIVE_STUDENT"] .class-title-block,
  html[data-page-role="INSTRUCTOR"] .ih-class-info{min-width:0;flex:1}
  html[data-page-role="LIVE_STUDENT"] .class-meta,
  html[data-page-role="INSTRUCTOR"] .ih-class-meta{display:none}
}

@media (max-width:900px){
  html[data-page-role] .myi-pb-item,
  html[data-page-role] .myi-pb-senior{display:none}
  html[data-page-role] .myi-pb-inner{padding:0 12px;min-width:0}
  html[data-page-role] .myi-pb-right{margin-left:auto}
  html[data-page-role="LIVE_STUDENT"] .header-right .header-btn:not(.danger):not(.cs-hbtn),
  html[data-page-role="LIVE_STUDENT"] .conn-quality,
  html[data-page-role="INSTRUCTOR"] .ih-stat-chip,
  html[data-page-role="INSTRUCTOR"] .ih-right .ih-btn:not(.end){display:none}
  html[data-page-role="LIVE_STUDENT"] .header-right,
  html[data-page-role="INSTRUCTOR"] .ih-right{gap:6px;flex-wrap:nowrap}
}

@media (max-width:760px){
  html[data-page-role] .cs-hbtn .cs-lbl{display:none}
  html[data-page-role] .cs-hbtn{padding:0 9px}
  html[data-page-role] .header-logo-text,html[data-page-role] .ih-logo-text,html[data-page-role] .ih-role-tag,
  html[data-page-role] .rec-badge,html[data-page-role] .ih-rec-badge,html[data-page-role] .myi-pb-home{display:none}
  html[data-page-role="LIVE_STUDENT"] .header-class-back,html[data-page-role="INSTRUCTOR"] .ih-class-back{display:none}
  html[data-page-role="LIVE_STUDENT"] .session-timer,html[data-page-role="INSTRUCTOR"] .ih-timer{font-size:.7rem}
  html[data-page-role="LIVE_STUDENT"] .header-btn.danger,html[data-page-role="INSTRUCTOR"] .ih-btn.end{padding:0 8px}
}

/* bottom control bars: always inside the viewport, scroll sideways if crowded, End first */
@media (max-width:900px){
  html[data-page-role="LIVE_STUDENT"] .controls-bar,
  html[data-page-role="INSTRUCTOR"] .broadcast-controls{
    flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;justify-content:flex-start !important;
    gap:6px;padding-left:8px;padding-right:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex-shrink:0;
  }
  html[data-page-role="LIVE_STUDENT"] .controls-bar>*,
  html[data-page-role="INSTRUCTOR"] .broadcast-controls>*{flex-shrink:0}
  html[data-page-role="LIVE_STUDENT"] .end-class-btn,
  html[data-page-role="INSTRUCTOR"] .bc-end-btn{order:-1;margin-left:0 !important}
}
@media (max-width:900px){
  html[data-page-role="LIVE_STUDENT"] .student-grid-strip{max-width:100%;overflow-x:auto}
  html[data-page-role="INSTRUCTOR"] .center-col,html[data-page-role="LIVE_STUDENT"] .center-column{overflow-x:hidden}
}

/* short viewports (1024x576 etc): protect the footer */
@media (max-height:640px){
  html[data-page-role="LIVE_STUDENT"] .student-grid-strip{display:none}
  html[data-page-role] .myi-pb-inner{height:40px}
}

@media (prefers-reduced-motion:reduce){
  html[data-page-role] *,.cs-toast,.cs-hbtn{transition:none !important;animation-duration:.001ms !important}
}

/* ---- v1.0 QA fixes ---- */
/* compact headers: icon-only secondary buttons so nothing overflows between 761 and 1180px */
@media (max-width:1180px){
  html[data-page-role="INSTRUCTOR"] .ih-btn:not(.end),
  html[data-page-role="LIVE_STUDENT"] .header-btn:not(.danger){font-size:0;gap:0;padding:0 9px}
  html[data-page-role="INSTRUCTOR"] .ih-btn svg,html[data-page-role="LIVE_STUDENT"] .header-btn svg{width:13px;height:13px}
  html[data-page-role] .cs-hbtn .cs-lbl{display:none}
  html[data-page-role="INSTRUCTOR"] .cs-opt,html[data-page-role="INSTRUCTOR"] .ih-stat-chip{display:none !important}
  html[data-page-role="INSTRUCTOR"] .ih-right,html[data-page-role="LIVE_STUDENT"] .header-right{min-width:0;gap:6px}
}
/* live footer: End/Leave is pinned, the other controls scroll */
@media (max-width:900px){
  html[data-page-role="LIVE_STUDENT"] .controls-bar{overflow:visible !important}
  html[data-page-role="LIVE_STUDENT"] .controls-center{flex:1 1 auto !important;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  html[data-page-role="LIVE_STUDENT"] .controls-right{flex:0 0 auto !important}
}
/* Larissa floating button must never cover the footer End button */
html[data-page-role="LIVE_STUDENT"] div[style*="bottom: 24px"][style*="99999"],
html[data-page-role="INSTRUCTOR"] div[style*="bottom: 24px"][style*="99999"]{bottom:92px !important;right:12px !important;transform:scale(.8);transform-origin:bottom right}

/* mobile-responsive.css reserves 72px for a bottom nav that these rooms do not render */
html[data-page-role="LIVE_STUDENT"] body,html[data-page-role="INSTRUCTOR"] body{padding-bottom:0 !important}
@media (max-width:600px){html[data-page-role="LIVE_STUDENT"] .controls-left{display:none}}

/* off-canvas drawers must not create scrollable overflow in the workspace (a click/focus could otherwise scroll it sideways) */
@supports (overflow:clip){html[data-page-role="LIVE_STUDENT"] .workspace,html[data-page-role="INSTRUCTOR"] .workspace{overflow:clip !important}}


/* mobile-responsive.css positions these panels with its own right:-100% / transforms: pin ours */
@media (max-width:1100px){
  html[data-page-role="LIVE_STUDENT"] .left-panel,html[data-page-role="INSTRUCTOR"] .panel-left{left:0 !important;right:auto !important}
  html[data-page-role="LIVE_STUDENT"] .right-panel,html[data-page-role="INSTRUCTOR"] .panel-right{right:0 !important;left:auto !important}
}


/* ==========================================================================
   Larissa presence (WO MYISSUESLEARN-LARISSA-VISUAL-ALIGNMENT-01)
   Same portrait treatment as the one-on-one room: larger, gold conic halo ring,
   soft outer glow + lift shadow, face framed higher and slightly closer.
   Visual only: markup, handlers and the speaking/lip-sync class hooks are untouched.
   ========================================================================== */
html[data-page-role="LIVE_STUDENT"] .teacher-av-large,
html[data-page-role="INSTRUCTOR"] .instructor-av{
  box-sizing:border-box;padding:6px;border:0;
  background:conic-gradient(from 200deg,#F5B73B,#FFE29A,#C9860A,#F5B73B);
  box-shadow:0 0 0 3px rgba(245,183,59,.55),0 0 0 9px rgba(245,183,59,.14),0 18px 50px rgba(0,0,0,.35);
  animation:none;
}
html[data-page-role="LIVE_STUDENT"] .teacher-av-large{width:clamp(120px,24vh,210px);height:clamp(120px,24vh,210px)}
html[data-page-role="INSTRUCTOR"] .instructor-av{width:clamp(120px,26vh,206px);height:clamp(120px,26vh,206px)}@media (max-height:640px){html[data-page-role="INSTRUCTOR"] .instructor-av{width:clamp(84px,16vh,104px);height:clamp(84px,16vh,104px)}html[data-page-role="INSTRUCTOR"] .instructor-name{margin-top:8px;font-size:1.1rem}}
html[data-page-role="LIVE_STUDENT"] .teacher-av-large img,
html[data-page-role="INSTRUCTOR"] .instructor-av img{
  border-radius:50%;object-fit:cover;object-position:center 18%;
  transform:scale(1.1);transform-origin:50% 26%;background:#0D2340;
}
/* speaking: halo breathes (same cue as the one-on-one ripple) */
html[data-page-role="LIVE_STUDENT"] .teacher-av-large.larissa-speaking{
  border:0;animation:cs-halo 1.6s ease-in-out infinite;
  box-shadow:0 0 0 10px rgba(245,183,59,.16),0 18px 50px rgba(0,0,0,.35);
}
@keyframes cs-halo{
  0%,100%{box-shadow:0 0 0 8px rgba(245,183,59,.10),0 18px 50px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 16px rgba(245,183,59,.20),0 18px 50px rgba(0,0,0,.35)}
}
/* the old thin rings would be clipped/doubled against the new halo */
html[data-page-role="LIVE_STUDENT"] .teacher-speaking-ring,
html[data-page-role="INSTRUCTOR"] .av-status-ring{display:none}
/* name / role read like the one-on-one hero */
html[data-page-role="LIVE_STUDENT"] .teacher-name-overlay,
html[data-page-role="INSTRUCTOR"] .instructor-name{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-top:16px}
html[data-page-role="LIVE_STUDENT"] .teacher-role-overlay{font-size:.82rem}
html[data-page-role="INSTRUCTOR"] .instructor-subtitle{font-size:.8rem}
html[data-page-role="INSTRUCTOR"] .instructor-av-wrap{gap:6px}
/* a calm spotlight behind her, like the one-on-one stage */
html[data-page-role="LIVE_STUDENT"] .teacher-video-area{background:radial-gradient(ellipse at 50% 38%,rgba(46,129,224,.22) 0%,rgba(10,23,48,0) 62%)}
html[data-page-role="INSTRUCTOR"] .stage-glow{width:640px;height:640px;background:radial-gradient(circle,rgba(46,129,224,.20) 0%,transparent 68%)}
html[data-theme="light"][data-page-role="LIVE_STUDENT"] .teacher-video-area{background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.95) 0%,rgba(220,231,245,0) 66%)}
html[data-theme="light"][data-page-role="INSTRUCTOR"] .stage-glow{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,transparent 68%)}
html[data-theme="light"][data-page-role] .teacher-av-large,
html[data-theme="light"][data-page-role] .instructor-av{box-shadow:0 0 0 8px rgba(201,134,10,.12),0 14px 36px rgba(13,35,64,.22)}
@media (prefers-reduced-motion:reduce){html[data-page-role] .teacher-av-large.larissa-speaking{animation:none}}