/* ===== Gaya dasar ===== */
.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
@keyframes pulse-flame {
  0%, 100% { transform: scale(1) rotate(-1deg); opacity: 0.95; }
  50% { transform: scale(1.08, 1.15) rotate(2deg); opacity: 1; }
}
.animate-flame {
  animation: pulse-flame 1.1s infinite ease-in-out;
  transform-origin: bottom center;
}

/* Standard IUPAC 18-column Periodic Table CSS Grid */
.standard-periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(48px, 1fr));
  gap: 3px;
}

.element-card {
  transition: all 0.15s ease-in-out;
  user-select: none;
}
.element-card:hover {
  transform: translateY(-2px) scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ===== MOBILE UPGRADE LAYER (konten tidak diubah) ===== */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
* { -webkit-tap-highlight-color: transparent; }
button, a, select, input, label { touch-action: manipulation; }

/* Bottom navigation */
#bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #d1fae5; box-shadow: 0 -4px 18px rgba(2,44,34,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 2px 8px; min-height: 58px; color: #64748b;
  font-size: 10px; font-weight: 700; line-height: 1.1; position: relative; transition: color .15s;
}
#bottom-nav button i { font-size: 18px; transition: transform .15s; }
#bottom-nav button.active { color: #047857; }
#bottom-nav button.active i { transform: translateY(-2px) scale(1.1); }
#bottom-nav button.active::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  background: #059669; border-radius: 0 0 4px 4px;
}
@media (min-width: 1024px) { #bottom-nav { display: none; } }

@media (max-width: 1023px) {
  #mobile-menu-btn, #mobile-menu { display: none !important; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  header.sticky { padding-top: env(safe-area-inset-top, 0px); }
  footer { margin-top: 1.5rem !important; padding-bottom: 1.5rem; }
  #hubbi-chat-btn { --hubbi-size: 52px; right: calc(8px + env(safe-area-inset-right, 0px)); }
}

@media (max-width: 767px) {
  main { padding-left: 14px !important; padding-right: 14px !important; padding-top: 14px !important; }
  .text-xs { font-size: .8125rem !important; line-height: 1.3rem !important; }
  .text-\[11px\] { font-size: .75rem !important; }
  .text-\[10px\] { font-size: .6875rem !important; }
  p, li { overflow-wrap: anywhere; }
  .text-justify { text-align: left !important; }
  h1 { overflow-wrap: anywhere; }
  button, select, .mod-nav-btn { min-height: 40px; }
  input:not([type=range]):not([type=radio]):not([type=checkbox]), select, textarea {
    font-size: 16px !important; min-height: 44px;
  }
  input[type=radio], input[type=checkbox] { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  input[type=range] { height: 28px; }
  label:has(input[type=radio]) { padding: .7rem .75rem; min-height: 46px; }

  /* Modul (mobile): hanya kartu menu chip yang menempel di bawah header.
     Kartu Slide Deck & Sintaks KBC dipindah ke BAWAH isi modul agar tidak menutupi materi. */
  #tab-modul > div { gap: .75rem !important; }
  #tab-modul > div > div:first-child { display: contents; }            /* bungkus sidebar dilepas, kartu jadi item flex */
  #tab-modul > div > div:first-child > div { margin: 0 !important; }
  #tab-modul > div > div:first-child > div:nth-child(1) {              /* menu chip (satu-satunya yang sticky) */
    order: 1; position: sticky; top: calc(64px + env(safe-area-inset-top,0px)); z-index: 30;
    padding: .6rem !important; border-radius: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  }
  #tab-modul > div > div:first-child h2 { display: none; }
  #tab-modul > div > #module-viewer { order: 2; }
  #tab-modul > div > div:first-child > div:nth-child(2) { order: 3; position: static; }  /* Slide Deck */
  #tab-modul > div > div:first-child > div:nth-child(3) { order: 4; position: static; }  /* Sintaks KBC */
  #tab-modul > div > div:first-child > div:nth-child(2) h2 { display: flex; }             /* judul Presentasi tetap tampil */
  #module-menu { display: flex !important; overflow-x: auto; gap: .4rem; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  #module-menu::-webkit-scrollbar { display: none; }
  #module-menu > button { flex: 0 0 auto; width: auto !important; white-space: nowrap; border-radius: 999px !important;
    padding: .55rem .9rem !important; margin: 0 !important; scroll-snap-align: start; border: 1px solid #e2e8f0; }
  #module-menu > button > i:last-child { display: none; }
  /* Menu Tokoh Kimia (sama seperti menu modul di HP) */
  #tokoh-side > div { position: sticky; top: calc(64px + env(safe-area-inset-top,0px)); z-index: 30; padding: .6rem !important;
    border-radius: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
  #tokoh-side h2 { display: none; }
  #tokoh-menu { display: flex !important; overflow-x: auto; gap: .4rem; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  #tokoh-menu::-webkit-scrollbar { display: none; }
  #tokoh-menu > button { flex: 0 0 auto; width: auto !important; white-space: nowrap; border-radius: 999px !important;
    padding: .55rem .9rem !important; margin: 0 !important; scroll-snap-align: start; border: 1px solid #e2e8f0; }
  #tokoh-menu > button > i:last-child, #tokoh-menu > button span span { display: none; }
  #tokoh-viewer { padding: 1rem !important; min-height: 0 !important; border-radius: 1.25rem !important; scroll-margin-top: 130px; }
  #module-viewer { padding: 1rem !important; min-height: 0 !important; border-radius: 1.25rem !important; scroll-margin-top: 130px; }

  /* Tabel periodik */
  #standard-spu-wrapper { min-width: var(--spu-w, 720px) !important; }
  .standard-periodic-grid { grid-template-columns: repeat(18, minmax(34px, 1fr)); gap: 2px; }
  .element-card { height: 46px !important; padding: 2px !important; }
  .element-card:active { transform: scale(.94); }
  .spu-zoom { display: flex !important; }

  /* Chat: layar penuh */
  #hubbi-chat-window { inset: 0 !important; width: 100% !important; height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important; border: 0 !important; }
  #hubbi-chat-window > div:first-child { padding-top: calc(.875rem + env(safe-area-inset-top,0px)) !important; }
  #hubbi-chat-window > div:last-child { padding-bottom: calc(.75rem + env(safe-area-inset-bottom,0px)) !important; }
  #hubbi-chat-window button[onclick="toggleHubbiChat()"] { width: 40px !important; height: 40px !important; }
  #hubbi-input { font-size: 16px !important; }
  #hubbi-chat-window .max-w-\[85\%\] { max-width: 90% !important; font-size: .9rem; }

  /* Modal jadi bottom-sheet */
  #modal-element, #modal-k3, #modal-ppt, #modal-score { align-items: flex-end !important; padding: 0 !important; overscroll-behavior: contain; }
  #modal-element > div, #modal-k3 > div, #modal-ppt > div, #modal-score > div {
    max-width: 100% !important; width: 100% !important; max-height: 90dvh; overflow-y: auto;
    border-radius: 1.5rem 1.5rem 0 0 !important; padding: 1.25rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom,0px)) !important;
    animation: sheet-up .25s ease-out; overscroll-behavior: contain;
  }
  #modal-element > div::before, #modal-k3 > div::before, #modal-ppt > div::before, #modal-score > div::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: -6px auto 10px;
  }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.spu-zoom { display: none; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem;
  font-size: 12px; color: #64748b; }
.spu-zoom div { display: flex; gap: .35rem; }
.spu-zoom button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff;
  font-weight: 800; color: #065f46; }
.spu-zoom button:active { background: #d1fae5; }

@media (hover: none) {
  .element-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* ===== Tombol chatbot Hubbi: melayang, sisi kanan & tengah layar ===== */
#hubbi-chat-btn {
  --hubbi-size: 60px;
  width: var(--hubbi-size); height: var(--hubbi-size);
  top: calc(50% - var(--hubbi-size) / 2);          /* tengah vertikal, tanpa transform */
  right: calc(12px + env(safe-area-inset-right, 0px));
  padding: 0; border-radius: 50%; overflow: hidden;
  background: #fff; border: 3px solid #047857; color: #047857;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(4, 120, 87, .35);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  animation: hubbi-float 3s ease-in-out infinite;
  transition: scale .2s, box-shadow .2s;
}
#hubbi-chat-btn img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#hubbi-chat-btn:hover { scale: 1.1; box-shadow: 0 10px 28px rgba(4, 120, 87, .5); }
#hubbi-chat-btn:active { scale: .94; }
@keyframes hubbi-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #hubbi-chat-btn { animation: none; } }

/* Jendela chat di desktop/tablet: muncul di sebelah kiri tombol, tidak menutupinya */
@media (min-width: 768px) {
  #hubbi-chat-window { top: auto; bottom: 1.5rem; right: calc(12px + 60px + 16px); }
}

/* ===== Lebar konten modul: jangan melebar oleh elemen yang bisa digulir (mis. timeline modul 1) ===== */
#module-viewer, #module-viewer .module-content { min-width: 0; max-width: 100%; }
#module-viewer .overflow-x-auto { max-width: 100%; }


/* ===== Daftar modul panjang (26 modul): menu dapat digulir di desktop/tablet ===== */
@media (min-width: 768px) {
  #module-menu {
    max-height: 62vh; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9;
  }
  #module-menu::-webkit-scrollbar { width: 6px; }
  #module-menu::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
  #module-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
}

/* ===== Modul 26 (Kimia Inti): notasi nuklida, widget animasi, soal ===== */
/* Lambang inti: A (nomor massa) superskrip di atas, Z (nomor atom) subskrip di bawah,
   keduanya rata kanan tepat di kiri simbol unsur. Tumpukan dinaikkan (vertical-align) supaya
   A sejajar tinggi huruf kapital dan Z berada di garis dasar simbol. Angka tidak ditebalkan. */
.nk { display: inline-flex; flex-direction: column; align-items: flex-end;
  font-size: .62em; line-height: 1; vertical-align: .75em; margin-right: .1em; white-space: nowrap; }
.nk b, .nk i { display: block; font-style: normal; font-weight: 400; }
.nk-bar { text-decoration: overline; text-decoration-thickness: 1px; }
.nk-eq { font-size: 1rem; line-height: 2.1; white-space: nowrap; }
td.nk-eq, li.nk-eq, div.nk-eq { overflow-x: auto; }
.nk-btn { padding: .4rem .75rem; border-radius: .6rem; font-size: .75rem; font-weight: 700;
  border: 1px solid #6ee7b7; background: #fff; color: #065f46; }
.nk-btn:hover { background: #ecfdf5; }
.nk-btn.on { background: #059669; color: #fff; border-color: #059669; }
.nk-in { border: 1px solid #cbd5e1; border-radius: .6rem; padding: .4rem .6rem; width: 100%; font-size: .875rem; }
#module-viewer svg, #module-viewer canvas { max-width: 100%; }
#module-viewer canvas { height: auto; }
#module-viewer details > summary { cursor: pointer; }
#module-viewer details[open] > summary { margin-bottom: .25rem; }
@media (max-width: 767px) {
  #module-viewer .nk-eq { font-size: .95rem; }
  .nk-btn { min-height: 40px; }
  #module-viewer [data-nk] .nk-btn { flex: 1 1 auto; }
}


/* ===== Lab Virtual Kimia Nuklir (labs/kimia-nuklir.js) ===== */
.nuk-lab canvas { max-width: 100%; height: auto; }
.nuk-lab .nk-btn { cursor: pointer; transition: background .15s, color .15s; }
.nuk-lab .nk-eq { line-height: 2.2; overflow-x: auto; white-space: nowrap; }
.nuk-lab .nk-eq sup { font-size: .65em; line-height: 0; }
.nuk-lab input[type=range] { accent-color: #059669; }
.nuk-lab [data-p] { min-width: 0; }
@media (max-width: 767px) {
  .nuk-lab [data-r=tabs] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nuk-lab [data-r=tabs]::-webkit-scrollbar { display: none; }
  .nuk-lab [data-r=tabs] .nk-btn { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
  .nuk-lab [data-r=modes] .nk-btn, .nuk-lab [data-r=pre] .nk-btn { flex: 1 1 auto; }
  .nuk-lab .nk-eq { font-size: .95rem; }
}


/* ===== Lab Virtual Turunan Hidrokarbon (labs/turunan-hidrokarbon.js) ===== */
.hc-lab { min-width: 0; }
.hc-lab select, .hc-lab input[type=range] { max-width: 100%; }
.hc-lab input[type=range] { accent-color: #059669; }
.hc-lab .hc-tube { width: 100%; height: auto; max-height: 140px; display: block; }
.hc-lab .hc-dark { background: #0f172a; color: #e2e8f0; border-radius: 1rem; padding: 1rem; }
.hc-lab .hc-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fcd34d;
  background: #1e293b; border-radius: .5rem; padding: .35rem .6rem; overflow-x: auto; }
.hc-lab .hc-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace; font-size: .75rem; padding: .75rem; border-radius: 1rem;
  background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; overflow-x: auto; }
.hc-lab .hc-chip { padding: .45rem .7rem; border-radius: .75rem; border: 1px solid; transition: opacity .5s; }
.hc-lab .hc-bar { height: 100%; transition: width .15s linear; }
.hc-lab .nk-btn { cursor: pointer; transition: background .15s, color .15s; }
.hc-lab table td, .hc-lab table th { vertical-align: top; }
@media (max-width: 767px) {
  .hc-lab [data-r=tabs], .hc-lab [data-r=m-tests] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hc-lab [data-r=tabs]::-webkit-scrollbar, .hc-lab [data-r=m-tests]::-webkit-scrollbar { display: none; }
  .hc-lab [data-r=tabs] .nk-btn, .hc-lab [data-r=m-tests] .nk-btn { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
  .hc-lab .hc-eq { font-size: .6875rem; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .hc-lab .hc-chip, .hc-lab .hc-bar { transition: none; } }