/* Dosen AI — hub, detail, kelas, admin. Navy tokens, light/dark aware. */
.dsn-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
.dsn-head h1 { font-size: 1.6rem; margin: 0 0 6px; color: var(--c-text, #e8eefc); }
.dsn-head p { color: var(--c-text-muted, #9fb0cc); margin: 0; }
.dsn-hero { background: var(--grad-primary);
  border-radius: 16px; padding: 26px 22px; color: #0A0F1E; margin-bottom: 22px; }
.dsn-hero h1 { color: #0A0F1E; font-size: 1.7rem; margin: 0 0 8px; }
.dsn-hero p { color: rgba(10,15,30,.78); margin: 0; max-width: 640px; }

.dsn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.dsn-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card, #131c2e);
  border: 1px solid var(--c-line, #24314d); border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s; }
.dsn-card:hover { border-color: var(--c-accent, #3b82f6); transform: translateY(-2px); }
.dsn-avatar { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0e1626; display: block; }
.dsn-avatar-ph { width: 100%; aspect-ratio: 4/3; display: grid; place-items: center;
  background: var(--grad-primary); color: #0A0F1E; font-size: 2.4rem; font-weight: 800; }
.dsn-card-body { padding: 14px; }
.dsn-card-body h3 { margin: 0 0 3px; font-size: 1.02rem; color: var(--c-text, #e8eefc); }
.dsn-card-body .dsn-title { color: var(--c-text-muted, #9fb0cc); font-size: .82rem; }
.dsn-field-tag { display: inline-block; margin-top: 8px; background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--c-accent-bright, #60a5fa); padding: 3px 10px; border-radius: 999px; font-size: .78rem; }
.dsn-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:600; }
.dsn-badge.active { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); }
.dsn-badge.draft { background: rgba(148,163,184,.16); color: var(--c-text-muted,#9fb0cc); }
.dsn-badge.archived { background: rgba(248,113,113,.14); color: var(--c-danger,#f87171); }
.dsn-badge.free { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); }
.dsn-badge.paid_idr { background: rgba(251,191,36,.16); color: var(--c-warning,#fbbf24); }
.dsn-badge.subscription { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--c-accent-bright,#60a5fa); }

.dsn-panel { background: var(--bg-card, #131c2e); border: 1px solid var(--c-line, #24314d);
  border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.dsn-panel h2 { font-size: 1.08rem; margin: 0 0 12px; color: var(--c-text, #e8eefc); }
.dsn-muted { color: var(--c-text-muted, #9fb0cc); }
.dsn-field { margin-bottom: 12px; }
.dsn-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--c-text-soft, #c4d0e6); }
.dsn-field input, .dsn-field select, .dsn-field textarea { width: 100%; box-sizing: border-box;
  padding: 9px 11px; border-radius: 9px; background: var(--bg-input, #0e1626);
  border: 1px solid var(--c-line, #24314d); color: var(--c-text, #e8eefc); font: inherit; }
.dsn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:560px){ .dsn-row { grid-template-columns: 1fr; } }
.dsn-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:none;
  cursor:pointer; font-weight:600; font-size:.9rem; text-decoration:none; background: var(--c-accent,#2563eb); color:#fff; }
.dsn-btn:hover { filter: brightness(1.08); }
.dsn-btn.ghost { background: transparent; border:1px solid var(--c-line-strong,#3a4a6b); color: var(--c-text,#e8eefc); }
.dsn-btn.ok { background: var(--c-success,#16a34a); } .dsn-btn.bad { background: var(--c-danger,#dc2626); }
.dsn-btn.sm { padding:6px 12px; font-size:.82rem; }
.dsn-btn:disabled { opacity:.5; cursor:not-allowed; }
.dsn-actions { display:flex; gap:8px; flex-wrap:wrap; }

.dsn-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }
.dsn-stat { background: var(--bg-card,#131c2e); border:1px solid var(--c-line,#24314d); border-radius:12px; padding:14px; }
.dsn-stat .n { font-size:1.5rem; font-weight:800; color: var(--c-text,#e8eefc); }
.dsn-stat .l { font-size:.76rem; color: var(--c-text-muted,#9fb0cc); }
.dsn-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.dsn-table th, .dsn-table td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--c-line,#24314d); }
.dsn-table th { color: var(--c-text-muted,#9fb0cc); font-size:.78rem; }
.dsn-note { padding:11px 13px; border-radius:10px; font-size:.86rem; margin-bottom:12px; }
.dsn-note.info { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--c-accent-bright,#60a5fa); }
.dsn-note.ok { background: rgba(52,211,153,.12); color: var(--c-success,#34d399); }
.dsn-note.warn { background: rgba(251,191,36,.12); color: var(--c-warning,#fbbf24); }
.dsn-syl-row { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; }
.dsn-syl-row input { flex:1; }
.dsn-pill { background: rgba(148,163,184,.12); padding:2px 8px; border-radius:6px; font-size:.74rem; }
.dsn-pill.official { background: rgba(52,211,153,.16); color: var(--c-success,#34d399); }
.dsn-pill.foundation { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--c-accent-bright,#60a5fa); }

/* Ruang kelas */
.dsn-class { max-width: 1100px; margin: 0 auto; padding: 16px; }
.dsn-stage { display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; }
@media (max-width:820px){ .dsn-stage { grid-template-columns: 1fr; } }
.dsn-lecturer { position:relative; background:#0b1220; border-radius:16px; overflow:hidden; aspect-ratio: 4/3; display:grid; place-items:center; }
.dsn-lecturer img, .dsn-lecturer video { width:100%; height:100%; object-fit:cover; }
.dsn-lecturer .ph { font-size:4rem; font-weight:800; color:#fff; }
/* Avatar 3D menutupi seluruh kotak dosen saat aktif. `hidden` dari HTML tetap
   menang (display:none) sampai JS memastikan render benar-benar jalan — jadi
   perangkat yang tak sanggup tidak pernah melihat kanvas kosong. */
.dsn-lecturer canvas.dsn-avatar3d {
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
}
.dsn-lecturer.speaking { box-shadow: 0 0 0 3px var(--c-accent,#3b82f6), 0 0 32px color-mix(in oklab, var(--accent) 50%, transparent); }
/* Lip-sync 2D: --talk (0..1) dari amplitudo suara TTS → ilusi rahang bergerak +
   sedikit "hidup" pada foto. Biaya Rp0/menit, real-time di browser, no uncanny. */
.dsn-lecturer img.lk-face, .dsn-lecturer .ph {
  transform-origin: center 66%;
  transition: transform .06s linear, filter .1s linear;
}
.dsn-lecturer.speaking img.lk-face, .dsn-lecturer.speaking .ph {
  transform: scaleY(calc(1 + var(--talk,0) * 0.06)) scale(calc(1 + var(--talk,0) * 0.012));
  filter: brightness(calc(1 + var(--talk,0) * 0.07));
}
.dsn-lecturer .lbl { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.55); color:#fff; padding:5px 12px; border-radius:8px; font-size:.85rem; }
.dsn-me { background:#0b1220; border-radius:14px; overflow:hidden; aspect-ratio: 4/3; position:relative; }
.dsn-me video { width:100%; height:100%; object-fit:cover; }
/* Placeholder kamera-off peserta: avatar sendiri / inisial */
.dsn-me .me-ph { position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:2.4rem; font-weight:800; }
.dsn-me .me-ph::before { content:""; position:absolute; width:88px; height:88px;
  border-radius:50%; background:var(--grad-primary); opacity:.28; }
.dsn-me .me-ph img { width:88px; height:88px; border-radius:50%; object-fit:cover; position:relative; }
.dsn-ctl { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

/* Kolom chat kelas — diskusi teks + unggah dokumen latihan (dosen bisa mengoreksi) */
.dsn-room { display:grid; grid-template-columns: 1fr 330px; gap:16px; align-items:start; }
@media (max-width:980px){ .dsn-room { grid-template-columns: 1fr; } }
.dsn-chat { background: var(--bg-card,#131c2e); border:1px solid var(--c-line,#24314d);
  border-radius:14px; display:flex; flex-direction:column; height:560px; }
@media (max-width:980px){ .dsn-chat { height:420px; } }
.dsn-chat-head { padding:12px 14px; font-weight:700; font-size:.92rem; color:var(--c-text,#e8eefc);
  border-bottom:1px solid var(--c-line,#24314d); display:flex; gap:8px; align-items:center; }
.dsn-chat-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.dsn-msg { max-width:92%; font-size:.86rem; line-height:1.45; border-radius:12px; padding:8px 11px;
  overflow-wrap:anywhere; }
.dsn-msg .who { display:block; font-size:.7rem; font-weight:700; opacity:.75; margin-bottom:2px; }
.dsn-msg.dosen { background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--c-text,#e8eefc); align-self:flex-start; border-bottom-left-radius:4px; }
.dsn-msg.me { background: var(--c-accent,#2563eb); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.dsn-msg.sys { background: rgba(148,163,184,.14); color: var(--c-text-muted,#9fb0cc);
  align-self:center; font-size:.76rem; padding:5px 10px; border-radius:999px; }
.dsn-msg .mn { font-weight:800; }
.dsn-msg.dosen .mn { color: var(--c-accent-bright,#60a5fa); }
.dsn-chat-form { display:flex; gap:8px; padding:10px; border-top:1px solid var(--c-line,#24314d); align-items:center; }
#dsnChatInput { flex:1; min-width:0; padding:9px 11px; border-radius:9px;
  background: var(--bg-input,#0e1626); border:1px solid var(--c-line,#24314d); color:var(--c-text,#e8eefc); font:inherit; }
.dsn-chat-attach { cursor:pointer; display:grid; place-items:center; flex:0 0 36px; height:36px;
  border-radius:9px; border:1px solid var(--c-line,#24314d); color:var(--c-text-muted,#9fb0cc); }
.dsn-chat-attach:hover { border-color: var(--c-accent,#3b82f6); color: var(--c-accent-bright,#60a5fa); }

/* Tombol Latar aktif di kelas */
.dsn-btn.ghost.on { border-color: var(--c-accent, #3b82f6); color: var(--c-accent-bright, #60a5fa); }

/* ── Panggung share layar + pin/fullscreen per card (kelas dosen) ─────────── */
.dsn-share { position:relative; background:#0b1220; border-radius:16px; overflow:hidden; margin-bottom:16px; }
.dsn-share-wrap video { width:100%; max-height:56vh; display:block; object-fit:contain; background:#000; }
.dsn-share-full { position:absolute; top:10px; right:10px; z-index:3; width:34px; height:30px;
  border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.5); color:#fff;
  cursor:pointer; display:grid; place-items:center; }
.dsn-share-full:hover { background:rgba(0,0,0,.75); }
.dsn-box-btns { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:3;
  opacity:0; transition:opacity .15s; }
.dsn-lecturer:hover .dsn-box-btns, .dsn-me:hover .dsn-box-btns { opacity:1; }
.dsn-box-btns button { width:32px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:grid; place-items:center; }
.dsn-box-btns button:hover { background:rgba(0,0,0,.75); }
.dsn-box-btns .ic, .dsn-box-btns svg { width:15px; height:15px; }
/* Pin: perbesar salah satu card (dosen / kamera kamu) */
.dsn-stage.pin-lect { grid-template-columns: 3fr 1fr; }
.dsn-stage.pin-me { grid-template-columns: 1fr 3fr; }

/* ── Perangkat Ajar: slide di panggung kelas ──────────────────────────────── */
.dsn-share-wrap { position: relative; }
.dsn-share-wrap .slide-img { width: 100%; max-height: 56vh; object-fit: contain; background: #000; display: block; }
.slide-count { position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(0,0,0,.62); color: #fff; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
/* Saat slide tayang: tile dosen + kamu mengecil jadi baris kompak di bawah slide */
.dsn-class.slide-on .dsn-stage,
.dsn-class.cobrowse-on .dsn-stage { grid-template-columns: 170px 170px; justify-content: center; }
@media (max-width:560px){ .dsn-class.slide-on .dsn-stage,
  .dsn-class.cobrowse-on .dsn-stage { grid-template-columns: 1fr 1fr; } }
/* Co-browse aktif (NON-fullscreen): panggung app = VIEW UTAMA, lebar penuh + tinggi memadai.
   Tanpa ini stage tak ber-ukuran → iframe ter-skala ke kotak kecil (mis. 416px saat DevTools
   terbuka) → app & kursor nyaris tak terlihat. */
.dsn-class.cobrowse-on #dsnCobrowseStage {
  width: 100%; height: 68vh; min-height: 420px; margin-bottom: 12px;
}
.dsn-file { color: var(--c-accent-bright, #60a5fa); text-decoration: underline; word-break: break-word; font-weight: 600; }

/* ── Layar Penuh SELURUH ruang kelas (ala Zoom): dosen + kamu + slide + chat ──
   Pakai kelas .dsn-fs (di-set JS pada fullscreenchange), BUKAN :fullscreen —
   agar styling jalan lintas-browser TERMASUK Safari/WebKit berprefiks. */
.dsn-room.dsn-fs {
  width: 100vw; height: 100vh; padding: 16px; box-sizing: border-box;
  background: var(--bg, #0a0e1a); overflow: hidden;
  grid-template-columns: 1fr 320px;
  align-items: stretch;   /* override align-items:start base → kolom melar penuh 100vh */
}
.dsn-room.dsn-fs .dsn-main { display: flex; flex-direction: column; min-height: 0; gap: 10px; }
/* Tile peserta = BOX 16:9 rapi, di-tengah, WRAP (tahan banyak peserta) — bukan
   persegi-panjang melar. Ukuran menyesuaikan tinggi ruang yang tersedia. */
.dsn-room.dsn-fs .dsn-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center; align-items: center; grid-template-columns: none; }
.dsn-room.dsn-fs .dsn-lecturer,
.dsn-room.dsn-fs .dsn-me { aspect-ratio: 16 / 9; height: min(100%, 46vh); width: auto;
  max-width: 46vw; flex: 0 0 auto; }
.dsn-room.dsn-fs .dsn-share { flex: 2 1 auto; min-height: 0; margin-bottom: 0; }
/* Co-browse aktif + fullscreen: panggung co-browse isi ruang, tile jadi strip kompak
   (jangan pakai height:64vh tetap → cards lain terpotong). */
.dsn-room.dsn-fs #dsnCobrowseStage { flex: 2 1 auto; min-height: 0; height: auto; margin-bottom: 0; }
.dsn-class.cobrowse-on .dsn-room.dsn-fs .dsn-stage,
.dsn-class.slide-on .dsn-room.dsn-fs .dsn-stage { flex: 0 0 auto; height: 172px; }
.dsn-room.dsn-fs .dsn-share-wrap { height: 100%; }
.dsn-room.dsn-fs .dsn-share-wrap .slide-img { max-height: 100%; height: 100%; }
.dsn-room.dsn-fs .dsn-chat { height: 100%; }
.dsn-room.dsn-fs #dsnStatus { flex: 0 0 auto; margin: 0; }
.dsn-room.dsn-fs .dsn-ctl { flex: 0 0 auto; margin: 0; }
/* (strip slide + co-browse kompak digabung di atas; tile = BOX 16:9 dari rule dasar,
   height min(100%,46vh) → dalam strip 172px jadi box ~306×172, rapi & wrap) */
@media (max-width:820px){ .dsn-room.dsn-fs { grid-template-columns: 1fr; } }

/* ── Badge sisa MENIT Dosen AI (jatah per tier, reset bulanan) ───────────────
   Navy brand (bukan ungu). State .low = sisa menipis → warning tanpa alarm. */
.dsn-minutes {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 8px 14px; border-radius: 999px;
  background: rgba(29, 78, 216, .12); border: 1px solid rgba(29, 78, 216, .32);
  color: var(--c-text-soft, #c4d0e6); font-size: .86rem; line-height: 1.4;
}
.dsn-minutes strong { color: var(--c-text, #e8eefc); font-weight: 650; }
.dsn-minutes svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.dsn-minutes .dsn-muted { font-size: .8rem; }
.dsn-minutes.low {
  background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .36);
}
.dsn-minutes .dsn-btn.sm { margin-left: 4px; }

/* Tajuk seksi kelas mandiri di hub dosen. Dipisah dari daftar dosen dengan
   garis, karena keduanya produk yang berbeda meski sama-sama disebut "kelas". */
.dsn-kur-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 34px 0 10px; padding-top: 26px;
  border-top: 1px solid var(--c-line, rgba(255,255,255,.1));
}
.dsn-kur-head h2 { color: var(--c-text, #e8eefc); font-size: 1.15rem; margin: 0; }