/* A single reading column for setup; the actual board owns the result canvas. */
.app-layout { grid-template-columns: minmax(0,1fr); background: #060e1b; }
.app-layout > .sidebar { display: none; }
.workspace-header { padding: 18px clamp(20px,4vw,64px); min-height: 72px; }
.flow-brand { font-size: 1.8rem; font-weight: 750; letter-spacing: -.06em; text-decoration: none; color: #eaf1fc; }
.flow-projects { margin-left: auto; }
.workspace-header > [data-open-components], .workspace-crumb, .workspace-status { display: none; }
.app-layout[data-flow-stage="describe"] .flow-back { display: none; }
.app-layout .stage { padding: 48px clamp(20px,4vw,64px); }
.app-layout #describe, .app-layout #agree { max-width: 820px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.app-layout .welcome-heading h1, .app-layout .brief-masthead h1 { font-size: clamp(1.8rem,4vw,2.6rem); line-height: 1.2; letter-spacing: -.035em; }
.app-layout .welcome-heading, .app-layout .brief-masthead { margin-bottom: 28px; display: block; }
.app-layout .welcome .welcome-grid { display: block; }
.app-layout .welcome-copy, .app-layout .project-starter { max-width: none; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; }
.app-layout .welcome-lede, .app-layout .lede { max-width: 60ch; font-size: 1rem; }
.app-layout .welcome-bottom, .app-layout .studio-kicker, .app-layout .workspace-art { display: none; }
.app-layout .free-text-starter { margin: 0 0 24px; }
.app-layout #free-text-request { min-height: 130px; background: #0b1928; font-size: 1.1rem; }
.app-layout .free-text-actions { justify-content: flex-end; }
.app-layout .prompt-examples { gap: 8px; margin: 12px 0 20px; }
.app-layout #guided-entry, .app-layout #project-shelf, .app-layout .prototype-note, .app-layout .workspace-examples { border: 0; margin: 16px 0; padding: 0; background: none; }
.app-layout summary { cursor: pointer; min-height: 44px; padding: 12px 0; box-sizing: border-box; }
.app-layout .saved-project-shelf { margin-top: 12px; }
.app-layout .compact-plan { padding: 0; background: none; border: 0; margin: 0 0 20px; }
.compact-plan h2 { font-size: 1.5rem; margin: 0 0 8px; }
.compact-plan > p:first-of-type { color: #9ab5c9; font-size: .9rem; }
.compact-plan ul { padding: 0; list-style: none; margin: 20px 0; }
.compact-plan li { padding: 9px 0; font-size: 1.1rem; }
.compact-plan li::before { content: '•'; color: #7ed9ea; margin-right: 12px; }
.compact-plan li small { font-size: .8rem; color: #9ab5c9; margin-left: 8px; }
.compact-plan .plan-power-note { color: #a9bdce; font-size: .9rem; max-width: 60ch; padding: 12px 0; }
.app-layout #project-details, .app-layout .plan-details { border-top: 1px solid #29465d; border-bottom: 1px solid #29465d; margin: 20px 0; }
.app-layout .project-edit-layout { display: block; }
.app-layout .project-editor { border: 0; padding: 0; }
.app-layout .family-picker { margin: 16px 0; }
.app-layout .family-option { padding: 12px; }
.app-layout .family-option svg, .app-layout .family-option small { display: none; }
.app-layout .project-editor-actions { display: flex; justify-content: flex-end; margin: 24px 0 8px; }
.app-layout .project-secondary { display: block; border: 0; padding: 0; margin-top: 28px; }
.app-layout #project-assistant .project-assistant { padding: 0 0 20px; border: 0; background: none; }
.app-layout #project-assistant .project-assistant h2 { font-size: 1.15rem; }
.app-layout #conversation-plan section { padding: 0; margin: 0; border: 0; background: none; }
.app-layout #conversation-reply-form { margin: 20px 0; }
.app-layout .conversation-actions { justify-content: flex-end; }
.app-layout .conversation-confirm-hint { padding: 12px 16px; margin: 0 0 20px; border-left: 3px solid #73d9e6; background: #0c1b2b; color: #c4d4e6; line-height: 1.6; }
.app-layout .conversation-activity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin: 12px 0; border: 1px solid #37516d; border-radius: 12px; background: #122137; color: #dce9f8; }
.app-layout .conversation-activity[hidden] { display: none; }
.app-layout #conversation-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; color: #9db4cd; }
.app-layout .conversation-spinner { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid #36516b; border-top-color: #78dcdf; border-radius: 50%; animation: conversation-spin 1s linear infinite; }
@keyframes conversation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-layout .conversation-spinner { animation: none; } }
.app-layout .result-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,360px); gap: 24px; align-items: start; }
.app-layout .result-workspace:has(#result-assistant[hidden]) { grid-template-columns: minmax(0,1fr); }
.app-layout .result-workspace .board-shell { grid-template-columns: minmax(0,1fr); }
.app-layout .result-workspace .board-panel { margin-top: 12px; }
.app-layout #result-assistant { min-width: 0; }
.app-layout #result-assistant .project-assistant { margin: 0; }
.app-layout #result-assistant .project-assistant h2 { font-size: 1.2rem; }
@media (max-width:900px) {
  .app-layout .result-workspace { grid-template-columns: minmax(0,1fr); }
  .app-layout .workspace-header { gap: 12px; flex-wrap: wrap; }
}
@media (max-width:480px) {
  .app-layout .stage { padding: 28px 20px; }
  .workspace-header .header-help { display: none; }
  .app-layout .family-picker { grid-template-columns: 1fr; }
  .app-layout .primary { width: 100%; }
}
.app-layout #agree { padding-top: 28px; }
.app-layout #agree .brief-masthead { margin-bottom: 16px; }
.app-layout #agree .brief-masthead h1 { margin: 0 0 8px; font-size: 2rem; }
.app-layout #agree .lede { margin: 0; }
.app-layout #conversation-status { margin: 12px 0 20px; color: #a9bdce; font-size: .9rem; }
.app-layout .compact-plan { margin-bottom: 12px; }
.app-layout .compact-plan ul { margin: 12px 0; }
.app-layout .compact-plan li { padding: 6px 0; }
.app-layout .compact-plan .plan-power-note { padding: 0; margin: 12px 0; }
.app-layout .plan-details { margin: 12px 0 0; }

/* CUX-T05: quiet electronics studio. These rules style existing states only. */
.app-layout {
  --flow-surface: #111e30;
  --flow-blue: #83b8ff;
  --flow-copper: #cda983;
  background: #080f1b;
}
.app-layout .workspace-header {
  background: #0b1422; border-bottom: 1px solid #253248;
  padding-block: 14px; min-height: 78px;
}
.flow-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.flow-brand svg { width: 32px; height: 32px; }
.flow-brand svg circle { fill: none; stroke: #83b8ff; stroke-width: 7px; }
.flow-brand svg path { stroke: #0b1422; stroke-width: 4px; }
.flow-brand svg .brand-center { fill: #cda983; stroke: none; }
.app-layout .workspace-header .ghost { font-size: .87rem; padding: 9px 15px; border-radius: 8px; }
.app-layout .flow-back { color: #c7d7ec; border-color: #38516e; }
.app-layout .flow-back:hover { color: #fff; border-color: #6ea8e8; }
.app-layout .flow-back span[aria-hidden="true"] { color: #66d9ef; margin-right: 3px; }
.app-layout .quick-starts { margin-bottom: 18px; padding: 18px; border: 1px solid #29425f; border-radius: 12px; background: #0d1a2b; }
.app-layout .quick-starts > p { margin: 0 0 12px; color: #eef6ff; }
.app-layout .quick-starts > p span { display: block; margin-top: 4px; color: #9fb4cf; font-size: .92rem; font-weight: 400; }
.app-layout .flow-projects { border: 1px solid #35465d; background: #111e30; }
.app-layout .header-help summary { font-size: .87rem; color: #b5c4d6; }
.app-layout #describe { max-width: 920px; padding-top: clamp(32px,6vh,68px); }
.app-layout #agree { max-width: 860px; }
.app-layout .welcome-heading { margin-bottom: 28px; }
.idea-emblem { display: block; width: 46px; height: 46px; margin-bottom: 20px; fill: none; stroke: #cda983; stroke-width: 1.7; stroke-linecap: round; }
.app-layout .welcome-heading h1 { font-family: var(--display); font-weight: 580; font-size: clamp(1.9rem,3.5vw,2.8rem); letter-spacing: -.04em; line-height: 1.15; max-width: 21ch; }
.app-layout .welcome-lede { margin: 16px 0 0; color: #b5c4d6; line-height: 1.6; }
.app-layout .brief-masthead h1 { background: none; color: #eef3fa; -webkit-text-fill-color: currentColor; }
.app-layout .free-text-starter {
  padding: 24px; border: 1px solid #3c526d; border-radius: 20px;
  background: #111e30; box-shadow: 0 18px 48px #0003, inset 0 1px #ffffff09;
  gap: 14px; margin: 0 0 24px;
}
.app-layout .free-text-starter:focus-within { border-color: #83b8ff; }
.app-layout .free-text-label { color: #cad7e7; font-size: .85rem; font-weight: 500; }
.app-layout #free-text-request {
  background: transparent; border: 0; border-radius: 6px; padding: 8px 0;
  min-height: 116px; font: 400 1.2rem/1.6 var(--sans); box-shadow: none;
}
.app-layout #free-text-request::placeholder { color: #a2b4ca; }
.app-layout .prompt-examples { gap: 8px; margin: 0; }
.app-layout .prompt-examples button { padding: 7px 13px; min-height: 40px; font-size: .8rem; border: 1px solid #3b506b; border-radius: 8px; color: #d2deed; background: #16253a; }
.app-layout .prompt-examples button:hover { border-color: #83b8ff; background: #20344d; }
.app-layout .free-text-actions { padding-top: 14px; border-top: 1px solid #30435b; margin-top: 2px; }
.app-layout .free-text-starter > .fineprint { margin: 0; font-size: .78rem; line-height: 1.55; color: #b5c4d6; }
.app-layout .primary, .app-layout .download-row a, .app-layout .lab-start-tour {
  background: #83b8ff; color: #09172c; border: 1px solid #a8ceff;
  border-radius: 10px; box-shadow: inset 0 1px #ffffff33, 0 3px 8px #0002; font-weight: 650;
}
.app-layout .primary:hover:not(:disabled), .app-layout .download-row a:hover { background: #a8ceff; color: #09172c; }
.app-layout .primary:disabled, .app-layout .download-row a[aria-disabled=true] { background: #1b293e; color: #a4b1c6; border-color: #34445c; box-shadow: none; }
.app-layout :focus-visible { outline: 3px solid #acd1ff; outline-offset: 4px; }
.app-layout #ai-entry-status { font-size: .83rem; color: #b5c4d6; margin: 16px 0; }
.app-layout #describe details > summary { font-size: .87rem; color: #b5c4d6; }
.app-layout #describe details > summary:hover { color: #eef3fa; }
.app-layout #describe details[open] { padding-bottom: 14px; }
.app-layout .compact-plan {
  background: #111e30; border: 1px solid #34465e; border-radius: 16px;
  padding: 24px 28px; margin-block: 18px; position: relative;
}
.app-layout .compact-plan::before { content: ''; position: absolute; top: 26px; bottom: 26px; left: 0; width: 3px; background: #cda983; border-radius: 2px; }
.app-layout .compact-plan h2 { font-weight: 600; letter-spacing: -.025em; }
.app-layout .compact-plan li { padding: 9px 0; font-size: 1rem; }
.app-layout .compact-plan li::before { display: inline-block; width: 5px; height: 5px; content: ''; vertical-align: middle; border: 1px solid #cda983; border-radius: 50%; margin-right: 12px; }
.app-layout .compact-plan li small { display: inline-block; padding: 1px 7px; background: #21324a; color: #bfcfe1; border-radius: 4px; font-size: .73rem; }
.app-layout .compact-plan .plan-power-note { border-top: 1px solid #30435b; padding-top: 14px; margin-bottom: 0; font-size: .82rem; line-height: 1.6; color: #b5c4d6; }
.app-layout .conversation-actions { margin-block: 18px; gap: 12px; }
.app-layout #conversation-error { border-radius: 10px; }
.app-layout .conversation-recovery {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px;
  margin: 24px 0; padding: clamp(22px,4vw,34px); border: 1px solid #49627f;
  border-radius: 18px; background: #111e30; box-shadow: 0 18px 48px #0003;
}
.app-layout .conversation-recovery[hidden] { display: none; }
.app-layout .recovery-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #cda983; color: #f0c99f; font-weight: 700; font-size: 1.1rem;
}
.app-layout .recovery-copy .eyebrow { margin: 0 0 6px; color: #9fb4cf; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.app-layout .recovery-copy h2 { margin: 0 0 10px; font-size: clamp(1.35rem,3vw,1.75rem); letter-spacing: -.025em; }
.app-layout .recovery-copy > p { max-width: 58ch; margin: 0; color: #bdcce0; line-height: 1.6; }
.app-layout .preserved-request { margin: 22px 0; padding: 15px 18px; border-left: 3px solid #66d9ef; border-radius: 0 9px 9px 0; background: #0b1727; }
.app-layout .preserved-request span { display: block; margin-bottom: 6px; color: #93a8c2; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.app-layout .preserved-request blockquote { margin: 0; color: #eef3fa; line-height: 1.55; overflow-wrap: anywhere; }
.app-layout .recovery-details { margin: 0 0 20px; border: 0; }
.app-layout .recovery-details summary { color: #9fb4cf; font-size: .82rem; }
.app-layout .recovery-details p { margin: 4px 0 0; color: #aebed1; font-size: .82rem; }
.app-layout .recovery-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-layout #project-details, .app-layout .plan-details { border-color: #30435b; }
.app-layout #agree summary { color: #bfcfe1; font-size: .88rem; }
.app-layout #agree details[open] > summary { color: #eef3fa; margin-bottom: 12px; }
.app-layout input, .app-layout select, .app-layout textarea { border-radius: 8px; }
.app-layout .panel, .app-layout .activity-main, .app-layout .part-card { background: #111e30; border-color: #34465e; box-shadow: none; }
.app-layout .result-tabs { border: 1px solid #34465e; border-radius: 10px; background: #111e30; padding: 4px; }
.app-layout .result-tabs button { border-radius: 7px; }
.app-layout .result-tabs button[aria-selected=true] { background: #263e5c; color: #eef3fa; box-shadow: none; }
.app-layout .pcb-stage { border-color: #34465e; border-radius: 16px; overflow: hidden; }
.app-layout #result-assistant .project-assistant { background: #111e30; border: 1px solid #34465e; border-radius: 16px; padding: 22px; }
.app-layout .footer { color: #a6b9cf; border-color: #253248; }
@media (max-width:600px) {
  .app-layout .workspace-header { gap: 8px; padding: 12px 20px; }
  .flow-brand { font-size: 1.45rem; gap: 7px; }
  .flow-brand svg { width: 27px; height: 27px; }
  .app-layout .workspace-header .ghost { font-size: .78rem; padding: 8px 10px; }
  .app-layout .free-text-starter { padding: 18px; border-radius: 14px; }
  .app-layout #free-text-request { font-size: 1.05rem; min-height: 145px; }
  .app-layout .prompt-examples button { flex: 1 1 auto; }
  .app-layout .compact-plan { padding: 20px; }
  .app-layout .conversation-recovery { grid-template-columns: 1fr; }
  .app-layout .recovery-actions > button { width: 100%; }
}
@media (prefers-reduced-motion:no-preference) {
  .app-layout button { transition: background-color 140ms ease, border-color 140ms ease; }
}
.app-layout #project-run { width: auto; display: block; margin-left: auto; min-width: 210px; }
@media (max-width:480px) { .app-layout #project-run { width: 100%; min-width: 0; } }

/* CUX-T07: one obvious, accessible starting point. */
.app-layout[data-flow-stage="describe"] .main-shell {
  background:
    radial-gradient(circle at 50% 4%, #193055 0, #0d1a31 23%, transparent 48%),
    linear-gradient(180deg, #080f1b 0%, #070d17 100%);
}
.app-layout[data-flow-stage="describe"] #describe {
  max-width: 1040px;
  padding-top: clamp(28px, 4vh, 48px);
  padding-bottom: 80px;
}
.app-layout[data-flow-stage="describe"] .welcome-heading {
  position: relative;
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: center;
}
.app-layout .workspace-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #a9c7ec;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.app-layout .workspace-eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #72ddef;
  box-shadow: 0 0 16px #72ddefaa;
}
.app-layout[data-flow-stage="describe"] .idea-emblem {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  padding: 8px;
  border: 1px solid #415d82;
  border-radius: 14px;
  background: linear-gradient(145deg, #182b46, #0d192a);
  stroke: #83b8ff;
  box-shadow: 0 14px 34px #0007, inset 0 1px #ffffff12, 0 0 30px #4779b52e;
}
.app-layout[data-flow-stage="describe"] .welcome-heading h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.15rem, 4.2vw, 3.35rem);
  font-weight: 590;
  line-height: 1.05;
  letter-spacing: -.055em;
}
.app-layout[data-flow-stage="describe"] .welcome-lede {
  max-width: 650px;
  margin: 12px auto 0;
  color: #b9c8dc;
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.55;
}
.app-layout[data-flow-stage="describe"] .welcome-grid,
.app-layout[data-flow-stage="describe"] .welcome-copy,
.app-layout[data-flow-stage="describe"] .project-starter {
  width: 100%;
}
.app-layout[data-flow-stage="describe"] .project-starter {
  max-width: 900px;
  margin: 0 auto;
}
.app-layout[data-flow-stage="describe"] .free-text-starter {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid #47658a;
  border-radius: 22px;
  background: linear-gradient(145deg, #122239, #0e1b2e);
  box-shadow: 0 28px 70px #0007, inset 0 1px #ffffff10;
}
.app-layout[data-flow-stage="describe"] .free-text-starter[hidden] { display: none; }
.app-layout[data-flow-stage="describe"] .free-text-starter:focus-within {
  border-color: #83b8ff;
  box-shadow: 0 28px 70px #0007, 0 0 0 3px #83b8ff20, inset 0 1px #ffffff10;
}
.app-layout[data-flow-stage="describe"] .free-text-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: #eef5ff;
  font-size: .94rem;
  font-weight: 650;
}
.app-layout[data-flow-stage="describe"] .free-text-label small {
  color: #96acc7;
  font-size: .76rem;
  font-weight: 500;
}
.app-layout .prompt-field-shell {
  display: grid;
  gap: 8px;
  padding: 16px 18px 12px;
  border: 2px solid #526f93;
  border-radius: 13px;
  background: #081322;
  box-shadow: inset 0 2px 8px #0005;
}
.app-layout .prompt-field-shell:focus-within {
  border-color: #8fc1ff;
  box-shadow: 0 0 0 3px #8fc1ff22, inset 0 2px 8px #0005;
}
.app-layout[data-flow-stage="describe"] #free-text-request {
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: 0;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f2f7ff;
  font: 400 1.08rem/1.6 var(--sans);
  box-shadow: none;
}
.app-layout[data-flow-stage="describe"] #free-text-request::placeholder { color: #7f96b3; opacity: 1; }
.app-layout .prompt-field-hint { color: #859bb7; font-size: .75rem; line-height: 1.45; }
.app-layout[data-flow-stage="describe"] .free-text-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
}
.app-layout[data-flow-stage="describe"] #start-free-text {
  flex: 0 0 auto;
  min-width: 190px;
  min-height: 50px;
  justify-content: center;
  font-size: .95rem;
}
.app-layout[data-flow-stage="describe"] .free-text-problem { color: #ff9db3; font-size: .84rem; }
.app-layout[data-flow-stage="describe"] .free-text-starter > .fineprint {
  display: flex;
  gap: 8px;
  margin: 0;
  color: #9eb3cc;
  font-size: .78rem;
}
.app-layout[data-flow-stage="describe"] .free-text-starter > .fineprint span { color: #62d6bd; }

.app-layout[data-flow-stage="describe"] .quick-starts {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.app-layout .quick-starts-heading {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.app-layout .quick-starts-heading h2 { margin: 0; color: #dce8f8; font-size: .84rem; font-weight: 650; }
.app-layout .quick-starts-heading p { margin: 3px 0 0; color: #8298b4; font-size: .74rem; }
.app-layout .section-rule { height: 1px; background: linear-gradient(90deg, transparent, #334962); }
.app-layout .section-rule:last-child { background: linear-gradient(90deg, #334962, transparent); }
.app-layout[data-flow-stage="describe"] .prompt-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.app-layout[data-flow-stage="describe"] .quick-start-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #314862;
  border-radius: 13px;
  background: #0c1829;
  color: #dce8f7;
  text-align: left;
  box-shadow: inset 0 1px #ffffff08;
}
.app-layout[data-flow-stage="describe"] .quick-start-card:hover {
  transform: translateY(-2px);
  border-color: #668bb7;
  background: #12243a;
}
.app-layout .quick-start-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #3a6188;
  border-radius: 9px;
  background: #142a43;
  color: #75dced;
  font-size: 1rem;
}
.app-layout .quick-start-card strong,
.app-layout .quick-start-card small { display: block; }
.app-layout .quick-start-card strong { margin-bottom: 4px; color: #eef5ff; font-size: .84rem; }
.app-layout .quick-start-card small { color: #8fa5c0; font-size: .7rem; line-height: 1.35; }
.app-layout .quick-start-card > span:last-child { color: #7291b4; }
.app-layout .capability-status {
  min-height: 1.4em;
  margin: 16px 0 0 !important;
  color: #8298b4 !important;
  font-size: .74rem !important;
  text-align: center;
}
.app-layout .start-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid #263a51;
}
.app-layout[data-flow-stage="describe"] .start-options > details {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid #2d425b;
  border-radius: 12px;
  background: #0b1625;
}
.app-layout[data-flow-stage="describe"] .start-options > details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 12px 14px;
  list-style: none;
  color: #c8d6e8;
}
.app-layout[data-flow-stage="describe"] .start-options > details > summary::-webkit-details-marker { display: none; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary strong,
.app-layout[data-flow-stage="describe"] .start-options > details > summary small { display: block; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary strong { margin-bottom: 4px; font-size: .8rem; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary small { color: #8298b4; font-size: .68rem; font-weight: 400; line-height: 1.35; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary > span:last-child { color: #72ddef; font-size: 1rem; }
.app-layout[data-flow-stage="describe"] .start-options > details[open] {
  grid-column: 1 / -1;
  padding: 0 20px 20px;
}
.app-layout[data-flow-stage="describe"] .start-options > details[open] > summary { margin: 0 -20px 14px; padding-inline: 34px; border-bottom: 1px solid #2d425b; }
.app-layout[data-flow-stage="describe"] .start-options > details[open] > summary > span:last-child { transform: rotate(45deg); }
.app-layout[data-flow-stage="describe"] .reference-demo-link { margin-top: 6px; }
.app-layout[data-flow-stage="describe"] #project-shelf,
.app-layout[data-flow-stage="describe"] > .workspace-examples {
  max-width: 900px;
  margin: 14px auto;
}

@media (max-width: 760px) {
  .app-layout[data-flow-stage="describe"] #describe { padding-top: 34px; }
  .app-layout[data-flow-stage="describe"] .welcome-heading h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .app-layout[data-flow-stage="describe"] .prompt-examples,
  .app-layout .start-options { grid-template-columns: 1fr; }
  .app-layout[data-flow-stage="describe"] .start-options > details[open] { grid-column: auto; }
  .app-layout[data-flow-stage="describe"] .free-text-actions { align-items: stretch; flex-direction: column; }
  .app-layout[data-flow-stage="describe"] #start-free-text { width: 100%; }
  .app-layout[data-flow-stage="describe"] .free-text-label { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
  .app-layout[data-flow-stage="describe"] #describe { padding-inline: 16px; }
  .app-layout[data-flow-stage="describe"] .free-text-starter { padding: 18px; border-radius: 16px; }
  .app-layout .prompt-field-shell { padding: 14px; }
  .app-layout[data-flow-stage="describe"] #free-text-request { min-height: 140px; font-size: 1rem; }
  .app-layout .quick-starts-heading { grid-template-columns: 18px auto 18px; gap: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .app-layout[data-flow-stage="describe"] .quick-start-card { transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease; }
}

/* Conversational workspace: project memory at left, one clear request at center. */
.app-layout {
  grid-template-columns: 264px minmax(0, 1fr);
  background: #070d17;
}
.app-layout > .sidebar {
  display: flex;
  position: sticky;
  inset: 0 auto 0 0;
  height: 100dvh;
  padding: 18px 14px 14px;
  overflow: hidden;
  border-right: 1px solid #26364b;
  background: #091321;
  color: #dfeaf8;
}
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 8px; }
.app-layout .brand { display: inline-flex; align-items: center; gap: 10px; color: #f2f7ff; font-size: 1.35rem; font-weight: 680; letter-spacing: -.045em; text-decoration: none; }
.app-layout .brand svg { width: 29px; height: 29px; }
.sidebar-close { display: none; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: #aebed1; font-size: 1.35rem; }
.sidebar-new {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  margin: 15px 0 10px; padding: 0 13px; border: 1px solid #49637f; border-radius: 9px;
  background: #12233a; color: #f2f7ff; font-weight: 640; text-align: left;
}
.sidebar-new:hover { border-color: #83b8ff; background: #192d47; }
.sidebar-new span { color: #72ddef; font-size: 1.1rem; }
.sidebar-tools { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid #24354a; }
.sidebar-tools button, .sidebar-tools a {
  display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; color: #b9c8da; font: inherit;
  text-align: left; text-decoration: none;
}
.sidebar-tools button:hover, .sidebar-tools a:hover { background: #132238; color: #f2f7ff; }
.sidebar-tools span { width: 18px; color: #7fa3c8; text-align: center; }
.sidebar-history { min-height: 0; margin-top: 16px; overflow: auto; scrollbar-width: thin; }
.sidebar-section-title { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 8px; }
.sidebar-section-title h2 { margin: 0; color: #93a8c1; font-size: .75rem; font-weight: 620; }
.sidebar-section-title span { color: #617792; font-size: .68rem; }
.app-layout .sidebar-history .saved-projects { display: grid; gap: 3px; }
.app-layout .sidebar-history .saved-project {
  display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px;
  background: transparent; color: #dce7f5; text-align: left;
}
.app-layout .sidebar-history .saved-project:hover { background: #132238; }
.app-layout .sidebar-history .saved-project > span:last-child { display: none; }
.app-layout .sidebar-history .saved-project strong { overflow: hidden; font-size: .86rem; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.app-layout .sidebar-history .saved-project small { margin-top: 3px; color: #7388a2; font-size: .7rem; }
.app-layout .sidebar-history .project-empty { margin: 0; padding: 10px; color: #7288a2; font-size: .76rem; line-height: 1.5; }
.app-layout .sidebar-project { margin: 15px 0 5px; padding: 11px; border-color: #2e425a; background: #0d1a2a; }
.app-layout[data-flow-stage="describe"] .sidebar-project,
.app-layout[data-flow-stage="describe"] .journey { display: none; }
.app-layout .journey { min-height: 0; margin-top: 4px; overflow: auto; }
.app-layout .journey .nav-label { padding-inline: 10px; color: #7388a2; font-size: .72rem; }
.app-layout .journey button { min-height: 39px; border-radius: 8px; font-size: .82rem; }
.app-layout .sidebar-bottom { margin-top: auto; padding-top: 10px; }
.app-layout .sidebar-help { border-top: 1px solid #24354a; color: #9fb1c7; font-size: .78rem; }
.app-layout .sidebar-help p { color: #8296ae; font-size: .75rem; line-height: 1.5; }
.app-layout .local-status { color: #71869f; font-size: .7rem; }
.app-layout .mentor-note { display: none; }
.sidebar-toggle { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid #334963; border-radius: 8px; background: #101e31; color: #dce8f6; }
.sidebar-scrim { display: none; }
.app-layout .main-shell { min-width: 0; background: #070d17; }
.app-layout .workspace-header { min-height: 64px; padding: 10px 22px; border-color: #223247; background: #091321e8; backdrop-filter: blur(14px); }
.app-layout .workspace-crumb { display: flex; align-items: center; gap: 9px; color: #dce7f5; font-size: .88rem; }
.app-layout .crumb-mark { color: #72ddef; }
.app-layout .workspace-status { color: #71869f; font-size: .75rem; }
.app-layout .flow-back { margin-right: 2px; }
.app-layout .flow-brand, .app-layout .flow-projects, .app-layout .header-help { display: none; }

.app-layout[data-flow-stage="describe"] .main-shell { background: #070d17; }
.app-layout[data-flow-stage="describe"] #describe {
  display: flex; flex-direction: column; justify-content: center;
  width: min(100%, 880px); min-height: calc(100dvh - 112px); padding: 42px 28px 64px;
}
.app-layout[data-flow-stage="describe"] .welcome-heading { max-width: 660px; margin: 0 auto 24px; }
.app-layout[data-flow-stage="describe"] .workspace-eyebrow { display: none; }
.app-layout[data-flow-stage="describe"] .idea-emblem { width: 38px; height: 38px; margin-bottom: 17px; border-radius: 50%; box-shadow: none; }
.app-layout[data-flow-stage="describe"] .welcome-heading h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 560; letter-spacing: -.045em; }
.app-layout[data-flow-stage="describe"] .welcome-lede { max-width: 530px; color: #9eb1c8; font-size: .98rem; }
.app-layout[data-flow-stage="describe"] .project-starter { display: flex; flex-direction: column; max-width: 760px; }
.app-layout[data-flow-stage="describe"] .quick-starts { order: 1; margin: 0 0 20px; }
.app-layout[data-flow-stage="describe"] .quick-starts-heading { display: none; }
.app-layout[data-flow-stage="describe"] .prompt-examples { gap: 10px; }
.app-layout[data-flow-stage="describe"] .quick-start-card {
  min-height: 82px; padding: 13px 14px; border-color: #2b3d54; background: #0c1726;
}
.app-layout[data-flow-stage="describe"] .quick-start-card:hover { border-color: #6688af; background: #101f33; transform: none; }
.app-layout[data-flow-stage="describe"] .quick-start-card > span:last-child { display: none; }
.app-layout[data-flow-stage="describe"] .quick-start-card strong { font-size: .84rem; font-weight: 560; }
.app-layout[data-flow-stage="describe"] .quick-start-card small { color: #7890ab; font-size: .72rem; }
.app-layout[data-flow-stage="describe"] .free-text-starter {
  order: 2; display: grid; gap: 10px; padding: 16px 17px 14px;
  border-color: #4a6485; border-radius: 18px; background: #101d2f;
  box-shadow: 0 20px 50px #0005;
}
.app-layout[data-flow-stage="describe"] .free-text-label { font-size: .78rem; }
.app-layout[data-flow-stage="describe"] .free-text-label small { display: none; }
.app-layout .prompt-field-shell { padding: 4px 0 0; border: 0; background: transparent; box-shadow: none; }
.app-layout .prompt-field-shell:focus-within { border: 0; box-shadow: none; }
.app-layout[data-flow-stage="describe"] #free-text-request { min-height: 72px; resize: none; font-size: 1rem; line-height: 1.5; }
.app-layout .prompt-field-hint { display: none; }
.app-layout[data-flow-stage="describe"] .free-text-actions { justify-content: flex-end; }
.app-layout[data-flow-stage="describe"] #start-free-text { min-width: 148px; min-height: 43px; }
.app-layout[data-flow-stage="describe"] .free-text-starter > .fineprint { display: none; }
.app-layout[data-flow-stage="describe"] #ai-entry-status { order: 3; margin: 10px 2px 0; color: #6f849d; font-size: .72rem; text-align: center; }
.app-layout[data-flow-stage="describe"] .start-options { order: 4; display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.app-layout[data-flow-stage="describe"] .start-options > details { flex: 0 1 auto; border: 0; }
.app-layout[data-flow-stage="describe"] .start-options > details { background: transparent; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary { min-height: 36px; padding: 7px; background: transparent; color: #8fa5be; font-size: .75rem; }
.app-layout[data-flow-stage="describe"] .start-options > details > summary small,
.app-layout[data-flow-stage="describe"] .start-options > details > summary > span:last-child { display: none; }
.app-layout[data-flow-stage="describe"] .start-options > details[open] { flex-basis: 100%; padding: 16px; border: 1px solid #2f435c; border-radius: 12px; background: #0c1726; }
.app-layout[data-flow-stage="describe"] .workspace-examples,
.app-layout[data-flow-stage="describe"] .welcome-bottom { display: none; }

@media (max-width: 860px) {
  .app-layout { display: block; }
  .app-layout > .sidebar {
    position: fixed; z-index: 80; width: min(86vw, 290px); transform: translateX(-105%);
    transition: transform 180ms ease; box-shadow: 24px 0 60px #0008;
  }
  .app-layout[data-sidebar-open="true"] > .sidebar { transform: translateX(0); }
  .app-layout[data-sidebar-open="true"] > .sidebar-scrim { display: block; position: fixed; z-index: 70; inset: 0; width: 100%; height: 100%; border: 0; background: #020711b8; }
  .sidebar-close, .sidebar-toggle { display: grid; place-items: center; }
  .app-layout .workspace-header { position: sticky; top: 0; z-index: 40; padding-inline: 14px; }
  .app-layout .workspace-status { display: none; }
  .app-layout[data-flow-stage="describe"] #describe { min-height: calc(100dvh - 64px); padding: 30px 18px 48px; }
}
@media (max-width: 620px) {
  .app-layout[data-flow-stage="describe"] .prompt-examples { grid-template-columns: 1fr; }
  .app-layout[data-flow-stage="describe"] .quick-start-card { min-height: 62px; }
  .app-layout[data-flow-stage="describe"] .welcome-heading { margin-bottom: 20px; }
  .app-layout[data-flow-stage="describe"] .start-options { flex-wrap: wrap; gap: 2px 12px; }
  .app-layout[data-flow-stage="describe"] .free-text-actions { display: grid; }
  .app-layout[data-flow-stage="describe"] #start-free-text { width: 100%; }
}

/* One visual language from request through fabrication. */
.app-layout #agree { max-width: 920px; padding: 38px 32px 72px; }
.app-layout #agree .brief-masthead { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #26384e; }
.app-layout #agree .brief-masthead h1 { font-size: 1.65rem; font-weight: 560; letter-spacing: -.035em; }
.app-layout #agree .brief-masthead .lede { color: #8fa4bd; font-size: .86rem; }
.app-layout #conversation { max-width: 780px; margin-inline: auto; }
.app-layout #conversation-status { margin: 0 0 18px; color: #7890aa; font-size: .76rem; }
.app-layout #conversation-questions,
.app-layout #conversation-summary,
.app-layout #conversation-plan { max-width: 690px; }
.app-layout #conversation-summary .compact-plan,
.app-layout #conversation-plan > section {
  border: 1px solid #31465f; border-radius: 16px; background: #101d2f;
}
.app-layout #conversation-summary .compact-plan { padding: 22px 24px; }
.app-layout #conversation-plan { color: #aebed2; }
.app-layout #conversation .conversation-actions { justify-content: flex-start; padding-top: 18px; border-top: 1px solid #283b51; }
.app-layout #conversation-edit { max-width: 690px; }
.app-layout #conversation-questions h2 { margin: 0 0 12px; font-size: 1.35rem; }
.app-layout #conversation-questions p { margin: 0 0 12px; line-height: 1.6; color: #dce9f8; }
.app-layout #conversation-reply-help { margin: 6px 0; color: #9eb2ca; font-size: .8rem; }
.app-layout .conversation-draft { margin: 16px 0; }
.app-layout #conversation-summary:focus { outline: 2px solid #72ddef; outline-offset: 6px; }
.app-layout #conversation-reply-form {
  padding: 16px; border: 1px solid #405a78; border-radius: 15px; background: #101d2f;
}
.app-layout #conversation-reply-form label { margin-top: 0; color: #cbd9e8; font-size: .78rem; }
.app-layout #conversation-reply { min-height: 76px; border: 0; background: transparent; box-shadow: none; }
.app-layout #project-workbench { max-width: 860px; margin-inline: auto; }
.app-layout #project-workbench .project-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.app-layout #project-workbench .project-editor { padding: 24px; border: 1px solid #30455e; border-radius: 16px; background: #0e1b2c; }
.app-layout #project-workbench .project-secondary { margin-top: 18px; }

.app-layout #design { max-width: 980px; padding: 42px 32px 72px; }
.app-layout #design > .section-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); column-gap: 46px; align-items: end; margin-bottom: 28px; }
.app-layout #design .step-label { grid-column: 1 / -1; color: #72ddef; font-size: .72rem; letter-spacing: .08em; text-transform: none; }
.app-layout #design .section-head h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.05; }
.app-layout #design .section-head .lede { margin: 0; color: #98abc1; font-size: .9rem; }
.app-layout .activity-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.app-layout .activity-main { padding: 24px; border-color: #344a63; border-radius: 16px; background: #101d2f; }
.app-layout .activity-aside { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px; padding: 18px 22px; border: 1px solid #293d55; border-radius: 13px; background: #0c1726; }
.app-layout .activity-aside .activity-glyph { display: none; }
.app-layout .activity-aside h2 { margin: 0; font-size: 1rem; }
.app-layout .activity-aside h2 br { display: none; }
.app-layout .activity-aside p { grid-column: 1; margin: 0; color: #8499b2; font-size: .78rem; line-height: 1.55; }
.app-layout .activity-aside details { grid-column: 1; }
.app-layout .activity-aside .activity-review { grid-column: 2; grid-row: 1 / 4; align-self: center; width: auto; margin: 0; }
.app-layout .stage-list li { padding-block: 13px; }

.app-layout #review { max-width: 1440px; padding: 34px 30px 72px; }
.app-layout #review .result-head { margin-bottom: 18px; }
.app-layout #review .result-head h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.app-layout #review .step-label,
.app-layout #build .step-label { color: #72ddef; letter-spacing: .06em; text-transform: none; }
.app-layout .result-navigation { position: sticky; top: 72px; z-index: 25; padding: 7px; border: 1px solid #30445d; border-radius: 12px; background: #0a1524e8; backdrop-filter: blur(12px); }
.app-layout .result-tabs { border: 0; background: transparent; }
.app-layout .result-tabs button { font-size: .8rem; }
.app-layout .result-tabs button[aria-selected=true] { background: #1d3049; }
.app-layout .result-workspace { margin-top: 18px; }
.app-layout .pcb-stage, .app-layout .board-panel,
.app-layout #result-assistant .project-assistant { border-radius: 14px; }
.app-layout .explore, .app-layout .panel { border-radius: 14px; }

.app-layout #build { max-width: 1120px; padding: 40px 32px 80px; }
.app-layout #build .result-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.65rem); }
.app-layout #build .build-reality { border-radius: 13px; background: #0d1a2b; }
.app-layout #build .files { border-color: #3b526e; }
.app-layout .workspace-footer { display: none; }

@media (max-width: 760px) {
  .app-layout #agree, .app-layout #design, .app-layout #review, .app-layout #build { padding: 26px 18px 56px; }
  .app-layout #design > .section-head { grid-template-columns: 1fr; gap: 12px; }
  .app-layout .activity-aside { display: block; }
  .app-layout .activity-aside .activity-review { width: 100%; margin-top: 14px; }
  .app-layout .result-navigation { top: 66px; display: grid; gap: 8px; }
  .app-layout .result-tabs { overflow-x: auto; }
  .app-layout #open-build { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-layout > .sidebar { transition: none; }
}
/* Build theatre: motion is illustrative; percentages remain server-owned. */
.app-layout #design { max-width: 1200px; }
.app-layout #design > .section-head { grid-template-columns: 1fr; gap: 14px; }
.app-layout #design .section-head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.app-layout #design .activity-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0; overflow: hidden; background: #0b1726; }
.build-visual { display: flex; flex-direction: column; justify-content: center; position: relative; padding: 24px; border-right: 1px solid #2b4059; background: radial-gradient(ellipse at 50% 45%, #153448 0, #0b1829 48%, #08121f 80%); }
.build-visual-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .7rem; color: #afc6dc; }
.build-visual-toolbar button { padding: 7px 10px; font-size: .7rem; border: 1px solid #3d566e; border-radius: 7px; }
.build-visual svg { width: 100%; margin-block: auto; overflow: visible; }
.board-outline { fill: #0c2230; stroke: #386579; stroke-width: 1.5; }
.circuit-traces { fill: none; stroke: #2c6071; stroke-width: 2; stroke-linejoin: round; }
.circuit-traces .signal { stroke: #72edff; stroke-width: 3; stroke-dasharray: 24 360; filter: drop-shadow(0 0 5px #47d7ff); animation: circuit-signal 4s linear infinite; animation-delay: var(--delay); animation-play-state: paused; }
.circuit-nodes { fill: #112c39; stroke: #8ed8df; stroke-width: 2; }
.chip-shadow { fill: #07111d; stroke: #6495a6; }
.chip-face { fill: #142d40; stroke: #71e4ef; stroke-width: 1.5; filter: drop-shadow(0 0 14px #4cced840); }
.build-visual text { fill: #a5f3ff; font: 64px Georgia, serif; }
.scan-line { stroke: #b8a5ff; opacity: .35; stroke-width: 1; animation: circuit-scan 7s ease-in-out infinite; animation-play-state: paused; }
.board-sockets { fill: #0a1827; stroke: #91adc6; stroke-width: 2; }
.build-visual-caption { margin: 12px 0 0; color: #a8bbcf; font-size: .7rem; line-height: 1.6; max-width: 40ch; }
.build-status { min-width: 0; padding: 28px; }
.build-status .progress-heading { min-height: 44px; align-items: start; font-size: .95rem; }
.build-status #progress-percent { white-space: nowrap; flex-shrink: 0; font-size: 1.6rem; line-height: 1; font-weight: 500; }
.build-status .progress-track { height: 4px; background: #263b50; }
.build-status #progress-bar { background: linear-gradient(90deg, #8d9bff, #66e7ff); box-shadow: 0 0 12px #58dfff80; }
.build-status .progress-detail { font-size: .8rem; min-height: 3.2em; margin-bottom: 18px; }
.app-layout #design .stage-list li { padding: 10px 0; border: 0; gap: 10px; align-items: center; }
.app-layout #design .stage-list .what { font-size: .78rem; }
.app-layout #design .stage-list .num { width: 24px; height: 24px; font-size: .7rem; border-radius: 7px; background: #14263a; }
.app-layout #design .stage-list li.running { background: #133447; border-radius: 9px; margin-inline: -10px; padding-inline: 10px; }
.app-layout #design .stage-list li.running .num { background: #59dbff; color: #07121f; box-shadow: 0 0 16px #55d9ff35; }
#design[data-build-state="running"]:not([data-motion-paused="true"]) .signal,
#design[data-build-state="running"]:not([data-motion-paused="true"]) .scan-line { animation-play-state: running; }
#design[data-build-state="paused"] .build-visual { filter: saturate(.35); }
@keyframes circuit-signal { to { stroke-dashoffset: -384; } }
@keyframes circuit-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: .35; } 50% { transform: translateY(320px); } }

/* Both assistant instances (including prefixed result IDs) share this channel. */
.app-layout #result-assistant .project-assistant,
.app-layout #project-assistant .project-assistant { padding: 0; overflow: hidden; border: 1px solid #354c65; border-radius: 16px; background: #0b1726; }
.assistant-header { display: flex; align-items: center; gap: 10px; padding: 18px; border-bottom: 1px solid #2a3f56; background: #102033; }
.assistant-header > div { flex: 1; min-width: 0; }
.app-layout .project-assistant .assistant-header h2 { font-size: 1rem; margin: 0; }
.assistant-header p { font-size: .68rem; line-height: 1.5; color: #b1c4d9; margin: 4px 0 0; }
.assistant-header button { font-size: .7rem; padding: 8px; white-space: nowrap; }
.assistant-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid #4b7594; border-radius: 11px; background: #15304a; color: #8ee8ff; font: 24px Georgia, serif; }
.assistant-thread { position: relative; padding: 20px 18px; min-height: 230px; max-height: 400px; overflow-y: auto; scrollbar-width: thin; overflow-wrap: anywhere; }
.assistant-welcome { padding: 18px 0; }
.assistant-welcome h3 { margin-top: 16px; font-size: 1rem; }
.assistant-welcome p { font-size: .8rem; color: #bccde0; margin: 10px 0 0; }
.assistant-welcome .assistant-example { font-size: .72rem; color: #a6bdd4; padding: 12px; margin-top: 18px; border-left: 2px solid #6c9bd1; background: #122337; }
.project-assistant .assistant-composer { margin: 0 12px; padding: 12px; border: 1px solid #537591; border-radius: 13px; background: #11243a; }
.project-assistant .assistant-composer:focus-within { border-color: #85d9ff; box-shadow: 0 0 0 2px #6bd6ff25; }
.project-assistant .assistant-composer label { margin: 0 0 8px; font-size: .72rem; color: #d0e2f4; }
.project-assistant .assistant-composer textarea { display: block; box-sizing: border-box; width: 100%; min-height: 90px; max-height: 260px; resize: vertical; border: 0; padding: 2px; margin: 0; border-radius: 0; background: transparent; color: #f1f6ff; font: inherit; font-size: .85rem; line-height: 1.6; }
.project-assistant .assistant-composer textarea::placeholder { color: #a9bed4; opacity: 1; }
.project-assistant .assistant-actions { justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 0; }
.assistant-actions > span { color: #a8bfd7; font-size: .62rem; }
.project-assistant .assistant-actions button { min-height: 42px; padding: 8px 15px; font-size: .8rem; border-radius: 10px; }
.assistant-footnote { margin: 12px 18px 18px; font-size: .65rem; line-height: 1.65; color: #a9bdd3; }
.assistant-user-message { margin: 0 0 16px 24px; padding: 12px 14px; border-radius: 13px 13px 3px 13px; background: #203958; font-size: .82rem; }
.assistant-user-message > span, .assistant-speaker { display: block; font-size: .65rem; font-weight: 650; color: #94deff; margin-bottom: 7px; }
.assistant-user-message p { margin: 0; white-space: pre-wrap; }
.assistant-reply { font-size: .78rem; margin-bottom: 24px; }
.assistant-reply h3 { font-size: .9rem; }
.assistant-reply p, .assistant-reply dl { margin-bottom: 14px; }
.assistant-thread [role="status"] { font-size: .72rem; color: #b8d6ec; margin: 12px 0 0; }
.assistant-thread [role="alert"] { color: #ffd0be; padding: 12px; background: #34202a; border-radius: 9px; font-size: .78rem; }
.assistant-thread button { width: 100%; font-size: .78rem; margin-top: 12px; }
@media (max-width: 900px) {
  .app-layout #design .activity-main { grid-template-columns: 1fr; }
  .build-visual { border-right: 0; border-bottom: 1px solid #2b4059; padding: 18px; }
  .build-visual svg { max-height: 220px; }
  .build-visual-caption { max-width: none; }
  .build-status { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #design .signal, #design .scan-line { animation: none; }
  #design .scan-line { display: none; }
  #design #progress-bar { transition: none; }
  #build-motion { display: none; }
}

.assistant-parts { list-style: none; padding: 0; margin: 10px 0; }
.assistant-parts li { padding: 9px 0; border-bottom: 1px solid #263f54; }
.assistant-parts strong, .assistant-parts span { display: block; }
.assistant-parts span { font-size: .7rem; color: #b1c6da; margin-top: 3px; }

.assistant-confirmation:has(button:not([hidden])) { padding: 0 12px 12px; }
.assistant-confirmation button { width: 100%; font-size: .78rem; border-color: #83ccec; background: #163b50; }

.build-connection-status { color: var(--muted, #a8bad0); font-size: .85rem; line-height: 1.5; padding: .75rem 1rem; border-left: 3px solid #69d9e8; background: #101e30; }

.outcome-guidance { padding: 20px 24px; margin: 0 0 24px; border: 1px solid #54708a; border-left: 4px solid #72d5df; border-radius: 12px; background: #101e30; }
.outcome-guidance[hidden], .recovery-assistant[hidden] { display: none; }
.outcome-guidance h2 { font-size: 1.2rem; margin: 0 0 12px; }
.outcome-guidance p, .outcome-guidance li { line-height: 1.6; color: #c4d4e6; }
.outcome-actions, .assistant-prompts { display: flex; gap: 10px; flex-wrap: wrap; }
.assistant-prompts { padding: 12px; }
.assistant-prompts button { font-size: .8rem; white-space: normal; text-align: left; }
.recovery-assistant { max-width: 820px; margin: 24px auto; }
.assistant-records { padding-left: 18px; display: grid; gap: 12px; }
.assistant-records p { margin: 5px 0 0; }
.project-assistant .requirement-result { padding: 10px 0; }
.project-assistant .requirement-result h3 { font-size: .9rem; }
[aria-busy="true"] .assistant-thread [id$="assistant-status"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid #36516b; border-top-color: #78dcdf; border-radius: 50%; animation: conversation-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { [aria-busy="true"] .assistant-thread [id$="assistant-status"]::before { animation: none; } }