/* Lumetra universal responsive polish — phones, tablets, touch laptops and desktop.
   Loaded last so it can safely normalize feature-specific layouts without changing runtime behavior. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{max-width:100%}
#creatorApp,.page,.page>header,main,#createView,.studio,.mainPanel,.kaiComposer,.kaiPromptShell,.dynamicView,.viewPanel{min-width:0}

/* Touch devices: keep controls comfortably tappable without inflating desktop density. */
@media(hover:none),(pointer:coarse){
  .kaiAttachButton,.kaiMoreButton,.kaiSurprise,.kaiGenerateButton,.viewAction,.workflowStarterCard>button,
  .kaiRecentHead button,.kaiRecentFilters button,.kaiRecentInfo button,.kaiRecentInfo a,
  .kaiProductModalTools>button,.kaiProductLinkTool button,.kaiProductActions button,.kaiProductModalFoot>button,
  .dcFinishBar button{min-height:44px}
  .sidebar nav button,.sidebarUtilityNav .plain,.sidebarExternalLink{min-height:46px}
}

/* Tablet / compact desktop */
@media(max-width:1080px){
  .page>header{height:68px;padding-inline:clamp(16px,3vw,28px)}
  main{width:100%;max-width:none;padding:28px clamp(16px,3vw,28px) 44px}
  .mainPanel{padding:clamp(13px,2vw,17px)}
  .hero{gap:18px;margin-bottom:20px}.hero h1{font-size:clamp(34px,5vw,42px)}
  .kaiComposer{padding:clamp(16px,2.4vw,22px)}
  .kaiComposerHead{gap:14px}.kaiComposerHead p{max-width:64ch;font-size:11px}
  .kaiComposerControls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .kaiControl{min-width:0;flex:none;width:100%}.kaiAttachButton,.kaiMoreButton{width:100%;justify-content:center;min-width:0}
  .kaiMorePanel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kaiRecentCard{flex-basis:clamp(250px,42vw,330px)}
  .oneClickCharacter{grid-template-columns:1fr;align-items:start}.oneClickCharacterControls{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto}
  .kaiProductModal{width:min(980px,100%)}
  .kaiProductModalTools{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .kaiProductModalTools>button{grid-column:1/-1;justify-self:start}
  .sceneEditorModal.directorStudioModal{width:min(980px,100%)}
  .viewHeader{gap:14px}.viewHeader h1{font-size:clamp(30px,4.5vw,38px)}
}

/* Portrait tablet and large phones */
@media(max-width:820px){
  .page>header{height:64px}
  .headActions{gap:6px}.headActions button{height:38px;padding-inline:10px}
  main{padding-top:22px}
  .hero{display:block}.hero h1{font-size:clamp(31px,6.2vw,38px)}.hero p{font-size:13px}.hero .chips{margin-top:14px}
  .mainPanel{border-radius:13px}
  .steps{margin-bottom:14px;padding-bottom:12px}.steps i{width:27px;height:27px}.steps b{font-size:9px}
  .kaiComposerHead{display:grid;grid-template-columns:1fr}.kaiComposerHeadActions{justify-content:flex-start}
  .kaiPromptShell textarea{min-height:165px}
  .kaiComposerControls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kaiControl{min-height:58px;padding:9px 10px!important}.kaiControl small{font-size:8px}.kaiControl select{font-size:10px!important}
  .kaiAttachButton,.kaiMoreButton{min-height:46px}
  .kaiComposerFooter{align-items:stretch;flex-direction:column}.kaiGenerateButton{width:100%;min-height:54px}
  .kaiIdeaChips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.kaiIdeaChips button{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .kaiRecentHead{align-items:flex-start}.kaiRecentHead>div:last-child{flex:0 0 auto}
  .kaiRecentFilters{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:3px}.kaiRecentFilters button{flex:0 0 auto}
  .kaiRecentCard{flex-basis:clamp(250px,72vw,320px)}.kaiRecentMedia{height:auto;aspect-ratio:16/9}
  .oneClickCharacter{padding:15px}.oneClickCharacterControls{grid-template-columns:1fr 1fr}.oneClickCharacterControls>button{grid-column:1/-1;width:100%}
  .workflowStarterIntro{grid-template-columns:1fr}.workflowStarterIntro>i{display:none}.workflowStarterCard{min-height:0}
  .assetHomeGrid,.toolHomeGrid{grid-template-columns:1fr}.assetHomeCard{min-height:104px}
  .kaiProductModalBackdrop,.sceneEditorBackdrop,.lumetraImageResult{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .kaiProductModal{max-height:calc(100dvh - 20px)}.kaiProductModalHead{gap:12px;flex-wrap:wrap}.kaiProductModalHead>button{margin-left:auto}
  .kaiProductModalTools{grid-template-columns:1fr}.kaiProductModalTools>button{grid-column:auto;width:100%}.kaiProductLinkTool>div{grid-template-columns:1fr auto}
  .kaiProductEditor{grid-template-columns:76px minmax(0,1fr)}.kaiProductActions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.kaiProductActions button{flex:1 1 150px}
  .kaiProductFields{grid-template-columns:1fr 1fr}.kaiProductFields .wide{grid-column:1/-1}
  .sceneEditorModal{width:100%;max-height:calc(100dvh - 20px);padding:14px}.sceneEditorModal.directorStudioModal .sceneEditorLayout{grid-template-columns:1fr}
  .dcSuiteHead{gap:10px}.dcGrid3,.dcLockGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .directorFollowUp textarea{min-height:180px}
  .lumetraImageResult>div{width:100%;max-height:calc(100dvh - 20px)}
  .viewPanel{padding:16px}.settingsLayout{grid-template-columns:1fr}
}

/* Phone */
@media(max-width:640px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  #sidebar.sidebar{width:min(264px,84vw);max-width:84vw;padding:calc(16px + env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));box-shadow:26px 0 70px rgba(0,0,0,.52)}
  .brand{padding:2px 8px 16px;margin-bottom:10px}.brandMark{width:36px;height:36px}
  .page>header{height:60px;padding-left:max(11px,env(safe-area-inset-left));padding-right:max(11px,env(safe-area-inset-right));gap:8px}
  .menu{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:#0b111c;border:1px solid var(--stroke)}
  .headActions{margin-left:auto;min-width:0}.headActions>button:nth-child(2){display:none}.headActions .credit{height:38px;padding:0 10px}.headActions .credit b{font-size:11px}
  main{padding:18px max(11px,env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) max(11px,env(safe-area-inset-left))}
  .hero{margin-bottom:16px}.hero .eyebrow{font-size:8px}.hero h1{font-size:clamp(28px,8.4vw,34px);line-height:1.04;margin-top:7px}.hero p{font-size:12px;line-height:1.55}
  .hero .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;margin-right:-11px;padding-right:11px}.hero .chips span{flex:0 0 auto;font-size:9px;padding:7px 9px}
  .mainPanel{padding:10px;border-radius:12px}.steps{gap:3px}.steps>div{gap:4px}.steps i{width:25px;height:25px}.steps b{display:block!important;font-size:8px}
  /* Match Workflow Templates width on phones: remove the launcher's legacy 36px inset, then reclaim the main-panel inset. */
  #createView .kaiComposerLauncher{padding:0;min-height:0}
  #createView .kaiComposer{width:calc(100% + 20px);max-width:none;margin-left:-10px;margin-right:-10px}
  .kaiComposer{padding:12px;border-radius:14px}.kaiComposerHead{margin-bottom:12px}.kaiComposerHead h2{font-size:22px;line-height:1.15}.kaiComposerHead p{font-size:11px;line-height:1.5}
  .kaiComposerHeadActions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}.kaiComposerHeadActions .kaiSurprise{width:100%;justify-content:center;text-align:center;padding:10px 9px}
  .kaiWorkflowBanner{padding:10px;gap:8px;align-items:flex-start}.kaiWorkflowIdentity{min-width:0}.kaiWorkflowIdentity p{display:none}.kaiWorkflowActions{flex:0 0 auto}
  .kaiPromptShell{padding:11px;border-radius:13px}.kaiPromptShell textarea{min-height:170px;font-size:16px!important;line-height:1.5;padding:2px!important}.kaiPromptMeta{padding:7px 2px 11px}.kaiPromptMeta span{display:none}.kaiPromptMeta b{font-size:9px}
  .kaiOutputMode{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));width:100%;padding:6px;gap:4px;border-radius:12px}.kaiOutputMode>span{font-size:8px;margin:0 2px}.kaiOutputMode button{min-width:0;padding:9px 5px;font-size:10px;white-space:nowrap}
  .kaiComposerControls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-top:10px}.kaiControl{min-height:62px;grid-template-columns:20px minmax(0,1fr);padding:9px!important}.kaiControl>span{font-size:16px}.kaiControl small{font-size:9px}.kaiControl select{font-size:16px!important;line-height:1.2;text-overflow:ellipsis}
  .kaiAttachButton,.kaiMoreButton{min-height:48px;padding:9px;font-size:13px}.kaiAttachButton span,.kaiMoreButton span{font-size:11px}.kaiMoreButton b{font-size:12px}
  .kaiAttachmentTray{display:grid;grid-template-columns:1fr;gap:7px}.kaiAttachmentChip{width:100%;max-width:none;min-width:0;min-height:50px}.kaiAttachmentChip b{font-size:10px}.kaiAttachmentChip small{font-size:9px}
  .kaiProductTray{display:grid;grid-template-columns:1fr}.kaiProductChip{width:100%;max-width:none;min-width:0;min-height:50px}.kaiProductChip b{font-size:10px}.kaiProductChip small{font-size:9px}
  .kaiMorePanel{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.kaiMorePanel label{min-width:0;gap:4px;padding:8px 7px;border:1px solid #22344a;border-radius:10px;background:#0a1421;font-size:8px;line-height:1.15}.kaiMorePanel label>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kaiMorePanel select{width:100%;min-width:0;min-height:36px;font-size:11px!important;line-height:1.15;padding:6px 22px 6px 6px!important;border-radius:8px!important;text-overflow:ellipsis}.kaiMorePanel .composerSubtitleEdit{grid-column:1/-1;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kaiComposerFooter{margin-top:11px;gap:10px}.kaiIdeaChips{margin-right:-11px;padding-right:11px}.kaiIdeaChips button{font-size:10px;min-height:38px}.kaiGenerateButton{min-width:0;min-height:56px;padding:12px 14px}.kaiGenerateButton b{font-size:12px}.kaiGenerateButton small{font-size:9px}
  .kaiRecentCreations{margin-top:12px;padding:12px;border-radius:14px}.kaiRecentHead{display:grid;grid-template-columns:1fr auto;gap:8px}.kaiRecentHead small{font-size:8px}.kaiRecentHead h3{font-size:15px}.kaiRecentHead button{min-width:42px;padding:7px 10px}.kaiRecentFilters{margin:10px 0 8px}.kaiRecentFilters button{font-size:10px}.kaiRecentRail{gap:10px;margin-right:-12px;padding-right:12px}.kaiRecentCard{flex-basis:min(86vw,310px);border-radius:12px}.kaiRecentInfo{padding:10px}.kaiRecentInfo strong{font-size:12px}.kaiRecentInfo small{font-size:9px}.kaiRecentInfo button,.kaiRecentInfo a{font-size:10px;padding:7px 8px;min-height:36px;display:inline-flex;align-items:center}
  .oneClickCharacter{padding:13px;border-radius:14px;gap:13px}.oneClickCharacter h2{font-size:18px}.oneClickCharacter p{font-size:11px}.oneClickCharacterControls{grid-template-columns:1fr}.oneClickCharacterControls>button{grid-column:auto}.oneClickCharacterControls label span{font-size:9px}.oneClickCharacterControls select,.oneClickCharacterControls input{min-height:46px;font-size:16px}.oneClickCharacter>small{font-size:9px;line-height:1.45}
  .viewHeader{margin-bottom:16px}.viewHeader h1{font-size:28px}.viewHeader p{font-size:11px}.viewHeader .viewAction{width:100%;min-height:46px}
  .viewPanel{padding:13px;border-radius:12px}.assetHomeCard{padding:13px;grid-template-columns:36px minmax(0,1fr) 16px;gap:10px}.assetHomeCard h3{font-size:13px}.assetHomeCard p{font-size:10px}
  .workflowStarterIntro{padding:12px}.workflowStarterCard{padding:14px;min-height:0}.workflowStarterCard>p{min-height:0}.workflowStarterCard>button{min-height:46px}
  .kaiReferenceBrain>summary{align-items:flex-start;flex-direction:column}.kaiReferenceBody{padding:10px}.kaiReferenceLocks{gap:5px}.kaiReferenceLocks label{min-height:36px;padding:6px 8px;font-size:9px}.kaiBlueprintList{grid-template-columns:1fr;max-height:none}.kaiBlueprintList>div{grid-template-columns:24px 66px minmax(0,1fr)}
  .kaiProductModalBackdrop{padding:0}.kaiProductModal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:0;border-right:0}.kaiProductModalHead{padding:14px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));position:sticky;top:0;z-index:4;background:#08111c}.kaiProductModalHead h2{font-size:18px}.kaiProductModalHead p{font-size:10px}.kaiProductModalTools,.kaiProductEditorList,.kaiProductModalFoot{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.kaiProductLinkTool>div{grid-template-columns:1fr}.kaiProductLinkTool button{width:100%}.kaiProductLinkTool input,.kaiProductModalTools select,.kaiProductFields input,.kaiProductFields select{font-size:16px;min-height:44px}.kaiProductEditor{grid-template-columns:1fr;padding:10px}.kaiProductPreview{height:auto;aspect-ratio:16/9}.kaiProductFields{grid-template-columns:1fr}.kaiProductFields .wide{grid-column:auto}.kaiProductActions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.kaiProductActions button{min-width:0}.kaiProductModalFoot{position:sticky;bottom:0;background:#08111c;display:grid;gap:9px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.kaiProductModalFoot button{width:100%}
  .sceneEditorBackdrop{padding:0}.sceneEditorModal,.sceneEditorModal.directorStudioModal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:0;border-right:0;padding:12px;overscroll-behavior:contain}.dcSuiteHead,.dcFinishBar{display:grid}.dcFeatureBadge{justify-self:start}.dcGrid3,.dcLockGrid{grid-template-columns:1fr}.dcGroup>summary{align-items:flex-start;flex-direction:column}.dcBody{padding:11px}.dcBody input,.dcBody select,.dcBody textarea{font-size:16px;min-height:44px}.dcBody textarea{min-height:110px}.dcLock{min-height:44px}.dcToggle{min-height:48px}.dcFinishBar button{width:100%;min-height:46px}.directorFollowUp{padding:12px}.directorFollowUp textarea{min-height:200px;font-size:16px}.directorFollowUp .viewAction{min-height:48px}
  .aiSpendingGuardControls{grid-template-columns:1fr!important;gap:10px!important}.aiSpendingGuardControls label{min-width:0!important}.aiSpendingGuardControls input,.aiSpendingGuardControls select{font-size:16px!important;min-height:44px!important}
  .lumetraImageResult{padding:0}.lumetraImageResult>div{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 12px calc(16px + env(safe-area-inset-bottom));overflow:auto}.lumetraImageResult img{max-height:58dvh}.lumetraImageResult section{display:grid;grid-template-columns:1fr}.lumetraImageResult section>*{min-height:44px;display:grid;place-items:center}
  .authGate{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));align-items:start;overflow:auto}.authGateCard{margin:auto 0;width:100%;padding:20px 16px;border-radius:15px}.authGateCopy h1{font-size:28px}.authGateCopy p{font-size:11px}#authForm input{font-size:16px}
  .settingsSection{padding:13px}.keyRow{grid-template-columns:1fr}.keyRow button,.keyRow .settingsSave{grid-column:auto;width:100%;min-height:44px}.settingsField input,.settingsField select{font-size:16px;min-height:44px}
}

/* Narrow phones */
@media(max-width:380px){
  .kaiMorePanel{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.kaiMorePanel label{padding:7px 5px;font-size:7px}.kaiMorePanel select{min-height:34px;font-size:10px!important;padding-left:5px!important;padding-right:18px!important}
  .kaiComposerControls{grid-template-columns:repeat(2,minmax(0,1fr))}.kaiOutputMode{grid-template-columns:repeat(3,minmax(0,1fr))}.kaiOutputMode>span{grid-column:1/-1;text-align:left;padding:0 3px 2px}.kaiComposerHeadActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kaiRecentHead{grid-template-columns:1fr}.kaiRecentHead>div:last-child{justify-content:flex-end}.kaiRecentCard{flex-basis:88vw}
  .kaiProductActions{grid-template-columns:1fr}.steps b{font-size:7px}.hero h1{font-size:27px}
}

/* Short landscape phones / small split-screen windows */
@media(max-height:620px) and (max-width:900px){
  .hero{margin-bottom:12px}.hero p,.hero .chips{display:none}.hero h1{font-size:27px;margin-bottom:0}
  main{padding-top:14px}.kaiPromptShell textarea{min-height:110px}.kaiRecentMedia{max-height:150px}
  .kaiProductModal,.sceneEditorModal,.sceneEditorModal.directorStudioModal,.lumetraImageResult>div{max-height:100dvh;height:100dvh}
}

/* Wide tablet / touch laptop: keep cards useful rather than desktop-tiny. */
@media(min-width:821px) and (max-width:1366px) and (pointer:coarse){
  main{padding-inline:24px}.kaiComposerHead p{font-size:11px}.kaiControl{min-height:58px}.kaiAttachButton,.kaiMoreButton{min-height:48px}.kaiRecentCard{flex-basis:300px}
  .viewCard,.assetHomeCard{min-height:132px}
}


/* Lumetra 5.26.6 — mobile account/header navigation refinements. */
@media(max-width:640px){
  .headActions>button.notificationBell:nth-child(2){display:grid!important}
  #sidebar .primaryNav button[data-view="notifications"]{display:flex!important}
  #sidebar .sideBottom#accountMenuShell{scroll-margin-bottom:calc(74px + env(safe-area-inset-bottom))}
}