/* Shared viewport rules. Loaded last; use CSS pixels so browser zoom and OS
   display scaling get the same layout as a smaller physical screen. */
html{min-width:0;min-height:100%;scroll-padding-block:16px}
body{min-width:0;min-height:100vh;min-height:100dvh}
.app-shell,.main-shell,main,.page,.primary-column,.panel{min-width:0}
.app-shell{min-height:100vh;min-height:100dvh}
.sidebar{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidebar>*{flex-shrink:0}
.main-shell{max-width:calc(100% - 224px)}
main{width:100%;padding-bottom:28px}
.page-heading>div:first-child,.breadcrumb,.result-heading h3,.preferences-card-heading>div{min-width:0}
.page-heading h1,.page-heading p,.result-heading h3,.panel-title h2,.breadcrumb b{overflow-wrap:anywhere}
.topbar{min-height:73px;height:auto;gap:16px;padding-block:12px}
.topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:10px 16px;min-width:0}
.breadcrumb{flex-wrap:wrap;gap:6px 12px;line-height:1.6}
.form-row,.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row>*,.settings-grid>*,.input-action>*,.preferences-access-grid>*{min-width:0}
.form-footer,.result-heading,.preferences-card-heading,.preferences-form-footer,.preferences-form-footer>div,.download-settings-actions,.media-gallery-toolbar,.media-gallery-download-actions{flex-wrap:wrap}
.button,.nav-item,.video-mode{max-width:100%;overflow-wrap:anywhere}
.doc-links{flex-wrap:wrap;gap:10px 18px}
.field-label span{display:inline-block;max-width:100%}
.input-hint,.helper,.preferences-form-footer p,.preference-row p,.media-result-title,.download-default-path{overflow-wrap:anywhere}
.history-search{max-width:100%;min-width:min(160px,100%)}
.result-text,.comment-list{max-height:min(510px,65vh);max-height:min(510px,65dvh);overscroll-behavior:contain}
.generation-result .generation-numbered-list{max-height:none;overflow:visible}
.media-result-video,.result-video{max-height:65vh;max-height:65dvh}

/* Native dialogs stay entirely inside the visible viewport. Their content can
   scroll even when zoom turns a laptop screen into a short CSS viewport. */
dialog[open]:not(.comparison-dialog-expanded){
  max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:clamp(16px,2.5vw,28px);overflow-wrap:anywhere;
}
dialog .result-panel,dialog .module-history-preview,dialog .inline-history-preview{min-width:0;max-width:100%}
dialog .module-history-heading,dialog .developer-heading,dialog .brief-dialog-heading{min-width:0;gap:12px}
dialog .module-history-heading>div,dialog .developer-heading>div,dialog .brief-dialog-heading>div{min-width:0}
dialog .history-dialog-close,dialog .brief-dialog-close,dialog .dialog-close{flex-shrink:0;min-width:32px;min-height:32px}
dialog .download-choice-actions,dialog .download-dialog-actions{flex-wrap:wrap}
dialog .download-choice-actions .button{width:auto;margin-top:0;min-width:0}
.brief-dialog #brief-text{min-height:120px;max-height:40vh;max-height:40dvh}
.developer-section pre{max-width:100%;overflow-wrap:anywhere}

/* Keep both comparison panes and the controls usable at every fullscreen size.
   When the viewport becomes exceptionally short, the comparison itself scrolls. */
.video-comparison.comparison-expanded{overflow:auto;overscroll-behavior:contain}
.video-comparison.comparison-expanded .comparison-grid{min-height:140px;flex:1 0 140px;grid-template-columns:repeat(2,minmax(0,1fr))}
.video-comparison.comparison-expanded .comparison-controls{position:sticky;bottom:0;z-index:2;background:#101b16;padding:8px 0;flex-wrap:wrap;max-width:100%}
.video-comparison.comparison-expanded .comparison-controls [data-compare-seek]{min-width:80px}
.video-comparison.comparison-expanded .comparison-controls [data-compare-time]{white-space:nowrap}
.video-comparison.comparison-expanded .comparison-controls .volume-control{min-width:0;max-width:100%;flex-wrap:wrap}
.video-comparison.comparison-expanded .comparison-controls .volume-slider{min-width:50px;flex-basis:70px;width:70px}

@media(max-height:800px) and (min-width:901px){
  .sidebar{padding-top:20px;padding-bottom:16px}
  .sidebar .brand-wordmark{max-width:144px;margin:auto}
  .sidebar .space-label{margin-top:16px;margin-bottom:20px}
  .sidebar .nav-item{padding-block:10px}
  .sidebar .second-label{margin-top:20px}
  .sidebar-bottom{padding-top:18px}
  .sidebar-bottom>p{font-size:14px;margin-block:8px}
  .machine-caption{margin-bottom:16px}
  .topbar{min-height:62px}
  main{padding-top:24px}
  .page-heading{margin-bottom:22px}
}
@media(max-width:1180px){
  .sidebar{width:184px;flex-basis:184px}
  .main-shell{margin-left:184px;max-width:calc(100% - 184px)}
  main{padding-inline:20px}
  .topbar{padding-inline:20px}
  .settings-grid,.api-connections-grid{grid-template-columns:minmax(0,1fr)}
  .page-heading{flex-wrap:wrap;align-items:flex-start}
  .page-heading .module-heading-actions{margin-left:auto}
  .preferences-access-grid{grid-template-columns:minmax(0,1fr)}
  .preferences-card{padding:24px}
}
@media(max-width:980px){
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
  .module-history-list.three-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preferences-proposals{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .app-shell{display:block}
  .sidebar{
    position:static;width:100%;height:auto;min-height:0;padding:12px 16px;
    display:grid;grid-template-columns:minmax(100px,1fr) auto;gap:10px 16px;
    align-items:center;overflow:visible;
  }
  .sidebar .brand{grid-column:1;grid-row:1;width:108px;padding:0;margin:0;line-height:0}
  .sidebar .brand-wordmark{width:108px;max-width:100%;height:auto}
  .sidebar .space-label,.sidebar .nav-label,.sidebar .sidebar-bottom{display:none}
  .sidebar nav:first-of-type{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;min-width:0}
  .sidebar nav:last-of-type{grid-column:2;grid-row:1;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%;border:0;padding:0}
  .sidebar .nav-item{min-height:38px;width:100%;margin:0;padding:8px 10px;font-size:12px;gap:7px;line-height:1.45;white-space:normal;justify-content:flex-start;border-radius:7px}
  .sidebar nav:last-of-type .nav-item{width:auto;min-width:0;justify-content:center}
  .sidebar .nav-icon{display:inline-block;flex-shrink:0;font-size:16px;width:18px}
  .sidebar .nav-arrow,.sidebar .count{display:none}
  .sidebar .media-nav-item>span:last-child{font-size:12px;line-height:1.45}
  .main-shell{margin-left:0;max-width:100%;width:100%}
  .topbar{min-height:56px;padding:10px 18px;align-items:flex-start}
  .topbar-right{gap:7px 10px}
  main{padding:24px 18px 28px}
  .toast{left:50%;max-width:calc(100vw - 24px)}
  .page-heading h1{font-size:27px}
  .preferences-form-footer>div{max-width:100%;flex-shrink:1}
  .download-settings-actions{gap:10px 16px}
}
@media(max-width:700px){
  .topbar{flex-wrap:wrap;gap:8px 14px}
  .topbar-right{margin-left:auto;max-width:100%}
  .page-heading .module-heading-actions{align-items:flex-start}
  .page-heading h1,#page-media .page-heading h1{font-size:24px}
  .form-row,.collector-quantity-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .form-panel,#page-media .media-input-panel,.preferences-card{padding:20px}
  .platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stepper{flex-wrap:wrap;gap:9px 14px;justify-content:flex-start;padding:12px}
  .stepper span{white-space:normal}
  .stepper span+span:before{display:none}
  .stepper i{flex-shrink:0}
  #page-studio .speech-panel-actions{flex-wrap:wrap;max-width:100%;margin-left:0}
  .preferences-tabs{gap:12px 22px;flex-wrap:wrap}
  .preferences-tabs [role=tab]{padding-bottom:10px}
  .preference-row{align-items:flex-start;flex-direction:column;gap:12px}
  .preference-row select{width:100%;min-width:0}
  .preferences-path{text-align:left}
  .preferences-form-footer{align-items:flex-start;gap:14px}
  .preferences-form-footer>div{gap:10px;align-self:stretch}
  .media-gallery-download-actions .media-gallery-download-button{width:auto;min-width:0;flex:1 1 140px}
  .video-editor-heading{flex-wrap:wrap}
  .video-upload-area .video-stage video{max-height:min(320px,45vh);max-height:min(320px,45dvh)}
  .video-comparison.comparison-expanded .comparison-controls [data-compare-seek]{order:5;flex-basis:100%;width:100%}
  .video-comparison.comparison-expanded .comparison-controls .volume-slider{order:0;flex-basis:70px}
}
@media(max-width:560px){
  .sidebar{grid-template-columns:minmax(0,1fr);padding:10px 12px;gap:8px}
  .sidebar .brand{grid-column:1;grid-row:1;width:96px}
  .sidebar .brand-wordmark{width:96px}
  .sidebar nav:first-of-type{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar nav:last-of-type{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:5px;justify-content:stretch}
  .sidebar nav:last-of-type .nav-item{width:100%;justify-content:flex-start}
  main{padding:20px 12px 24px}
  .topbar{padding-inline:12px}
  .page-heading{gap:12px}
  .form-panel,#page-media .media-input-panel,.preferences-card,.result-panel{padding:16px}
  #page-home .wb-home-heading{flex-wrap:wrap}
  #page-home .wb-home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-history-list.three-columns{grid-template-columns:minmax(0,1fr)}
  .module-history-tools .history-search{flex-basis:100%;min-width:0}
  .module-history-card,.three-columns .module-history-card{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px}
  .module-history-card .history-media,.three-columns .history-media{width:64px;height:100px}
  .history-record-title{flex-wrap:wrap}
  .module-history-list>.inline-history-preview{padding:12px}
  .media-result-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .media-result-gallery img{height:160px}
  .media-gallery-card-actions{flex-wrap:wrap;gap:8px}
  .video-comparison.comparison-expanded{padding:10px;gap:8px}
  .video-comparison.comparison-expanded .comparison-controls{gap:7px}
  .video-comparison.comparison-expanded .comparison-fullscreen-button{margin-left:0}
}
@media(max-height:500px){
  dialog[open]:not(.comparison-dialog-expanded){max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);padding:16px}
  .video-comparison.comparison-expanded{padding:8px;gap:6px}
  .video-comparison.comparison-expanded .comparison-grid{min-height:100px;flex-basis:100px}
  .video-comparison.comparison-expanded .comparison-controls{padding:5px 0;gap:7px}
  .video-comparison.comparison-expanded .comparison-controls .button{min-height:34px;padding:6px 10px;font-size:12px}
  .video-comparison.comparison-expanded .comparison-grid figcaption{font-size:12px;margin-bottom:4px}
  .video-comparison.comparison-expanded .comparison-fullscreen-hint{font-size:11px;margin:0}
}