/* ═══════════════════════════════════════════════════════════
   liveclass.css — چیدمانِ کلاسِ زنده

   ── چه چیزی خواسته شد ────────────────────────────────────────
   «هر چیزی جای مشخص خودش رو داره. زیباست چیدمانش مخصوصاً تو
    گوشی.» — با عکسی از ادوبی کانکت.

   ── چیدمان ──────────────────────────────────────────────────
   کامپیوتر:  ┌─────────────┬────────┐
              │   صحنه       │ حاضران │
              │  (تصویر/تخته)│  چت    │
              ├─────────────┴────────┤
              │      نوارِ ابزار      │
   گوشی:      صحنه بالا، پنل به‌صورتِ کشوی پایین با زبانه،
              نوارِ ابزار همیشه پایینِ صفحه.

   ── سه قاعده‌ای که همه‌جا رعایت شده ──────────────────────────
   ۱) صحنه هیچ‌وقت جابه‌جا نمی‌شود. تخته که باز می‌شود، *داخلِ*
      صحنه می‌آید — نه اینکه کلِ صفحه عوض شود. معلمی که وسطِ
      درس است نباید دنبالِ دکمه‌ها بگردد.
   ۲) نوارِ ابزار همیشه در یک جاست، حتی وقتی صحنه عوض می‌شود.
   ۳) روی گوشی هیچ‌چیز به پهنا اسکرول نمی‌شود.
   ═══════════════════════════════════════════════════════════ */

.lk{
  --ink:#eaf2f8; --ink2:#9fb3c8; --mut:#6b8299;
  --bg:#0b1622; --panel:#111f2e; --line:#1e3145;
  --accent:#19b8a6; --accent2:#0f766e;
  --live:#e11d48; --warn:#f59e0b;
  --r:16px;
  /*  ⚠️ بالاتر از منوی کناریِ سایت (۱۰۰) و پنجره‌ها (۲۰۰).
      اولش ۶۰ گذاشتم و منوی سایت روی کلاس می‌افتاد — کلاس باید
      تمامِ صفحه را بگیرد، وگرنه معلم وسطِ درس دکمه‌های سایت را
      می‌بیند و حواسش پرت می‌شود. */
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  direction:rtl;
}

/* ── نوارِ بالا ─────────────────────────────────────────── */
.lk-top{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:var(--panel); border-bottom:1px solid var(--line);
  min-height:54px;
}
.lk-live{
  display:inline-flex; align-items:center; gap:6px; background:var(--live);
  color:#fff; border-radius:99px; padding:4px 11px; font-size:12px; font-weight:800;
  flex:none;
}
.lk-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:lkPulse 1.4s infinite}
@keyframes lkPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.lk-live i{animation:none}}
.lk-title{flex:1;min-width:0;font-weight:800;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-title span{color:var(--ink2);font-weight:400;font-size:12.5px;margin-inline-start:8px}
.lk-chip{
  flex:none; background:rgba(255,255,255,.07); border-radius:10px; padding:5px 11px;
  font-size:12.5px; font-weight:700; color:var(--ink2); white-space:nowrap;
}
.lk-chip b{color:var(--ink)}

/* ── بدنه ───────────────────────────────────────────────── */
.lk-body{flex:1;min-height:0;display:flex;gap:10px;padding:10px}

/* صحنه */
.lk-stage{
  flex:1; min-width:0; min-height:0; position:relative;
  background:#08111b; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.lk-stage-in{flex:1;min-height:0;position:relative}

/* کاشی‌های تصویر */
.lk-grid{
  position:absolute; inset:0; display:grid; gap:8px; padding:8px;
  align-content:center; justify-content:center;
}
.lk-grid[data-n="1"]{grid-template-columns:1fr}
.lk-grid[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.lk-grid[data-n="3"],.lk-grid[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.lk-grid[data-n="5"],.lk-grid[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.lk-grid[data-n="7"],.lk-grid[data-n="8"],.lk-grid[data-n="9"]{grid-template-columns:repeat(3,1fr)}
.lk-grid[data-n="big"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start}

.lk-tile{
  position:relative; background:#122234; border-radius:13px; overflow:hidden;
  aspect-ratio:4/3; min-height:0;
  border:2px solid transparent; transition:border-color .18s;
}
.lk-tile.speaking{border-color:var(--accent)}
.lk-tile video{width:100%;height:100%;object-fit:contain;display:block;background:#0d1c2b}
.lk-tile-off{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:linear-gradient(160deg,#16293d,#101f2e);
}
/* ⚠️ وقتی تصویر هست، کارتِ اسم باید کنار برود. بدونِ این خط،
   تصویر می‌رسد و پخش هم می‌شود ولی زیرِ روکش پنهان می‌ماند —
   و آدم فکر می‌کند اتصال خراب است در حالی که سالم است. */
.lk-tile:has(video) .lk-tile-off{display:none}
.lk-av{
  width:clamp(38px,22%,72px); aspect-ratio:1; border-radius:50%;
  background:var(--accent2); color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:clamp(15px,7cqw,26px);
}
.lk-tile-nm{
  position:absolute; inset-inline-start:8px; inset-block-end:8px;
  background:rgba(6,16,26,.72); border-radius:8px; padding:3px 9px;
  font-size:12px; font-weight:700; max-width:calc(100% - 60px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lk-tile-ic{
  position:absolute; inset-inline-end:8px; inset-block-end:8px;
  display:flex; gap:4px;
}
.lk-tile-ic span{
  background:rgba(6,16,26,.72); border-radius:7px; width:24px; height:24px;
  display:grid; place-items:center; font-size:11px;
}
.lk-tile-ic .off{background:rgba(225,29,72,.85)}

/* محتوایِ صحنه: تخته، فایل، ابزار */
.lk-view{position:absolute;inset:0;background:#fff;display:none}
.lk-view.on{display:block}
.lk-view iframe{width:100%;height:100%;border:0;display:block}
.lk-view img{width:100%;height:100%;object-fit:contain;display:block;background:#0d1c2b}
/* ⚠️ شیشه: دانش‌آموز تا اجازه نگرفته نباید بتواند دست بزند */
.lk-glass{position:absolute;inset:0;z-index:5;background:transparent;cursor:not-allowed}
.lk-glass::after{
  content:'👀 فقط تماشا — تا استاد اجازه بدهد';
  position:absolute; inset-inline:0; inset-block-start:10px; margin:auto; width:max-content;
  max-width:90%; background:rgba(6,16,26,.82); color:#fff; border-radius:99px;
  padding:6px 14px; font-size:12.5px; font-weight:700;
}

/* نوارِ کوچکِ صحنه (وقتی تخته باز است، تصویرها اینجا می‌روند) */
.lk-strip{
  flex:none; display:flex; gap:6px; padding:6px; overflow-x:auto; background:#0a1420;
  border-block-start:1px solid var(--line); -webkit-overflow-scrolling:touch;
}
.lk-strip:empty{display:none}
.lk-strip .lk-tile{width:118px;flex:none;aspect-ratio:16/9}

/* پیامِ وسطِ صحنه */
.lk-msg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; color:var(--ink2);
  text-align:center; padding:22px; font-size:14px; line-height:2;
}
.lk-msg b{color:var(--ink);font-size:16px}
.lk-msg .i{font-size:2.6rem;opacity:.8}

/* ── پنلِ کناری ─────────────────────────────────────────── */
.lk-side{
  flex:none; width:288px; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.lk-tabs{display:flex;flex:none;border-block-end:1px solid var(--line)}
.lk-tabs button{
  flex:1; border:0; background:transparent; color:var(--ink2);
  padding:11px 6px; font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  border-block-end:2.5px solid transparent; min-height:44px;
}
.lk-tabs button.on{color:var(--accent);border-block-end-color:var(--accent)}
.lk-pane{flex:1;min-height:0;overflow-y:auto;display:none;-webkit-overflow-scrolling:touch}
.lk-pane.on{display:block}

/* حاضران */
.lk-p{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-block-end:1px solid rgba(255,255,255,.045);
}
.lk-p-av{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent2);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px;
  position:relative;
}
.lk-p.speaking .lk-p-av{box-shadow:0 0 0 2.5px var(--accent)}
.lk-p-t{flex:1;min-width:0}
.lk-p-t b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lk-p-t span{display:block;font-size:11.5px;color:var(--mut)}
.lk-p-b{flex:none;display:flex;gap:4px}
.lk-p-b button{
  width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.07);
  color:var(--ink2);cursor:pointer;font-size:12px;
}
.lk-p-b button:hover{background:rgba(255,255,255,.14);color:var(--ink)}
.lk-p-b button.on{background:var(--accent);color:#062018}
.lk-hand{color:var(--warn);font-size:15px;flex:none}

/* چت */
.lk-chat{display:flex;flex-direction:column;height:100%}
.lk-chat-l{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:8px}
.lk-m{background:rgba(255,255,255,.05);border-radius:11px;padding:7px 11px;font-size:13px;line-height:1.9}
.lk-m b{color:var(--accent);font-size:12px;display:block;margin-bottom:1px}
.lk-m.me{background:rgba(25,184,166,.14)}
.lk-chat-f{flex:none;display:flex;gap:7px;padding:9px;border-block-start:1px solid var(--line)}
.lk-chat-f input{
  flex:1;min-width:0;border:1px solid var(--line);background:#0a1420;color:var(--ink);
  border-radius:11px;padding:10px 12px;font:inherit;font-size:13.5px;min-height:42px;
}
.lk-chat-f input:focus{outline:0;border-color:var(--accent)}
.lk-chat-f button{
  flex:none;border:0;border-radius:11px;background:var(--accent);color:#062018;
  padding:0 15px;font:inherit;font-weight:800;cursor:pointer;min-height:42px;
}

/* ── نوارِ ابزار ────────────────────────────────────────── */
.lk-bar{
  flex:none; display:flex; align-items:center; gap:7px; padding:9px 12px;
  background:var(--panel); border-block-start:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.lk-b{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink);
  border-radius:12px; padding:9px 13px; font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; min-height:44px; white-space:nowrap; transition:background .15s;
}
.lk-b:hover{background:rgba(255,255,255,.11)}
.lk-b.on{background:var(--accent);border-color:var(--accent);color:#062018}
.lk-b.off{background:rgba(225,29,72,.18);border-color:rgba(225,29,72,.5);color:#ffb3c1}
.lk-b.danger{background:rgba(225,29,72,.9);border-color:transparent;color:#fff}
.lk-b:disabled{opacity:.4;cursor:not-allowed}
.lk-bar .sp{flex:1;min-width:4px}

/* ── گوشی ───────────────────────────────────────────────── */
@media(max-width:820px){
  .lk-body{flex-direction:column;padding:8px;gap:8px}
  .lk-side{
    width:auto; height:min(42vh,320px); flex:none;
  }
  .lk-stage{flex:1;min-height:180px}
  .lk-top{padding:8px 11px;min-height:48px}
  .lk-title{font-size:13.5px}
  .lk-title span{display:none}
  .lk-b{padding:9px 11px;font-size:12.5px}
  .lk-b .t{display:none}          /* روی گوشی فقط آیکون */
  .lk-b.keep .t{display:inline}
}
@media(max-width:820px) and (orientation:landscape){
  /* گوشیِ خوابیده: پنل کنار برود تا صحنه بزرگ بماند */
  .lk-body{flex-direction:row}
  .lk-side{width:230px;height:auto}
}

/* نوارِ ورقِ PDF روی صحنه */
.lk-pdfbar{
  position:absolute; inset-inline:0; inset-block-end:12px; margin:auto;
  width:max-content; display:flex; align-items:center; gap:10px; z-index:6;
  background:rgba(8,20,32,.86); border-radius:99px; padding:6px 8px;
}
.lk-pdfbar button{
  border:0; border-radius:99px; background:rgba(255,255,255,.14); color:#fff;
  padding:8px 15px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  min-height:38px;
}
.lk-pdfbar button:hover{background:rgba(255,255,255,.26)}
.lk-pdfbar span{color:#cfe0ee;font-size:12.5px;font-weight:700;padding:0 4px}

/* ── کاشیِ بی‌تصویر ────────────────────────────────────────
   ⚠️ معلم گفت: «وقتی دوربین خاموشه دیگه زیر تخته و ابزار ها
   دوربین سیاه نشون نده». درست است — یک مستطیلِ سیاه فقط جا
   می‌گیرد. حالا در نوارِ کنارِ تخته، کاشیِ بی‌تصویر جمع می‌شود
   به یک نشانِ کوچکِ گرد با حرفِ اولِ اسم. */
.lk-strip .lk-tile:not(:has(video)){
  aspect-ratio:1; width:46px; min-width:46px; border-radius:50%;
  background:linear-gradient(160deg,#22405e,#16293d);
}
.lk-strip .lk-tile:not(:has(video)) .lk-name{display:none}
.lk-strip .lk-tile:not(:has(video)) .lk-av{font-size:17px}

/*  و در شبکه‌ی اصلی هم کاشیِ خاموش کوتاه‌تر باشد تا جای
    تصویرهای واقعی را نگیرد. */
.lk-grid .lk-tile:not(:has(video)){aspect-ratio:16/7}