/* Workspace chrome only. Generated apps keep their own iframe styles. */
:root { --workspace-gap: 12px; }

.topbar, .topbar.closed-beta-visible {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 0;
  padding: calc(6px + var(--safe-top)) max(12px, var(--safe-right)) 6px max(12px, var(--safe-left));
}
.topbar .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
.topbar .brand-logo { width: 132px; padding: 0; }
.topbar .pedigree { font-size: 10px; }
.topbar-menu { position: static; flex: 0 0 auto; }
.topbar-menu > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 72px; min-height: 44px; padding: 8px 12px;
  list-style: none; border: 1px solid #65564b; border-radius: 8px;
  background: #211d19; color: #fff4dc; font-size: 14px; font-weight: 600; cursor: pointer;
}
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu > summary::after { content: "▾"; }
.topbar-menu[open] > summary::after { content: "▴"; }
.topbar-menu-content {
  position: absolute; top: calc(100% + 4px); z-index: 25;
  left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right));
  width: auto; max-width: 380px; margin-left: auto; max-height: calc(100dvh - 110px);
  overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 12px; padding: 12px;
  border: 1px solid #65564b; border-radius: 12px; background: #211d19; color: #fff4dc;
  box-shadow: 0 12px 32px #0005;
}
.topbar .topbar-menu-content > :is(.topbar-nav, .topbar-health, .topbar-actions, .feedback-support) {
  grid-area: auto; grid-column: auto; grid-row: auto; order: 0; min-width: 0; max-width: 100%;
}
.topbar-menu .topbar-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; gap: 4px; padding: 0; overflow: visible;
}
.topbar-menu .topbar-nav :is(a, button) {
  width: 100%; min-width: 0; min-height: 44px; margin: 0;
  padding: 8px 10px; justify-content: flex-start; font-size: 14px; white-space: normal;
}
.topbar-menu .topbar-nav .team-entry span { display: none; }
.topbar-menu .topbar-health, .topbar-menu .topbar-health[open] {
  width: 100%; margin: 0; min-width: 0;
}
.topbar-menu .topbar-health summary { border-radius: 8px; width: 100%; }
.topbar-menu .topbar-health .topbar-status { width: 100%; box-shadow: none; }
.topbar-menu .topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.topbar-menu .topbar-actions .chip { display: inline-flex; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.topbar-menu .topbar-actions button { min-height: 44px; }
.topbar-menu .feedback-support {
  position: static; width: 100%; min-height: 44px; padding: 10px 12px;
  border-radius: 8px; font-size: 14px; text-align: left; box-shadow: none;
}
.topbar-menu :focus-visible { outline: 3px solid #ffa722; outline-offset: 3px; }
.topbar .closed-beta-strip {
  display: flex; flex: 1 1 100%; gap: 2px 12px; align-items: center;
  margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent;
  font-size: 12px; line-height: 1.35; color: #e4d0c1;
}
.topbar .closed-beta-strip span { flex-basis: auto; }

.notices { padding: 0 12px; }
.notices:empty { display: none; }
.notices .notice {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; box-shadow: none;
}
.notices .notice > :first-child { min-width: 0; width: 100%; }
.notices .notice :is(strong, p) { overflow-wrap: anywhere; white-space: normal; }
.notices .notice strong { font-size: 14px; line-height: 1.4; }
.notices .notice p { font-size: 14px; line-height: 1.45; }
.notices .notice .notice-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
  margin: 0; min-width: 0; width: 100%;
}
.notices .notice-actions button { min-height: 44px; max-width: 100%; padding: 8px 12px; white-space: normal; }
.notices .notice:has(.access-notice-detail) { padding-block: 4px; }
.access-notice-detail { width: 100%; }
.access-notice-detail summary {
  min-height: 36px; padding: 6px 0; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.access-notice-detail p { padding-bottom: 6px; }

#screen-builder { min-height: 0; }
#screen-builder .workspace-header {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  width: 100%; max-width: none; padding: 8px 12px 0; margin: 0; gap: 8px;
}
#screen-builder .workspace-header h1 { min-width: 0; font-size: 18px; line-height: 1.3; }
#screen-builder .workspace-header :is(button, summary) { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
#screen-builder .workspace-header .creation-actions summary { padding: 8px; }
#screen-builder .workspace-header .creation-action-options { z-index: 12; }
#screen-builder .builder-grid {
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch;
  min-height: 0; margin: 0; padding: 12px; gap: var(--workspace-gap);
  border: 0; border-radius: 0; background: transparent;
}
#screen-builder .work, #screen-builder .preview {
  min-width: 0; min-height: 0; grid-row: 1; border-radius: 10px;
}
#screen-builder .work { grid-column: 1; padding: 12px; gap: 12px; overflow: auto; overscroll-behavior: contain; }
#screen-builder .preview { grid-column: 2; }
#screen-builder .run { flex: 0 0 auto; gap: 6px; }
#screen-builder .run-empty { margin: 0; font-size: 14px; line-height: 1.4; }
#screen-builder .run-steps { max-height: 140px; overflow: auto; }
#screen-builder .composer-inline { flex: 1 0 auto; margin: 0; padding: 14px; border-radius: 10px; }
#screen-builder #builder-prompt-label { margin-bottom: 8px; font-size: 14px; }
#screen-builder #builder-prompt {
  width: 100%; min-height: clamp(220px, 29dvh, 360px); max-height: 60dvh;
  field-sizing: fixed; resize: vertical; font-size: 16px; line-height: 1.55;
}
#screen-builder .composer-inline .composer-foot { margin-top: 10px; padding-top: 10px; gap: 8px; }
#screen-builder .composer-inline .composer-hint { font-size: 13px; line-height: 1.4; }
#screen-builder .composer-inline .composer-buttons { gap: 6px; }
#screen-builder .composer-inline .composer-buttons button { padding: 8px 10px; font-size: 13px; }
#screen-builder .composer-input-status { margin-top: 8px; font-size: 12px; line-height: 1.4; }
#screen-builder .composer-input-status:empty { display: none; }
#screen-builder .composer-input-details { margin-top: 8px; font-size: 12px; color: #c8bfb3; }
#screen-builder .composer-input-details summary { min-height: 36px; padding: 6px 0; cursor: pointer; }
#screen-builder .persistence-note { margin: 0; padding-top: 8px; font-size: 12px; }
#screen-builder .preview-head { flex: 0 0 auto; padding: 8px 10px; gap: 6px; }
#screen-builder .preview-head :is(button, .ghost) { min-height: 44px; padding: 8px 10px; }
#screen-builder .preview-tools { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#screen-builder .source-label { max-width: 100%; min-width: 0; text-align: left; }
#screen-builder .preview-frame { flex: 1 1 auto; display: flex; min-height: 0; padding: 0; overflow: hidden; }
#screen-builder .preview-frame iframe { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
#screen-builder .preview-placeholder { margin: auto; padding: 24px; }
#screen-builder .chrome-dots { display: none; }
.feedback-toast { bottom: max(12px, var(--safe-bottom)); right: max(12px, var(--safe-right)); }

@media (min-width: 901px) {
  body:has(#screen-builder:not([hidden])) {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
    height: 100dvh; min-height: 640px;
  }
  body:has(#screen-builder:not([hidden])) > .topbar { grid-row: 1; }
  body:has(#screen-builder:not([hidden])) > .notices { grid-row: 2; }
  body:has(#screen-builder:not([hidden])) > main { grid-row: 3; min-height: 0; }
  #screen-builder { height: 100%; }
  #screen-builder .builder-grid { flex: 1 1 0; }
  #screen-builder[data-preview-expanded="true"] .builder-grid { grid-template-columns: minmax(300px, 28fr) minmax(0, 72fr); }
  #screen-builder[data-preview-expanded="true"] .work { grid-column: 1; }
  #screen-builder[data-preview-expanded="true"] .preview { grid-column: 2; }
}

@media (max-width: 900px) {
  .topbar .pedigree { display: none; }
  #screen-builder .builder-tabs { display: flex; }
  #screen-builder[data-pane="build"] .preview { display: none; }
  #screen-builder[data-pane="preview"] .work { display: none; }
  #screen-builder .workspace-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 8px 12px 0; gap: 4px 8px;
  }
  #screen-builder #workspace-back { grid-column: 1; justify-self: start; }
  #screen-builder #new-project { grid-column: 2; grid-row: 1; }
  #screen-builder #earlier-versions { grid-column: 3; grid-row: 1; }
  #screen-builder #workspace-project-name { grid-column: 1 / 3; grid-row: 2; padding: 4px 0; font-size: 17px; }
  #screen-builder #workspace-project-actions { grid-column: 3; grid-row: 2; }
  #screen-builder .builder-grid, #screen-builder[data-preview-expanded="true"] .builder-grid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 8px 12px 12px;
  }
  #screen-builder .work, #screen-builder .preview,
  #screen-builder[data-preview-expanded="true"] :is(.work, .preview) { grid-column: 1; grid-row: auto; }
  #screen-builder .work { overflow: visible; padding: 12px; }
  #screen-builder .preview { min-height: 70vh; min-height: 70svh; }
  #screen-builder .preview-frame { min-height: 58vh; min-height: 58svh; }
  #screen-builder .preview-frame iframe { min-height: 58vh; min-height: 58svh; }
  #screen-builder .preview-focus { display: none; }

  /* Preview is the product payoff on a narrow workspace. Once selected, keep only the pane switcher
     and one compact, horizontally scrollable action rail above the isolated app. Build is
     always visible as the exit, while account, access and project chrome return unchanged
     as soon as the user switches back. */
  body:has(#screen-builder[data-pane="preview"]:not([hidden])) > :is(.topbar, .notices) {
    display: none;
  }
  body:has(#screen-builder[data-pane="preview"]:not([hidden])) {
    height: 100dvh; min-height: 0; overflow: hidden;
  }
  body:has(#screen-builder[data-pane="preview"]:not([hidden])) > main {
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    min-height: 0; overflow: hidden;
  }
  #screen-builder[data-pane="preview"] {
    height: 100%; min-height: 0; overflow: hidden;
  }
  #screen-builder[data-pane="preview"] .workspace-header { display: none; }
  #screen-builder[data-pane="preview"] .builder-tabs {
    position: sticky; top: 0; z-index: 20;
    flex: 0 0 auto; padding: 6px 8px; gap: 6px;
    background: #151412; border-bottom: 1px solid #3b3530;
  }
  #screen-builder[data-pane="preview"] .builder-tabs button {
    min-height: 44px; padding-block: 7px;
  }
  #screen-builder[data-pane="preview"] #tab-build::before { content: "← "; }
  #screen-builder[data-pane="preview"] .builder-grid,
  #screen-builder[data-pane="preview"][data-preview-expanded="true"] .builder-grid {
    flex: 1 1 auto; min-height: 0; margin: 0; padding: 0;
  }
  #screen-builder[data-pane="preview"] .preview,
  #screen-builder[data-pane="preview"][data-preview-expanded="true"] .preview {
    height: 100%; min-height: 0;
    position: relative; padding: 0; border: 0; border-radius: 0;
  }
  #screen-builder[data-pane="preview"] .preview-head {
    flex: 0 0 auto; flex-wrap: nowrap; gap: 6px;
    min-height: 50px; padding: 3px 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #screen-builder[data-pane="preview"] .preview-head::-webkit-scrollbar { display: none; }
  #screen-builder[data-pane="preview"] .preview-head h2,
  #screen-builder[data-pane="preview"] .preview-head .chrome-dots { display: none; }
  #screen-builder[data-pane="preview"] .preview-head .source-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  #screen-builder[data-pane="preview"] .preview-edit { flex: 0 0 auto; }
  #screen-builder[data-pane="preview"] .preview-tools {
    display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px;
    height: 44px; margin: 0;
  }
  #screen-builder[data-pane="preview"] .preview-tools button { flex: 0 0 auto; }
  #screen-builder[data-pane="preview"] .preview-status:empty { display: none; }
  #screen-builder[data-pane="preview"] .preview-status:not(:empty) {
    position: fixed; z-index: 32;
    right: max(8px, var(--safe-right)); bottom: max(8px, var(--safe-bottom));
    left: max(8px, var(--safe-left));
    padding: 10px 12px; border: 1px solid #5b4b3d; border-radius: 10px;
    background: #24211d; color: #f5e8d9; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  }
  #screen-builder[data-pane="preview"] .source-panel {
    position: absolute; z-index: 31;
    top: 50px; right: max(8px, var(--safe-right));
    bottom: max(8px, var(--safe-bottom)); left: max(8px, var(--safe-left));
    margin: 0; padding: 12px; overflow: auto; overscroll-behavior: contain;
    border: 1px solid #5b4b3d; border-radius: 12px;
    background: #1d1b18; color: #f5e8d9; box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
  }
  #screen-builder[data-pane="preview"] .source-panel .source-dump {
    max-height: none; min-height: calc(100% - 72px); margin-bottom: 0;
  }
  #screen-builder[data-pane="preview"] .preview-frame,
  #screen-builder[data-pane="preview"] .preview-frame iframe {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .topbar .closed-beta-strip { font-size: 12px; }
  .topbar .closed-beta-strip strong { font-size: 12px; }
  .topbar .closed-beta-strip span { font-size: 11px; }
  #screen-builder .builder-tabs { padding: 8px 12px 0; gap: 8px; }
  #screen-builder .builder-tabs button { border-radius: 8px; font-size: 15px; }
  #screen-builder .work { padding: 10px; }
  #screen-builder #builder-prompt { min-height: 220px; max-height: 60svh; }
  #screen-builder .composer-inline { padding: 12px; }
  #screen-builder .preview-head .source-label { flex-basis: 100%; }
}

@media (max-width: 380px) {
  #screen-builder .workspace-header :is(button, summary) { padding-inline: 8px; font-size: 12px; }
  #screen-builder .workspace-header { gap: 4px; }
  #screen-builder .builder-grid, #screen-builder[data-preview-expanded="true"] .builder-grid { padding-inline: 8px; }
  #screen-builder .composer-inline { padding: 10px; }
  .notices { padding-inline: 8px; }
}