/* ====== RESET & TOKENS ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:Poppins,system-ui,Arial; color:#0b1b3a; background:#e5e7eb; }
img{ max-width:30%; height:auto; } /* jaga-jaga */

/* Warna & ukuran */
:root{
  --sidebar:#1542c5;
  --ink:#0b1b3a;
  --surface:#ffffff;
  --board-bg:#f4f2ff;
  --board-br:#1542c5;
  --bubble-bot:#c7cdfc;
  --bubble-user:#ffffff;
  --bubble-br:#2b2d421a;
  --chat-width: 920px;
}

/* ====== LAYOUT ====== */
.container{ display:flex; min-height:100vh; height:100vh; }
.sidebar{
  width:240px; background:var(--sidebar); color:#fff;
  padding:18px 14px; display:flex; flex-direction:column; gap:14px;
  border-right:1px solid rgba(255,255,255,.25);
}
.sb-card{ background:#1542c5; border:1px solid #1542c5;
  border-radius:10px; padding:14px; }
.sb-brand{ display:flex; gap:12px; align-items:center; }
.sb-brand img{ background:#fff; border-radius:80px; padding:3px; object-fit:contain; }
.sb-title{ font-weight:700; font-size:18px; letter-spacing:.3px; }
.sb-sub{ opacity:.9; font-size:12px; margin-top:2px; }
.sb-label{ font-size:12px; opacity:.9; margin-bottom:6px; }
.sb-materi{ font-weight:700; font-size:16px; }
.sb-foot{
  margin-top:auto; font-size:12px; line-height:1.35;
  opacity:.95; background:rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.25); padding:12px; border-radius:10px;
}

.main{ flex:1; display:flex; flex-direction:column; background:var(--surface); }

/* ====== TOPBAR & DROPDOWN ====== */
.topbar{
  position:relative; display:flex; justify-content:flex-end; align-items:center;
  padding:14px 20px; background:var(--surface);
}
.course-pill{
  background:#214edc; color:#fff; border:none; padding:8px 14px;
  border-radius:12px; cursor:pointer; font-weight:600;
}
.dropdown{
  list-style:none; margin:8px 0 0; padding:6px; position:absolute; right:20px; top:46px;
  background:#214edc; border-radius:10px; border:1px solid rgba(255,255,255,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.15s;
}
.dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{ color:#fff; text-decoration:none; display:block; padding:6px 12px; }

/* ====== HERO ====== */
.hero{ display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 16px 8px; }
.hero-logo{
  width:56px; height:56px; aspect-ratio:1/1; object-fit:contain; display:block;
}
.hero-title{ font-size:28px; font-weight:700; margin:0; }

/* ====== BOARD CHAT (scroll internal) ====== */
.board-wrap{
  display:flex;
  justify-content:center;
  padding:20px 20px 0;
  flex:1;
  min-height:0;
}

.board{
  width:min(var(--chat-width), 100%);
  background:var(--board-bg);
  border:2px solid var(--board-br);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;

  /* ❌ JANGAN pakai height fix */
  /* height:50vh; */

  /* ✅ Pakai min + max height supaya tidak kepotong */
  min-height:320px;
  max-height:70vh;   /* kalau masih kepotong, boleh dinaikkan ke 75vh */
}

/* pastikan chat-log bisa scroll di dalam board */
/* pastikan chat-log bisa scroll di dalam board
   dan bubble bisa rata kiri/kanan */
.chat-log{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;              /* jarak antar bubble */
}


/* Bubbles */
/* Bubbles */
.bubble{
  max-width: 80%;          /* jangan 100% supaya bisa kelihatan kiri/kanan */
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
  white-space: pre-line;   /* supaya \n jadi baris baru */
}

/* BOT → kiri */
.bubble.bot{
  background:var(--bubble-bot);
  color:#0b1b3a;
  align-self:flex-start;
  margin-right:auto;
}

/* USER → kanan */
.bubble.user{
  background:var(--bubble-user);
  color:#0b1b3a;
  align-self:flex-end;
  margin-left:auto;
}


/* ====== COMPOSER ====== */
.composer{ padding:10px 20px 6px; background:var(--surface); position:sticky; bottom:0; }
.composer-row{ display:flex; gap:10px; width:min(var(--chat-width), 100%); margin:0 auto; }
.message-input{
  flex:1; font-size:15px; padding:12px 14px; border-radius:12px; border:2px solid var(--board-br); outline:none;
}
.send-button{
  width:44px; border-radius:10px; border:2px solid var(--board-br);
  background:#e9e7ff; cursor:pointer; font-weight:700; color:#1f2937;
}

/* Chips */
.chip-row{
  width:min(var(--chat-width), 70%); margin:10px auto 0;
  display:flex; gap:28px; justify-content:space-between; flex-wrap:wrap;
}
.chip{ background:transparent; border:none; color:#111827; font-size:16px; cursor:pointer; padding:6px 0; }
.chip:hover{ text-decoration:underline; }

/* Footer */
.footer{ padding:14px 20px; color:#334155; background:var(--surface); }

/* Scrollbar chat */
.chat-log::-webkit-scrollbar{ width:10px; }
.chat-log::-webkit-scrollbar-thumb{ background:rgba(2,6,23,.25); border-radius:10px; }
.chat-log::-webkit-scrollbar-track{ background:transparent; }

/* Responsive */
@media (max-width:1200px){ :root{ --chat-width: 860px; } }
@media (max-width:992px){ .sidebar{ width:210px; } }
@media (max-width:820px){
  .sidebar{ display:none; }
  :root{ --chat-width: 100%; }
  .board{ height:56vh; }
}

/* =========================
   LAYOUT MOBILE (HP)
   ========================= */
@media (max-width: 768px) {

  /* kontainer full layar, tanpa border radius */
  .container{
    margin:0;
    width:100%;
    max-width:none;
    min-height:100vh;
    border-radius:0;
  }

  /* sidebar turun ke bawah, jadi semacam footer info */
  .sidebar{
    order:2;
    width:100%;
    border-right:none;
    border-top:1px solid #e5e7eb;
    padding:10px 14px;
  }

  /* main (chat) di atas dan ambil tinggi layar */
  .main{
    order:1;
    width:100%;
    display:flex;
    flex-direction:column;
  }

  /* hero diringkas biar nggak makan layar */
  .hero{
    padding:12px 16px 4px;
    text-align:center;
  }
  .hero-logo{
    width:64px;
    height:64px;
  }
  .hero-title{
    font-size:1.3rem;
    line-height:1.3;
  }

  /* area board chat memenuhi ruang di tengah */
  .board-wrap{
    flex:1;
    padding:8px 12px 0;
    min-height:0;
  }
  .board{
    min-height:0;
    max-height:none;
    height:auto;
  }

  /* composer nempel bawah layar */
  .composer{
    padding:8px 12px 12px;
  }

  /* chip di HP lebih fleksibel (bisa 2 kolom) */
  .chip-row{
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 8px;
  }
  .chip{
    flex:1 1 45%;
    text-align:center;
  }

  /* tombol latihan di tengah */
  .quiz-row{
    justify-content:center;
  }
}