/* Touch layout, including a phone rotated into landscape. Desktop finishes stay intact. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body[data-edition] .app-shell { display: block; min-height: 0; height: var(--mobile-viewport-height, 100dvh); }
  body[data-edition] .main-area { min-height: 0; height: var(--mobile-viewport-height, 100dvh); }
  body[data-edition] .mobile-only { display: grid; place-items: center; }
  body[data-edition] #toggle-sidebar { display: none; }
  body[data-edition] .sidebar {
    position: fixed; inset: 0 auto auto 0; z-index: 15;
    width: min(320px, calc(100vw - 48px)); height: var(--mobile-viewport-height, 100dvh);
    transform: translateX(-105%); overflow-y: auto; overscroll-behavior: contain;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    scrollbar-width: thin;
  }
  body[data-edition] .sidebar.open { transform: translateX(0); }
  body[data-edition] .sidebar > * { flex-shrink: 0; }
  body[data-edition] .sidebar .conversation-list { flex: 1 0 60px; }
  body[data-edition] .sidebar-top { padding-inline: 4px 0; }
  body[data-edition] .sidebar .identity-sub { font-size: 8px; }
  body[data-edition] .sidebar .studio-nav-item { min-height: 48px; }
  body[data-edition] .sidebar .studio-nav-item kbd { display: none; }
  body[data-edition] .sidebar-guide-link { min-height: 44px; align-items: center; }
  body[data-edition] .mobile-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 14; display: block; background: #06090bc2; }
  body[data-edition] .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; height: auto; min-height: 0;
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  body[data-edition] .topbar-left { width: 100%; min-width: 0; gap: 10px; }
  body[data-edition] .topbar-context { display: flex; flex: 1; min-width: 0; }
  body[data-edition] .topbar-title { display: block; max-width: 100%; margin: 0; font-size: 14px; }
  body[data-edition] .topbar-overline { display: none; }
  body[data-edition] .topbar-right { width: 100%; max-width: 100%; gap: 6px; justify-content: flex-start; }
  body[data-edition] .topbar-right .live-indicator { display: none; }
  body[data-edition] .topbar-right :is(.edition-trigger, .immersive-trigger, .ambience-trigger),
  body[data-edition] :is(#show-sidebar, #hide-sidebar) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 10px; }
  body[data-edition] .topbar-right :is(.edition-trigger, .immersive-trigger, .ambience-trigger) > span:not(.ambience-orb) { display: none; }
  body[data-edition] .topbar-right #top-access { min-height: 44px; margin-left: auto; padding-inline: 12px; font-size: 12px; }
  body[data-edition] .topbar-right #export-chat { min-width: 44px; width: 44px; min-height: 44px; margin: 0; padding: 10px; font-size: 0; }
  body[data-edition] .topbar-right #export-chat::before { content: '↓'; font-size: 20px; }
  body[data-edition] .topbar-right #export-chat:disabled { display: none; }
  body[data-edition] .chat-surface { min-width: 0; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  body[data-edition] .chat-surface:has(.empty-state:not([hidden])) { padding-top: 76px; }
  body[data-edition] .chat-surface:has(.empty-state:not([hidden])) .empty-state { padding: 4px 0 24px; }
  /* Keep the full portal in a phone-width composition, below the scene controls. */
  body[data-edition] .scene-stage { --mobile-scene-top: 60px; --mobile-scene-height: 105vw; }
  body[data-edition] .scene-art {
    inset: 0 0 auto; height: calc(var(--mobile-scene-top) + var(--mobile-scene-height));
    transform: none; background-size: auto var(--mobile-scene-height);
    background-position: center var(--mobile-scene-top);
    -webkit-mask-image: linear-gradient(180deg, transparent var(--mobile-scene-top), #000 calc(var(--mobile-scene-top) + 28px), #000 69%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent var(--mobile-scene-top), #000 calc(var(--mobile-scene-top) + 28px), #000 69%, transparent 100%);
  }
  body[data-edition] .scene-sanctum { --mobile-scene-height: 110vw; background-position: 88% var(--mobile-scene-top); }
  body[data-edition] .scene-stage::after { background: linear-gradient(180deg, #080e1410, transparent 35%, #080e1440); }
  body[data-edition] .scene-horizon { display: none; }
  body[data-edition] .hero-sigil { display: none; }
  body[data-edition] .empty-state h1 { font-size: clamp(36px, 11.5vw, 52px); line-height: 1.22; }
  body[data-edition] .hero-explore { min-height: 44px; }
  body[data-edition] .experience-toolbar { top: 14px; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  body[data-edition] .experience-edition { font-size: 8px; }
  body[data-edition] .experience-edition > span { display: none; }
  body[data-edition] .experience-scenes button { min-height: 40px; padding-inline: 11px; font-size: 11px; }
  body[data-edition] .composer-dock { width: 100%; padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
  body[data-edition] .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-edition] .composer { padding: 14px 12px 12px; border-radius: 16px; }
  body[data-edition] .composer textarea { min-height: 64px; max-height: min(160px, 25dvh); line-height: 1.6; }
  body[data-edition] .composer-head span:last-child { display: none; }
  body[data-edition] .chat-surface:has(.empty-state[hidden]) .composer-head { display: none; }
  body[data-edition] .composer-controls { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 8px; }
  body[data-edition] .composer-left { display: grid; grid-template-columns: 44px minmax(0, 1fr); min-width: 0; gap: 6px; }
  body[data-edition] .attach-button { width: 44px; height: 44px; padding: 10px; font-size: 0; justify-content: center; }
  body[data-edition] .attach-button .ui-icon { width: 20px; height: 20px; }
  body[data-edition] .model-picker { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; gap: 6px; padding-inline: 10px; }
  body[data-edition] .mode-picker { grid-column: 1 / -1; min-height: 44px; width: fit-content; max-width: 100%; padding: 6px 11px; }
  body[data-edition] .mode-picker select { min-height: 30px; min-width: 0; max-width: 100%; }
  body[data-edition] :is(.char-count, .model-cost) { display: none; }
  body[data-edition] .send-button { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; }
  body[data-edition] .quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
  body[data-edition] .quick-actions button { min-width: 0; min-height: 44px; padding: 8px 3px; font-size: 11px; gap: 4px; }
  body[data-edition] .inspiration-card { flex-wrap: wrap; }
  body[data-edition] .inspiration-actions button { min-height: 44px; }
  body[data-edition] #inspiration-shuffle { width: 44px; }
  body[data-edition] .messages { width: 100%; padding-inline: 0; }
  body[data-edition] .message.assistant { gap: 9px; }
  body[data-edition] .message-bubble { max-width: 92%; }
  body[data-edition] :is(.message-copy, .rt-code-copy, .conversation-action) { min-width: 44px; min-height: 44px; }
  /* 16px prevents iOS focus zoom without disabling user zoom. */
  body[data-edition] :is(input:not([type=checkbox]):not([type=range]), textarea, select) { font-size: 16px !important; }
  body[data-edition] :is(.dialog-backdrop, .studio-tools-backdrop, .editions-backdrop, .chat-action-backdrop) {
    inset: var(--mobile-viewport-top, 0px) 0 auto;
    height: var(--mobile-viewport-height, 100dvh); min-height: 0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow: hidden; align-items: center;
  }
  body[data-edition] :is(#access-dialog .access-dialog, #model-dialog .model-dialog, .studio-tools-dialog, .editions-dialog, .chat-action-dialog) {
    max-width: 100%; width: 100%; min-height: 0;
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px; border-radius: 18px;
  }
  body[data-edition] :is(.dialog-close, .studio-tools-close, .editions-close, .chat-action-close) { min-width: 44px; min-height: 44px; width: 44px; height: 44px; flex-shrink: 0; }
  body[data-edition] :is(.model-dialog-header, .model-dialog > input, .provider-filters, .model-dialog-note) { flex-shrink: 0; }
  body[data-edition] .model-list { min-height: 80px; }
  body[data-edition] .provider-filters button { min-height: 44px; }
  body[data-edition] #access-dialog :is(.account-link, .account-secondary, .account-pass-select, .account-guide-link, .usage-refresh, .usage-more) { min-height: 44px; }
  body[data-edition] #access-dialog .account-password-toggle { top: 1px; height: 44px; }
  body[data-edition] .toast { bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); }
  /* Safari may shrink only its visual viewport when the keyboard opens. */
  html[data-mobile-keyboard="true"] body[data-edition] .topbar { display: flex; gap: 8px; padding-block: 4px; }
  html[data-mobile-keyboard="true"] body[data-edition] .topbar-right { width: auto; }
  html[data-mobile-keyboard="true"] body[data-edition] .topbar-right :is(.edition-trigger, .immersive-trigger, .ambience-trigger, #export-chat),
  html[data-mobile-keyboard="true"] body[data-edition] .composer-head,
  html[data-mobile-keyboard="true"] body[data-edition] .composer-note { display: none; }
  html[data-mobile-keyboard="true"] body[data-edition] .composer textarea { min-height: 44px; max-height: min(100px, calc(var(--mobile-viewport-height) * .22)); }
  html[data-mobile-keyboard="true"] body[data-edition] .composer { padding-block: 8px; }
  html[data-mobile-keyboard="true"] body[data-edition] .chat-surface:has(.empty-state:not([hidden])) { justify-content: flex-start; }
}
@media (max-width: 350px) {
  body[data-edition] .topbar-right { gap: 4px; }
  body[data-edition] .topbar-right #top-access { padding-inline: 8px; font-size: 11px; }
  body[data-edition] #top-account-label { max-width: 68px; }
  body[data-edition] .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-edition] .experience-edition { display: none; }
  body[data-edition] .experience-toolbar { justify-content: flex-end; }
}
@media (min-width: 600px) and (max-width: 950px) and (max-height: 500px) {
  body[data-edition] .composer-left { display: flex; flex-wrap: nowrap; }
  body[data-edition] .model-picker { flex: 1; width: auto; max-width: 260px; }
  body[data-edition] .mode-picker { flex: none; }
}
@media (max-width: 599px) and (max-height: 500px) {
  body[data-edition] .topbar-right :is(.edition-trigger, .immersive-trigger, .ambience-trigger, #export-chat) { display: none; }
}
@media (max-width: 950px) and (max-height: 500px) {
  /* Wide, short phones need height-based artwork rather than the portrait crop. */
  body[data-edition] .scene-stage { --mobile-scene-top: 52px; --mobile-scene-height: clamp(260px, 85svh, 380px); }
  body[data-edition] .scene-sanctum { --mobile-scene-height: clamp(260px, 85svh, 380px); background-position: 84% var(--mobile-scene-top); }
  body[data-edition] .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: max(4px, env(safe-area-inset-top)) 4px; }
  body[data-edition] .topbar-right { width: auto; }
  body[data-edition] .chat-surface:has(.empty-state:not([hidden])) .empty-state { padding-bottom: 16px; }
  body[data-edition] .empty-state h1 { font-size: 34px; }
  body[data-edition] .hero-eyebrow { margin-bottom: 10px; }
  body[data-edition] .composer textarea { min-height: 44px; }
  body[data-edition] .chat-surface:has(.empty-state[hidden]) .composer-head,
  body[data-edition] .chat-surface:has(.empty-state[hidden]) .composer-note { display: none; }
}