/* LL AI v65.92 — cross-device layout/runtime polish. */
:root{
  --ll-vh:100dvh;
  --ll-vw:100vw;
  --ll-safe-top:env(safe-area-inset-top,0px);
  --ll-safe-right:env(safe-area-inset-right,0px);
  --ll-safe-bottom:env(safe-area-inset-bottom,0px);
  --ll-safe-left:env(safe-area-inset-left,0px);
}
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{background:var(--theme-bg,#08090b)}
body{min-height:var(--ll-vh);overscroll-behavior-x:none}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
button,input,textarea,select{font:inherit;max-width:100%}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
.app{height:var(--ll-vh)!important;min-height:0!important;max-width:100vw;overflow:hidden}
.main{height:var(--ll-vh)!important;min-height:0!important;min-width:0!important;overflow:hidden}
.side{height:var(--ll-vh)!important;min-height:0!important;overscroll-behavior:contain}
.topbar{flex:0 0 auto;padding-left:max(14px,var(--ll-safe-left));padding-right:max(14px,var(--ll-safe-right))}
.chat,.chatScroll,.chatBody,.imageStudioBody,.canvasWorkspace,.flashBody{min-width:0;min-height:0}
.chat{overscroll-behavior-y:contain;scrollbar-gutter:stable}
.msgrow,.msg,.message,.assistantMessage,.userMessage{min-width:0;overflow-wrap:anywhere;word-break:normal}
.msg pre,.message pre{max-width:100%;overflow:auto}
.msg table,.message table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.composer{flex:0 0 auto;padding-left:max(8px,var(--ll-safe-left));padding-right:max(8px,var(--ll-safe-right));padding-bottom:max(9px,var(--ll-safe-bottom))!important}
.composebox{width:min(100%,860px)!important;max-width:860px!important;min-width:0!important}
.composebox textarea{min-width:0!important;font-size:max(16px,1em)}
.attachMenu{max-width:calc(100vw - 20px)}
.llDialog,.llSetupCard,.appearanceCard,.memoryCard,.voiceSettingsCard,.ownerGateCard,.commandCard,.flashEditCard{max-width:calc(100vw - 24px)!important;max-height:calc(var(--ll-vh) - 24px)!important;overflow:auto!important;overscroll-behavior:contain}
.imageStudio,.flashStudio,.canvasStudio,#voiceOverlay{height:var(--ll-vh)!important;max-height:var(--ll-vh)!important}
.imageStudioBody,.flashBody,.canvasWorkspace{overscroll-behavior:contain}
.filePreviewCard,.imageViewerCard,.chatAttachmentLightbox>*,.imageResultViewer>*{max-width:calc(100vw - 20px)!important;max-height:calc(var(--ll-vh) - 20px)!important}

/* Auth/account follows the actual visual viewport, including mobile keyboards. */
#llAuthRoot{height:var(--ll-vh)!important;max-height:var(--ll-vh)!important;padding-left:var(--ll-safe-left)!important;padding-right:var(--ll-safe-right)!important}
.llAuthShell{min-height:var(--ll-vh)!important;padding-top:max(16px,var(--ll-safe-top))!important;padding-bottom:max(24px,var(--ll-safe-bottom))!important}
#llAccountModal{height:var(--ll-vh)!important;padding:max(12px,var(--ll-safe-top)) max(12px,var(--ll-safe-right)) max(12px,var(--ll-safe-bottom)) max(12px,var(--ll-safe-left))!important}
.llAccountCard{max-height:calc(var(--ll-vh) - 24px)!important}

/* Desktop: restrained widths, no stretched tablet-looking UI. */
@media(min-width:1200px){
  .app{grid-template-columns:292px minmax(0,1fr)!important}
  .chat{padding-inline:clamp(24px,4vw,64px)!important}
  .composebox{max-width:860px!important}
  .welcome{max-width:900px!important;margin-inline:auto!important}
}

/* Tablet / compact desktop. Drawer sooner so content never gets crushed. */
@media(min-width:801px) and (max-width:1100px){
  .app{grid-template-columns:250px minmax(0,1fr)!important}
  .side{padding-inline:10px!important}
  .chat{padding-inline:18px!important}
  .composebox{max-width:760px!important}
}

/* Phones and portrait tablets. */
@media(max-width:800px){
  .app,.app.sidebarCollapsed{display:block!important;width:100%!important}
  .main{width:100%!important}
  .side{width:min(88vw,360px)!important;max-width:88vw!important;inset:0 auto 0 0!important;padding-left:max(10px,var(--ll-safe-left))!important;padding-right:10px!important}
  .topbar{height:58px!important;min-height:58px!important;padding-top:max(7px,var(--ll-safe-top))!important}
  .chat{padding:14px 12px 18px!important}
  .msg{max-width:min(92%,680px)!important}
  .msg.user{max-width:88%!important}
  .composer{padding-top:7px!important}
  .composebox{border-radius:24px!important;min-height:54px!important}
  .attachMenu{left:max(8px,var(--ll-safe-left))!important;right:max(8px,var(--ll-safe-right))!important;width:auto!important;bottom:calc(68px + var(--ll-safe-bottom))!important}
  .imageStudioTop,.canvasTop,.flashTop{padding-left:max(12px,var(--ll-safe-left))!important;padding-right:max(12px,var(--ll-safe-right))!important}
}

@media(max-width:560px){
  .topbar{padding-inline:max(8px,var(--ll-safe-left)) max(8px,var(--ll-safe-right))!important}
  .modelButton{max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topActions{gap:6px!important}
  .roundBtn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  .welcome{padding:22px 4px 76px!important}
  .welcome h1{font-size:clamp(28px,9vw,36px)!important;line-height:1.05!important}
  .chips{gap:8px!important}
  .chip{min-height:52px!important;padding:10px 12px!important}
  .chat{padding-inline:9px!important}
  .msg{max-width:95%!important}
  .msg.user{max-width:90%!important}
  .composebox{border-radius:22px!important;padding:6px!important}
  .composerBtn,.composerPrimary,.composerDictation{min-width:44px!important;min-height:44px!important}
  .disclaimer{font-size:10px!important;padding-inline:4px}
  .imageHero{padding:18px!important}.imageHero h1{font-size:32px!important}
  .llAccountMeta{grid-template-columns:1fr!important}.llAccountMeta b{text-align:left!important;max-width:100%!important}
}

@media(max-width:380px){
  .side{width:92vw!important;max-width:92vw!important}
  .topbar{height:54px!important;min-height:54px!important}
  .roundBtn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .welcome{padding-top:16px!important}
  .welcomeMark{width:50px!important;height:50px!important}
  .chat{padding-inline:7px!important}
  .composebox textarea{padding-inline:5px!important}
  .llAuthShell{width:calc(100% - 12px)!important}
  .llAuthCard{padding:18px 14px!important;border-radius:20px!important}
}

/* Short screens and landscape phones: prioritize usable chat over decoration. */
@media(max-height:620px){
  .welcome{padding-top:10px!important;padding-bottom:34px!important}
  .welcomeMark{width:48px!important;height:48px!important;margin-bottom:8px!important}
  .welcome>p{margin-bottom:12px!important}
  .chips{gap:7px!important}
  .chip{min-height:46px!important}
  .llAuthShell{align-content:start!important}
  .llAuthBrand{margin-top:0!important}
  .llAuthCard{padding-top:18px!important;padding-bottom:18px!important}
  .llAuthHeader{margin-bottom:14px!important}
}
@media(max-height:500px) and (pointer:coarse){
  .topbar{height:50px!important;min-height:50px!important}
  .welcomeMark,.welcome>p{display:none!important}
  .welcome{padding:8px 4px 20px!important}
  .welcome h1{font-size:28px!important;margin-bottom:10px!important}
  #voiceOverlay .orbStage{width:190px!important;height:190px!important;top:43%!important}
  #voiceOverlay .voiceOrb{width:145px!important;height:145px!important}
  .voiceControls .bigRound,.closeVoice{width:52px!important;height:52px!important}
}

/* Touch: reliable targets and no hover-only dependency. */
@media(pointer:coarse){
  button,.navItem,.chatItem,.chip,.llAuthBtn,.llAuthBack,.llAccountAction{touch-action:manipulation}
  .navItem,.chatItem{min-height:44px}
  .chatActions,.imageCardOverlay{opacity:1!important}
  .roundBtn,.composerBtn,.composerPrimary,.composerDictation,.llAccountClose{min-width:44px;min-height:44px}
}
@media(hover:none){
  .navItem:hover,.chatItem:hover,.roundBtn:hover,.chip:hover,.llAuthBtn:hover{transform:none!important}
}

/* Keyboard-open mode: keep the active composer/auth field in view. */
html[data-ll-keyboard="1"] .disclaimer{display:none!important}
html[data-ll-keyboard="1"] .welcome{display:none!important}
html[data-ll-keyboard="1"] .composer{padding-bottom:max(6px,var(--ll-safe-bottom))!important}
html[data-ll-keyboard="1"] #llAuthRoot{scroll-padding-bottom:24px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}


/* v65.92 — collapsed desktop/tablet sidebar must release its grid column.
   v65.90's breakpoint rules used !important on .app and could leave an empty sidebar-width gutter. */
@media(min-width:801px){
  .app.sidebarCollapsed{grid-template-columns:0 minmax(0,1fr)!important}
  .app.sidebarCollapsed>.main{width:100%!important;min-width:0!important}
}