/* Mobile web app: keep controls visible around Safari's browser chrome. */
@media (max-width: 820px) {
  html, body { overscroll-behavior: none; }
  .app-shell { height: 100vh; height: var(--mobile-visible-height, 100dvh); }
  .sidebar { height: 100vh; height: var(--mobile-visible-height, 100dvh); overflow-y: auto; overscroll-behavior: contain; padding-top: max(22px, env(safe-area-inset-top, 0px)); padding-bottom: max(15px, env(safe-area-inset-bottom, 0px)); }
  .sidebar, .main-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar { background: var(--panel-solid); }
  .chat-list { flex: 1 0 auto; max-height: 30vh; max-height: 30dvh; }
  .topbar { min-width: 0; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .top-actions { flex: 0 1 auto; min-width: 0; max-width: 68%; overflow-x: auto; scrollbar-width: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions select { min-height: 44px; font-size: 16px; }
  .menu-toggle, .mobile-close, .icon-btn, .scene-button, .send-button, .tool-btn { min-width: 44px; min-height: 44px; }
  .topbar .icon-btn, .topbar .scene-button { flex: none; }
  .composer-area { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .composer textarea { font-size: 16px; }
  .composer-footer { gap: 8px; }
  .composer-footer > span { overflow-wrap: anywhere; }
  .messages, .home-screen, .ielts-room, .diary-room, .lami-room, .admissions-room, .explore-room { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .home-wrap, .ielts-wrap, .diary-stage, .lami-room-content, .admissions-wrap, .explore-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
  dialog { max-width: calc(100vw - 24px); max-height: calc(var(--mobile-visible-height, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
  .toast { bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select, .auth-dialog form input:not([type="checkbox"]), .explore-room input:not([type="radio"]) { font-size: 16px; }
  .primary-btn, .secondary-btn, .danger-btn, .auth-tabs button, .password-toggle, .diary-header button, .diary-pager button, .diary-editor-footer button, .ielts-header button, .ielts-nav button, .lami-room-actions button, .lami-chat-form button, .explore-top button, .explore-primary, .explore-secondary { min-height: 44px; }
  .diary-pager { gap: 8px; }
  .diary-pager button { min-width: 0; flex: 1; }
  .diary-header, .ielts-header { gap: 8px; }
  .ielts-nav, .explore-progress { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .message-row.user .message-content { max-width: 100%; }
  .message-content pre { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 420px) {
  .conversation-title { display: none; }
  .top-actions { flex: 1; max-width: none; }
  .top-actions select { max-width: 135px; }
  .top-actions #modelSelect { max-width: 150px; }
  .home-lami > div:first-child { width: 60%; }
  .home-lami > .lami-sprite { width: 48%; }
  .lami-world-header { grid-template-columns: minmax(76px, 90px) minmax(0, 1fr); }
}
@media (hover: none) and (pointer: coarse) {
  button, a, [role="button"] { touch-action: manipulation; }
  button, [role="button"] { -webkit-user-select: none; user-select: none; }
  .chat-delete { opacity: 1; display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .home-card:hover, .explore-country:hover, .explore-university:hover, .explore-area:hover span, .prompt-card:hover, .new-chat:hover, .send-button:hover { transform: none; }
}
@media (max-width: 820px) {
  .app-shell { padding-top: env(safe-area-inset-top, 0px); }
}