.mobile-more-toggle, .mobile-tone-select, .attach-plus { display: none; }
.header-menu { position: relative; flex: 0 0 auto; }
.pdf-page-open { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: zoom-in; }
.pdf-page-open:focus-visible { outline: 3px solid #5480ed; outline-offset: 3px; }

/* The full-page reader uses the same image and keeps the lecture underneath. */
.page-zoom {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh;
  max-height: none; margin: 0; padding: 0; border: 0; color: #1b3154;
  background: #edf2f8; overflow: hidden;
}
.page-zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.page-zoom::backdrop { background: #edf2f8; }
.page-zoom-toolbar {
  display: flex; align-items: center; gap: 4px; background: #fff;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px; border-bottom: 1px solid #dde5f0;
}
.page-zoom-toolbar strong { flex: 1; font-size: 15px; padding-left: 4px; }
.page-zoom-toolbar button {
  display: inline-flex; justify-content: center; align-items: center;
  min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 12px;
  background: #f0f4fa; color: #244b92; font-size: 22px;
}
.page-zoom-toolbar [data-zoom-reset] { font-size: 14px; }
.page-zoom-toolbar button:disabled { opacity: .4; }
.page-zoom-stage { min-width: 0; min-height: 0; overflow: auto; padding: 12px; touch-action: none; overscroll-behavior: contain; }
.page-zoom-canvas { margin: 0 auto; }
.page-zoom-canvas img { display: block; width: 100%; height: auto; max-width: none; background: white; user-select: none; -webkit-user-select: none; }
.page-zoom-footer { display: flex; justify-content: flex-end; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: white; }
.page-zoom-footer button { min-height: 44px; padding: 0 20px; }

@media (max-width: 860px) {
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100%; overflow: hidden; }
  #app .login-page { height: var(--app-height, 100dvh); min-height: 0; overflow: auto; }
  #app .login-box input { font-size: 16px; }
  #app .shell {
    position: fixed; top: var(--app-top, 0px); left: 0; right: 0;
    display: block; height: var(--app-height, 100dvh); min-height: 0; width: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #f4f7fc; overflow: hidden;
  }
  #app .main { height: 100%; min-height: 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
  #app .topbar {
    position: relative; top: auto; display: flex; align-items: center; flex: 0 0 56px;
    min-height: 56px; gap: 8px; padding: 6px 10px; border-radius: 0; background: #fff;
    border-bottom: 1px solid #e4eaf4; backdrop-filter: none; z-index: 12;
  }
  #app .topbar h2 { display: block; flex: 1; font-size: 16px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app .topbar .mobile-menu-toggle, #app .mobile-more-toggle {
    display: inline-flex; min-height: 44px; min-width: 48px; padding: 0 8px;
    font-size: 14px; border: 0; border-radius: 12px; box-shadow: none; background: #f3f6fb;
  }
  #app .header-menu { width: auto; }
  #app .header-menu > .top-actions {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: 186px; max-width: calc(100vw - 20px); padding: 6px; gap: 4px;
    border: 1px solid #e0e7f2; border-radius: 16px; background: #fff;
    box-shadow: 0 10px 30px #22396224; grid-template-columns: 1fr; overflow: visible;
  }
  #app .header-menu.open > .top-actions { display: grid; }
  #app .header-menu .top-actions > * { width: 100%; min-height: 44px; font-size: 14px; border: 0; border-radius: 10px; box-shadow: none; }
  #app .sidebar { top: var(--app-top, 0px); left: 0; height: var(--app-height, 100dvh); width: min(86vw, 340px); max-width: 86vw; border-radius: 0 20px 20px 0; padding-top: max(18px, env(safe-area-inset-top)); }
  #app .sidebar .search input { font-size: 16px; }
  #app .lesson-item { min-height: 48px; font-size: 15px; }
  #app .home-thread, #app .home-history-head button { min-height: 44px; }
  #app .home-thread-delete { min-width: 40px; min-height: 40px; }

  #app .lesson-view {
    flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: #f4f7fc;
  }
  #app .mobile-lesson-tabs {
    grid-area: 1 / 1; position: static; display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 6px 12px; border: 0; background: #edf2fa; backdrop-filter: none;
  }
  #app .mobile-lesson-tabs button { min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 700; border: 0; border-radius: 12px; background: transparent; color: #6b7d99; box-shadow: none; }
  #app .mobile-lesson-tabs button[aria-selected="true"] { background: #fff; color: #345fcb; box-shadow: 0 2px 8px #2f548714; }
  #app .pdf-wrap, #app .side-chat {
    grid-area: 2 / 1; width: 100%; height: 100%; min-height: 0; min-width: 0;
    max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  }
  /* Keep both panels laid out so switching never resets their scroll offsets. */
  #app .lesson-view[data-mobile-tab="chat"] .pdf-wrap,
  #app .lesson-view[data-mobile-tab="pdf"] .side-chat { visibility: hidden; pointer-events: none; }
  #app .divider { display: none; }
  #app .pdf-frame { height: 100%; border: 0; border-radius: 0; background: #edf2f8; box-shadow: none; }
  #app .pdf-pages { padding: 10px; gap: 16px; }
  #app .pdf-page { gap: 8px; width: min(100%, 920px); }
  #app .pdf-page img { border-radius: 4px; box-shadow: 0 3px 12px #24487512; }
  #app .pdf-page figcaption { gap: 8px; padding: 0 2px; font-size: 12px; justify-content: space-between; }
  #app .pdf-page figcaption button { min-height: 44px; padding: 0 12px; font-size: 14px; box-shadow: none; }

  #app .home-chat, #app .side-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; padding: 0; gap: 0; overflow: hidden; background: #f5f8fc; }
  #app .messages { flex: 1 1 0; min-height: 0; max-height: none; height: auto; gap: 12px; padding: 12px; overflow-x: hidden; scroll-padding: 12px; scroll-behavior: auto; overscroll-behavior: contain; }
  #app .msg { flex-shrink: 0; width: fit-content; max-width: 100%; padding: 9px 12px; border-radius: 13px 13px 13px 4px; line-height: 1.65; background: #fff; box-shadow: none; backdrop-filter: none; }
  #app .msg.user { max-width: 88%; border-radius: 13px 13px 4px 13px; background: #eaf0ff; }
  #app .msg-content { font-size: 16px; }
  #app .msg-content mjx-container { display: inline-block; max-width: 100%; vertical-align: middle; overflow-x: auto; overflow-y: hidden; }
  #app .msg-content mjx-container[display="true"] { display: block; }
  #app .home-empty { min-height: 0; margin: auto 0; padding: 20px 10px; background: none; border: 0; box-shadow: none; }
  #app .home-empty p { font-size: 14px; }
  #app .composer {
    position: relative; bottom: auto; flex: 0 0 auto; width: 100%; display: grid;
    gap: 8px; padding: 10px 12px; margin: 0; border: 0; border-top: 1px solid #e1e8f3;
    border-radius: 18px 18px 0 0; background: #fff; box-shadow: none; backdrop-filter: none; overflow: hidden;
  }
  #app .composer .tones, #app .composer .reading-note, #app .composer .attachments.is-empty { display: none; }
  #app .composer textarea { min-height: 48px; height: 48px; max-height: 120px; padding: 10px 12px; font-size: 16px; line-height: 1.5; resize: none; border-radius: 13px; background: #f6f8fc; }
  #app .composer-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  #app .attach-label { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: #f0f4fa; box-shadow: none; }
  #app .attach-label::before, #app .attach-text { display: none; }
  #app .attach-plus { display: inline; font-size: 27px; line-height: 1; font-weight: 400; }
  #app .mobile-tone-select { display: block; justify-self: start; max-width: 100%; min-height: 44px; padding: 0 24px 0 10px; border: 0; border-radius: 10px; background-color: #f4f6fb; color: #536785; font-size: 14px; }
  #app .composer-actions > button { min-height: 44px; min-width: 76px; padding: 0 16px; font-size: 15px; border-radius: 12px; box-shadow: none; }
  #app .composer .attachments { max-height: 104px; overflow: auto; gap: 6px; }
  #app .attachments .chip { font-size: 12px; border-radius: 10px; }
  #app .attachments .chip button { min-width: 32px; min-height: 32px; }
  #app button:hover, #app .attach-label:hover { transform: none; }
  .page-zoom { top: var(--app-top, 0px); bottom: auto; height: var(--app-height, 100dvh); }
}