/* Mobile-only overrides. Keep desktop geometry and intentional table/shot scrolling. */
@media (max-width: 820px), (max-width: 1100px) and (max-height: 500px) and (pointer: coarse) {
  html, body { min-width: 0; }
  body, .auth-shell, .app-shell { min-height: 100dvh; }
  .app-frame, .content-inner, .auth-card, .field, .panel,
  .billing-view, .video-studio, .brand-form, .studio-form { min-width: 0; }
  .app-content { padding: 24px clamp(10px, 4vw, 24px) max(32px, env(safe-area-inset-bottom)); }
  .app-content :where(h1, h2, h3, p, button, label, dd, strong, small),
  .auth-card, .bv-dialog { overflow-wrap: anywhere; }
  .app-content :where(input, select, textarea), .auth-card :where(input, select, textarea) {
    min-width: 0; max-width: 100%; font-size: 16px;
  }
  .field input, .field textarea, .field select, .vs-field input, .vs-field textarea, .vs-field select,
  .composer-bar textarea, .vs-chat-composer textarea { font-size: 16px; }
  .app-content :where(img, video) { max-width: 100%; }
  .app-content :where(fieldset) { min-width: 0; }

  /* Two rows keep the current brand and product available while leaving room for navigation. */
  .topbar, .is-home .topbar {
    flex-wrap: wrap; gap: 8px; min-height: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  }
  .topbar .brand-picker { order: 2; flex: 1 1 calc(50% - 8px); min-width: 0; max-width: calc(50% - 4px); }
  .topbar .select-chip, .is-home .topbar .select-chip {
    display: flex; width: 100%; max-width: none; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 12px;
  }
  .select-chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .select-chip .material-symbols-rounded { flex: none; }
  .material-symbols-rounded { width: 1em; overflow: hidden; flex-shrink: 0; }
  .topbar .crumb { flex: 1; max-width: none; }
  .topbar-spacer { display: none; }
  .topbar .platform-language-control { margin-left: auto; }
  .topbar .platform-language-field select { min-height: 44px; font-size: 16px; max-width: 108px; }
  .mobile-nav-toggle, .crumb-back, .avatar-button, .sidebar-hide { width: 44px; height: 44px; flex: none; }
  .avatar-button { display: grid; place-items: center; }
  .brand-picker-menu {
    position: fixed; top: 116px; left: 12px; right: 12px; width: auto;
    max-height: calc(100dvh - 132px); overflow-y: auto; overscroll-behavior: contain;
  }
  .sidebar, .nav-collapsed .sidebar {
    display: flex; position: fixed; top: 0; left: 0; z-index: 70;
    width: min(304px, calc(100vw - 24px)); height: calc(100dvh - 24px);
    transform: translateX(calc(-100% - 16px)); visibility: hidden;
  }
  .app-shell.nav-open .sidebar { transform: none; visibility: visible; }
  .app-shell.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 65; border: 0; background: #0008; }
  .topbar .plan-chip { display: none; }
  .sidebar-nav { min-height: 0; overscroll-behavior: contain; }
  .sidebar-brand, .sidebar-user { flex-shrink: 0; }
  .sidebar-user { padding: 12px; min-height: 66px; }
  .sidebar-brand { padding: 10px; gap: 8px; }
  .sidebar-brand .studio-label { padding-left: 8px; font-size: 10px; }
  .sidebar-session-more { width: 44px; min-height: 44px; }
  .sidebar-sessions { margin-left: 12px; padding-left: 12px; }
  .user-menu, .user-menu.from-sidebar, .nav-collapsed .user-menu.from-sidebar {
    max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto;
  }
  .user-menu.from-sidebar, .nav-collapsed .user-menu.from-sidebar { left: 16px; bottom: 88px; }
  .session-context-menu { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }

  .home-dashboard { --home-pad: clamp(12px, 4vw, 24px); }
  .home-hero { min-height: 0; }
  .home-hero-copy { padding-top: 92px; padding-bottom: 32px; }
  .home-hero h1 { font-size: clamp(26px, 8vw, 42px); }
  .home-hero-actions { gap: 10px; }
  .home-hero-actions button, .home-hero-actions .primary-button { flex: 1 1 150px; min-width: 0; }
  .home-action { flex-wrap: wrap; }
  .home-action small { white-space: normal; }
  .home-section-head, .panel-head, .job-head, .library-section-head, .view-head,
  .view-actions, .vs-job-head, .vs-page-nav, .bv-section-head { flex-wrap: wrap; gap: 12px; }
  .home-side, .brand-editor, .studio-layout, .result-layout, .session-history-layout { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: clamp(12px, 4vw, 24px); }
  .chat-row { gap: 8px; }
  .chat-bubble { padding: 16px 12px; }
  .chat-avatar { width: 24px; height: 24px; }
  .chat-chip, .option-chip, .chat-hint { min-width: 0; max-width: 100%; min-height: 44px; }
  .mode-toggle, .bv-tabs { max-width: 100%; flex-wrap: wrap; }
  .bv-tabs [role="tab"] { flex: 1; padding: 12px; font-size: 16px; }
  .shot-grid, .result-grid, .ratio-grid, .chat-bubble .ratio-grid, .gen-skeletons {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }
  .studio-buttons .primary-button, .vs-actions > button { min-width: 0; }
  .vs-shots .vs-shot { flex-basis: min(420px, 100%); }
  .vs-question-actions button { min-width: 0; }
  .vs-chat-composer { position: static; }
  .vs-chat-composer, .chat-composer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .bv-table-scroll, .vs-cost-table-wrap { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
  .bv-overview, .bv-plans, .bv-two-col { grid-template-columns: minmax(0, 1fr); }
  .bv-quotas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-balance-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-dialog, .access-dialog, .product-brand-dialog, .library-video-dialog, .session-delete-dialog {
    max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); overflow: auto; padding: 24px 14px;
  }
  .auth-story { min-height: 0; padding: 24px clamp(12px, 5vw, 28px); }
  .auth-pitch { margin: 24px 0 0; }
  .auth-pitch h1 { font-size: clamp(24px, 7vw, 34px); }
  .auth-panel { padding: 28px clamp(12px, 5vw, 24px) max(32px, env(safe-area-inset-bottom)); }
  .auth-row { flex-wrap: wrap; }
  .brand-lockup { flex-wrap: wrap; }
  .brand-lockup img { max-width: 100%; height: auto; max-height: 40px; }
  .platform-version { position: static; display: block; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); text-align: right; }
}

@media (max-width: 600px) {
  .vs-question-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs-shot-head { flex-wrap: wrap; }
  .vs-shot-tools { flex-basis: 100%; margin-left: 0; }
  .vs-shot-tools button { flex: 1; min-height: 44px; }
}

@media (max-width: 360px) {
  .topbar, .is-home .topbar { gap: 4px; padding-inline: 8px; }
  .topbar .platform-language-field select { max-width: 94px; }
  .home-action { gap: 8px; padding: 14px; }
  .home-action small { flex-basis: 100%; order: 3; }
  .home-action > .material-symbols-rounded { margin-left: auto; }
  .asset-grid, .swatch-grid, .thumb-grid, .variant-strip, .vs-job-totals,
  .vs-shot-fields, .bv-quotas, .bv-balance-split { grid-template-columns: minmax(0, 1fr); }
  .vs-question-actions { display: flex; flex-direction: column; }
  .library-toolbar { flex-direction: column; align-items: stretch; }
  .chat-row { flex-wrap: wrap; }
  .chat-bubble { flex-basis: 100%; }
  .sidebar-brand .studio-label { display: none; }
}

/* Short landscape screens / open software keyboard: leave the viewport to the form. */
@media (max-width: 820px) and (max-height: 500px), (max-width: 1100px) and (max-height: 500px) and (pointer: coarse) {
  .topbar, .chat-composer, .vs-chat-composer { position: static; }
  .brand-picker-menu { top: 12px; max-height: calc(100dvh - 24px); }
  .sidebar-brand { min-height: 48px; height: 48px; }
  .sidebar-user { min-height: 54px; padding-block: 8px; }
}