/* Real iPhone layout: the browser already owns the system status bar. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}

@media (max-width:430px){
  [hidden]{display:none!important}
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--background,#f3f3f1)}
  .phone{width:100%;height:100dvh;min-height:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);border-radius:0}
  .statusbar{display:none}
  .assistant-island{top:calc(env(safe-area-inset-top) + 9px)}
  .viewport{height:calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;padding-top:52px}
  .page{min-width:0;padding-left:18px;padding-right:18px;overscroll-behavior-x:none}
  .pages{max-width:200%;overflow:visible}
  .dock{margin-left:18px;margin-right:18px}
  .home-indicator{margin-bottom:env(safe-area-inset-bottom)}

  /* Every app occupies the real viewport and never creates horizontal scrolling. */
  .app-modal{inset:0;width:100%;height:100dvh;max-width:100%;overflow:hidden}
  .app-modal .modal-panel,
  .app-modal:has(#diaryApp:not([hidden])) .modal-panel{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));overflow:hidden}
  .app-modal .modal-close{position:relative;z-index:60;flex:0 0 auto;touch-action:manipulation}
  .app-modal:has(#apiSettings:not([hidden])) .modal-panel{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .app-modal:has(#apiSettings:not([hidden])) .modal-close{position:sticky;top:0}
  .app-modal:has(#apiSettings:not([hidden])) #apiSettings{max-height:none;overflow:visible;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .app-modal:has(#characterStudio:not([hidden])) #characterStudio{height:calc(100dvh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .app-modal:has(#diaryApp:not([hidden])) #diaryApp{width:100%;max-width:100%;height:calc(100dvh - 52px);padding:0 10px;overflow:hidden}
  .app-modal:has(#diaryApp:not([hidden])) .modal-close{flex:0 0 auto}
  .diary-header,.diary-day-title,.diary-list,.diary-entry{max-width:100%;min-width:0}
  .diary-list{overflow-x:hidden}

  /* The editor is fixed to the phone, rather than sized from a nested panel. */
  .diary-composer{position:fixed;inset:0;left:0;right:0;top:0;bottom:0;transform:none;width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));border-radius:0;overflow-x:hidden;overflow-y:auto}
  .diary-composer>header,.diary-composer>textarea,.diary-composer>.diary-attachment-status,.diary-composer>.diary-attachment-options{width:100%;max-width:100%;min-width:0}
  .diary-composer header{grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr);gap:8px}
  .diary-composer header .diary-post-top{max-width:100%;padding:0 14px}
  #diaryCancel,#diaryPublish{position:relative;z-index:2;min-width:52px;touch-action:manipulation}

  /* Nested editors and social pages stay inside the real phone viewport. */
  .university-course-editor{left:0;right:0;bottom:0;transform:none;width:100%;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto}
  .schedule-theme-panel{inset:0;width:100%;max-width:100%;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto}
  .social-app{inset:0;left:0;right:0;width:100%;max-width:100%;height:100dvh;transform:translateY(105%);padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom)}
  .social-app.open{transform:none}
  .chat-room{width:100%;max-width:100%;height:100%;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);overflow:hidden}
  .group-builder,.group-settings,.privacy-settings,.theme-library-sheet{width:100%;max-width:100%;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto}
  .theme-share-sheet{left:0;right:0;bottom:0;width:100%;max-width:100%;transform:translateY(105%)}
  .theme-share-sheet.open{transform:none}
  .global-assistant{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
  .assistant-settings{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto}
  .side-nav{padding-top:calc(54px + env(safe-area-inset-top));padding-bottom:calc(25px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto}

  /* iOS zooms focused controls whose computed font is below 16px. */
  input,textarea,select,
  .search-pill input,.diary-comment-box input,.diary-composer textarea,
  .assistant-composer textarea,.assistant-settings input,.assistant-settings textarea,
  .schedule-editor input,.schedule-editor select,.university-course-editor input,.university-course-editor select,
  .friend-search input,.add-friend-card input,.message-composer textarea,
  .studio-form input,.studio-form textarea,.css-editor,.api-settings input,.api-settings select,.api-settings textarea{font-size:16px!important}
}