/* Assistant — Build a mini-app: chat on the left, sandboxed preview on the right. */
.build-view { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.25fr); }
.build-chat { border-right: 1px solid var(--line); }
.build-chat .chat-bar { flex-wrap: wrap; }
#btnBuilds { max-width: 220px; }
#btnBuilds span { overflow: hidden; text-overflow: ellipsis; }
.tpl-row { display: flex; gap: 4px; margin-left: auto; }
.build-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.build-preview .chat-bar .grow { flex: 1; }
.seg { display: flex; padding: 2px; gap: 2px; border-radius: var(--radius-s); background: var(--input); border: 1px solid var(--line-2); }
.seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--faint); }
.seg button[aria-pressed="true"] { background: var(--active); color: var(--fg); }
:root[data-theme="classic"] .seg button[aria-pressed="true"] { color: #fff; }
.sandbox-note { font-size: var(--fs-s); white-space: nowrap; }
.stage { flex: 1; min-height: 0; position: relative; background: repeating-conic-gradient(var(--checker) 0 25%, var(--checker-2) 0 50%) 0 0 / 20px 20px; }
.stage > * { position: absolute; inset: 0; }
.preview { width: 100%; height: 100%; border: 0; background: #fff; }
.code-view { margin: 0; padding: 12px; overflow: auto; background: var(--input); font: 12px/1.5 var(--mono); white-space: pre; }
.build-hello .starters .btn { height: auto; padding: 10px 14px; flex-direction: column; align-items: flex-start; }
.stage .empty { background: var(--surface); }
.build-chat .md-code pre { max-height: 200px; }