/* ── Create New Project wizard ──────────────────────────────────────
   Layered on top of projects_new.css's generic .create-form. Full-width
   page, a 4-step checkpoint stepper with progress-bar connectors,
   animated per-step panels, the route picker and the file dropzone. */

/* This page renders its own fields at full width, so the site-wide
   graph-paper overlay behind it is just noise — turn it off here only. */
body.agent-new-page .mesh-bg .grid-overlay {
  display: none;
}

/* ═══ Checkpoint stepper ═══════════════════════════════════════════ */
.stepper.wizard-stepper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  margin: var(--space-4) 0 var(--space-8);
}

.wizard-stepper .stepper-step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 96px;
  opacity: 1;                 /* override foundations' dimmed default */
  text-align: center;
}

/* Checkpoint dot */
.wizard-stepper .stepper-step-dot {
  position: relative;
  z-index: 0;                 /* local stacking context so the ::before/::after wipe layers (z-index:-1) can't escape behind other dots */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--glass-border);
  background: var(--bg-alt);
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
/* Green fill wipe — reveals left-to-right on .is-done so the dot's color
   change reads as a continuation of the connector fill sweeping into it,
   instead of a flat color-swap. Sits behind dot-num/dot-check via z-index:-1. */
.wizard-stepper .stepper-step-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: -1;
  background: var(--success-tint);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--ease-standard);
}
.wizard-stepper .stepper-step.is-done .stepper-step-dot::before {
  clip-path: inset(0 0 0 0);
}
/* Blue wipe for the arriving/active step — same idea, opposite trigger: it
   reveals once the connector animation finishes (see STEP_DONE_DELAY in
   agent_new.js), left-to-right when arriving via Next. .wipe-rtl (set by JS
   before the Back-triggered reveal) flips its hidden state to start clipped
   from the right instead, so un-filling the connector right-to-left pulls
   the blue in right-to-left too. */
.wizard-stepper .stepper-step-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: -1;
  background: var(--accent-tint-12);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--ease-standard);
}
.wizard-stepper .stepper-step.wipe-rtl .stepper-step-dot::after {
  clip-path: inset(0 0 0 100%);
}
.wizard-stepper .stepper-step.is-active .stepper-step-dot::after {
  clip-path: inset(0 0 0 0);
}
.wizard-stepper .stepper-step-dot .dot-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.wizard-stepper .stepper-step-dot .dot-check,
.wizard-stepper .stepper-step-dot .dot-cross {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

/* Current step — accent, gently enlarged */
.wizard-stepper .stepper-step.is-active .stepper-step-dot {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint-12);
  box-shadow: 0 0 0 5px var(--accent-tint-08);
  transform: scale(1.08);
}

/* Completed step — green with a check */
.wizard-stepper .stepper-step.is-done .stepper-step-dot {
  border-color: var(--success);
  background: var(--success-tint);
  color: var(--success);
}
.wizard-stepper .stepper-step.is-done .dot-num { opacity: 0; }
.wizard-stepper .stepper-step.is-done .dot-check { opacity: 1; transform: scale(1); }

/* Skipped step (e.g. no website URL) — red with a cross */
.wizard-stepper .stepper-step.is-skipped .stepper-step-dot {
  border-color: var(--danger);
  background: var(--danger-tint, rgba(248,113,113,.14));
  color: var(--danger);
}
.wizard-stepper .stepper-step.is-skipped .dot-num { opacity: 0; }
.wizard-stepper .stepper-step.is-skipped .dot-cross { opacity: 1; transform: scale(1); }

/* Titles */
.wizard-stepper .stepper-step-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-standard);
}
.wizard-stepper .stepper-step.is-active .stepper-step-title { color: var(--heading); }
.wizard-stepper .stepper-step.is-done .stepper-step-title { color: var(--success); }
.wizard-stepper .stepper-step.is-skipped .stepper-step-title { color: var(--danger); }

/* ── Connector as a progress bar ── */
.wizard-stepper .stepper-connector {
  flex: 1 1 auto;
  height: 4px;
  min-width: 24px;
  margin-top: 19px;           /* aligns the bar with the 42px dot centre */
  border-radius: 999px;
  background: var(--glass-border);
  position: relative;
  overflow: hidden;
}
.wizard-stepper .stepper-connector-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: var(--success);
  /* Deliberately slow so the progress-bar fill reads as a smooth advance. */
  transition: width 1.1s var(--ease-standard);
}
.wizard-stepper .stepper-connector.is-filled .stepper-connector-fill { width: 100%; }
.wizard-stepper .stepper-connector.is-skipped .stepper-connector-fill { background: var(--danger); }

/* ═══ Step panels — animated, no page refresh ═════════════════════ */
/* The panels share one positioned box so the *outgoing* panel can animate out
   as an absolute overlay — otherwise both panels briefly sit in normal flow
   and the container's height doubles, producing a jarring jump at the top.
   Panels/steps are flex columns (rather than block) so a short step's
   .wizard-actions bar can be pushed to the true bottom of the page via
   margin-top: auto instead of just trailing short content. */
.wizard-panels { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wizard-step { display: none; }
.wizard-step.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  animation: wzIn .32s var(--ease-standard) both;
}
.wizard-step.is-active.is-back { animation: wzInBack .32s var(--ease-standard) both; }
.wizard-step.is-leaving,
.wizard-step.is-leaving-back {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.wizard-step.is-leaving { animation: wzOut .3s var(--ease-standard) both; }
.wizard-step.is-leaving-back { animation: wzOutBack .3s var(--ease-standard) both; }

@keyframes wzIn      { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }
@keyframes wzInBack  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes wzOut     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-26px); } }
@keyframes wzOutBack { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(26px); } }

.wizard-step .form-field { margin-bottom: var(--space-5); }

/* .form-field only lays out label/input/annotation — plain text inputs and
   textareas inside it still need the same field chrome as the selects. */
.wizard-step .form-field input[type="text"],
.wizard-step .form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all .25s ease;
}
.wizard-step .form-field input[type="text"]::placeholder,
.wizard-step .form-field textarea::placeholder { color: var(--text-muted); }
.wizard-step .form-field input[type="text"]:focus,
.wizard-step .form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
  background: rgba(8,8,14,.8);
}
.wizard-step .form-field textarea { resize: vertical; min-height: 90px; }

/* ── Two-column field grid ── */
.wizard-step .wizard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-8);
  align-items: start;
}
.wizard-grid .span-2 { grid-column: 1 / -1; }

/* ═══ Step 1 — Basic Info: name grows, brand colour sits top-right ═══ */
.wz-step1-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-5);
}
.wz-step1-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}
.wz-color-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 232px;
}
.wz-color-block > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
}
.wz-color-block .color-picker { margin: 0; }

/* ── Brand Logo uploader (step 1, grouped above Brand Color) ── */
.wz-logo-block { display: flex; flex-direction: column; gap: 10px; }
.wz-logo-block > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wz-logo-block .optional {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-muted);
}
.wz-logo-upload { display: flex; align-items: center; gap: 12px; }
.wz-logo-drop {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.wz-logo-drop:hover,
.wz-logo-drop:focus-visible {
  border-color: var(--accent);
  background: var(--accent-tint-08);
  outline: none;
}
.wz-logo-drop.is-drag { border-color: var(--accent); background: var(--accent-tint-12); }
.wz-logo-drop.has-image { border-style: solid; }
.wz-logo-empty { display: grid; place-items: center; color: var(--text-muted); pointer-events: none; }
.wz-logo-empty[hidden] { display: none; }
.wz-logo-empty svg { width: 22px; height: 22px; }
.wz-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-logo-img[hidden] { display: none; }
.wz-logo-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wz-logo-actions { display: flex; gap: 8px; }
.wz-logo-upload-btn,
.wz-logo-remove-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.wz-logo-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.wz-logo-remove-btn { color: var(--text-muted); }
.wz-logo-remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.wz-logo-hint { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.wz-color-divider { height: 1px; background: var(--glass-border); opacity: .55; margin: 2px 0; }

/* Step 4 has two mutually-exclusive sub-views (URL prompt / route picker),
   each carrying its own .wizard-actions bar — each needs to be a flex column
   filling the step's height so that bar's margin-top:auto reaches the true
   bottom of the page, same as the top-level steps. */
.wz-web-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wz-web-mode[hidden] { display: none; }

/* ═══ Step 3 — Website Info / route picker ═══════════════════════ */
.wz-section-intro { margin-bottom: var(--space-5); }
.wz-section-intro .form-title { margin-bottom: 4px; }

.wz-route-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.wz-route-add { flex: 1 1 320px; margin: 0; }
.wz-route-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
}
.wz-route-count #route-count-num { color: var(--accent); }
.wz-route-count .wz-route-min { color: var(--text-muted); font-weight: 500; }

.wz-route-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: var(--space-2);
}
.wz-route-loading,
.wz-route-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  color: var(--text-muted);
  font-size: 13px;
}
.wz-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  border-top-color: var(--accent);
  animation: wzSpin .7s linear infinite;
}
@keyframes wzSpin { to { transform: rotate(360deg); } }

.wz-route {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.wz-route:hover { border-color: var(--accent-tint-30, rgba(96,165,250,.4)); }
.wz-route.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint-08);
}
.wz-route input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
  cursor: pointer;
}
.wz-route-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--text);
}
.wz-route-del {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.wz-route-del:hover { color: var(--danger); }

/* ═══ Step 4 — file dropzone ═══════════════════════════════════════ */
.wz-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.wz-dropzone:hover,
.wz-dropzone.is-drag {
  border-color: var(--accent);
  background: var(--accent-tint-08);
}
.wz-dropzone svg { width: 24px; height: 24px; color: var(--accent); }
.wz-dropzone span { font-size: 13.5px; font-weight: 600; color: var(--heading); }
.wz-dropzone small { font-size: 11.5px; }

.wz-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wz-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg);
  font-size: 12.5px;
}
.wz-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.wz-file-size { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* ═══ Step actions — pinned to the bottom of the page ═══════════════ */
/* Drop the scroll container's own bottom padding so the sticky bar sits flush
   against the viewport bottom instead of floating above a gap. */
body.agent-new-page .anp-main { padding-bottom: 0; }

.wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  /* auto pushes the bar to the bottom of the flex-column step even when the
     step's own fields are shorter than the viewport; sticky then keeps it
     pinned there once the step's content grows past the viewport. */
  margin-top: auto;
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--glass-border);
  /* Frosted glass, not flat — content scrolls visibly (softened) under it. */
  background: rgba(8, 8, 14, .72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Leaving panels lose their flex-column layout (display:block, see
   .wizard-step.is-leaving) so margin-top:auto no longer pins their actions
   bar to the bottom — sticky would then latch onto whatever short static
   position that leaves it at, flashing a second bar above the real one
   during the ~300ms cross-fade. Drop it out of the sticky/bottom race
   entirely since it's already fading out. */
.wizard-step.is-leaving .wizard-actions,
.wizard-step.is-leaving-back .wizard-actions {
  position: static;
}
/* The wizard's Next / Create buttons live in .wizard-actions, not in
   .create-form, so the .create-form .btn-create rule never reaches them —
   give them the full gradient button chrome here. */
.wizard-actions .btn-create {
  width: auto;
  min-width: 180px;
  margin-top: 0;
  padding: 13px 28px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  /* Gradient at reduced opacity over a blur, not a flat solid fill, so it
     reads as glass tinted with the brand colors rather than a plain button. */
  background: var(--gradient-1);
  opacity: .92;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wizard-actions .btn-create:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(96,165,250,.3);
  opacity: 1;
}
.wizard-actions .btn-create[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.wizard-actions .btn-secondary {
  width: auto;
  margin-right: auto;
  background: rgba(96,165,250,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Step 3 keeps Back on the far left, Skip + Next together on the right. */
.wz-actions-3 { justify-content: space-between; }
.wz-actions-right { display: flex; align-items: center; gap: 14px; }
.wz-skip-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px;
}
.wz-skip-link:hover { color: var(--text); }

/* ═══ Step 3 — Target Users checklist ══════════════════════════════ */
.wz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.wz-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  user-select: none;
}
.wz-chip:hover { border-color: var(--accent); background: var(--surface); }
.wz-chip.selected {
  border-color: var(--accent);
  background: var(--accent-tint-12);
  color: var(--accent);
}
.wz-chip .wz-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s ease;
  font-size: 11px;
  color: transparent;
}
.wz-chip.selected .wz-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.wz-chip.disabled { opacity: .4; cursor: not-allowed; }
.wz-chip.disabled:hover { border-color: var(--glass-border); background: var(--bg); }
.wz-chip-limit { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.wz-chips.wz-chips-invalid {
  outline: 1.5px solid var(--danger);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Step 4 — URL correction error line (404 / unreachable) */
.wz-url-error {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
}

@media (max-width: 820px) {
  .wizard-step .wizard-grid,
  .wz-route-list { grid-template-columns: 1fr; }
  .wz-step1-top { grid-template-columns: 1fr; }
  .wz-step1-names { grid-template-columns: 1fr; }
  .wz-color-block { min-width: 0; }
  .wizard-stepper .stepper-step-title { font-size: 11px; }
  .wizard-stepper .stepper-step { width: 64px; }
}

@media (max-width: 480px) {
  .wizard-actions { flex-wrap: wrap; }
  .wizard-actions .btn-create { width: 100%; }
}

/* ═══ Full-page Website Info generation screen ═════════════════════ */
.wz-gen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: wzGenIn .4s var(--ease-standard) both;
}
.wz-gen[hidden] { display: none; }
@keyframes wzGenIn { from { opacity: 0; } to { opacity: 1; } }

/* Top: status line (blinking dot + text) above a thin progress bar */
.wz-gen-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 18px 26px 0;
}
.wz-gen-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--heading);
}
.wz-gen-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: wzGenBlink 1.2s ease-in-out infinite;
  transition: background .25s ease, width .25s ease, height .25s ease, box-shadow .25s ease;
}
.wz-gen-dot-check {
  width: 8px; height: 8px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}
@keyframes wzGenBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(96,165,250,.55); }
  55%      { opacity: .3; box-shadow: 0 0 0 7px rgba(96,165,250,0); }
}
.wz-gen-bar {
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--glass-border);
  overflow: hidden;
}
.wz-gen-bar-fill {
  display: block;
  height: 100%;
  width: 10%;                 /* never starts at 0 */
  border-radius: inherit;
  background: var(--gradient-1);
  transition: width .55s var(--ease-standard), background .25s ease;
}

/* Done state: solid green dot with a tick, no more blinking */
.wz-gen-topbar.is-done .wz-gen-dot {
  width: 15px; height: 15px;
  background: var(--success);
  animation: none;
  opacity: 1;
  box-shadow: none;
}
.wz-gen-topbar.is-done .wz-gen-dot-check { opacity: 1; transform: scale(1); }
.wz-gen-topbar.is-done .wz-gen-status-text { color: var(--success); }
.wz-gen-topbar.is-done .wz-gen-bar-fill { background: var(--success); }

/* Center: spinner + working copy */
.wz-gen-center {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  max-width: 460px;
}
.wz-gen-center[hidden] { display: none; }
.wz-gen-spinner {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid var(--glass-border);
  border-top-color: var(--accent);
  animation: wzSpin .8s linear infinite;
  margin-bottom: 26px;
}
.wz-gen-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 10px;
  line-height: 1.35;
}
.wz-gen-note {
  font-size: 13px;
  color: var(--text-muted);
  opacity: .7;
}

/* Done + error panels share centering */
.wz-gen-result,
.wz-gen-fail {
  margin: auto;
  width: 100%;
  padding: 78px 24px 34px;
  display: flex;
  flex-direction: column;
}
.wz-gen-result[hidden],
.wz-gen-fail[hidden] { display: none; }

.wz-gen-result-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 118px);
}
.wz-gen-result-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.wz-gen-check {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success-tint);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.wz-gen-check svg { width: 22px; height: 22px; }
.wz-gen-result-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--heading);
}
.wz-gen-result-head p { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }

/* Rendered generated markdown (headings + paragraphs — never raw) */
.wz-gen-doc {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-alt);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.wz-gen-doc h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--heading);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--glass-border);
}
.wz-gen-doc h2:first-child { margin-top: 0; }
.wz-gen-doc h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--heading);
  margin: 16px 0 6px;
}
.wz-gen-doc p {
  font-size: 13.5px; line-height: 1.65; color: var(--text);
  margin-bottom: 10px;
}
.wz-gen-result-actions {
  display: flex; justify-content: flex-end; gap: 12px;
}
/* When the editor is mounted, drop the doc's own chrome (the editor panes carry
   their own borders) and let it fill the available space. */
.wz-gen-doc.wz-gen-doc--editor {
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
  display: flex;
}

.wz-gen-fail-inner {
  width: 100%; max-width: 520px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.wz-gen-fail-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--danger-tint, rgba(248,113,113,.14));
  color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700;
  margin-bottom: 18px;
}
.wz-gen-fail h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--heading); margin-bottom: 8px;
}
.wz-gen-fail-text {
  font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px;
}
.wz-gen-fail .wz-gen-result-actions { justify-content: center; }

/* Both panels use the gradient button chrome (unscoped .btn-create is bare). */
.wz-gen .btn-create {
  width: auto;
  min-width: 160px;
  padding: 13px 28px;
  border: none;
  border-radius: 12px;
  background: var(--gradient-1);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wz-gen .btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(96,165,250,.3);
}
.wz-gen .btn-secondary { width: auto; }