/* FIEZEL Speaking + Listening sidecar. All selectors are namespaced with .fsl-. */
.fsl-shell{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}/* v41-F1 2026-08-29: track auto memakai min-content kartu (314px) dan melebarkan dokumen jadi 327px di 320 — minmax(0,1fr) memaksa track mengalah, pola sama dengan launcher-shell v6. */.fsl-shell .fsl-card{min-width:0}.fsl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.fsl-head h1{margin:0;font-size:1.55rem;letter-spacing:-.03em}.fsl-head p{margin:.35rem 0 0;color:var(--muted,#6b5a60);line-height:1.55}.fsl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fsl-card{background:var(--panel,#fff);color:var(--text,#1d1114);border:1px solid var(--line,#e9dfe1);border-radius:22px;padding:18px;box-shadow:var(--shadow-sm,0 2px 10px rgba(40,20,26,.05))}.fsl-card h2,.fsl-card h3,.fsl-card p,.fsl-card .fsl-status{color:inherit}.fsl-card h2,.fsl-card h3{margin:.2rem 0 .45rem}.fsl-card p{line-height:1.55}.fsl-kicker{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--muted-soft,#8a757c);text-transform:uppercase}.fsl-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
/* m025-110: OWNER melaporkan tombol Lanjut terkubur di bawah blok umpan balik dan
   harus dicari dengan menggulir. Blok umpan balik memuat naskah lengkap, jadi pada
   soal panjang tombolnya berada jauh di luar layar tepat ketika ia paling dibutuhkan.
   Kini ia mengambang di atas bilah navigasi dan ikut ke mana pun layar digulir.

   Hanya blok yang memuat data-next yang diangkat: .fsl-actions juga dipakai untuk
   tombol mulai dan rekam, dan membuat SEMUANYA mengambang akan menutupi soalnya. */
.fsl-feedback .fsl-actions{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:55;margin-top:0;
  width:min(520px,calc(100vw - 28px));justify-content:stretch}
.fsl-feedback .fsl-actions button{flex:1;box-shadow:0 10px 30px rgba(7,13,29,.22)}
/* Ruang di bawah umpan balik supaya baris terakhir naskah tidak tertutup tombolnya. */
.fsl-feedback{padding-bottom:72px}.fsl-actions button{min-height:44px}/* m028: tombol "Nilai jawaban" pindah ke permukaan tinta. Terracotta dengan putih di
   atasnya hanya 4,3:1 - di bawah ambang untuk teks tombol seukuran ini, dan tombol ini
   adalah satu-satunya jalan menyelesaikan latihan Speaking/Listening. */
.fsl-primary{background:var(--text,#241A11);border-color:var(--text,#241A11);color:var(--on-core,#FDFAF3)}.fsl-options{display:grid;gap:9px;margin-top:14px}.fsl-option{text-align:left}.fsl-option.is-correct{border-color:var(--green,#1f9d6f);background:var(--green-soft,#e7f8f1)}.fsl-option.is-wrong{border-color:var(--red,#e0526f);background:var(--red-soft,#fdeef1)}.fsl-status{padding:11px 13px;border-radius:13px;background:var(--panel-soft,#f6eef0);color:var(--text,#1d1114);font-size:.88rem;line-height:1.5}.fsl-feedback{margin-top:14px;padding:13px;border-radius:14px;background:var(--panel-soft,#f6eef0);color:var(--text,#1d1114)}.fsl-feedback strong{display:block;margin-bottom:4px}.fsl-prompt{font-size:1.15rem;font-weight:750;line-height:1.45}.fsl-transcript{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;white-space:pre-wrap;word-break:break-word;background:var(--panel-soft,#f6eef0);padding:12px;border-radius:12px}.fsl-privacy{font-size:.78rem;color:var(--muted,#6b5a60);line-height:1.5}.fsl-progress{height:8px;background:var(--line-soft,#f2ebec);border-radius:999px;overflow:hidden}.fsl-progress>span{display:block;height:100%;background:var(--accent,#8C2233)}.fsl-audio{width:100%;margin-top:12px}.fsl-hidden{display:none!important}.fsl-input{width:100%;padding:12px 13px;border:1px solid var(--line,#e9dfe1);border-radius:13px;font:inherit}.fsl-levels{display:flex;gap:7px;flex-wrap:wrap}.fsl-levels button[aria-pressed="true"]{background:var(--accent-soft,#f7e8eb);border-color:var(--accent,#8C2233)}
.fsl-work{min-width:0;margin:12px 0 0;padding:0;border:0}.fsl-work:disabled{opacity:.56}.fsl-work:disabled button,.fsl-work:disabled input{cursor:not-allowed}
@media(max-width:640px){.fsl-grid{grid-template-columns:1fr}.fsl-head{display:block}.fsl-actions>*{flex:1 1 auto}}
/* m025-145: kontrak ujian Speaking. Waktu menyiapkan dan waktu bicara ditaruh di muka
   karena itulah yang membedakan latihan ujian dari latihan harian. */
.fsl-timing{display:grid;gap:2px;margin:0 0 8px;padding:8px 11px;border-radius:12px;background:rgba(194,64,44,.08);font-size:.78rem}
.fsl-timing span{font-weight:700}
.fsl-timing small{line-height:1.45;opacity:.8}
.fsl-cue{margin:10px 0;padding-left:20px;display:grid;gap:5px;font-size:.85rem}
.fsl-source{margin:8px 0;padding:8px 11px;border-radius:12px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);font:inherit;font-size:.78rem;line-height:1.45;color:#334155;white-space:pre-wrap;max-height:140px;overflow:auto}
.fsl-adapted{margin:6px 0 0;font-size:.75rem;opacity:.75}
/* m025-146: sesi Listening berformat ujian. Satu audio, banyak soal, sekali putar. */
.fsl-exam-list{display:grid;gap:16px;margin:12px 0 0;padding-left:20px}
.fsl-exam-q p{margin:0 0 7px;line-height:1.5}
.fsl-exam-q .fsl-input{width:100%}
.fsl-q-feedback{display:none}
.fsl-q-feedback.is-ok,.fsl-q-feedback.is-wrong{display:grid;gap:3px;margin-top:7px;padding:8px 10px;border-radius:10px;font-size:.79rem}
.fsl-q-feedback.is-ok{background:rgba(63,143,95,.12)}
.fsl-q-feedback.is-wrong{background:rgba(194,64,44,.12)}
.fsl-q-feedback small{opacity:.85;line-height:1.45}
.fsl-option.is-picked{outline:2px solid var(--accent,#c2402c);outline-offset:1px}
.fsl-notes-label{display:grid;gap:4px;margin:8px 0 0;font-size:.78rem;font-weight:700;color:#334155}
.fsl-notes{width:100%;font:inherit;font-weight:400;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line,#CBD5E1) !important;min-height:54px;max-height:85px;resize:vertical;background:#FFFFFF !important;color:#0F172A !important}
.fsl-notes:focus-visible{outline:2px solid var(--focus-ring,#A67A00);outline-offset:2px;border-color:var(--sun-deep,#E6A800) !important}
.fsl-exam-result{margin:10px 0 0}
.fsl-script{margin:10px 0 0;font-size:.8rem}
.fsl-script pre{white-space:pre-wrap;line-height:1.55;padding:11px;border-radius:12px;background:rgba(0,0,0,.05);font:inherit;font-size:.8rem;max-height:340px;overflow:auto}
/* m028 fase3 (§9.3): blok umpan balik listening dipaku ke dasar layar oleh aturan
   di atas, jadi di panggung Skills Lab ia butuh ruang tambahan agar tombol "Nilai
   jawaban" tidak pernah berbagi tempat dengan gelembung pembimbing. */
body.fz-stage-sl .fsl-feedback{padding-bottom:120px}

/* ===== FASE3 ===== (blok terpisah di akhir berkas; Fase 2 memegang baris .fsl-primary di atas) */
/* §3 pemutar latihan dengar: wajah PAW + gelombang statis + chip jumlah putar. */
.fsl-player{display:flex;align-items:center;gap:11px;margin-top:14px;padding:11px 13px;border-radius:16px;background:var(--panel-soft,#FFF3DC);border:1px solid var(--line,#F0E4CF)}
.fsl-mascot-slot{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--sun-soft,#FFF3C4);overflow:hidden}
.fsl-mascot-slot .fsl-mascot{width:38px;height:38px}
.fsl-mascot-slot .fz-i{width:20px;height:20px;color:var(--text,#241A11)}
.fsl-wave{flex:1 1 auto;min-width:0;height:22px;color:var(--sun-deep,#E6A800)}
.fsl-replays{flex:0 0 auto;font-size:.72rem;font-weight:650;color:var(--muted,#6E5E47)}

/* §3 audit #4: keadaan terkunci harus TERBACA, bukan diredupkan.
   opacity:.56 di atas kertas cream menjatuhkan tinta soal ke ~2,6:1 - dan yang diredupkan
   itu justru isi latihannya. Redupnya dilepas; keadaan terkunci sekarang punya
   permukaan dan tinta sendiri, plus satu baris alasan supaya tidak perlu ditebak. */
.fsl-work:disabled{opacity:1}
.fsl-work:disabled .fsl-input,.fsl-work:disabled .fsl-option{background:var(--panel-soft,#FFF3DC);color:var(--muted,#6E5E47);border-color:var(--line,#F0E4CF)}
.fsl-work:disabled::before{content:"Terkunci — putar audio dulu";display:block;margin-bottom:9px;font-size:.75rem;font-weight:650;color:var(--muted,#6E5E47)}
:lang(th) .fsl-work:disabled::before{content:"ล็อคอยู่ — เล่นเสียงก่อน"}

/* §3 kolom dikte: garis 1,5px dan cincin fokus yang benar-benar terlihat. */
.fsl-input{padding:12px 13px;border-width:1.5px}
.fsl-input:focus-visible{outline:2px solid var(--focus-ring,#A67A00);outline-offset:2px;border-color:var(--sun-deep,#E6A800)}
.fsl-input::placeholder{color:var(--muted,#6E5E47);opacity:1}

/* ===== GEM TERJEMAHAN ===== (reports/recon-listening-gems.md §B.6 butir 8)
   Baris ini duduk di HEADER kartu sesi, tepat di bawah kicker: harga dan saldo terbaca di
   tempat yang sama dengan barangnya. Dua target sentuh berdampingan pada 390 px, keduanya
   ≥44 px tinggi. Chip TIDAK disembunyikan saat saldo 0 - progres "Runtun 3/5" justru paling
   berguna ketika gem belum ada. */
.fsl-gem-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:10px 0 4px}
.fsl-gem-chip{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border-radius:14px;background:var(--sun-soft,#FFF3C4);border:1px solid var(--line,#F0E4CF);color:var(--text,#241A11)}
.fsl-gem-chip .fsl-gem-mark{flex:0 0 auto;color:var(--sun-deep,#E6A800)}
.fsl-gem-chip b{font-size:.84rem;font-weight:700;line-height:1.1}
.fsl-gem-chip small{font-size:.7rem;font-weight:650;color:var(--muted,#6E5E47);line-height:1.1}
.fsl-gem-toggle{flex:1 1 140px;display:grid;gap:2px;justify-items:start;text-align:left;min-height:44px;padding:8px 13px;border-radius:14px;border:1.5px solid var(--line,#F0E4CF);background:var(--panel-soft,#FFF3DC);color:var(--text,#241A11);font:inherit;cursor:pointer}
.fsl-gem-toggle .fsl-gem-toggle-label{font-size:.84rem;font-weight:700;line-height:1.2}
.fsl-gem-toggle small{font-size:.7rem;font-weight:600;color:var(--muted,#6E5E47);line-height:1.25}
.fsl-gem-toggle[aria-pressed="true"]{border-color:var(--sun-deep,#E6A800);background:var(--sun-soft,#FFF3C4);box-shadow:inset 0 0 0 1px var(--sun-deep,#E6A800)}
.fsl-gem-toggle:focus-visible{outline:2px solid var(--focus-ring,#A67A00);outline-offset:2px}
/* Keadaan gem habis: ajakan, bukan paywall. Tidak ada tombol beli di mana pun - sengaja
   dibuat sebagai teks hangat sewarna panel, bukan peringatan merah. */
.fsl-gem-empty{flex:1 1 100%;display:grid;gap:4px;padding:11px 13px;border-radius:14px;background:var(--panel-soft,#FFF3DC);border:1px dashed var(--line,#F0E4CF)}
.fsl-gem-empty[hidden]{display:none}
.fsl-gem-empty b{font-size:.82rem;font-weight:700}
.fsl-gem-empty p{margin:0;font-size:.76rem;line-height:1.5;color:var(--muted,#6E5E47)}
/* Baris terjemahan hidup HANYA di dalam blok feedback pasca-jawab (keputusan m025-148).
   Labelnya menyebut "terjemahan otomatis" apa adanya: hasil AI on-the-fly, belum dikurasi. */
.fsl-translation{display:grid;gap:6px;margin:8px 0 0;padding:11px 13px;border-radius:12px;background:rgba(63,143,95,.1)}
.fsl-translation p{margin:0;font-size:.82rem;line-height:1.55}
.fsl-translation-options{margin:0;padding-left:19px;display:grid;gap:3px;font-size:.79rem;line-height:1.5}
.fsl-translation small{font-size:.7rem;color:var(--muted,#6E5E47)}
.fsl-translation-miss{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--panel-soft,#FFF3DC);font-size:.78rem;line-height:1.5;color:var(--muted,#6E5E47)}
/* Entri Pengaturan: baris statis (tanpa aksi), dua kalimat penjelasan. */
.setting-row-static{cursor:default}
.setting-row-static .setting-note{margin-top:3px;line-height:1.5;opacity:.9}

/* R2-4: strip maskot untuk sesi tanpa fsl-player (speaking + latihan ujian) - maskot
   hadir di atas panel soal seperti semua tipe sesi lain; dekorasi murni (aria-hidden). */
.fsl-mascot-strip{display:flex;justify-content:center;margin:2px 0 6px}
.fsl-mascot-strip .fsl-mascot-slot{width:46px;height:46px}
.fsl-mascot-strip .fsl-mascot{width:46px;height:46px}

/* ===== I9 2026-08-28 (O5 §5.3 + Fase 8): sesi dengar = audio pahlawan =====
   Nilai hanya dari token v6 - tidak ada hex mentah baru di blok ini. */
/* Ekonomi gem keluar dari zona latihan aktif (O1-002) - markup gemBarMarkup() TETAP
   (kontrak tests/gems-test.js + tur: #fslGemChip, #fslTranslateToggle), posisinya turun ke
   kaki kartu dan mengecil. Chip & toggle tetap ≥44px (aturan target sentuh). */
/* ===== SESI LATIHAN MENYIMAK (TACTILE TRAVERTINE & COMPACT HERO REDESIGN) =====
   Penyelarasan Tema Tactile Travertine resmi Fiezel:
   Latar #FFFDF9, border 1.5px solid #E8DFD3, box-shadow 0 12px 32px rgba(36,26,17,0.08). */

.fsl-card-listening,
.fsl-card-speaking {
  position: relative !important;
  background: #FFFDF9 !important;
  color: #1E1B18 !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(36, 26, 17, 0.08) !important;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 1. KONTRAK HEADLINE: Kontras >= 12:1 di atas travertine */
html body .fsl-card.fsl-card-listening h2,
html body .fsl-card.fsl-card-speaking h2,
html body .fsl-card-listening h2,
html body .fsl-card-speaking h2,
.fsl-card-listening h2,
.fsl-card-speaking h2,
.fsl-card-listening>h2,
.fsl-card-speaking>h2,
body.fz-stage-sl.fsl-session-active .fsl-card-listening>h2,
body.fz-stage-sl.fsl-session-active .fsl-card-speaking>h2 {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 12px 0 !important;
  padding-right: 44px !important; /* Ruang untuk tombol silang exit di pojok kanan atas */
  word-break: break-word !important;
}

/* Penataan Khusus Sesi Speaking (Tactile Travertine) */
.fsl-card-speaking .fsl-kicker {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8C2233 !important;
  background: #FDF2F4 !important;
  border: 1px solid #F5D0D6 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
  width: fit-content !important;
}
.fsl-card-speaking .fsl-mascot-strip {
  margin: 4px 0 10px 0 !important;
}
.fsl-card-speaking .fsl-prompt {
  position: relative !important;
  background: #FFF8EB !important;
  border: 1.5px solid #F0E4CF !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  color: #241A11 !important;
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  margin: 8px 0 12px 0 !important;
  box-shadow: 0 2px 8px rgba(36, 26, 17, 0.04) !important;
  word-break: break-word !important;
}
.fsl-card-speaking .fsl-prompt::before {
  content: '“';
  font-family: Georgia, serif;
  font-size: 1.6rem;
  color: #D4BFA6;
  line-height: 0;
  vertical-align: -0.15em;
  margin-right: 4px;
}
.fsl-card-speaking .fsl-prompt::after {
  content: '”';
  font-family: Georgia, serif;
  font-size: 1.6rem;
  color: #D4BFA6;
  line-height: 0;
  vertical-align: -0.3em;
  margin-left: 4px;
}
.fsl-card-speaking .fsl-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 12px 0 8px 0 !important;
  width: 100% !important;
}
.fsl-card-speaking button[data-recognize] {
  width: 100% !important;
  height: 52px !important;
  min-height: 50px !important;
  max-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: #1E1B18 !important;
  color: #FFFDF9 !important;
  border: 1.5px solid #1E1B18 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(30, 27, 24, 0.16) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.fsl-card-speaking button[data-recognize]:hover {
  background: #2D2723 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(30, 27, 24, 0.22) !important;
}
.fsl-card-speaking button[data-recognize]:active {
  transform: translateY(1px) !important;
}
.fsl-card-speaking button[data-record] {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: #FFF8EB !important;
  color: #6E5E47 !important;
  border: 1.5px solid #E8DFD3 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.fsl-card-speaking button[data-record]:hover {
  background: #F5EADB !important;
  color: #241A11 !important;
}
.fsl-card-speaking .fsl-status {
  margin-top: 8px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: #F7EFE1 !important;
  border: 1px solid #E8DFD3 !important;
  color: #6E5E47 !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

/* 2. ERGONOMI TOMBOL KELUAR: Ikon silang ✕ di pojok kanan atas kartu */
.fsl-exit-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid #E8DFD3 !important;
  background: #FFFDF9 !important;
  color: #6E5E47 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(36, 26, 17, 0.06) !important;
  transition: all 0.15s ease !important;
}
.fsl-exit-btn:hover {
  background: #F7EFE1 !important;
  color: #1E1B18 !important;
  border-color: #D9CAB6 !important;
  transform: scale(1.05) !important;
}
.fsl-exit-btn:active {
  transform: scale(0.95) !important;
}

/* 3. PANGGUNG 3D MOCHI COMPANION UNCLIPPED & LIVELY (~120px) */
.fsl-card-listening .fsl-player,
body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-player {
  position: relative !important;
  width: 100% !important;
  height: 125px !important;
  min-height: 110px !important;
  max-height: 135px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 2px 0 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.fsl-card-listening .fsl-mascot-slot,
body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-mascot-slot {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 110px !important;
  max-height: 135px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-self: center !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
}
.fsl-card-listening .fsl-mascot-slot .fsl-mascot,
.fsl-card-listening .fsl-mascot-slot fiezel-mascot {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 220px !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
.fsl-card-listening .fsl-mascot-slot .fz-i {
  display: none !important;
}
.fsl-card-listening .fsl-player .fsl-bubble {
  display: none !important;
}
.fsl-card-listening .fsl-wave {
  flex: 1 1 auto !important;
  height: 24px !important;
  max-width: 140px !important;
}
.fsl-card-listening .fsl-replays {
  flex: 0 0 auto !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #6E5E47 !important;
  background: #F7EFE1 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid #E8DFD3 !important;
}

/* 4. AUDIO HERO PILL MANDIRI (Tinggi 50-52px) */
.fsl-card-listening .fsl-audio-actions,
body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-audio-actions {
  display: flex !important;
  margin: 4px 0 10px 0 !important;
  width: 100% !important;
}
.fsl-card-listening .fsl-play-hero {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 50px !important;
  max-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: #1E1B18 !important;
  color: #FFFDF9 !important;
  border: 1.5px solid #1E1B18 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(30, 27, 24, 0.16), 0 2px 4px rgba(30, 27, 24, 0.08) !important;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.12s ease, background 0.15s ease !important;
  box-sizing: border-box !important;
}
.fsl-card-listening .fsl-play-hero:hover {
  background: #2D2723 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(30, 27, 24, 0.22) !important;
}
.fsl-card-listening .fsl-play-hero:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(30, 27, 24, 0.12) !important;
}
.fsl-card-listening .fsl-play-hero:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.fsl-play-hero .fsl-play-icon {
  font-size: 14px;
  line-height: 1;
}
.fsl-play-hero .fsl-hero-eq {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 16px;
  color: #F59E0B;
}
.fsl-play-hero .fsl-hero-eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  transform: scaleY(0.25);
  transform-origin: bottom;
  transition: transform 0.15s ease;
}
.fsl-player.is-playing ~ .fsl-audio-actions .fsl-hero-eq i,
.fsl-card-listening:has(.fsl-player.is-playing) .fsl-hero-eq i {
  animation: fslEqBar 0.82s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.07s);
}
.fsl-player.is-playing ~ .fsl-audio-actions .fsl-hero-eq i:nth-child(3n),
.fsl-card-listening:has(.fsl-player.is-playing) .fsl-hero-eq i:nth-child(3n) {
  animation-duration: 1.06s;
}
.fsl-player.is-playing ~ .fsl-audio-actions .fsl-hero-eq i:nth-child(3n+2),
.fsl-card-listening:has(.fsl-player.is-playing) .fsl-hero-eq i:nth-child(3n+2) {
  animation-duration: 0.66s;
}
.fsl-play-hero .fsl-hero-replays {
  font-size: 12px;
  font-weight: 700;
  color: #D6C7B2;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: auto;
}

/* EQUALIZER DYNAMICS */
.fsl-card-listening .fsl-wave { width: min(240px, 80%); flex: 0 0 auto; height: 26px; }
.fsl-eq { display: flex; align-items: flex-end; justify-content: center; gap: clamp(3px, 1.4vw, 6px); }
.fsl-eq i {
  display: block; width: clamp(4px, 1.5vw, 6px); height: 100%;
  border-radius: 999px; background: currentColor;
  transform: scaleY(.18); transform-origin: bottom;
  transition: transform .18s var(--ease, ease);
}
@keyframes fslEqBar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.fsl-player.is-playing .fsl-eq i { animation: fslEqBar .82s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .07s); }
.fsl-player.is-playing .fsl-eq i:nth-child(3n) { animation-duration: 1.06s; }
.fsl-player.is-playing .fsl-eq i:nth-child(3n+2) { animation-duration: .66s; }
@media (prefers-reduced-motion: reduce) {
  .fsl-player.is-playing .fsl-eq i { animation: none; transform: scaleY(.62); }
}
body.reduce-motion .fsl-player.is-playing .fsl-eq i { animation: none; transform: scaleY(.62); }

/* 5. 4 PILIHAN GANDA FIT SATU LAYAR (SINGLE-SCREEN HERO, TINGGI 48-52px) */
.fsl-card-listening .fsl-work {
  margin-top: 6px !important;
  padding: 0 !important;
}
.fsl-card-listening .fsl-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
.fsl-card-listening .fsl-option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  max-height: none !important;
  height: auto !important;
  padding: 10px 14px !important;
  background: #FFFDF9 !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 16px !important;
  color: #1E1B18 !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 #E2D7C8, 0 4px 10px rgba(36,26,17,0.04) !important;
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-sizing: border-box !important;
}
.fsl-card-listening .fsl-option:hover {
  background: #FFF8ED !important;
  border-color: #D9CAB6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 #D9CAB6, 0 6px 14px rgba(36,26,17,0.06) !important;
}
.fsl-card-listening .fsl-option:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 #D9CAB6 !important;
}
.fsl-option-badge {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F4ECE1 !important;
  border: 1px solid #E4D8C8 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #6E5E47 !important;
  align-self: flex-start !important;
  margin-top: 1px !important;
  transition: all 0.15s ease !important;
}
.fsl-option-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}
.fsl-option.is-correct {
  border-color: #10B981 !important;
  background: #ECFDF5 !important;
  color: #065F46 !important;
  box-shadow: 0 2px 0 #10B981 !important;
}
.fsl-option.is-correct .fsl-option-badge {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #FFFFFF !important;
}
.fsl-option.is-wrong {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  color: #991B1B !important;
  box-shadow: 0 2px 0 #EF4444 !important;
}
.fsl-option.is-wrong .fsl-option-badge {
  background: #DC2626 !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}
.fsl-card-listening .fsl-work:disabled .fsl-option {
  background: #F7F3EB !important;
  color: #54483E !important;
  border-color: #E8DFD3 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
.fsl-card-listening .fsl-work:disabled .fsl-option .fsl-option-badge {
  background: #EFE8DC !important;
  border-color: #DFD5C6 !important;
  color: #54483E !important;
}

/* 6. PERBAIKAN GEM FOOTER (ANTI-CLIPPING PADA VIEWPORT 390PX) */
.fsl-card-listening .fsl-gem-footer {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #E8DFD3 !important;
}
.fsl-card-listening .fsl-gem-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
}
.fsl-card-listening .fsl-gem-chip {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  background: #FFF3C4 !important;
  border: 1px solid #F0E4CF !important;
  color: #241A11 !important;
  box-sizing: border-box !important;
}
.fsl-card-listening .fsl-gem-chip b,
.fsl-card-listening .fsl-gem-chip small {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.fsl-card-listening .fsl-gem-toggle {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  border: 1.5px solid #F0E4CF !important;
  background: #FFF8EB !important;
  color: #241A11 !important;
  font: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.fsl-card-listening .fsl-gem-toggle .fsl-gem-toggle-label {
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.fsl-card-listening .fsl-gem-toggle small {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #6E5E47 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 7. FEEDBACK BANNER & TOMBOL "LANJUT" */
.fsl-feedback {
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1.5px solid #E8DFD3 !important;
  background: #FFFDF9 !important;
  color: #1E1B18 !important;
  box-shadow: 0 4px 16px rgba(36,26,17,0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.fsl-feedback.is-passed {
  border-color: #10B981 !important;
  background: #F0FDF4 !important;
  color: #065F46 !important;
}
.fsl-feedback.is-passed strong {
  color: #047857 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.fsl-feedback.is-failed {
  border-color: #F59E0B !important;
  background: #FFFBEB !important;
  color: #92400E !important;
}
.fsl-feedback.is-failed strong {
  color: #B45309 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.fsl-feedback p {
  margin: 8px 0 4px !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}
.fsl-feedback .fsl-actions,
body.fz-stage-sl.fsl-session-active .fsl-feedback .fsl-actions,
body.fsl-session-active .fsl-feedback .fsl-actions {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 9999 !important;
  width: min(520px, calc(100vw - 28px)) !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  margin-top: 0 !important;
}
.fsl-feedback .fsl-actions button[data-next],
.fsl-actions button[data-next],
button[data-next] {
  flex: 1 !important;
  width: 100% !important;
  background: #FFE02E !important;
  color: #101018 !important;
  -webkit-text-fill-color: #101018 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  border: 1.5px solid #241A11 !important;
  border-bottom: 4px solid #241A11 !important;
  border-radius: 999px !important;
  min-height: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(36, 26, 17, 0.22) !important;
  opacity: 1 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.fsl-feedback .fsl-actions button[data-next]:active,
.fsl-actions button[data-next]:active,
button[data-next]:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1.5px !important;
  box-shadow: 0 2px 6px rgba(36, 26, 17, 0.14) !important;
}

/* 8. SINGLE-SCREEN VIEWPORT FIT & CLEAN LAYOUT */
body.fz-stage-sl.fsl-session-active .app,
body.fsl-session-active .app {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  box-sizing: border-box !important;
}
body.fz-stage-sl.fsl-session-active #app,
body.fz-stage-sl.fsl-session-active .skills-page,
body.fz-stage-sl.fsl-session-active #speakingListeningRoot,
body.fz-stage-sl.fsl-session-active .fsl-shell,
body.fsl-session-active #app,
body.fsl-session-active .skills-page,
body.fsl-session-active #speakingListeningRoot,
body.fsl-session-active .fsl-shell {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
body.fz-stage-sl.fsl-session-active section.skills-page,
body.fsl-session-active section.skills-page,
body.fz-stage-sl.fsl-session-active .skills-page,
body.fsl-session-active .skills-page,
body:has(.fsl-card-listening) .skills-page,
body:has(.fsl-card-speaking) .skills-page {
  padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
  margin-top: 0 !important;
}
body.fz-stage-sl.fsl-session-active .fsl-shell,
body.fsl-session-active .fsl-shell {
  max-width: 540px !important;
  margin: auto !important;
}
body.fz-stage-sl.fsl-session-active .fsl-card-listening,
body.fsl-session-active .fsl-card-listening,
body.fz-stage-sl.fsl-session-active .fsl-card-speaking,
body.fsl-session-active .fsl-card-speaking {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  padding: 14px 16px !important;
  overflow-y: visible !important;
}

/* ANTI-COLLISION PADDING: Mencegah tombol mengambang "Lanjut" menabrak naskah/gem-footer */
body.fz-stage-sl.fsl-session-active .fsl-card-listening:has(.fsl-feedback),
body.fsl-session-active .fsl-card-listening:has(.fsl-feedback),
body.fz-stage-sl.fsl-session-active .fsl-card-speaking:has(.fsl-feedback),
body.fsl-session-active .fsl-card-speaking:has(.fsl-feedback),
body.fz-stage-sl.fsl-session-active .fsl-card:has(.fsl-feedback),
body.fsl-session-active .fsl-card:has(.fsl-feedback) {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 16px)) !important;
}
.fsl-card-listening:has(.fsl-feedback) .fsl-gem-footer {
  margin-bottom: calc(76px + env(safe-area-inset-bottom, 16px)) !important;
}
.fsl-card-speaking:has(.fsl-feedback) .fsl-feedback {
  margin-bottom: calc(76px + env(safe-area-inset-bottom, 16px)) !important;
}

@media (min-width: 768px) {
  body.fz-stage-sl.fsl-session-active .fsl-shell,
  body.fsl-session-active .fsl-shell {
    max-width: min(980px, 92vw) !important;
    margin: auto !important;
  }
  body.fz-stage-sl.fsl-session-active .fsl-card-listening,
  body.fz-stage-sl.fsl-session-active .fsl-card-speaking,
  .fsl-card-listening,
  .fsl-card-speaking {
    padding: 24px 28px !important;
    border-radius: 28px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }
  .fsl-card-listening h2,
  .fsl-card-speaking h2 {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
    padding-right: 50px !important;
  }
  .fsl-card-listening .fsl-player {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 150px !important;
    max-height: 160px !important;
  }
  .fsl-card-listening .fsl-audio-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
  }
  .fsl-card-listening .fsl-work {
    grid-column: 2 !important;
    grid-row: 2 / span 3 !important;
    margin: 0 !important;
  }
  .fsl-card-listening [data-feedback] {
    grid-column: 2 !important;
  }
  .fsl-card-listening .fsl-gem-footer {
    grid-column: 1 / -1 !important;
    margin-top: 12px !important;
  }

  .fsl-card-speaking .fsl-kicker {
    grid-column: 1 / -1 !important;
  }
  .fsl-card-speaking .fsl-mascot-strip {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: 140px !important;
  }
  .fsl-card-speaking .fsl-mascot-strip .fsl-mascot-slot,
  .fsl-card-speaking .fsl-mascot-strip .fsl-mascot {
    width: 120px !important;
    height: 120px !important;
  }
  .fsl-card-speaking .fsl-prompt {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
  .fsl-card-speaking .fsl-actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fsl-card-speaking .fsl-status {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
  .fsl-card-speaking .fsl-privacy {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }
  .fsl-card-speaking [data-feedback] {
    grid-column: 2 !important;
    grid-row: 6 !important;
  }
  .fsl-card-listening .fsl-mascot-slot .fz-mochi-viewport,
  .fsl-card-listening .fsl-mascot-slot canvas {
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .fsl-card-listening .fsl-actions,
  .fsl-card-listening .fsl-options,
  .fsl-card-listening .fsl-play-hero {
    position: relative !important;
    z-index: 5 !important;
  }
}

/* Hide global navbars, background hub headers, and skill-page-topbar during session */
body.fz-stage-sl.fsl-session-active .skill-page-topbar,
body.fsl-session-active .skill-page-topbar,
body:has(.fsl-card-listening) .skill-page-topbar,
body:has(.fsl-card-speaking) .skill-page-topbar,
body.fz-stage-sl.fsl-session-active .topbar,
body.fsl-session-active .topbar,
body.fz-stage-sl.fsl-session-active .bottomnav,
body.fsl-session-active .bottomnav,
body.fz-stage-sl.fsl-session-active .section-head,
body.fsl-session-active .section-head,
body:has(.fsl-card-listening) .bottomnav,
body:has(.fsl-card-speaking) .bottomnav,
body:has(.fsl-card-listening) .section-head,
body:has(.fsl-card-speaking) .section-head,
body:has(.fsl-feedback) .bottomnav,
body:has(.fsl-feedback) .skill-page-topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

body.fz-stage-sl.fsl-session-active .fz-coach-peek,
body.fz-stage-sl.fsl-session-active .fz-coach-bubble {
  display: none !important;
}

/* Compact Viewport Optimization (Zero-Scroll Fit for 360x800 and Small Phones) */
@media (max-height: 820px), (max-width: 480px) {
  .fsl-card-listening .fsl-player,
  body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-player {
    height: 72px !important;
    min-height: 60px !important;
    max-height: 76px !important;
    margin: 0 0 4px 0 !important;
  }
  .fsl-card-listening .fsl-mascot-slot,
  body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-mascot-slot {
    min-height: 60px !important;
    max-height: 76px !important;
  }
  .fsl-card-listening .fsl-mascot-slot .fsl-mascot,
  .fsl-card-listening .fsl-mascot-slot fiezel-mascot {
    max-width: 120px !important;
  }
  .fsl-card-listening .fsl-audio-actions,
  body.fz-stage-sl.fsl-session-active .fsl-card-listening .fsl-audio-actions {
    margin: 2px 0 6px 0 !important;
  }
  .fsl-card-listening .fsl-play-hero {
    height: 48px !important;
    min-height: 46px !important;
    max-height: 48px !important;
  }
  .fsl-card-listening .fsl-options {
    gap: 6px !important;
  }
  .fsl-card-listening .fsl-option {
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
  }
  .fsl-card-listening .fsl-gem-footer {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  .fsl-card-listening .fsl-gem-chip,
  .fsl-card-listening .fsl-gem-toggle {
    min-height: 34px !important;
    padding: 3px 8px !important;
  }
  .fsl-card .fsl-privacy {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    margin: 4px 0 !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #F7EFE1 !important;
    border: 1px solid #E8DFD3 !important;
    max-height: 60px !important;
    overflow-y: auto !important;
  }
  .fsl-card-speaking .fsl-mascot-strip {
    margin: 0 0 4px 0 !important;
  }
  .fsl-card-speaking .fsl-mascot-strip .fsl-mascot-slot,
  .fsl-card-speaking .fsl-mascot-strip .fsl-mascot {
    width: 42px !important;
    height: 42px !important;
  }
  .fsl-card-speaking .fsl-prompt {
    font-size: 1.02rem !important;
    padding: 10px 14px !important;
    margin: 6px 0 8px 0 !important;
  }
  .fsl-card-speaking button[data-recognize] {
    height: 48px !important;
    min-height: 46px !important;
    max-height: 48px !important;
  }
  .fsl-card-speaking .fsl-actions {
    margin: 8px 0 6px 0 !important;
    gap: 6px !important;
  }
}