/* Unified workbench shell: one scroll owner for ordinary pages, local panels for studio. */
:root {
  --sidebar-width: 220px;
  --topbar-height: 65px;
  --mobile-nav-height: 63px;
  --page-inline-padding: clamp(20px, 3vw, 44px);
  --page-bottom-safe-area: 40px;
}

html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-height: 100dvh; display: flex; }
.sidebar { position: relative; top: auto; width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); height: 100dvh; min-height: 0; }
main { height: 100dvh; min-height: 0; min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.topbar { height: var(--topbar-height); min-height: var(--topbar-height); box-sizing: border-box; flex: 0 0 var(--topbar-height); padding-inline: 0; }
main > .topbar { width: 100%; max-width: none; margin: 0; }
.topbar-inner { width: 100%; height: 100%; margin: 0; padding-inline: var(--page-inline-padding); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar-inner > :first-child { min-width: 0; }
.topbar h1 { margin: 2px 0 0; font-size: 18px; line-height: 1.15; }
.topbar .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
.top-actions { flex: 0 0 auto; align-items: center; gap: 12px; }
#account-chip { border-left: 0; padding-left: 0; gap: 10px; }

/* Ordinary navigation views share the same page scroll contract. */
main > .view:not(.intent-view) {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 32px var(--page-inline-padding) var(--page-bottom-safe-area);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
main > .view:not(.intent-view) > * { max-width: 1550px; margin-left: auto; margin-right: auto; }
main > .view:not(.intent-view) > dialog { margin: auto; }
.prompt-studio-view { height: auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }

/* The creative workspace is an intentional nested application with bounded panels. */
main > .intent-view { flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }
.intent-shell { min-height: 0; }
.intent-assets, .intent-chat { min-height: 0; }
.intent-assets-list, .intent-messages, .intent-handoff { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Sidebar library items share one interaction contract despite different markup. */
.sidebar .project-item,
.sidebar .saved-item > button:first-child {
  transition: color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard);
}
.sidebar .project-item:hover,
.sidebar .project-item:focus-visible,
.sidebar .saved-item:hover > button:first-child,
.sidebar .saved-item:focus-within > button:first-child {
  background: var(--ui-surface-subtle) !important;
  border-color: transparent;
  color: var(--ui-ink) !important;
}
.sidebar .project-item.active,
.sidebar .saved-item.active > button:first-child {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-strong) !important;
  box-shadow: inset 2px 0 var(--ui-accent);
}
.sidebar .saved-item > .icon { transition: opacity var(--ui-duration-fast) var(--ui-ease-standard), color var(--ui-duration-fast) var(--ui-ease-standard), background-color var(--ui-duration-fast) var(--ui-ease-standard); }

@media (max-width: 1250px) {
  :root { --sidebar-width: 176px; }
  .sidebar { flex-basis: var(--sidebar-width); }
}

@media (max-width: 1050px) {
  :root { --sidebar-width: 72px; }
  .sidebar { flex-basis: var(--sidebar-width); }
}

@media (max-width: 560px) {
  :root { --topbar-height: 56px; }
  html, body { overflow: hidden; }
  .sidebar { display: none; }
  main { height: calc(100dvh - var(--mobile-nav-height)); }
  .topbar { height: var(--topbar-height); min-height: var(--topbar-height); flex-basis: var(--topbar-height); }
  .topbar-inner { padding-inline: 16px; }
  main > .view:not(.intent-view) { padding: 22px 16px calc(var(--page-bottom-safe-area) + var(--mobile-nav-height)); }
  main > .intent-view { height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height)); }
}

/* Sidebar collapse keeps resource groups available as icon shortcuts. */
.sidebar{transition:width .18s ease,flex-basis .18s ease;padding-inline:17px;will-change:width,flex-basis;overflow:hidden}
.sidebar-collapse{width:72px;flex-basis:72px;padding-inline:10px}
.sidebar-collapse .brand{justify-content:center;padding-inline:0;min-height:43px;overflow:hidden}
.sidebar-collapse .brand>span:last-child{opacity:0;width:0;overflow:hidden;white-space:nowrap}
.sidebar-collapse .sidebar-navigation-scroll .nav:not(.active) .count,.sidebar-collapse .sidebar-label-text,.sidebar-collapse .sidebar-library-section .library-heading > .icon,.sidebar-collapse #connection,.sidebar-collapse .version{opacity:0;width:0;overflow:hidden;position:absolute}
.sidebar-collapse .sidebar-navigation-scroll .nav{font-size:0;justify-content:center;gap:0;padding-inline:0}
.sidebar-collapse .sidebar-navigation-scroll .nav svg{margin-right:0}
.sidebar-collapse .sidebar-library-scroll{display:block}
.sidebar-collapse .sidebar-library-section{padding-inline:0}
.sidebar-collapse .library-heading{justify-content:center;padding-inline:0}
.sidebar-collapse .sidebar-library-toggle{flex:0 0 auto;width:40px;height:40px;padding:0;justify-content:center}
.sidebar-collapse .sidebar-library-toggle::before{display:none}
.sidebar-collapse .sidebar-library-toggle svg{width:19px;height:19px;color:var(--ui-ink-soft)}
.sidebar-collapse .sidebar-library-section.is-collapsed .sidebar-library-toggle svg{color:var(--ui-accent)}
.sidebar-collapse .sidebar-library-section .project-list,.sidebar-collapse .sidebar-library-section .saved-list{display:none}
.sidebar .saved-item > button:first-child{color:var(--ui-muted);background:transparent}
.sidebar .saved-item > button:first-child:hover,.sidebar .saved-item > button:first-child:focus-visible{color:var(--ui-ink)!important;background:var(--ui-surface-subtle)!important}
.brand{min-height:43px;white-space:nowrap}
.brand-mark{flex-shrink:0;width:33px;height:37px}
.brand>span:last-child{transition:opacity .18s ease,width .18s ease}
@media(max-width:1050px){#sidebar-collapse{display:none}}
/* Keep the manual collapse control above runtime status, including narrow layouts. */
.sidebar-bottom{display:grid !important;grid-template-columns:1fr auto auto !important;gap:7px !important;align-items:center !important;padding:20px 9px 0 !important;border-top:1px solid var(--ui-sidebar-line) !important;font-size:11px;color:var(--ui-ink-soft);box-sizing:border-box}
.sidebar-bottom #sidebar-collapse{order:-1;grid-column:1/-1;width:100%;margin:0 0 12px 0;justify-content:flex-start;min-height:44px !important;height:44px}
.sidebar-bottom > :not(#sidebar-collapse){grid-row:2}
.sidebar-bottom .status-dot{width:6px;height:6px;background:var(--green);border-radius:50%}
.sidebar-bottom .version{margin-left:auto;font-family:monospace}
.sidebar-collapse .sidebar-bottom{grid-template-columns:1fr !important;justify-items:center;padding-inline:0 !important}
.sidebar-collapse .sidebar-bottom #sidebar-collapse{margin-bottom:12px;justify-content:center;font-size:0;gap:0;padding-inline:0;height:44px}
.sidebar-collapse .sidebar-bottom #sidebar-collapse .nav-label{display:none}
.sidebar-collapse .sidebar-bottom #sidebar-collapse svg{margin-right:0;transform:rotate(180deg)}
.sidebar-collapse .sidebar-bottom > :not(#sidebar-collapse){grid-row:auto;grid-column:1}
.sidebar-collapse .sidebar-bottom .status-dot{display:block}
.sidebar-collapse .sidebar-bottom .version{display:none}
.sidebar-collapse .sidebar-bottom #connection{display:none}
@media(max-width:1050px){#sidebar-collapse{display:flex}}

.sidebar { color: var(--ui-ink); background: var(--ui-surface-sidebar); }
.sidebar .brand { color: var(--ui-ink); }
.sidebar .brand small { color: var(--ui-muted) !important; }
.sidebar .nav { color: var(--ui-muted); }
.sidebar .nav:hover { background: var(--ui-surface-subtle); color: var(--ui-ink); }
.sidebar .nav.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); box-shadow: inset 2px 0 var(--ui-accent); }
.sidebar .nav.active svg { color: var(--ui-accent); }
.sidebar .count { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
.sidebar .project-item,
.sidebar .saved-item,
.sidebar .saved-item > button:first-child { color: var(--ui-muted) !important; }
.sidebar-bottom { color: var(--ui-muted) !important; }

/* Ordinary pages size against main, including when the sidebar is expanded.
   Match the legacy view selector's specificity to replace its viewport width. */
main > .view:not(.intent-view):not(.prompt-studio-view) {
  width: 100%;
  min-width: 0;
  container: secondary-page / inline-size;
  overflow-wrap: anywhere;
}

:is(#home-view, #projects-view) .project-open {
  white-space: normal;
}

#home-view .hub-action {
  white-space: normal;
}

:is(#projects-view, #pricing-view, #providers-view) .section-heading {
  flex-wrap: wrap;
}

:is(#projects-view, #pricing-view, #providers-view) .section-heading > div {
  flex: 1 1 240px;
  min-width: 0;
}

#results-view .results-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

#results-view .comparison-title {
  flex-wrap: wrap;
}

#results-view .comparison-title > div {
  flex: 1 1 180px;
  min-width: 0;
}

#results-view :is(.compare-controls, .resume-box, .compare-label) {
  flex-wrap: wrap;
}

#results-view .job-events .event {
  min-width: 0;
}

#results-view .job-events .event > span {
  min-width: 0;
}

/* Keep every user field and action available at every width. */
#users-table {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
}

#users-table .provider-table {
  min-width: 840px;
  border: 0;
}

#users-table :is(th, td) {
  display: table-cell;
}

#users-table td:first-child {
  min-width: 120px;
  max-width: 220px;
}

#users-table .user-actions {
  min-width: 200px;
}

#users-table .user-actions button {
  margin: 0 12px 8px 0;
}

#providers-view .admin-model-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

#providers-view .admin-assistant-heading {
  flex-wrap: wrap;
}

#providers-view .admin-assistant-heading > div {
  flex: 1 1 280px;
  min-width: 0;
}

#providers-view .model-admin-card :is(.admin-switch, .admin-reveal) {
  flex-direction: row;
  margin: 0;
}

#providers-view .model-admin-card input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* These dialogs belong to ordinary pages; their forms/details own scrolling. */
:is(#project-edit-dialog, #password-dialog, #balance-dialog) > form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#usage-detail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

@container secondary-page (max-width: 900px) {
  #results-view .results-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #results-view .experiment-list {
    display: flex;
    flex-direction: column;
    max-height: clamp(220px, 36dvh, 320px);
    overflow: hidden;
  }

  #results-view .experiment-list > :is(.section-heading, select) {
    flex: 0 0 auto;
  }

  #all-jobs {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #pricing-view .pricing-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  #pricing-view .pricing-hero {
    flex-direction: column;
  }
}

@container secondary-page (max-width: 600px) {
  :is(#home-view, #projects-view) .project-cards,
  #home-view .hub-actions,
  #results-view .compare-grid,
  #pricing-view .pricing-highlights {
    grid-template-columns: minmax(0, 1fr);
  }

  #projects-view .projects-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #projects-view .projects-filters input {
    grid-column: 1 / -1;
  }

  #projects-view .projects-filters select {
    width: 100%;
  }

  #results-view .compare-cell :is(video, img),
  #results-view .pending-output {
    height: clamp(200px, 45dvh, 360px);
  }

  #results-view .compare-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  #results-view :is(.experiment-list, .comparison) {
    padding: 16px;
  }

  #pricing-view .pricing-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #pricing-view .pricing-amount {
    text-align: left;
  }

  #pricing-view .pricing-dual {
    justify-items: start;
  }
}

/* Brand and connection status have separate lifecycles. */
.sidebar .sidebar-bottom{display:flex!important;flex-direction:column;align-items:center;gap:10px;padding-inline:0}
.workbench-brand-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%;text-align:center;font-size:11px;line-height:1.6}
.workbench-brand-footer .version{margin-left:0}
.workbench-connection{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px}
.sidebar-collapse .workbench-brand-footer{display:none}
.intent-reply-preview p{white-space:pre-wrap;overflow-wrap:anywhere}
.intent-reply-preview small{color:var(--ui-muted)}

@media(max-width:1050px){.sidebar .sidebar-bottom{display:none!important}}