html[data-sidebar=collapsed]{--workspace-sidebar-width:64px}
body[data-account-state] .sidebar{width:var(--workspace-sidebar-width);transition:width .24s ease;overflow:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sidebar-details{display:flex;flex:1;flex-direction:column;min-height:0}
#menu{display:grid;place-items:center;width:44px;height:44px;flex:none;margin:0;color:var(--deep);touch-action:manipulation}
#menu .icon{width:21px;height:21px}
body[data-account-state] .page{margin-left:var(--workspace-sidebar-width);transition:margin-left .24s ease;min-width:0}
.sidebar .nav-item{min-height:44px;touch-action:manipulation}
[data-sidebar=collapsed] .sidebar .brand{justify-content:center;padding:8px 0 16px}
[data-sidebar=collapsed] .sidebar .brand>span:not(.logo),
[data-sidebar=collapsed] .sidebar .nav-label,
[data-sidebar=collapsed] .sidebar .tool-label,
[data-sidebar=collapsed] .sidebar .chat-history,
[data-sidebar=collapsed] .sidebar .sidebar-bottom{display:none}
[data-sidebar=collapsed] .sidebar nav{padding:0 6px}
[data-sidebar=collapsed] .sidebar .nav-item{justify-content:center;padding:10px 0}
@supports not (height:100dvh){.conversation-active,.conversation-active .page{height:100vh}}
@media(max-width:850px){
 html[data-sidebar]{--workspace-sidebar-width:calc(56px + env(safe-area-inset-left,0px));--workspace-header-height:calc(64px + env(safe-area-inset-top,0px))}
 body[data-account-state] .sidebar{transform:none;box-shadow:none;padding-left:env(safe-area-inset-left,0px)}
 html[data-sidebar=expanded] body[data-account-state] .sidebar{width:min(calc(244px + env(safe-area-inset-left,0px)),90vw);box-shadow:8px 0 24px #0003}
 #menu{position:relative;z-index:1}
 body[data-account-state] .page>header{
  box-sizing:border-box;
  height:var(--workspace-header-height);
  margin-left:calc(0px - var(--workspace-sidebar-width));
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(8px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px));
 }
 .chat-composer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:600px){
 body[data-account-state] .page>main{padding-inline:10px}
 body[data-account-state] .page>main>.hero{padding:16px}
 .hero-right,.breadcrumb>span{display:none}
 .source-panel textarea,.chat-composer input:not([type=checkbox]):not([type=radio]),.chat-composer select{font-size:16px}
}

/* Keep the header toggle reachable while the expanded rail overlays the page. */
@media(max-width:850px){
 body[data-account-state] .sidebar{top:var(--workspace-header-height);padding-top:0}
}
@media(prefers-reduced-motion:reduce){
 body[data-account-state] .sidebar,body[data-account-state] .page{transition:none}
}

@media(max-width:600px){
 html[data-sidebar]{--workspace-sidebar-width:calc(48px + env(safe-area-inset-left,0px))}
 body[data-account-state] .page>header{padding-left:max(4px,env(safe-area-inset-left,0px));gap:4px}
 .page>header .breadcrumb{gap:4px;min-width:0}
 .page>header #breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .page>header .local-badge{display:none}
 #account-nav{gap:4px;flex-shrink:0}
 #account-nav a,#account-nav button{min-height:44px;display:inline-flex;align-items:center;padding-inline:7px}
 [data-sidebar=collapsed] .sidebar nav{padding-inline:2px}
 .results-heading .export-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}
 .export-controls select{max-width:none;min-width:0;width:100%;font-size:16px}
 .export-controls button,.export-controls select{min-height:44px}
 .assessment-table{margin-inline:8px}
 .conversation-active #upload-trigger,.conversation-active #run{width:44px;height:44px}
 .conversation-active #composer-options{min-height:44px}
 .conversation-active .chat-query-label input{font-size:16px}
}
@media(max-width:380px){
 .page>header #breadcrumb{font-size:11px}
 #account-nav a,#account-nav button{font-size:11px;padding-inline:5px}
 .results-heading .export-controls{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:850px){
 body.conversation-active[data-account-state] .page{overflow:visible}
}