/* iBNiChat – Room UI (Teaching + Quiz)
client/room.ui.css */


/* --- Whiteboard vs Room Pill: stacking only; height handled by JS --- */
/* Stacking: toolbar sits on top; pill above board; board content below pill */
.wb-toolbar{ z-index: 1700; }
#roomCode{ position: relative; z-index: 1600; }
.wb, .wb .doc-viewport, .wb .wb-canvas, .wb .text-layer{
  position: relative;
  z-index: 1400;
}




/* Global modal layer — always above the board & toasts */
.vbgModal,
.quiz-host-modal,
.quiz-fb,
#infoModal{
  position:fixed;
  inset:0;
  z-index:6000 !important;   /* outranks everything in the room */
}


/* When a modal is open, prevent board hit-testing */
body.modal-open #boardLayer,
body.modal-open .wb-canvas,
body.modal-open .text-layer{
  pointer-events:none !important;
}


/* Doc pages live inside the viewport and never spill behind it */
.wb .doc-viewport{ overflow:auto; }
.wb .doc-page{ position:relative; z-index:1; }

  


:root{
    --rail-w: 320px;
    --ink:#111827; --ink-2:#334155;
    --paper:#0f1116;
    --sheet:#111218;
    --brand:#22c55e;
    --brand-2:#06b6d4;
    --gold:#f59e0b;
    --accent:#2563eb;
  }
  
/* Fill viewport and prevent the page itself from scrolling (dock is fixed outside #room) */
#room{
  height:100dvh;
  overflow:hidden;
}

body.in-room{
  overflow:hidden !important;
  overscroll-behavior:none;
  align-items:stretch !important;
}

.ibni-room{
  display:grid;
  grid-template-columns: 1fr minmax(280px,var(--rail-w));
  gap:12px;
  width:100%;
  height:100%;
  min-height:0;
  padding:10px 16px 0;
  box-sizing:border-box;
}
  
  
  /* ---------- MAIN (teaching/quiz stage) ---------- */
.stage-shell{
  background:var(--sheet);
  border:1px solid #2c2d32;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);

  display:flex;
  flex-direction:column;
  min-width:0;

  height:100%;
  min-height:0;
  overflow:hidden;

  /* bottom padding reserves click-space ONLY for the Dock now */
  padding-bottom: calc(var(--dock-h, 0px) + 12px);
}
  
  
  /* Top mode tab */
.modebar{
  display:flex;
  gap:6px;
  padding:8px;
  background:#15171d;
  border-bottom:1px solid #2c2d32;
  align-items:center;
}

.modebar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Room code pill in the top bar */
.modebar-right #roomCode.roomCodePill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  font-size:.82rem;
  line-height:1;
  white-space:nowrap;
}
.modebar-right #roomCode .icon{
  width:26px;
  height:26px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#fff;
}
  .modebar button{
    appearance:none; border:0; padding:.5rem .8rem; border-radius:999px; font-weight:700; cursor:pointer;
    color:#e5e7eb; background:#1e293b;
  }
  .modebar button.active{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#06131c; }
  
  /* TEACHING BOARD */
  .wb{
    position:relative; flex:0 0 auto; background:transparent; overflow:visible;
  }
  
  .wb-toolbar{
    position:sticky; top:0; left:0;
    z-index:1600; /* ↑ keep toolbar above pills */
    display:flex; gap:6px; align-items:center;
    padding:8px; background:rgba(10,12,18,.9);
    backdrop-filter: blur(8px); border-bottom:1px solid #1f2128;
  }
  
  .wb-toolbar .btn{border:1px solid #2c2d32; background:#15171d; color:#e5e7eb; border-radius:10px; padding:.45rem .6rem; font-weight:600; cursor:pointer}
  .wb-toolbar .btn.on{outline:2px solid var(--accent)}
  .wb-toolbar input[type="color"]{width:30px;height:30px;border:0;background:transparent;padding:0;cursor:pointer}
  
  .doc-viewport{
    position:relative; min-height:420px;
    display:grid; place-items:center; padding:16px;
  }
  .doc-page{ background:#fff; border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.45); }
  .doc-hint{ color:#94a3b8; font-weight:600; }
  
  .wb-canvas{
    position:absolute; inset:0; cursor: crosshair; pointer-events:auto;
  }
  .wb-canvas.hidden{display:none}
  
  /* QUIZ BOARD */
  .quiz-board{
    --ring: 10px;
    display:none; place-items:center; gap:18px; padding:18px; flex:1; overflow:auto;
    background: radial-gradient(1200px 600px at 50% -30%, #223 0%, #0b0d14 60%, #0b0c12 100%);
  }
  .quiz-card{
    width:min(820px,95%); border-radius:16px; padding:18px 18px 22px;
    background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.12));
    border:1px solid #2c2d32; color:#e5e7eb;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .quiz-q{
    font-weight:800; font-size:1.15rem;
    background:linear-gradient(90deg, #334155, #0b0c12);
    border:1px solid #2c2d32; border-radius:12px; padding:.9rem 1rem; margin-bottom:12px;
  }
  .quiz-opts{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .opt{
    display:flex; align-items:center; gap:10px; border-radius:12px; padding:.7rem .8rem; cursor:pointer;
    background:#0f121a; border:1px solid #2b2e37; transition:.15s;
  }
  .opt:hover{ transform:translateY(-1px); border-color:#3b3f49 }
  .opt .k{ font-weight:900; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#1e293b; }
  .opt.active{ outline:2px solid var(--brand) }
  
  .timer-wrap{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px }
  .timer{
    width:76px; height:76px; position:relative;
  }
  .timer svg{ transform:rotate(-90deg) }
  .timer .t{ position:absolute; inset:0; display:grid; place-items:center; font-weight:900; }
  
  /* ---------- RIGHT RAIL ---------- */
  .rail{
    display:flex; flex-direction:column; gap:10px; padding:10px;
    background:#1c1d22; border:1px solid #2c2d32; border-radius:14px;
    box-shadow:0 12px 24px rgba(0,0,0,.25); overflow:auto;
  }
  .rail .search{ position:sticky; top:0; background:#1c1d22; padding-bottom:6px; z-index:5 }
  .rail .search input{
    width:100%; padding:.55rem .75rem .55rem 2rem; border-radius:10px; border:1px solid #2c2d32; background:#0f1116; color:#e2e8f0;
  }
  .rail .search i{ position:absolute; margin:.62rem .6rem; color:#94a3b8 }
  
  .cam{
    position:relative; background:#0b0c12; border:1px solid #2c2d32; border-radius:12px; overflow:hidden;
    aspect-ratio:16/9; display:grid; place-items:center;
  }
  .cam video{ width:100%; height:100%; object-fit:cover }
  .cam .tag{ position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; padding:.1rem .4rem; border-radius:8px; font-size:.8rem; }
  
  .grid-people{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .peer{ position:relative; background:#0b0c12; border:1px solid #2c2d32; border-radius:10px; overflow:hidden; aspect-ratio:16/9 }
  .peer video{ width:100%; height:100%; object-fit:cover }
  .peer .nm{ position:absolute; left:6px; bottom:6px; font-size:.76rem; background:rgba(0,0,0,.6); color:#fff; padding:.1rem .35rem; border-radius:6px; }
  
  /* waiting room mini */
  .waiting{
    display:none; border:1px dashed #475569; border-radius:10px; padding:.5rem; background:#0f1116;
  }
  .waiting h5{ margin:0 0 .35rem; font-size:.9rem; color:#cbd5e1 }
  .waiting .row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#0b0c12; padding:.35rem .45rem; border-radius:8px; border:1px solid #2c2d32; }
  .waiting .row .act{ display:flex; gap:.35rem }
  .waiting .row .btn{ border:1px solid #64748b; background:#0f1116; color:#e5e7eb; border-radius:8px; padding:.25rem .45rem; font-size:.8rem; }
  
  /* VB spinner compatibility */
  .vb-busy::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.35) }
  .vbLoading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem }
  .vbLoading .sp{ width:24px;height:24px;border-radius:999px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite }
  .vbLoading .lbl{ font-size:.86rem; color:#fff }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  
  /* Responsive */
  @media (max-width:900px){
    .ibni-room{ grid-template-columns: 1fr }
    .rail{ order:-1 }
  }
  
  /* utility */
  .hidden{display:none!important}
  

  /* ---------- JOIN REQUEST TOASTS (Google Meet style) ---------- */
  .joinToastList{
    position:fixed;
    left:16px;           /* LEFT side */
    right:auto;
    bottom:16px;         /* JS still adjusts bottom above the dock */
    z-index:2500;
    display:grid;
    gap:10px;
    width:min(340px,92vw);
    pointer-events:none;
  }
  @media (max-width:900px){
    .joinToastList{ left:10px; width:min(420px,96vw) }
  }
  
  .jrToast{
    pointer-events:auto;
    display:grid;
    grid-template-columns:44px 1fr;
    gap:10px;
    background:#0f1116;
    border:1px solid #2c2d32;
    border-radius:14px;
    padding:10px;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
    animation:jrIn .18s ease-out;
  }
  .jrAvatar{
    width:44px;height:44px;border-radius:50%;
    background:#1e293b; color:#e5e7eb; font-weight:800;
    display:grid; place-items:center;
  }
  .jrName{ font-weight:800; color:#e5e7eb; margin-top:2px; }
  .jrButtons{ display:flex; gap:8px; margin-top:8px; }
  .jrButtons .btn{
    border:1px solid #2c2d32; background:#15171d; color:#e5e7eb;
    border-radius:10px; padding:.35rem .7rem; font-weight:700; cursor:pointer;
  }
  .jrButtons .btn.accept{
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#06131c; border-color:transparent;
  }
  .jrButtons .btn.reject{ background:#0f1116; }
  .jrToast.hide{ animation:jrOut .16s ease-in forwards; }
  @keyframes jrIn{ from{ transform:translateY(8px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
  @keyframes jrOut{ to{ transform:translateY(8px); opacity:0 } }
  @media (max-width:900px){
    .joinToastList{ right:10px; width:min(420px,96vw) }
  }
  

/* -------- Video mute overlay (centered) -------- */
.vid-overlay{
    position:absolute; inset:0;
    display:grid; place-items:center;
    background:#000;               /* full black for muted video */
    opacity:0; pointer-events:none;
    transition:opacity .12s ease-out;
  }
  .vid-overlay i{ font-size:38px; color:#e5e7eb; text-shadow:0 2px 12px rgba(0,0,0,.6) }
  .vid-overlay.show{ opacity:1 }
  
  /* When overlay is shown, fade the underlying video fully */
  .cam.video-off video,
  .peer.video-off video{
    opacity:0;
    transition:opacity .12s ease-out;
  }
  
  /* -------- Mic badge (top-right) -------- */
  .mic-badge{
    position:absolute; top:6px; right:6px;
    display:grid; place-items:center;
    width:28px; height:28px; border-radius:999px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.15);
    z-index:3; pointer-events:none;
  }
  .mic-badge i{ font-size:16px; color:#e5e7eb }
  .mic-badge.muted{ background:rgba(127,29,29,.65); border-color:rgba(239,68,68,.35) }
  
  /* -------- Host hover controls on each student tile -------- */
  .host-ctrls{
    position:absolute; top:6px; left:6px; z-index:4;
    display:flex; gap:6px; opacity:0; transform:translateY(-4px);
    transition:opacity .12s ease-out, transform .12s ease-out;
  }
  .peer:hover .host-ctrls{ opacity:1; transform:translateY(0) }
  .host-ctrls.hidden{ display:none !important }
  
  .host-btn{
    appearance:none; border:1px solid #2c2d32; background:#0f1116; color:#e5e7eb;
    width:28px; height:28px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  }
  .host-btn:focus{ outline:2px solid var(--accent); outline-offset:2px }
  .host-btn i{ font-size:16px }
  .host-btn.kick{ border-color:#ef4444 }
  

/* Room pill layout: Room → Code → [copy code] → [copy link] */
#roomCode{
    display:inline-flex; align-items:center; gap:8px;
    background:#0f1116; color:#e5e7eb;
    border:1px solid #2c2d32; border-radius:999px;
    padding:.28rem .5rem; line-height:1; user-select:none;
  }
  #roomCode .lbl{ color:#94a3b8; font-weight:700; margin-right:2px }
  #roomCode .rc{ font-weight:800; letter-spacing:.4px }
  
  #roomCode .icon{
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid #2c2d32;
    background:transparent !important;  /* transparent, no black */
    cursor:pointer;
  }
  
  #roomCode .icon:focus{ outline:2px solid var(--accent); outline-offset:2px }
  #roomCode .icon i{
    font-size:16px;
    color:#fff;   /* white icons */
  }
  
  
  #roomCode.copied{ color:var(--brand) }
  #roomCode.copied .rc::after{
    content:' ✓'; font-weight:800; margin-left:6px;
  }
  
/* Screen shared inside the whiteboard area */
/* Board video layer must stay under app modals */
.board-layer{
  position:absolute;
  inset:0;
  z-index:1300;                /* below wb-toolbar(1700) & any modals(6000) */
}
#boardVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

.wb-screen{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
  }
  .wb-screen.hidden{ display:none; }
  


  /* Quiz/feedback modals always on top of the app */
.quizPanel,
.quiz-host-modal,
.quiz-fb{
  z-index:6000 !important;
}

/* Scrim for fallback quiz panel */
.quizScrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:5999; display:none;
}
.quizScrim.show{ display:block; }

/* When any quiz modal is open, don't let the board eat clicks */
body.quiz-open #boardLayer,
body.quiz-open .wb-canvas,
body.quiz-open .text-layer{
  pointer-events:none !important;
}