/**
 * BEElio — Native iOS Safari & Standalone PWA Fullscreen Lesson Viewport (V2)
 *
 * Khắc phục triệt để hiện tượng khuất nút KIỂM TRA / Gợi ý / Nháp / Bắt đầu thực hành trên mọi dòng iPhone:
 *  - Portal #beelio-lesson-portal cấp document.body + html[data-fullscreen-lesson="1"] (vượt mọi stacking context).
 *  - Chiều cao khớp chính xác window.visualViewport (--bls-vvh, fallback 100dvh -> 100vh) ngay phía trên
 *    thanh địa chỉ nổi Safari (beelio.pages.dev) hoặc bàn phím ảo iOS.
 *  - Khung Flex 3 tầng khóa cứng: Header (bù Dynamic Island) -> Body cuộn mượt -> Footer neo cứng (bù Home Indicator).
 *  - Bảng nháp ô li (.bls-scratchpad-panel) trượt dạng ngăn kéo nửa dưới trên điện thoại để không che đề bài.
 */

/* 1. PORTAL ROOT TRỰC TIẾP DƯỚI DOCUMENT.BODY */
.beelio-lesson-portal-root {
  display: none;
}

.beelio-lesson-portal-root[data-portal-active="1"] {
  display: block;
  position: fixed;
  top: var(--bls-vv-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--bls-vvh, 100dvh);
  z-index: 2100;
  overflow: hidden;
  isolation: isolate;
}

/* 2. CHẾ ĐỘ TẬP TRUNG PHÒNG HỌC TRÊN DI ĐỘNG / TABLET (BẢO VỆ KÉP: DATA-ATTR + :HAS FALLBACK) */
@media (max-width: 1024px) {
  html[data-fullscreen-lesson="1"] #app > .main-site-header,
  html[data-fullscreen-lesson="1"] #app > .mobile-bottom-nav,
  #app:has(.beelio-lesson-viewport) > .main-site-header,
  #app:has(.beelio-lesson-viewport) > .mobile-bottom-nav {
    display: none !important;
  }

  html[data-fullscreen-lesson="1"] #kid-mascot-widget,
  html[data-fullscreen-lesson="1"] .mobile-study-sheet-backdrop,
  body:has(.beelio-lesson-viewport) #kid-mascot-widget {
    display: none !important;
  }

  /* Gỡ bẫy stacking context (-webkit-overflow-scrolling: touch) nếu lesson được mount trực tiếp trong #main-view */
  #app:has(.beelio-lesson-viewport) > .main-content-view {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
  }
}

/* 3. KHUNG PHÒNG HỌC TOÀN MÀN HÌNH 3 TẦNG FLEX (HEADER - SCROLLABLE BODY - DOCKED FOOTER) */
.beelio-lesson-viewport.bls-studio-v2 {
  position: fixed !important;
  top: var(--bls-vv-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: var(--bls-vvh, 100dvh) !important;
  max-height: var(--bls-vvh, 100dvh) !important;
  z-index: 2100 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.beelio-lesson-viewport.beelio-victory-view,
.beelio-lesson-viewport.beelio-out-of-hearts-view {
  position: fixed !important;
  top: var(--bls-vv-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: var(--bls-vvh, 100dvh) !important;
  z-index: 2100 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

/* Đầu bài: không bị lún dưới Dynamic Island khi mở chế độ PWA Màn hình chính */
.bls-studio-v2 > .beelio-lesson-header {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  height: auto !important;
  z-index: 70 !important;
}

/* Thân bài: vùng cuộn duy nhất ở giữa (0% cuộn kép, 0% bị thanh đáy đè khuất đáp án C/D) */
.bls-studio-v2 > .beelio-lesson-body {
  position: relative !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  box-sizing: border-box !important;
  padding: 18px 20px 20px !important;
}

/* Thanh đáy (#beelio-bottom-bar & #beelio-theory-bottom-bar): neo cứng làm Flex Footer độc lập */
.bls-studio-v2 > .beelio-bottom-bar {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 80 !important;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)) 24px !important;
}

/* Khi bàn phím ảo iOS đang bật (câu tự luận chữ), Home Indicator đã nằm dưới bàn phím nên bỏ khoảng đệm dư */
.bls-studio-v2.is-ios-keyboard-open > .beelio-bottom-bar {
  padding-bottom: 8px !important;
}

/* Thanh đáy của màn Thẻ Kiến Thức đầu bài (data-stage="theory") */
.bls-theory-docked-bar .bls-theory-footer {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Tấm phản hồi Đúng/Sai (#beelio-feedback-sheet): neo tuyệt đối theo khung --bls-vvh */
.bls-studio-v2 > .beelio-sheet-feedback {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-height: min(78%, 520px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  z-index: 260 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Modal xem lại Kiến thức giữa bài (#bls-theory-modal): nút đóng luôn ghim dưới đáy hộp thoại */
.bls-theory-modal-backdrop {
  z-index: 2300 !important;
  padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(12px, env(safe-area-inset-bottom, 12px)) 12px !important;
  height: var(--bls-vvh, 100dvh) !important;
}

.bls-theory-modal-dialog .bls-theory-footer {
  position: sticky;
  bottom: -16px;
  background: inherit;
  padding: 12px 0 4px;
  z-index: 5;
}

/* 4. TỐI ƯU BẢNG NHÁP NỬA DƯỚI & CỤM NÚT NGÓN CÁI TRÊN IPHONE / ĐIỆN THOẠI (<= 720px) */
@media (max-width: 720px) {
  .bls-studio-v2 > .beelio-lesson-header {
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 12px 0 12px !important;
  }

  .bls-studio-v2 > .beelio-lesson-body {
    padding: 10px 12px 14px 12px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .bls-studio-v2 > .beelio-bottom-bar {
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06) !important;
  }

  /* Bố cục ngón cái chuẩn Apple HIG (>= 44pt): 3 nút phụ gọn bên trái + nút KIỂM TRA rộng nổi bật bên phải */
  .bls-studio-v2 .beelio-bottom-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bls-studio-v2 .bls-bottom-helper-group {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .bls-studio-v2 .bls-helper-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 48px !important;
    height: 46px !important;
    padding: 4px 7px !important;
    border-radius: 13px !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .bls-studio-v2 .bls-helper-btn > span:first-child {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .bls-studio-v2 .bls-helper-btn .bls-helper-label-long {
    display: none !important;
  }

  .bls-studio-v2 #btn-check-action {
    flex: 1 1 auto !important;
    min-width: 132px !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    border-radius: 14px !important;
  }

  /* Thanh đáy màn Thẻ Kiến Thức đầu bài trên iPhone: nút Bỏ qua gọn trái + Vào thực hành rộng phải, 0% tràn ngang */
  .bls-theory-docked-bar .bls-theory-footer {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bls-theory-docked-bar #btn-skip-theory {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bls-theory-docked-bar #btn-skip-theory .bls-skip-extra {
    display: none !important;
  }

  .bls-theory-docked-bar .bls-theory-cta-group {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
  }

  .bls-theory-docked-bar .bls-btn-start-practice {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    border-radius: 14px !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Ngăn kéo Bảng nháp / Sổ quan sát nửa dưới trên iPhone: vừa nhìn đề bài phía trên vừa viết nháp bên dưới */
  .bls-studio-v2 .bls-scratchpad-panel:not([hidden]) {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 45 !important;
    margin-top: 8px !important;
    border-radius: 18px !important;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.14), 0 4px 0 var(--bls-accent, #60A5FA) !important;
  }

  .bls-studio-v2 .bls-scratchpad-canvas-wrap {
    height: clamp(160px, 28dvh, 210px) !important;
  }

  /* Tấm phản hồi Đúng/Sai trên iPhone */
  .bls-studio-v2 > .beelio-sheet-feedback {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px !important;
  }

  /* Chống iOS Safari tự phóng to (auto-zoom) khi chạm vào ô nhập đáp án */
  .beelio-answer-input {
    font-size: max(18px, 1rem) !important;
  }

  /* Màn Chiến thắng / Hết tim gọn vừa khít 1 khung nhìn iPhone */
  .beelio-victory-view,
  .beelio-out-of-hearts-view {
    justify-content: flex-start !important;
  }

  .beelio-victory-card {
    margin: auto 0 !important;
    padding: 20px 16px !important;
    gap: 12px !important;
  }
}

/* Màn cực hẹp <= 359px (iPhone SE thế hệ 1 / màn chia đôi): rút 3 nút phụ thành nút icon 44x44pt tinh gọn */
@media (max-width: 359px) {
  .bls-studio-v2 .bls-helper-btn {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  .bls-studio-v2 .bls-helper-btn > span:last-child {
    display: none !important;
  }

  .bls-theory-docked-bar #btn-skip-theory {
    font-size: 11.5px !important;
    padding: 9px 9px !important;
  }

  .bls-theory-docked-bar .bls-btn-start-practice {
    font-size: 13px !important;
    padding: 10px 10px !important;
  }
}