/*
 * Mobile-optimization overrides for ybmblex.net
 * Loaded LAST via <link> in index.html so specificity battles favor us.
 *
 * Findings driving these rules (from offline DOM audit 2026-05-14):
 *   1. `.yb-qr-close` button is 30x23 px (below 36 tap target) on every page
 *   2. `.login-bg-content` overflows horizontally on /login /register /forgetPassword
 *   3. Google OAuth iframe is hardcoded 633px — overflows on phones
 *   4. Multiple Element UI components (default desktop sizing) need mobile tuning
 *   5. The floating "Open chat" widget at 32x32 — pushed to corner FAB style on mobile
 *
 * Scope: only kicks in below 768 px (Bootstrap mobile breakpoint already used in app).
 */

/* ============================================================
 * 1. UNIVERSAL — tap targets, root safety
 * ============================================================ */
html, body { overflow-x: hidden; }   /* defense against any sub-element that overflows */

@media (max-width: 767px) {
  /* All buttons / nav links get a min tap target. WAI-ARIA / Apple HIG = 44px */
  button, .el-button, a.btn, .nav-link {
    min-height: 44px;
  }
  /* Icon-only buttons (×, hamburger, etc.) need both dimensions */
  button.close, .yb-qr-close, .el-message-box__headerbtn,
  .el-dialog__headerbtn, .el-icon-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
 * 2. WeChat QR popup — too large for phone, collapse to FAB
 * ============================================================ */
@media (max-width: 767px) {
  /* Whichever container the QR popup uses — common selectors: */
  .yb-qr-popup, .qr-popup, .wechat-qr-popup, [class*="qr-popup"], [class*="wechat-popup"] {
    max-width: calc(100vw - 32px) !important;
    right: 16px !important;
    left: auto !important;
    bottom: 80px !important;     /* clear of mobile address bar */
    box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
    border-radius: 12px !important;
  }
  /* Make the close X huge enough to actually tap */
  .yb-qr-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    top: 4px !important;
    right: 4px !important;
  }
  /* If the QR image is too tall, cap it */
  .yb-qr-popup img, .qr-popup img, [class*="qr-popup"] img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ============================================================
 * 3. LOGIN / REGISTER / FORGET PASSWORD — the overflowing left panel
 * ============================================================ */
@media (max-width: 767px) {
  /* Hide the giant decorative left panel on mobile; show login form full-width */
  .login-bg-content {
    display: none !important;
  }
  /* Login card takes full width */
  .login-card, .login-form, .register-card,
  [class*="login-form"], [class*="register-form"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Google OAuth iframe — wrap so it doesn't overflow */
  iframe[src*="accounts.google"], iframe[src*="google.com/gsi"],
  div[class*="hJDwNd"], div[class*="nsm7Bb"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Form inputs should be full-width and 44px tall */
  .el-input__inner, input[type=text], input[type=password], input[type=email], input[type=tel] {
    height: 44px !important;
    font-size: 16px !important;   /* 16px prevents iOS auto-zoom on focus */
  }
}

/* ============================================================
 * 4. ELEMENT UI — mobile-friendly defaults for the framework
 * ============================================================ */
@media (max-width: 767px) {
  /* Dialogs go full-screen */
  .el-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }
  .el-dialog__wrapper { padding: 0 !important; }

  /* Message boxes contain to viewport */
  .el-message-box {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
  }

  /* Popovers contain */
  .el-popover, .el-tooltip__popper {
    max-width: calc(100vw - 32px) !important;
  }

  /* Tables: enable horizontal scroll wrapper */
  .el-table {
    overflow-x: auto !important;
  }
  .el-table__body, .el-table__header {
    min-width: 100% !important;
  }

  /* Form labels stack above inputs (was left-aligned at desktop) */
  .el-form--label-right .el-form-item__label,
  .el-form--label-left .el-form-item__label {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px !important;
  }
  .el-form--label-right .el-form-item__content,
  .el-form--label-left .el-form-item__content {
    margin-left: 0 !important;
  }

  /* Pagination is hideously small on mobile by default */
  .el-pagination button, .el-pagination .el-pager li {
    min-width: 36px !important;
    min-height: 36px !important;
    line-height: 36px !important;
  }

  /* Drawer / select dropdowns */
  .el-select-dropdown { max-width: calc(100vw - 32px) !important; }
}

/* ============================================================
 * 5. NAVIGATION — collapse to hamburger style if not already
 * ============================================================ */
@media (max-width: 767px) {
  /* Header logo smaller */
  .header-logo, .yb-logo, [class*="logo"] img {
    max-height: 36px !important;
  }
  /* Header buttons compact */
  .header-right, .header-actions, .yb-header-right {
    gap: 8px !important;
  }
  .header-right .el-button, .header-actions .el-button {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
 * 6. THIRD-PARTY chat widget — keep, but ensure it doesn't cover content
 * ============================================================ */
@media (max-width: 767px) {
  /* Common chat widget selectors (Tawk, Crisp, Intercom, generic) */
  iframe[id*="chat"], iframe[title*="chat"], iframe[title*="Chat"],
  div[id*="chat-widget"], div[class*="chat-widget"],
  div[id*="tawk"], div[class*="tawk"], div[id*="crisp"],
  div[id*="intercom"], div[class*="intercom"] {
    bottom: 12px !important;
    right: 12px !important;
  }
}

/* ============================================================
 * 7. CONTENT pages (blog/article details) — readability
 * ============================================================ */
@media (max-width: 767px) {
  .article-content, .blog-content, [class*="article-body"], [class*="blog-body"] {
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  .article-content img, .blog-content img, [class*="article-body"] img, [class*="blog-body"] img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Code blocks can overflow */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
  }
}

/* ============================================================
 * 8. VIDEO / MEDIA — responsive containers
 * ============================================================ */
@media (max-width: 767px) {
  video, iframe[src*="youtube"], iframe[src*="vimeo"], .video-js, .vjs-tech {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Video player containers */
  .video-container, [class*="video-wrapper"] {
    max-width: 100vw !important;
  }
}

/* ============================================================
 * 9. PRINT — minor cleanup so screenshots/print of mobile look OK
 * ============================================================ */
@media print {
  .yb-qr-popup, .yb-qr-close, [class*="chat-widget"] { display: none !important; }
}

/* ============================================================
 * 10. CHAPTER STEPS — force-show lesson entry buttons at EVERY width
 *     (Bug: SPA hides .btn / .btn-study on iPad portrait, leaving rows
 *     without any entry CTA. Confirmed via screenshot 2026-05-15.)
 *
 * Template structure of each step row (chapter detail page):
 *   <li>
 *     <div class="title"> 步骤N - title </div>
 *     <div class="btn">
 *       el-button.btn-study  (unlocked: 学习/复习)
 *       OR .btn-info         (completed: pass/fail icon)
 *       OR .btn-icon         (locked: lock icon)
 *     </div>
 *   </li>
 * ============================================================ */

/* Force the .btn container + its contents to render at ANY viewport */
.btn,
.btn-study,
.btn-info,
.btn-icon,
.btn-loading,
li > .btn,
.steps li .btn,
[class*="chapter-step"] .btn,
[class*="study-step"] .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 80px !important;
  min-height: 44px !important;
}

.btn-study {
  background: #3b82f6 !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.btn-study:hover,
.btn-study:active {
  background: #2563eb !important;
}

.btn-icon { color: #9ca3af !important; font-size: 24px !important; }
.btn-icon .el-icon-lock { font-size: 24px !important; }

.btn-info {
  display: inline-flex !important;
  gap: 6px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

/* CRITICAL: cancel out any hidden-* class that's been applied to a button
   inside a step row. The SPA uses dual-template hiding but tablet portrait
   falls through the cracks. */
.btn .hidden-sm-and-down,
.btn .hidden-md-and-up,
.btn .hidden-md-and-down,
.btn .hidden-sm-and-up,
.btn .hidden-md-only,
.btn .hidden-sm-only,
.btn .hidden-xs-only,
.btn.hidden-sm-and-down,
.btn.hidden-md-and-up,
.btn.hidden-md-and-down,
.btn.hidden-sm-and-up,
.btn.hidden-md-only,
.btn.hidden-sm-only,
.btn.hidden-xs-only,
.btn-study.hidden-sm-and-down,
.btn-study.hidden-md-and-up,
.btn-study.hidden-sm-only,
.btn-study.hidden-md-only,
li[class*="step"] .hidden-sm-only,
li[class*="step"] .hidden-md-only,
li[class*="step"] .hidden-sm-and-down,
li[class*="step"] .hidden-md-and-up {
  display: inline-flex !important;
}

/* Ensure the step row itself is a flex row that gives .btn space on the right */
.steps li, .chapter-steps li, ul[class*="step"] > li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  gap: 12px !important;
}
.steps li .title, .chapter-steps li .title, ul[class*="step"] > li .title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.steps li .btn, .chapter-steps li .btn, ul[class*="step"] > li .btn {
  flex: 0 0 auto !important;
}

/* Fallback: make the whole row tap-able as a safety net so even if the
   button somehow still doesn't render, tapping the row anywhere goes
   to the next step (browsers will activate the contained <button>). */
.steps li:hover, .chapter-steps li:hover, ul[class*="step"] > li:hover {
  background: rgba(59, 130, 246, .04) !important;
  cursor: pointer !important;
}

/* ============================================================
 * 11. STUDY (in-lesson) navigation — Next / Prev buttons
 *     SPA hides .study-button-next / .study-button-prev at max-width:768px
 *     (catches iPad portrait at exactly 768). Force-show.
 * ============================================================ */
.study-button-next,
.study-button-prev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 96px !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  background: #3b82f6 !important;
  color: #fff !important;
  border-radius: 8px !important;
  margin: 8px !important;
  cursor: pointer !important;
}
.study-button-prev { background: #6b7280 !important; }

/* ============================================================
 * 12. ENTRY CTAs (course list / dashboard) — generic safety
 * ============================================================ */
@media (max-width: 1024px) {
  .study-entry, .lesson-entry, .course-entry,
  .enter-course-btn, .enter-lesson-btn, .continue-study-btn,
  [class*="enter-lesson"], [class*="enter-course"], [class*="continue-study"],
  .el-button[class*="enter"], .el-button[class*="study"] {
    display: inline-flex !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}