.osiun-future .stage.card.ait-avatar-ready .avatar {
  width: 230px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.osiun-future .stage.card.ait-avatar-ready .avatar img {
  display: block;
  width: 210px;
  height: 210px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 14px;
}

.osiun-future .stage.card.ait-avatar-ready #avatar-state {
  display: none !important;
}

.osiun-future .stage.card.ait-avatar-ready #ait-wave {
  display: block;
  width: 190px;
  height: 9px;
  margin: 5px auto 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.62);
}

.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls button {
  width: 34px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border: 1px solid rgba(15,23,42,.22);
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls button.is-on {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* Whiteboard existing wajib tetap utuh. */
.osiun-future .stage.card.ait-avatar-ready .whiteboard {
  display: block;
  min-width: 0;
}

@media (max-width: 700px) {
  .osiun-future .stage.card.ait-avatar-ready .avatar {
    width: 165px;
    min-width: 165px;
  }

  .osiun-future .stage.card.ait-avatar-ready .avatar img {
    width: 150px;
    height: 150px;
  }

  .osiun-future .stage.card.ait-avatar-ready #ait-wave {
    width: 140px;
  }
}

/* ===== Layout final: tiga panel atas simetris ===== */

#course-view .osiun-future{
    display:grid;
    grid-template-columns:40% 60%;
    gap:14px;
}

/* Stage berisi Virtual Teaching + Whiteboard */
#course-view .osiun-future > .stage.card {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) minmax(290px, 1fr);
  gap: 14px;
  min-height: 420px;
  align-items: stretch;
}

/* Chat dibuat sama tinggi dengan stage */
#course-view .osiun-future > .card.chat {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

/* Kotak avatar / Virtual Teaching */
.osiun-future .stage.card.ait-avatar-ready .avatar {
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* Foto memenuhi lebar kotak */
.osiun-future .stage.card.ait-avatar-ready .avatar img {
  width: 100%;
  height: auto;
  max-height: 325px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 12px;
}

/* Visualizer tipis, hanya indikator aktivitas */
.osiun-future .stage.card.ait-avatar-ready #ait-wave {
  width: 94%;
  height: 7px;
  margin: 7px auto 5px;
  border-radius: 999px;
}

/* Tombol kecil dan compact */
.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls {
  margin-top: 3px;
  gap: 6px;
}

.osiun-future .stage.card.ait-avatar-ready .ait-mini-controls button {
  width: 30px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 12px;
  border-radius: 6px;
}

/* Whiteboard tetap utuh, sama tinggi */
.osiun-future .stage.card.ait-avatar-ready .whiteboard {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Chat log mengisi ruang vertikal */


/* Tablet */
@media (max-width: 1100px) {
  #course-view .osiun-future {
    grid-template-columns: 1fr;
  }

  #course-view .osiun-future > .stage.card {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  }

  #course-view .osiun-future > .card.chat {
    min-height: 320px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  #course-view .osiun-future > .stage.card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .osiun-future .stage.card.ait-avatar-ready .avatar img {
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  .osiun-future .stage.card.ait-avatar-ready #ait-wave {
    width: 96%;
  }
}

/* FINAL 40 / 30 / 30 OVERRIDE */

#course-view .osiun-future {
  display: grid !important;
  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#course-view .osiun-future > .stage.card {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

#course-view .osiun-future > .stage.card > .avatar {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#course-view .osiun-future > .stage.card > .whiteboard {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#course-view .osiun-future > .card.chat {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

/* Foto memenuhi area Virtual Teaching */
#course-view .osiun-future .stage.card .avatar img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* Visualizer tipis */
#course-view .osiun-future .stage.card #ait-wave {
  width: 96% !important;
  height: 7px !important;
  margin: 6px auto 4px !important;
}

/* Tablet/mobile */
@media (max-width: 1000px) {
  #course-view .osiun-future {
    grid-template-columns: 1fr !important;
  }

  #course-view .osiun-future > .stage.card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) !important;
  }
}

@media (max-width: 700px) {
  #course-view .osiun-future > .stage.card {
    grid-template-columns: 1fr !important;
  }
}


/* Stage: Virtual Teaching + Whiteboard sama tinggi */




/* Chat mengisi tinggi penuh */








/* Layout aman 40 / 30 / 30 */
#course-view .osiun-future {
  display: grid !important;
  grid-template-columns:
    minmax(0, 70fr)
    minmax(0, 30fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#course-view .osiun-future > .stage.card {
  display: grid !important;
  grid-template-columns:
    minmax(0, 4fr)
    minmax(0, 3fr) !important;
  gap: 14px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#course-view .osiun-future > .card.chat {
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* Virtual Teaching tidak dipaksa tinggi */
#course-view .osiun-future > .stage.card > .avatar {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Whiteboard tetap utuh */
#course-view .osiun-future > .stage.card > .whiteboard {
  min-width: 0 !important;
  height: auto !important;
}

/* Chat rapi tanpa memaksa panel sebelah */
#course-view .osiun-future > .card.chat {
  display: flex !important;
  flex-direction: column !important;
}

#course-view .osiun-future > .card.chat #chat-log {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

#course-view .osiun-future > .card.chat #chat-form {
  margin-top: auto !important;
}

/* Foto memenuhi lebar area Virtual Teaching */
#course-view .osiun-future .stage.card .avatar img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* Voice indicator sangat tipis */
#course-view .osiun-future .stage.card #ait-wave {
  width: 96% !important;
  height: 6px !important;
  margin: 5px auto 4px !important;
}

@media (max-width: 1000px) {
  #course-view .osiun-future {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  #course-view .osiun-future > .stage.card {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FINAL TOP LAYOUT — 40% Virtual Teaching / 30% / 30%
   Tidak mengubah Whiteboard dan Chat
   ========================================================= */

#course-view .osiun-future {
  display: grid !important;
  grid-template-columns:
    minmax(0, 4fr)
    minmax(0, 3fr)
    minmax(0, 3fr) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Catatan atas memakai seluruh lebar */
#course-view .osiun-future > .future-note {
  grid-column: 1 / -1 !important;
}

/*
  Lepaskan pembungkus stage.
  Avatar dan Whiteboard menjadi grid item langsung,
  tanpa memindahkan atau menghapus HTML.
*/
#course-view .osiun-future > .stage.card {
  display: contents !important;
}

/* Tiga kotak memiliki tinggi sama secara otomatis */
#course-view .osiun-future > .stage.card > .avatar,
#course-view .osiun-future > .stage.card > .whiteboard,
#course-view .osiun-future > .card.chat {
  min-width: 0 !important;
  height: auto !important;
  min-height: 390px !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  border-radius: 14px !important;
}

/* Virtual Teaching menjadi card sendiri */
#course-view .osiun-future > .stage.card > .avatar {
  width: auto !important;
  max-width: none !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Foto memenuhi lebar kotak Virtual Teaching */
#course-view .osiun-future > .stage.card > .avatar img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 315px !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 11px !important;
}

/* Indikator suara sangat tipis */
#course-view .osiun-future > .stage.card > .avatar #ait-wave {
  display: block !important;
  width: 96% !important;
  height: 6px !important;
  min-height: 6px !important;
  margin: 6px auto 5px !important;
  border-radius: 999px !important;
}

/* Hanya dua tombol ikon kecil */
#course-view .osiun-future .ait-mini-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 2px 0 0 !important;
}

#course-view .osiun-future .ait-mini-controls button {
  width: 31px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* Hilangkan tulisan Virtual Teaching lama di bawah foto */
#course-view .osiun-future #avatar-state {
  display: none !important;
}

/* Whiteboard tetap menjadi card independen */
#course-view .osiun-future > .stage.card > .whiteboard {
  width: auto !important;
  max-width: none !important;
  padding: 16px !important;
  overflow: auto !important;
}

/* Chat setinggi dua card sebelah */
#course-view .osiun-future > .card.chat {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  max-width: none !important;
  padding: 16px !important;
  overflow: hidden !important;
}

#course-view .osiun-future > .card.chat #chat-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#course-view .osiun-future > .card.chat #chat-form {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* Tablet */
@media (max-width: 1050px) {
  #course-view .osiun-future {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }

  #course-view .osiun-future > .card.chat {
    grid-column: 1 / -1 !important;
    min-height: 300px !important;
  }
}

/* HP */
@media (max-width: 700px) {
  #course-view .osiun-future {
    grid-template-columns: 1fr !important;
  }

  #course-view .osiun-future > .card.chat {
    grid-column: auto !important;
  }

  #course-view .osiun-future > .stage.card > .avatar,
  #course-view .osiun-future > .stage.card > .whiteboard,
  #course-view .osiun-future > .card.chat {
    min-height: auto !important;
  }

  #course-view .osiun-future > .stage.card > .avatar img {
    height: auto !important;
    max-height: 420px !important;
  }
}


/* FINAL: samakan garis atas tiga panel */

#course-view .osiun-future {
  align-items: stretch !important;
  align-content: start !important;
}

#course-view .osiun-future > .stage.card > .avatar,
#course-view .osiun-future > .stage.card > .whiteboard,
#course-view .osiun-future > .card.chat {
  margin: 0 !important;
  margin-top: 0 !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: stretch !important;
  vertical-align: top !important;
}

/* Samakan padding bagian atas */
#course-view .osiun-future > .stage.card > .avatar,
#course-view .osiun-future > .stage.card > .whiteboard,
#course-view .osiun-future > .card.chat {
  padding-top: 14px !important;
}

/* Hilangkan margin atas heading bawaan */
#course-view .osiun-future > .stage.card > .whiteboard > h2,
#course-view .osiun-future > .card.chat > h2 {
  margin-top: 0 !important;
}

/* Foto mulai sejajar dengan area konten panel lain */
#course-view .osiun-future > .stage.card > .avatar > img {
  margin-top: 0 !important;
}

/* Pastikan semua panel berada pada grid row yang sama */
#course-view .osiun-future > .stage.card > .avatar {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

#course-view .osiun-future > .stage.card > .whiteboard {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

#course-view .osiun-future > .card.chat {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

#course-view .osiun-future > .future-note {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

/* FINAL MOBILE LAYOUT */
@media (max-width: 700px) {

  #course-view .osiun-future {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #course-view .osiun-future > .future-note {
    grid-column: 1 !important;
  }

  #course-view .osiun-future > .stage.card {
    display: contents !important;
  }

  #course-view .osiun-future > .stage.card > .avatar,
  #course-view .osiun-future > .stage.card > .whiteboard,
  #course-view .osiun-future > .card.chat {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Urutan khusus HP */
  #course-view .osiun-future > .stage.card > .avatar {
    grid-row: 2 !important;
    padding: 10px !important;
  }

  #course-view .osiun-future > .stage.card > .whiteboard {
    grid-row: 3 !important;
    padding: 12px !important;
  }

  #course-view .osiun-future > .card.chat {
    grid-row: 4 !important;
    padding: 12px !important;
  }

  /* Foto memenuhi kotak Virtual Teaching */
  #course-view .osiun-future > .stage.card > .avatar img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 10px !important;
  }

  /* Voice bar tipis */
  #course-view .osiun-future #ait-wave {
    width: 96% !important;
    height: 5px !important;
    margin: 5px auto !important;
  }

  /* Kontrol compact tetapi tidak berdesakan */
  #course-view .osiun-future .ait-mini-controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }

  #course-view .osiun-future .ait-mini-controls #ait-power {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #course-view .osiun-future .ait-mini-controls #ait-mic {
    width: 36px !important;
    min-width: 36px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  #course-view .osiun-future #ait-voice-status {
    width: 100% !important;
    margin-top: 5px !important;
    font-size: 10px !important;
    text-align: center !important;
  }

  /* Whiteboard mobile */
  #course-view .osiun-future .whiteboard {
    overflow-x: auto !important;
  }

  #course-view .osiun-future .whiteboard img,
  #course-view .osiun-future .whiteboard canvas,
  #course-view .osiun-future .whiteboard video,
  #course-view .osiun-future .whiteboard iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Chat mobile */
  #course-view .osiun-future > .card.chat {
    display: flex !important;
    flex-direction: column !important;
  }

  #course-view .osiun-future > .card.chat #chat-log {
    min-height: 160px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
  }

  #course-view .osiun-future > .card.chat #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  #course-view .osiun-future > .card.chat #question {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* HP gunakan gambar yang sama dengan desktop */
@media (max-width:700px){

  #course-view .osiun-future .avatar{
    height:auto !important;
    overflow:hidden !important;
  }

  #course-view .osiun-future .avatar img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:unset !important;
    object-position:center top !important;
    aspect-ratio:auto !important;
  }

}


#ait-voice-status-v8 {
  display: none;
  width: 100%;
  min-height: 18px;
  margin: 5px 0 0;
  padding: 3px 6px;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  color: #475569;
  box-sizing: border-box;
}

#ait-voice-status-v8[data-state="recording"] {
  color: #b91c1c;
}

#ait-voice-status-v8[data-state="processing"] {
  color: #1d4ed8;
}

#ait-voice-status-v8[data-state="speaking"] {
  color: #7c3aed;
  font-weight: 600;
}

#ait-voice-status-v8[data-state="success"] {
  color: #15803d;
}

#ait-voice-status-v8[data-state="error"] {
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 5px;
}

#ait-voice-status-v9 {
  display: none;
  width: 100%;
  min-height: 18px;
  margin: 5px 0 0;
  padding: 4px 6px;
  box-sizing: border-box;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: #475569;
}

#ait-voice-status-v9[data-state="recording"] {
  color: #b91c1c;
}

#ait-voice-status-v9[data-state="processing"] {
  color: #1d4ed8;
}

#ait-voice-status-v9[data-state="speaking"] {
  color: #7c3aed;
  font-weight: 600;
}

#ait-voice-status-v9[data-state="success"] {
  color: #15803d;
}

#ait-voice-status-v9[data-state="error"] {
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 5px;
}

#ait-play-answer-v9 {
  display: none;
  margin: 6px auto 2px;
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: #0891b2;
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#ait-play-answer-v9:active {
  transform: scale(.98);
}

#ait-teacher-controls-v10 {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 2px;
}

#ait-teacher-controls-v10 button {
  min-height: 28px;
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.2;
  color: #fff;
  background: #2563eb;
}

#ait-teacher-controls-v10 button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

#ait-teacher-controls-v10 #ait-teacher-pause {
  background: #b45309;
}

#ait-teacher-controls-v10 #ait-teacher-resume {
  background: #15803d;
}

#ait-teacher-controls-v10 #ait-teacher-stop {
  background: #b91c1c;
}

@media (max-width:700px) {
  #ait-teacher-controls-v10 {
    gap: 4px;
  }

  #ait-teacher-controls-v10 button {
    flex: 1 1 calc(50% - 4px);
    min-width: 115px;
  }
}