/* Project creation entry: the source-and-name dialog and its Review goal step share one surface, type and tile language. */
#newProjectNameDialog[open]{position:fixed;inset:var(--workspace-topbar-height,64px) 0 0 0;width:100%;max-width:none;height:calc(100dvh - var(--workspace-topbar-height,64px));max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:auto;background:var(--ui-next-surface-muted,#f6f8fa);color:var(--ui-next-ink,#202630)}
#newProjectNameDialog::backdrop{background:transparent}
#newProjectNameDialog form{display:grid;gap:var(--ui-next-space-4,16px);width:min(700px,100%);margin:0 auto;padding:24px 24px 32px;box-sizing:border-box}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;color:var(--ui-next-muted,#596576);font-size:13px}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps li{display:flex;align-items:center;gap:8px}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps li+li::before{content:"";width:28px;height:1px;background:var(--ui-next-line,#d4dae2);margin-right:2px}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--ui-next-hover,#eef1f5);color:var(--ui-next-muted,#596576);font-size:11px;font-weight:700}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps .is-current{color:var(--ui-next-ink,#202630);font-weight:650}
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps .is-current b{background:var(--ui-next-accent,#6843b5);color:var(--ui-next-on-accent,#fff)}
#newProjectNameDialog .dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-next-space-3,12px)}
#newProjectNameDialog .dialog-head small{display:none}
#newProjectNameDialog .dialog-head h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
#newProjectNameDialog .dialog-close{width:36px;height:36px;border:0;border-radius:10px;background:var(--ui-next-surface-muted,#f6f8fa);color:var(--ui-next-muted,#596576);font-size:20px;line-height:1;cursor:pointer}
#newProjectNameDialog .dialog-close:hover{background:var(--ui-next-hover,#eef1f5);color:var(--ui-next-ink,#202630)}
#newProjectNameDialog form>label{display:grid;gap:8px;margin:0;color:var(--ui-next-ink,#202630);font-size:13px;font-weight:650;letter-spacing:0}
#newProjectNameDialog input[type="text"],#newProjectNameDialog #newProjectName{background:var(--ui-next-surface,#fff);color:var(--ui-next-ink,#202630);min-height:44px;padding:0 14px;border:1px solid var(--ui-next-line,#d4dae2);border-radius:10px;font-size:15px;font-weight:500}
#newProjectNameDialog #newProjectName:focus-visible{border-color:var(--ui-next-accent,#6843b5);box-shadow:0 0 0 3px var(--ui-next-focus,rgba(104,67,181,.2));outline:0}
#newProjectNameDialog .creation-mode-options{margin:0;gap:var(--ui-next-space-3,12px);grid-template-columns:repeat(2,minmax(0,1fr))}
#newProjectNameDialog .creation-mode-options legend{margin-bottom:var(--ui-next-space-2,8px);color:var(--ui-next-ink,#202630);font-size:13px;font-weight:650;letter-spacing:0}
#newProjectNameDialog .creation-mode-options label{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;min-height:0;padding:16px 44px 16px 16px;border:1px solid var(--ui-next-line,#d4dae2);border-radius:12px;background:var(--ui-next-surface,#fff);cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
#newProjectNameDialog .creation-mode-options label::before{content:"";width:36px;height:36px;border-radius:10px;background:var(--ui-next-surface-muted,#f6f8fa);-webkit-mask:none;mask:none}
#newProjectNameDialog .creation-mode-options label>span::before{content:none}
#newProjectNameDialog .creation-mode-options label:hover{border-color:var(--ui-next-accent,#6843b5)}
#newProjectNameDialog .creation-mode-options label:has(input:checked){border-color:var(--ui-next-accent,#6843b5);background:var(--ui-next-accent-soft,#f0ebfa);box-shadow:0 0 0 3px var(--ui-next-focus,rgba(104,67,181,.2))}
#newProjectNameDialog .creation-mode-options label:has(input:focus-visible){outline:2px solid var(--ui-next-accent,#6843b5);outline-offset:2px}
#newProjectNameDialog .creation-mode-options input{position:absolute;top:16px;right:16px;width:18px;height:18px;margin:0;padding:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;border:1.5px solid var(--ui-next-line,#d4dae2);border-radius:999px;background:var(--ui-next-surface,#fff);cursor:pointer}
#newProjectNameDialog .creation-mode-options input:checked{border:5px solid var(--ui-next-accent,#6843b5)}
#newProjectNameDialog .creation-mode-options strong{font-size:15px;font-weight:650;color:var(--ui-next-ink,#202630)}
#newProjectNameDialog .creation-mode-options small{font-size:13px;line-height:1.5;color:var(--ui-next-muted,#596576);font-weight:400}
#newProjectNameDialog .creation-mode-options label[data-guided-project-entry]::after{content:"";position:absolute;left:16px;top:16px;width:36px;height:36px;background-color:var(--ui-next-muted,#596576);-webkit-mask:var(--entry-icon) center/18px 18px no-repeat;mask:var(--entry-icon) center/18px 18px no-repeat}
#newProjectNameDialog .creation-mode-options label:has(input:checked)::after{background-color:var(--ui-next-accent,#6843b5)}
#newProjectNameDialog .creation-mode-options label[data-guided-project-entry="goal"]{--entry-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
#newProjectNameDialog .creation-mode-options label[data-guided-project-entry="repository"]{--entry-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Cpath d='M6 7v10M18 10c0 4-6 3-11 7'/%3E%3C/svg%3E")}
#newProjectNameDialog .entry-goal-field[hidden]{display:none}
#newProjectNameDialog .entry-goal-field textarea{min-height:96px;padding:12px 14px;border:1px solid var(--ui-next-line,#d4dae2);border-radius:10px;background:var(--ui-next-surface,#fff);color:var(--ui-next-ink,#202630);font:inherit;font-size:15px;font-weight:500;line-height:1.6;resize:vertical}
#newProjectNameDialog .entry-goal-field textarea:focus-visible{border-color:var(--ui-next-accent,#6843b5);box-shadow:0 0 0 3px var(--ui-next-focus,rgba(104,67,181,.2));outline:0}
#newProjectNameDialog .field-error{margin:0;min-height:0;color:var(--ui-next-danger,#b42d36);font-size:13px}
#newProjectNameDialog .field-error:empty{display:none}
#newProjectNameDialog .dialog-actions{margin:0;padding:var(--ui-next-space-2,8px) 0 0;border-top:0}
#newProjectNameDialog .dialog-actions .btn{min-height:40px;padding:0 20px;border-radius:10px;font-size:14px;font-weight:650}
#newProjectNameDialog .dialog-actions .btn.secondary{border-color:transparent;background:transparent;color:var(--ui-next-muted,#596576)}
#newProjectNameDialog .dialog-actions .btn.secondary:hover{background:var(--ui-next-hover,#eef1f5);color:var(--ui-next-ink,#202630)}
#newProjectNameDialog .dialog-actions .btn.primary{border-color:var(--ui-next-accent,#6843b5);background:var(--ui-next-accent,#6843b5);color:var(--ui-next-on-accent,#fff)}
#newProjectNameDialog .dialog-actions .btn.primary:hover:not(:disabled){filter:brightness(.94)}
/* Review goal step: same entry language; only the primary action is filled purple. */
:is(#newProjectNameDialog,#refineGoalStage) .entry-steps .is-done b{background:var(--ui-next-accent-soft,#f0ebfa);color:var(--ui-next-accent,#6843b5)}
#refineGoalStage .entry-steps{margin:0 0 20px}
#refineGoalStage .onboarding-head>.eyebrow{display:none}
#refineGoalStage .goal-summary{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;padding:12px 14px;border:1px solid var(--ui-next-line,#d4dae2);border-radius:10px;background:var(--ui-next-surface,#fff)}
#refineGoalStage .goal-summary p{flex:1;min-width:0;margin:0;color:var(--ui-next-ink,#202630);font-size:14px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
#refineGoalStage .goal-summary p:empty,#refineGoalStage .goal-summary:has(p:empty){display:none}
#refineGoalStage .goal-summary .link-btn{flex-shrink:0;padding:0;font-size:13px;line-height:1.7}
#refineGoalStage .goal-summary-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
#refineGoalStage .goal-summary.is-expanded p{display:block;-webkit-line-clamp:unset;overflow:visible}
#refineGoalStage .goal-option-grid{grid-template-columns:minmax(0,1fr);gap:8px}
#refineGoalStage .goal-option-card{flex-wrap:nowrap;align-items:center;gap:14px;padding:14px 16px;border-color:var(--ui-next-line,#d4dae2);background:var(--ui-next-surface,#fff);color:var(--ui-next-ink,#202630);transition:border-color .15s,background-color .15s}
@media(hover:hover){#refineGoalStage .goal-option-card:hover:not(:disabled){border-color:var(--ui-next-accent,#6843b5);background:var(--ui-next-accent-soft,#f0ebfa)}}
#refineGoalStage .goal-option-card .goal-option-copy{flex:1 1 auto;flex-basis:auto;gap:4px}
#refineGoalStage .goal-option-card .goal-option-arrow{display:block;flex-shrink:0;color:var(--ui-next-accent,#6843b5);font-size:16px}
#refineGoalStage .goal-option-icon{box-sizing:border-box;width:36px;height:36px;padding:6px;border-radius:10px;background:var(--ui-next-surface-muted,#f6f8fa)}
#refineGoalStage .onboarding-ask{width:100%;margin-inline:0;padding:12px 14px;border-color:var(--ui-next-line,#d4dae2);border-radius:12px;background:var(--ui-next-surface,#fff)}
#refineGoalStage .onboarding-ask.rainbow-active{border-color:transparent}
#refineGoalStage .onboarding-ask:focus-within{border-color:var(--ui-next-accent,#6843b5);box-shadow:0 0 0 1px var(--ui-next-accent,#6843b5)}
/* While typing, the rainbow ring replaces the focus ring and sits exactly on it (border plus 1px), so no second outline floats outside. */
#refineGoalStage .onboarding-ask::before{inset:-1px;border-radius:13px;padding:2px;filter:none}
#refineGoalStage .onboarding-ask.rainbow-active,#refineGoalStage .onboarding-ask.rainbow-active:focus-within{border-color:transparent;box-shadow:none}
#refineGoalStage .onboarding-ask textarea{min-height:56px;color:var(--ui-next-ink,#202630);font-size:14px}
#refineGoalStage .onboarding-ask-actions{border-top:0;padding-top:4px}
#refineGoalStage .onboarding-ask-actions small{color:var(--ui-next-muted,#596576);font-size:12px}
#refineGoalStage .goal-option-custom{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border:1px dashed var(--ui-next-line,#d4dae2);border-radius:12px;background:var(--ui-next-surface,#fff)}
#refineGoalStage .goal-option-custom:focus-within{border-style:solid;border-color:var(--ui-next-accent,#6843b5);box-shadow:0 0 0 1px var(--ui-next-accent,#6843b5)}
#refineGoalStage .goal-option-custom-mark{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--ui-next-surface-muted,#f6f8fa);color:var(--ui-next-accent,#6843b5);font-size:16px}
#refineGoalStage .goal-option-custom input{flex:1;min-width:0;min-height:40px;border:0;outline:0;background:transparent;color:var(--ui-next-ink,#202630);font:inherit;font-size:14px}
#refineGoalStage .goal-option-custom input:focus-visible{outline:0;box-shadow:none}
#refineGoalStage .goal-option-custom input::placeholder{color:var(--ui-next-muted,#596576)}
#refineGoalStage .goal-option-custom .btn{flex-shrink:0;min-height:40px}
#refineGoalStage .goal-agent-reply{margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--ui-next-accent,#6843b5);border-radius:0 10px 10px 0;background:var(--ui-next-surface-muted,#f6f8fa);color:var(--ui-next-ink,#202630)}
#refineGoalStage .goal-agent-reply small{color:var(--ui-next-muted,#596576);font-size:12px;font-weight:700}
#refineGoalStage .goal-agent-reply p{margin:4px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
#refineGoalStage .goal-choice-message>div{display:flex;align-items:center;gap:10px;margin-top:6px}
#refineGoalStage .goal-choice-message p{margin:0}
#refineGoalStage .goal-choice-message-icon{flex-shrink:0;width:28px;height:28px;padding:5px;box-sizing:border-box;border-radius:8px;background:var(--ui-next-surface,#fff)}
/* One screen: the question, its three cards, the own-answer field, the chat box and
   Generate all fit a 1366x768 window without scrolling. The title shares a row with
   the steps, the Goal clamps to two lines, and the actions sit in one footer row. */
#emptyState:has(>#refineGoalStage:not(.hidden)){padding-top:16px;padding-bottom:16px}
#emptyState>#refineGoalStage{max-width:880px}
#refineGoalStage .onboarding-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;max-width:none;margin:0 0 12px}
#refineGoalStage .onboarding-head .entry-steps{grid-column:2;grid-row:1;margin:0}
#refineGoalStage .onboarding-head h2{grid-column:1;grid-row:1;margin:0;font-size:24px;line-height:1.25;letter-spacing:-.01em;white-space:nowrap}
#refineGoalStage .onboarding-head>p{grid-column:1/-1;margin:4px 0 0;font-size:13px}
#refineGoalStage .goal-summary{grid-column:1/-1;align-items:center;margin:8px 0 0;padding:8px 14px}
#refineGoalStage .goal-summary p{-webkit-line-clamp:2;line-height:1.55}
#refineGoalStage .goal-summary-actions{flex-direction:row;align-items:center;gap:14px}
#refineGoalStage .goal-draft-panel{padding:14px 20px}
#refineGoalStage .goal-generation{margin-bottom:12px}
#refineGoalStage .goal-agent-reply{margin-bottom:10px;padding:8px 12px}
#refineGoalStage .goal-question-head h3{margin:6px 0 2px;font-size:20px;line-height:1.35}
#refineGoalStage .goal-question-head p{margin:0}
#refineGoalStage .goal-ready-card h3{font-size:20px}
#refineGoalStage .goal-option-grid{margin:12px 0 0;gap:6px}
#refineGoalStage .goal-option-card{padding:8px 14px;gap:12px}
#refineGoalStage .goal-option-card .goal-option-copy{gap:2px}
#refineGoalStage .goal-option-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
#refineGoalStage .goal-option-icon{width:32px;height:32px;padding:5px;border-radius:9px}
#refineGoalStage .goal-option-custom{padding:6px 6px 6px 14px}
#refineGoalStage .goal-option-custom-mark{width:32px;height:32px;border-radius:9px}
#refineGoalStage .goal-option-custom input,#refineGoalStage .goal-option-custom .btn{min-height:36px}
/* The chat box is one row: text on the left, Send on the right, the hint underneath. */
#refineGoalStage .goal-draft-panel>.onboarding-ask{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;row-gap:2px;margin-top:10px;padding:8px 8px 6px 14px}
#refineGoalStage .onboarding-ask>label.sr-only{position:absolute}
#refineGoalStage .onboarding-ask textarea{grid-column:1;grid-row:1;min-height:40px;padding:8px 0;resize:none;field-sizing:content;max-height:160px}
#refineGoalStage .onboarding-ask-actions{display:contents}
#refineGoalStage .onboarding-ask-actions small{grid-column:1;grid-row:2}
#refineGoalStage .onboarding-ask-actions .btn{grid-column:2;grid-row:1;min-height:36px}
#refineGoalStage .goal-footer{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 12px;margin-top:12px}
#refineGoalStage .goal-footer>.goal-secondary{order:0;margin:0 auto 0 0;padding:0;border:0}
#refineGoalStage .goal-footer>.goal-secondary>summary{padding:6px 0;font-size:13px}
#refineGoalStage .goal-footer>.goal-secondary[open]{order:3;flex:1 1 100%;margin:4px 0 0;padding-top:8px;border-top:1px solid var(--ui-next-line,#d4dae2)}
#refineGoalStage .goal-footer>#goalOptionalActions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
#refineGoalStage .goal-footer>#goalOptionalActions:empty{display:none}
#refineGoalStage .goal-footer>#goalOptionalActions>p{flex:1 1 100%;margin:0;text-align:right}
#refineGoalStage .goal-footer .goal-assist{display:flex;align-items:center;gap:10px;margin:0}
#refineGoalStage .goal-footer .goal-assist-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#refineGoalStage .goal-footer .goal-assist-note{order:-1;margin:0;font-size:12px}
#refineGoalStage .goal-footer .goal-ready-actions{margin:0}
#refineGoalStage .goal-footer .goal-assist-btn{min-height:40px;padding:0 14px}
#refineGoalStage .goal-footer>.goal-use{width:auto;min-width:180px;min-height:40px;margin:0;padding:0 22px}
/* The architecture language is project metadata, so it sits on the project name's line. */
#refineGoalStage .onboarding-head>p .architecture-language-field{display:inline-flex;margin:0 0 0 14px;padding-left:14px;border-left:1px solid var(--ui-next-line,#d4dae2);font-size:13px;vertical-align:middle}
#refineGoalStage .onboarding-head>p .architecture-language-field select{min-height:28px;padding:2px 8px}
@media(max-width:760px){
  #newProjectNameDialog form{padding:24px 16px 40px}
  #newProjectNameDialog .dialog-head h3{font-size:22px}
  #newProjectNameDialog .creation-mode-options{grid-template-columns:minmax(0,1fr)}
  :is(#newProjectNameDialog,#refineGoalStage) .entry-steps{gap:6px;font-size:12px}
  :is(#newProjectNameDialog,#refineGoalStage) .entry-steps li+li::before{width:12px}
  #refineGoalStage .goal-draft-panel{padding:16px}
  #refineGoalStage .goal-option-custom{gap:10px;padding-left:12px}
  #refineGoalStage .goal-option-custom-mark{display:none}
  #refineGoalStage .onboarding-head{grid-template-columns:minmax(0,1fr)}
  #refineGoalStage .onboarding-head .entry-steps{grid-column:1;grid-row:1;margin:0 0 12px}
  #refineGoalStage .onboarding-head h2{grid-row:2;font-size:21px;white-space:normal}
  #refineGoalStage .onboarding-head>p .architecture-language-field{display:flex;margin:6px 0 0;padding-left:0;border-left:0}
  #refineGoalStage .goal-footer{flex-direction:column;align-items:stretch}
  #refineGoalStage .goal-footer>.goal-use{order:-2;width:100%}
  #refineGoalStage .goal-footer>#goalOptionalActions{order:-1;justify-content:flex-start}
  #refineGoalStage .goal-footer>#goalOptionalActions>p{text-align:left}
  #refineGoalStage .goal-footer>.goal-secondary,#refineGoalStage .goal-footer>.goal-secondary[open]{order:0;margin:0}
}
@media(max-width:480px){:is(#newProjectNameDialog,#refineGoalStage) .entry-steps li:not(.is-current) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){#newProjectNameDialog .creation-mode-options label,#refineGoalStage .goal-option-card{transition:none}}

/* Goal question: the old question stays while an update runs, then cross-fades into the new one. */
#refineGoalStage .goal-next-question-panel{position:relative}
#refineGoalStage .goal-next-question-panel.is-morphing{overflow:clip;overflow-clip-margin:6px}
#refineGoalStage .goal-next-question-panel.is-updating::after{content:attr(data-updating-label);position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--ui-next-accent-soft,#f0ebfa);color:var(--ui-next-accent,#6843b5);font-size:12px;font-weight:700;pointer-events:none;animation:goal-updating-in .2s ease-out both}
#refineGoalStage .goal-next-question-panel.is-updating .goal-question-head,#refineGoalStage .goal-next-question-panel.is-updating .goal-agent-reply{animation:goal-updating-pulse 1.4s ease-in-out infinite}
@keyframes goal-updating-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes goal-updating-pulse{50%{opacity:.62}}
@media(prefers-reduced-motion:reduce){#refineGoalStage .goal-next-question-panel.is-updating .goal-question-head,#refineGoalStage .goal-next-question-panel.is-updating .goal-agent-reply,#refineGoalStage .goal-next-question-panel.is-updating::after{animation:none}}
@media(max-width:700px){#refineGoalStage .goal-next-question-panel.is-updating::after{top:-15px}}