/* AUTOTUBE_MOBILE_LAYOUT_V1
   Phone-only layer. Desktop and tablet >=768px remain unchanged. */
@media screen and (max-width: 767px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
  body:has(#rewriteTab.active) { overflow-y:auto !important; overflow-x:hidden !important; }
  .app-shell, body:has(#rewriteTab.active) .app-shell {
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:100dvh !important; max-height:none !important;
    margin:0 !important; padding:12px 12px max(24px,env(safe-area-inset-bottom)) !important;
    gap:12px !important; overflow:visible !important; display:flex !important; flex-direction:column !important;
  }
  .app-shell > *, .tab-panel, .tab-panel > *, .text-section, .settings-card {
    max-width:100%; min-width:0;
  }
  .topbar { width:100% !important; min-width:0 !important; flex-wrap:wrap !important; gap:8px !important; }
  .top-statuses { display:none !important; }
  .tabs, body:has(#rewriteTab.active) .tabs {
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    overflow-x:auto !important; overflow-y:hidden !important; gap:5px !important;
    padding:5px !important; margin:0 !important; border-radius:14px !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs .tab-button {
    flex:0 0 auto !important; width:auto !important; min-width:0 !important;
    min-height:44px !important; padding:10px 13px !important;
    margin:0 !important; font-size:13px !important; line-height:1.2 !important;
    white-space:nowrap !important; scroll-snap-align:start;
  }
  .tab-panel.active, #rewriteTab.active {
    display:flex !important; flex-direction:column !important; gap:12px !important;
    width:100% !important; min-width:0 !important; height:auto !important;
    flex:initial !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important;
  }
  #rewriteTab > .scenario-mode-tabs.visual-mode-toggle {
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important; max-width:100% !important; align-self:stretch !important;
  }
  #rewriteTab > .scenario-mode-tabs .visual-mode-button {
    min-width:0 !important; width:100% !important; min-height:44px !important;
    padding:8px !important; font-size:14px !important;
  }
  #rewriteTab > #scenarioGeneratePane:not(.hidden),
  #rewriteTab > #scenarioRewritePane:not(.hidden) {
    display:flex !important; flex-direction:column !important;
    width:100% !important; min-width:0 !important; height:auto !important;
    flex:initial !important; max-height:none !important;
    overflow:visible !important; gap:12px !important;
  }
  #scenarioGeneratePane .scenario-generator-panel,
  #scenarioGeneratePane .scenario-generator-stage,
  #scenarioGeneratePane .scenario-generation-results,
  #scenarioGeneratePane .scenario-generation-results > .text-section,
  #scenarioRewritePane .rewrite-source-panel,
  #scenarioRewritePane .rewrite-results-column {
    width:100% !important; height:auto !important; max-height:none !important;
    min-height:0 !important; overflow:visible !important; flex:initial !important;
  }
  #scenarioGeneratePane .scenario-generator-panel {
    padding:16px !important; display:flex !important; flex-direction:column !important;
  }
  #scenarioGeneratePane .scenario-generator-stage {
    flex:initial !important; min-height:220px !important;
  }
  #scenarioGeneratePane .scenario-topic-view,
  #scenarioGeneratePane .scenario-profile-builder {
    max-height:none !important; height:auto !important; overflow:visible !important;
  }
  #scenarioGeneratePane .scenario-generator-controls {
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important; overflow:visible !important; margin-top:14px !important;
    align-items:end !important;
  }
  #scenarioGeneratePane .scenario-generator-controls > * {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    flex:initial !important; grid-column:auto !important;
  }
  #scenarioGeneratePane .scenario-generator-controls .scenario-new-profile-control,
  #scenarioGeneratePane .scenario-generator-controls .scenario-profile-control {
    grid-column:1 / -1 !important;
  }
  #scenarioGeneratePane .scenario-generator-controls .scenario-generator-field .select-input,
  #scenarioGeneratePane .scenario-generator-controls .scenario-generate-topics-button {
    width:100% !important; min-width:0 !important; height:44px !important;
    min-height:44px !important; padding:9px 12px !important; font-size:14px !important;
  }
  #scenarioGeneratePane .scenario-generator-controls .scenario-generate-topics-button {
    grid-column:1 / -1 !important;
  }
  #scenarioGeneratePane .scenario-generator-controls .scenario-generator-field span,
  #scenarioGeneratePane .scenario-generator-controls .scenario-profile-control-meta > span {
    font-size:11px !important;
  }
  #scenarioGeneratePane .scenario-generation-results {
    display:flex !important; flex-direction:column !important; gap:12px !important;
  }
  #scenarioGeneratePane .scenario-generation-results > .text-section {
    min-height:280px !important; padding:16px !important;
  }
  #scenarioGeneratePane .scenario-generation-results textarea {
    min-height:220px !important; height:280px !important; resize:vertical !important;
  }
  #scenarioGeneratePane .scenario-topics-list {
    max-height:none !important; overflow:visible !important;
  }
  .scenario-script-controls, .scenario-profile-actions, .section-actions, .rewrite-source-controls {
    flex-wrap:wrap !important; max-width:100% !important;
  }
  input:not([type=checkbox]):not([type=radio]), textarea, select {
    max-width:100% !important; min-width:0 !important; font-size:16px !important;
  }
  button, a[role=button], select { touch-action:manipulation; }
  .text-section, .settings-card, .panel { min-width:0 !important; max-width:100% !important; }
  .factory-templates-grid, .factory-workflow-steps,
  .photo-cloud-grid, .photo-controls-grid, .photo-regenerate-grid,
  .montage-input-grid, .packaging-workspace-grid, .packaging-result-details,
  .packaging-source-controls, .packaging-thumb-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .packaging-workspace-shell, .packaging-source-card, .packaging-results-pane {
    width:100% !important; min-width:0 !important; height:auto !important;
    max-height:none !important; min-height:0 !important; overflow:visible !important;
  }
  .local-style-modal-overlay { padding:10px !important; }
  .local-style-modal { width:100% !important; max-width:100% !important; max-height:92dvh !important; }
  .local-style-modal-header { padding:14px !important; }
  .local-style-modal-title { font-size:20px !important; }
  .local-style-picker-trigger { min-height:64px !important; }
  .local-style-picker-thumb { width:72px !important; }
  dialog { max-width:calc(100vw - 20px) !important; }
  img, video, canvas, iframe, pre { max-width:100%; }
}
@media screen and (max-width: 380px) {
  .app-shell, body:has(#rewriteTab.active) .app-shell { padding-left:8px !important; padding-right:8px !important; }
  #scenarioGeneratePane .scenario-generator-panel { padding:12px !important; }
  .tabs .tab-button { font-size:12px !important; padding:9px 11px !important; }
}

/* AUTOTUBE_MOBILE_NAV_AFFORDANCE_V2 */
@media screen and (max-width: 767px) {
  .app-shell > .at-mobile-nav-hint {
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    gap:7px !important; margin:-7px 8px 1px 0 !important;
    color:#737373 !important; font-size:11px !important; font-weight:650 !important;
    line-height:1.2 !important; letter-spacing:.01em !important;
  }
  .at-mobile-nav-arrow { color:#ed1531; font-size:17px; font-weight:900; line-height:1; }
  .tabs { position:relative !important; }
  .tabs::after {
    content:"›"; position:sticky; right:0; align-self:stretch; flex:0 0 20px;
    display:flex; align-items:center; justify-content:center;
    margin-left:auto; color:#f01432; font-size:26px; font-weight:850;
    background:linear-gradient(90deg,rgba(255,255,255,.5),#fff 70%);
    border-radius:0 10px 10px 0; pointer-events:none;
  }
}