/* Laygent Studio workbench: top bar, activity rail, side panel, editor, preview, project agent, status bar. */

.app-shell {
  --rail-cur: var(--rail-w);
  display: grid;
  grid-template-columns: var(--rail-cur) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "top top" "rail main";
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  background: var(--bg);
  /* collapsing waits for the labels to fade out; expanding starts at once */
  transition: grid-template-columns var(--dur-panel) var(--ease-out) calc(var(--dur-panel) * .35);
}
.app-shell.rail-expanded { --rail-cur: var(--rail-w-expanded); transition-delay: 0ms; }

/* ---- top bar ---- */
.topbar {
  grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 0 8px 0 12px; border-bottom: 1px solid var(--border); background: var(--surface-1);
}
.topbar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .brand-mark { width: 22px; height: 22px; margin-left: 1px; }
.breadcrumbs { min-width: 0; }
.breadcrumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: var(--text-md); }
.breadcrumbs li { display: flex; align-items: center; min-width: 0; }
.crumb-sep { margin: 0 8px 0 0; color: var(--text-subtle); }
.crumb-link { min-height: 28px; padding: 0 4px; margin-left: -4px; border-radius: var(--radius-sm); color: var(--text-muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.crumb-link:hover { color: var(--text); background: var(--surface-2); }
.crumb-current { gap: 0; margin-left: 8px; }
.crumb-current .dirty-dot { margin-left: 8px; }
#crumbProject { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dirty-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--warning); }
.topbar-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.topbar-actions .btn.small { min-height: 30px; }
.topbar-actions .btn .icon { width: 15px; height: 15px; }
.topbar-divider { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
#topCompile .icon { fill: currentColor; stroke: none; width: 12px; height: 12px; }
#topSave.is-dirty { color: var(--text); }

/* ---- tooltip: one element in the top layer, positioned by workbench.js ---- */
.tooltip {
  position: fixed; z-index: 1000; top: 0; left: 0; max-width: 260px;
  padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-2);
  font: 500 12px/1.4 var(--font-ui); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: scale(.98);
  transition: opacity 110ms var(--ease), transform 110ms var(--ease);
}
.tooltip.visible { opacity: 1; transform: none; }

/* ---- activity rail ---- */
.rail {
  grid-area: rail; display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0; overflow: hidden; padding: 6px 4px 8px; border-right: 1px solid var(--border); background: var(--surface-1); z-index: 70;
}
.rail-group { display: flex; flex-direction: column; gap: 4px; }
.rail-btn {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px;
  border-radius: var(--radius); color: var(--text-subtle); white-space: nowrap; overflow: hidden;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail-btn .icon { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
.rail-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-btn[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }
.rail-btn[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--accent); }
.rail-label {
  font-size: var(--text-sm); font-weight: 500; color: inherit; opacity: 0; transform: translate3d(-4px, 0, 0);
  transition: opacity calc(var(--dur-panel) * .4) var(--ease), transform calc(var(--dur-panel) * .4) var(--ease);
}
.rail-expanded .rail-label { opacity: 1; transform: none; transition-delay: calc(var(--dur-panel) * .55); }
.rail-sep { height: 1px; margin: 4px 8px; background: var(--border); }
.rail-new { color: var(--text-muted); }
.rail-new .icon { stroke-width: 1.8; }
.rail-toggle-icon { transition: transform var(--dur-panel) var(--ease-out); }
.rail-expanded .rail-toggle-icon { transform: rotate(180deg); }
.account-btn { padding-left: 6px; }
.account-btn .avatar { width: 28px; height: 28px; flex: none; }

/* ---- main ---- */
.main { grid-area: main; min-width: 0; min-height: 0; position: relative; }
.screen { height: 100%; min-height: 0; }
.screen:not(.hidden) { animation: fadeIn var(--dur-panel) var(--ease-out); }
.editor-screen { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

/* The workbench splits the content area between the workspace and the project agent.
   Every child has a named area, so hiding one panel can never shift the others into a 0px track. */
.workbench {
  --side-w: 272px; --preview-w: 46%; --agent-w: 0px; --agent-res: 0px;
  position: relative; display: grid; min-width: 0; min-height: 0;
  grid-template-columns: minmax(0, 1fr) var(--agent-res) var(--agent-w);
  grid-template-areas: "workspace ares agent";
  transition: grid-template-columns var(--dur-panel) var(--ease-out);
}
.workspace {
  grid-area: workspace; position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden;
  --preview-track: minmax(0, min(var(--preview-w), calc(100% - var(--side-cur, var(--side-w)) - 310px)));
  grid-template-columns: var(--side-w) 5px minmax(0, 1fr) 5px var(--preview-track);
  grid-template-areas: "side sres editor pres preview";
  transition: grid-template-columns var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease);
}
.workbench.side-collapsed .workspace { --side-cur: 0px; grid-template-columns: 0px 0px minmax(0, 1fr) 5px var(--preview-track); }
.workbench.preview-collapsed .workspace { grid-template-columns: var(--side-w) 5px minmax(0, 1fr) 0px minmax(0, 0%); }
.workbench.side-collapsed.preview-collapsed .workspace { --side-cur: 0px; grid-template-columns: 0px 0px minmax(0, 1fr) 0px minmax(0, 0%); }
/* After an AI build or edit the preview takes the whole workspace beside the agent (set in workbench.js). */
.workbench.preview-focus:not(.preview-collapsed) .workspace { grid-template-columns: 0px 0px minmax(0, 1fr) 0px minmax(0, 100%); }
.workbench.dragging, .workbench.dragging .workspace, .no-anim, .no-anim .workbench, .no-anim .workspace { transition: none !important; }
.side-panel { grid-area: side; }
#sideResizer { grid-area: sres; }
.editor-group { grid-area: editor; }
#previewResizer { grid-area: pres; }
.preview-pane { grid-area: preview; }
.agent-resizer { grid-area: ares; }
.agent-panel { grid-area: agent; }

/* Collapsed panes fade, keep their inner width while their track shrinks, then leave the tab order (inert is set in JS). */
.side-panel, .preview-pane, .agent-panel, .resizer, .editor-group {
  transition: opacity calc(var(--dur-panel) * .7) var(--ease), visibility 0s linear 0s;
}
.workbench.side-collapsed .side-panel, .workbench.side-collapsed #sideResizer,
.workbench.preview-collapsed .preview-pane, .workbench.preview-collapsed #previewResizer,
.workbench:not(.agent-open) .agent-panel, .workbench:not(.agent-open) .agent-resizer,
.workbench.preview-focus:not(.preview-collapsed) :is(.side-panel, #sideResizer, .editor-group, #previewResizer),
.workbench.agent-full .workspace {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity calc(var(--dur-panel) * .6) var(--ease), visibility 0s linear var(--dur-panel);
}

/* ---- resizers ---- */
.resizer { position: relative; z-index: 5; min-width: 0; cursor: col-resize; touch-action: none; background: transparent; }
.resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px; background: var(--border); transition: background var(--dur) var(--ease), left var(--dur) var(--ease), width var(--dur) var(--ease); }
.resizer:hover::before, .resizer:focus-visible::before, .resizer.dragging::before { left: 1px; width: 3px; background: var(--accent); }
.resizer:focus-visible { outline: none; }
.agent-resizer::before { left: 3px; }
.agent-resizer:hover::before, .agent-resizer:focus-visible::before, .agent-resizer.dragging::before { left: 2px; }
.agent-resizer::after {
  content: attr(data-snap); position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96);
  padding: 4px 8px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-contrast);
  font: 600 12px/1.3 var(--font-ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease), transform 120ms var(--ease);
}
.agent-resizer.snapping::after { opacity: 1; transform: translate(-50%, -50%); }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
body.resizing iframe { pointer-events: none; }

/* ---- side panel ---- */
.side-panel { display: flex; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-1); }
.side-panel > .panel-view { flex: none; width: var(--side-w); min-width: var(--side-w); }
.panel-view { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.panel-view:not(.hidden) { animation: fadeIn calc(var(--dur-panel) * .7) var(--ease); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; flex: none; padding: 0 6px 0 14px; }
.panel-head h2 { margin: 0; overflow: hidden; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.panel-actions { display: flex; flex: none; gap: 2px; }
.panel-foot { flex: none; padding: 10px; border-top: 1px solid var(--border); }
.panel-backdrop { display: none; }

/* ---- project agent ---- */
.agent-panel { display: flex; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--border); background: var(--surface-1); }
.agent-panel > .panel-view { min-width: 0; }
.agent-fab {
  position: absolute; z-index: 30; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong)); border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 22%, var(--surface-raised)), var(--surface-raised) 70%);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur-panel) var(--ease), visibility 0s;
}
.agent-fab .icon { width: 19px; height: 19px; stroke: url(#g-magic); stroke-width: 1.7; }
.agent-fab:hover { transform: translateY(-1px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 32%, transparent); }
.workbench.agent-open .agent-fab { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.9); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s var(--dur); }

/* ---- new site builder (its chat surface is styled in ai-chat.css, shared with the project agent) ---- */
.build-screen { overflow: auto; background: radial-gradient(60% 50% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg); }
.build-inner { display: flex; flex-direction: column; min-height: 100%; padding: 16px 16px 24px; }
.build-back { align-self: flex-start; }
.build-surface { display: flex; flex: 1; min-height: 0; padding-bottom: 8vh; }

/* ---- file tree ---- */
.tree { flex: 1; min-height: 0; overflow: auto; padding: 2px 0 16px; font-size: var(--text-sm); }
.tree [role="group"] { margin: 0; padding: 0; }
.tree-row {
  display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 8px 0 calc(6px + var(--level, 0) * 14px);
  color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap;
}
.tree-row:hover { background: var(--surface-2); color: var(--text); }
[role="treeitem"]:focus { outline: none; }
[role="treeitem"]:focus-visible > .tree-row { outline: 1px solid var(--focus); outline-offset: -1px; }
[role="treeitem"][aria-selected="true"] > .tree-row { background: var(--surface-3); color: var(--text); }
.tree-chevron { width: 12px; height: 12px; flex: none; color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] > .tree-row .tree-chevron { transform: rotate(90deg); }
.tree-spacer { width: 12px; flex: none; }
.tree-row .icon { width: 15px; height: 15px; color: var(--text-subtle); }
.tree-row .tree-folder-icon { color: var(--text-muted); }
.tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-note { margin-left: auto; padding-left: 8px; color: var(--text-subtle); font-size: 12px; }
.tree-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; height: 18px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.tree-badge.missing { background: var(--warning-soft); color: var(--warning); }
.tree-badge.unused { background: var(--surface-3); color: var(--text-muted); }
.tree-badge .icon { width: 12px; height: 12px; color: currentColor; }
.tree-cloud { display: inline-flex; align-items: center; margin-left: auto; padding-left: 6px; color: var(--text-subtle); }
.tree-badge + .tree-cloud, .tree-note + .tree-cloud { margin-left: 0; }
.tree-cloud .icon { width: 12px; height: 12px; }
.tree-cloud.saved { opacity: .55; }
.tree-cloud.failed { color: var(--danger); }
.tree-cloud.uploading .icon, .tree-cloud.downloading .icon { color: var(--accent); }
.tree-cloud.uploading .icon { animation: cloudSpin 1.2s linear infinite; }
@keyframes cloudSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tree-cloud.uploading .icon { animation: none; } }
:root[data-motion="reduce"] .tree-cloud.uploading .icon { animation: none; }
.tree-row.is-missing .tree-label { color: var(--warning); }
.tree-empty { padding: 4px 8px 4px calc(26px + var(--level, 0) * 14px); color: var(--text-subtle); font-size: 12px; font-style: italic; }
.tree [role="group"][hidden] { display: none; }

/* ---- projects list ---- */
.project-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px; }
.project-item { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; border-radius: var(--radius-sm); }
.project-item:hover, .project-item.active { background: var(--surface-2); }
.project-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.project-open { flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px; text-align: left; border-radius: var(--radius-sm); }
.project-open strong { display: block; overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.project-open span { display: block; color: var(--text-subtle); font-size: 12px; }
.project-item .icon-btn { opacity: .85; }
.project-item .icon-btn:hover { color: var(--danger); }
.project-empty { padding: 16px 8px; color: var(--text-muted); font-size: var(--text-sm); }

/* ---- editor group ---- */
.editor-group { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--code-bg); }
.tabs { display: flex; align-items: stretch; flex: none; height: 36px; overflow-x: auto; overflow-y: hidden; background: var(--surface-1); border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.tab-wrap { position: relative; display: flex; align-items: center; flex: none; border-right: 1px solid var(--border); color: var(--text-muted); }
.tab-wrap.active { background: var(--code-bg); color: var(--text); }
.tab-wrap.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--code-bg); }
.tab-wrap.active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.tab { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; font-size: var(--text-sm); white-space: nowrap; }
.tab-wrap.closable .tab { padding-right: 4px; }
.tab .icon { width: 14px; height: 14px; color: var(--text-subtle); }
.tab:focus-visible { outline-offset: -2px; }
.tab-readonly { color: var(--text-subtle); font-size: 12px; }
.tab-close { display: grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: var(--radius-sm); color: var(--text-subtle); }
.tab-close:hover { background: var(--surface-3); color: var(--text); }
.tab-close .icon { width: 13px; height: 13px; }
.tabpanel { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.editor-wrap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; background: var(--code-bg); }
.line-numbers, .code-editor, .viewer-code pre, .viewer-gutter { font-family: var(--font-mono); font-size: var(--editor-font-size); line-height: var(--editor-line-height); }
.line-numbers, .viewer-gutter {
  min-width: 52px; padding: 12px 12px 48px 16px; overflow: hidden; color: var(--gutter-text);
  text-align: right; white-space: pre; user-select: none; font-variant-numeric: tabular-nums;
}
.code-editor {
  display: block; width: 100%; height: 100%; margin: 0; padding: 12px 20px 48px 10px; resize: none; border: 0;
  background: transparent; color: var(--code-text); caret-color: var(--accent);
  white-space: pre; overflow: auto; tab-size: 2; -moz-tab-size: 2;
}
.code-editor:focus-visible { outline: none; }
.editor-wrap:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.completion-hint {
  position: absolute; z-index: 8; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 24px);
  padding: 3px 8px 3px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--text-muted);
  font: 500 12px/1.4 var(--font-ui); pointer-events: none; white-space: nowrap;
}
.completion-hint strong { overflow: hidden; color: var(--text); font: 600 12px/1.4 var(--font-mono); text-overflow: ellipsis; }

/* read-only viewer (build files, generated project, asset previews) */
.viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.viewer-bar { display: flex; align-items: center; gap: 8px; flex: none; min-height: 32px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.viewer-bar .icon { width: 13px; height: 13px; }
.viewer-bar .spacer { flex: 1; }
.viewer-code { display: grid; grid-template-columns: auto minmax(0, 1fr); flex: 1; min-height: 0; overflow: auto; }
.viewer-gutter { overflow: visible; }
.viewer-code pre { margin: 0; padding: 12px 20px 48px 10px; color: var(--code-text); white-space: pre; tab-size: 2; }
.viewer-code:focus-visible { outline-offset: -2px; }
.viewer-message { padding: 24px; color: var(--text-muted); font-size: var(--text-sm); }
.asset-view { display: grid; gap: 18px; align-content: start; justify-items: center; flex: 1; min-height: 0; overflow: auto; padding: 28px 20px; background: var(--surface-1); }
.asset-stage { display: grid; place-items: center; max-width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--surface-2);
  background-image: linear-gradient(45deg, var(--surface-3) 25%, transparent 25%, transparent 75%, var(--surface-3) 75%), linear-gradient(45deg, var(--surface-3) 25%, transparent 25%, transparent 75%, var(--surface-3) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.asset-stage img, .asset-stage video { display: block; max-width: min(100%, 720px); max-height: 52vh; border-radius: var(--radius-sm); }
.asset-stage .font-sample { padding: 16px 24px; font-size: 36px; line-height: 1.2; color: var(--text); background: var(--surface-1); border-radius: var(--radius); }
.asset-stage .icon { width: 44px; height: 44px; color: var(--text-subtle); }
.asset-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; width: min(560px, 100%); margin: 0; font-size: var(--text-sm); }
.asset-facts dt { color: var(--text-muted); }
.asset-facts dd { margin: 0; overflow-wrap: anywhere; }
.asset-view-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---- preview ---- */
.preview-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-1); }
.preview-head { display: flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 6px 0 8px; border-bottom: 1px solid var(--border); }
.preview-head .select { max-width: 45%; min-width: 0; }
.preview-spacer { flex: 1; }
.preview-show-code { gap: 6px; }
.preview-show-code .icon { width: 14px; height: 14px; }
.preview-stage { position: relative; display: flex; justify-content: center; flex: 1; min-height: 0; overflow: auto; background: var(--surface-2); }
.preview-device { width: 100%; height: 100%; flex: none; background: #fff; transition: width var(--dur) var(--ease); }
.preview-device[data-device="tablet"], .preview-device[data-device="phone"] { height: calc(100% - 32px); margin: 16px 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); }
.preview-device[data-device="tablet"] { width: min(768px, calc(100% - 32px)); }
.preview-device[data-device="phone"] { width: min(390px, calc(100% - 32px)); }
.preview-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.preview-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; background: var(--surface-2); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.preview-empty .icon { width: 28px; height: 28px; color: var(--text-subtle); fill: currentColor; stroke: none; }
.preview-empty p { margin: 0; }
.preview-stage.has-page .preview-empty { display: none; }
.preview-flash { animation: previewFlash 900ms var(--ease); }
@keyframes previewFlash { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 30% { box-shadow: 0 0 0 3px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- status bar ---- */
.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  height: 28px; padding: 0 6px 0 10px; border-top: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-muted); font-size: 12px;
}
.status-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.status-group:first-child { overflow: hidden; }
#statusText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#statusText[role="button"] { color: var(--danger); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; min-height: 24px; display: inline-flex; align-items: center; }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-subtle); }
.status-dot.ok { background: var(--success); }
.status-dot.busy { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.status-dot.error { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }
.status-item { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 6px; border-radius: 4px; color: var(--text-muted); white-space: nowrap; }
.status-item:hover { background: var(--surface-2); color: var(--text); }
.status-item .icon { width: 13px; height: 13px; }
.status-item.has-errors { color: var(--danger); }
.status-item.warn { color: var(--warning); }
.status-item[aria-pressed="true"] { color: var(--text); }
.status-muted { color: var(--text-subtle); }
#cursorText { white-space: nowrap; font-variant-numeric: tabular-nums; }

.compile-error {
  position: absolute; z-index: 40; left: 12px; right: 12px; bottom: 36px; max-height: min(240px, 40vh); overflow: auto;
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border)); border-radius: var(--radius);
  background: var(--surface-raised); box-shadow: var(--shadow-2); color: var(--text);
  font: 12.5px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.compile-error .error-actions { display: flex; gap: 8px; margin-top: 10px; font-family: var(--font-ui); }

/* ---- settings ---- */
.settings-screen { overflow: auto; background: var(--bg); }
.settings-inner { max-width: 720px; margin: 0 auto; padding: 24px 24px 64px; }
.settings-head { margin-bottom: 20px; }
.settings-head .btn { margin-left: -10px; }
.settings-head h1 { margin: 14px 0 4px; font-size: 22px; letter-spacing: -.02em; }
.settings-head p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.settings-section { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.settings-section h2 { margin: 0; padding: 14px 16px 10px; font-size: var(--text-md); font-weight: 600; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); }
.setting-row strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.setting-row span { display: block; color: var(--text-muted); font-size: 12px; }

/* ---- asset upload dialog ---- */
.asset-list { display: grid; gap: 10px; margin: 0; padding: 16px 20px; overflow: auto; list-style: none; }
.asset-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.asset-row.dragover { border-color: var(--accent); background: var(--accent-soft); }
.asset-row.done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.asset-row.skipped { opacity: .7; }
.asset-thumb { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-subtle); }
.asset-row.done .asset-thumb { border-style: solid; }
.asset-thumb img, .asset-thumb video { width: 100%; height: 100%; object-fit: cover; }
.asset-thumb .icon { width: 26px; height: 26px; }
.asset-info h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.kind-tag { padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.asset-info p { margin: 2px 0; color: var(--text-muted); font-size: var(--text-sm); }
.asset-info p strong { color: var(--text); font-weight: 500; }
.asset-info code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.asset-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.drop-hint { color: var(--text-subtle); font-size: 12px; }
.asset-message { margin-top: 6px !important; font-size: 12px !important; }
.asset-message.ok { color: var(--success) !important; }
.asset-message.error { color: var(--danger) !important; }
.asset-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0 !important; font-size: 12px !important; color: var(--text-muted); }
.asset-cloud[hidden] { display: none; }
.asset-cloud.saved { color: var(--success); }
.asset-cloud.failed { color: var(--danger); }
.asset-cloud .btn { height: 24px; }
.asset-view > .asset-cloud { justify-content: center; margin: 0 !important; }

/* ---- shortcuts ---- */
.shortcut-list { display: grid; gap: 0; margin: 0; padding: 8px 20px 18px; overflow: auto; }
.shortcut-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.shortcut-list div:last-child { border-bottom: 0; }
.shortcut-list dt { flex: none; color: var(--text-muted); font-size: 12px; }
.shortcut-list dd { margin: 0; font-size: var(--text-sm); text-align: right; }

/* ---- responsive: panels become overlays ---- */
@media (max-width: 1100px) {
  .workbench { --side-w: 240px; }
}
@media (max-width: 900px) {
  .workspace, .workbench.side-collapsed .workspace, .workbench.preview-collapsed .workspace, .workbench.side-collapsed.preview-collapsed .workspace { grid-template-columns: 0px 0px minmax(0, 1fr) 0px 0px; }
  .workbench, .workbench.agent-open, .workbench.agent-full { grid-template-columns: minmax(0, 1fr) 0px 0px !important; }
  .resizer { display: none !important; }
  .side-panel {
    grid-area: auto; position: absolute; z-index: 60; top: 0; bottom: 0; left: 0; width: min(360px, calc(100vw - var(--rail-w) - 16px));
    border-right: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
    transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease), visibility 0s;
  }
  .side-panel > .panel-view { width: 100%; min-width: 0; }
  .workbench.side-collapsed .side-panel { transform: translate3d(-24px, 0, 0); }
  .preview-pane { grid-area: auto; position: absolute; z-index: 55; inset: 0; }
  .agent-panel { grid-area: auto; position: absolute; z-index: 80; inset: 0; border-left: 0; }
  .workbench.agent-full .workspace { opacity: 1; visibility: visible; pointer-events: auto; }
  .panel-backdrop { position: absolute; z-index: 58; inset: 0; display: block; background: var(--scrim); animation: fadeIn var(--dur-panel) var(--ease); }
  .compile-error { left: 8px; right: 8px; }
}
@media (max-width: 640px) {
  .topbar { gap: 6px; padding: 0 4px 0 10px; }
  .topbar-start { gap: 8px; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .btn.small { width: 32px; min-width: 32px; padding: 0; }
  .topbar-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-divider, #tabModeText { display: none; }
  .statusbar { gap: 6px; }
  .setting-row { flex-direction: column; align-items: flex-start; }
  .asset-row { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; }
  .asset-thumb { width: 56px; height: 56px; }
  .variable-row { grid-template-columns: 1fr; }
  .dialog-backdrop, .variables-overlay { padding: 10px; }
}
@media (max-width: 480px) {
  .topbar .brand-mark, #connectionsButton { display: none; }
  .crumb-current { margin-left: 5px; }
  .crumb-sep { margin-right: 5px; }
  #cursorText { display: none; }
}

/* ---- soft wrap support ---- */
.code-editor.wrap { white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; }
.line-numbers > div { overflow: hidden; }
.editor-mirror { position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden; pointer-events: none; box-sizing: border-box; border: 0 solid transparent; }
.status-short { display: none; }
@media (max-width: 480px) {
  .status-short { display: inline; }
  .status-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .statusbar { padding-left: 8px; }
}

/* ---- calm motion details ---- */
.tabpanel:not(.hidden) { animation: fadeIn 140ms var(--ease); }
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
.asset-row { animation: fadeIn 180ms var(--ease) both; }
/* Phones keep the icon rail; there is no room for labels. */
@media (max-width: 640px) {
  .app-shell.rail-expanded { --rail-cur: var(--rail-w); }
  .rail-expanded .rail-label { opacity: 0; }
  #railToggle { display: none; }
}