/* ── Custom element display + layout shell ──────────────────────────────────── */

/* Every page host below is switched to `display: flex` by its component, so its
   root <div> is a flex item. `flex-direction: column` is therefore load-bearing
   and not cosmetic: in the default `row`, a flex item is sized by its content,
   so a page whose root div forgot `width: 100%` renders as a narrow column in
   the middle of the workspace. Column direction makes the cross axis stretch,
   which fills the width whatever the inner div declares. Never omit it. */

tasks-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

llm-providers-page,
models-hub-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

projects-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

/* The three section multiplexers (`#tasks`, `#projects`, `#models`) render one
   sub-section element at a time as their only child. Sized by descendant
   selector rather than by naming each section: the enumeration was the bug —
   `models-tts-section` was added to the hub and never listed here, so it fell
   back to an inline element sized by its content and the page rendered narrow.
   A new section now inherits the sizing by existing. */
tasks-page      > *,
projects-page   > *,
models-hub-page > * {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

session-detail-page,
system-agents-page,
file-viewer-page,
tool-detail-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

users-page,
roles-page,
shared-folders-page,
files-page,
connectors-page,
connector-detail-page,
plugin-catalog-page,
plugin-detail-page,
plugin-page-host,
marketplace-page,
profile-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

/* Plugin-contributed page fragments mount inside the host with the `plugin-id`
   attribute set — make them fill the host column (the host is `flex:1`, but a
   bare custom element has no default sizing). Generic across all plugins. */
plugin-page-host > [plugin-id] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Workspace placeholder ──────────────────────────────────────────────────── */

.app-workspace {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-color, #94a3b8);
  font-size: 0.9rem;
}