.flow-shell {
  --flow-topbar: 62px;
  --flow-left: 304px;
  --flow-right: 410px;
  position: fixed;
  inset: 0;
  z-index: 70;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: oklch(0.105 0.005 150);
  color: var(--ink);
}

.flow-shell[hidden] {
  display: none;
}

.flow-shell button,
.flow-shell input,
.flow-shell select,
.flow-shell textarea {
  font-family: inherit;
}

.flow-topbar {
  height: var(--flow-topbar);
  flex: 0 0 var(--flow-topbar);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: oklch(0.145 0.007 150);
}

.flow-topbar-start,
.flow-topbar-actions,
.flow-preview-actions,
.flow-button,
.flow-icon-button,
.flow-close,
.flow-save-state,
.flow-demo-badge {
  display: flex;
  align-items: center;
}

.flow-topbar-start {
  min-width: 0;
  gap: 10px;
}

.flow-close,
.flow-icon-button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  text-decoration: none;
}

.flow-close:hover,
.flow-icon-button:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.flow-mode-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.flow-mode-mark svg {
  width: 17px;
  height: 17px;
}

.flow-project-name {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flow-project-name strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-project-name small {
  color: var(--muted);
  font-size: 10px;
}

.flow-save-state {
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.flow-save-state i,
.flow-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-steps li {
  position: relative;
  min-width: 112px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 11px;
}

.flow-steps li:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  margin: 0 10px;
  background: var(--line);
}

.flow-steps li span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: inherit;
  font-size: 10px;
}

.flow-steps li span svg {
  width: 13px;
  height: 13px;
}

.flow-steps li b {
  white-space: nowrap;
}

.flow-steps li.done {
  color: var(--ink-soft);
}

.flow-steps li.done span {
  border-color: var(--primary-soft);
  background: var(--primary-soft);
  color: var(--primary);
}

.flow-steps li.active {
  color: var(--ink);
}

.flow-steps li.active span {
  border-color: var(--primary);
  background: var(--primary);
  color: oklch(0.12 0.02 145);
  font-weight: 800;
}

.flow-topbar-actions {
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}

.flow-demo-badge {
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--ink-soft);
  font-size: 10px;
}

.flow-button {
  min-height: 36px;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  transition: background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.flow-button svg {
  width: 15px;
  height: 15px;
}

.flow-button.ghost {
  background: var(--surface-hover);
  color: var(--ink-soft);
}

.flow-button.ghost:hover {
  background: var(--surface-active);
  color: var(--ink);
}

.flow-button.primary {
  background: var(--primary);
  color: oklch(0.12 0.025 145);
}

.flow-button.primary:hover {
  background: oklch(0.73 0.16 145);
}

.flow-button:active {
  transform: translateY(1px);
}

.flow-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.flow-mobile-segments,
.flow-mobile-inspector {
  display: none;
}

.flow-workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: var(--flow-left) minmax(380px, 1fr) var(--flow-right);
  overflow: hidden;
}

.flow-segments,
.flow-inspector,
.flow-preview {
  min-width: 0;
  min-height: 0;
}

.flow-segments {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: oklch(0.135 0.006 150);
}

.flow-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 14px 11px;
}

.flow-panel-heading h1,
.flow-preview-heading h2,
.flow-history h3 {
  margin: 0;
  color: var(--ink);
}

.flow-panel-heading h1 {
  font-size: 14px;
}

.flow-panel-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.flow-progress {
  height: 3px;
  margin: 0 14px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-hover);
}

.flow-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 220ms ease-out;
}

.flow-segment-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 0 8px 12px;
}

.flow-segment {
  width: 100%;
  min-height: 80px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}

.flow-segment:hover {
  background: var(--panel);
}

.flow-segment.active {
  border-color: var(--line-strong);
  background: var(--panel-raised);
}

.flow-segment > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.flow-segment strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-segment small {
  color: var(--muted);
  font-size: 9px;
}

.flow-segment em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--faint);
  font-size: 9px;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.flow-segment > svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.flow-segment > b {
  color: var(--faint);
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.flow-segment-thumb,
.flow-reference > span,
.flow-history-list button > span {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 32%, var(--scene-glow, oklch(0.68 0.08 220)) 0 6%, transparent 28%),
    linear-gradient(145deg, var(--scene-a, oklch(0.28 0.06 230)), var(--scene-b, oklch(0.12 0.02 250)));
}

.flow-segment-thumb {
  width: 54px;
  height: 54px;
  border-radius: 7px;
}

.flow-segment-thumb::before,
.flow-reference > span::before,
.flow-history-list button > span::before {
  content: "";
  position: absolute;
  right: 14%;
  bottom: -18%;
  width: 30%;
  height: 72%;
  border-radius: 50% 50% 20% 20%;
  background: oklch(0.09 0.012 240 / 0.86);
  transform: rotate(-7deg);
}

.flow-segment-thumb i {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  height: 1px;
  background: oklch(0.9 0.02 220 / 0.35);
  box-shadow: 0 7px 0 oklch(0.9 0.02 220 / 0.18), 0 14px 0 oklch(0.9 0.02 220 / 0.1);
}

.scene-rain { --scene-a: oklch(0.25 0.08 235); --scene-b: oklch(0.1 0.025 255); --scene-glow: oklch(0.71 0.1 225); }
.scene-station { --scene-a: oklch(0.32 0.07 80); --scene-b: oklch(0.12 0.025 245); --scene-glow: oklch(0.82 0.1 82); }
.scene-figure { --scene-a: oklch(0.29 0.08 345); --scene-b: oklch(0.11 0.025 240); --scene-glow: oklch(0.72 0.13 340); }
.scene-clue { --scene-a: oklch(0.3 0.07 160); --scene-b: oklch(0.11 0.025 240); --scene-glow: oklch(0.77 0.11 155); }
.scene-train { --scene-a: oklch(0.3 0.09 30); --scene-b: oklch(0.1 0.03 245); --scene-glow: oklch(0.75 0.16 35); }
.scene-eye { --scene-a: oklch(0.27 0.08 20); --scene-b: oklch(0.09 0.02 250); --scene-glow: oklch(0.7 0.19 25); }
.scene-run { --scene-a: oklch(0.23 0.08 280); --scene-b: oklch(0.09 0.02 240); --scene-glow: oklch(0.7 0.14 285); }
.scene-door { --scene-a: oklch(0.27 0.085 205); --scene-b: oklch(0.085 0.018 245); --scene-glow: oklch(0.78 0.13 190); }
.scene-room { --scene-a: oklch(0.27 0.07 150); --scene-b: oklch(0.09 0.02 235); --scene-glow: oklch(0.76 0.12 150); }
.scene-signal { --scene-a: oklch(0.25 0.09 25); --scene-b: oklch(0.09 0.02 245); --scene-glow: oklch(0.72 0.2 25); }
.scene-face { --scene-a: oklch(0.29 0.075 70); --scene-b: oklch(0.1 0.02 250); --scene-glow: oklch(0.78 0.12 75); }
.scene-sky { --scene-a: oklch(0.43 0.1 235); --scene-b: oklch(0.16 0.04 255); --scene-glow: oklch(0.86 0.1 85); }

.flow-segment-footer {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.flow-segment-footer .flow-button {
  width: 100%;
  min-height: 42px;
}

.flow-preview {
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: oklch(0.09 0.004 150);
}

.flow-preview-heading {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
}

.flow-preview-heading > div:first-child {
  min-width: 0;
}

.flow-preview-heading span:first-child {
  color: var(--muted);
  font-size: 9px;
}

.flow-preview-heading h2 {
  margin-top: 4px;
  font-size: 14px;
}

.flow-preview-actions {
  gap: 8px;
}

.flow-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 9px;
  white-space: nowrap;
}

.flow-status.running {
  color: var(--amber);
  background: oklch(0.24 0.045 85);
}

.flow-status.running i {
  background: var(--amber);
}

.flow-stage-wrap {
  min-height: 430px;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 8px 20px 16px;
}

.flow-stage {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 270px);
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 64% 32%, var(--scene-glow) 0 5%, transparent 27%),
    linear-gradient(155deg, var(--scene-a), var(--scene-b) 68%);
  box-shadow: var(--shadow-1);
}

.flow-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 45%, oklch(0.04 0.01 240 / 0.82)),
    linear-gradient(100deg, oklch(0.04 0.01 240 / 0.48), transparent 42%);
}

.flow-stage-scene {
  position: absolute;
  inset: 0;
}

.flow-stage-scene span {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 42%;
  height: 70%;
  border: 2px solid oklch(0.78 0.08 200 / 0.28);
  border-bottom: 0;
  background: oklch(0.08 0.02 235 / 0.48);
  transform: perspective(380px) rotateY(-15deg);
  transform-origin: right center;
}

.flow-stage-scene i {
  position: absolute;
  right: 29%;
  bottom: 12%;
  width: 22%;
  height: 48%;
  border-radius: 45% 45% 18% 18%;
  background: oklch(0.055 0.012 240 / 0.9);
  transform: rotate(-4deg);
}

.flow-stage-scene i::before {
  content: "";
  position: absolute;
  top: -12%;
  left: 18%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(0.08 0.016 240);
}

.flow-stage-scene b {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 1px;
  background: oklch(0.9 0.03 205 / 0.28);
  box-shadow: 0 17px 0 oklch(0.9 0.03 205 / 0.14), 0 34px 0 oklch(0.9 0.03 205 / 0.08);
}

.flow-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: oklch(0.08 0.01 240 / 0.84);
  color: var(--white);
  transform: translate(-50%, -50%);
  transition: background 160ms ease-out, transform 160ms ease-out;
}

.flow-play:hover {
  background: oklch(0.12 0.02 240 / 0.94);
  transform: translate(-50%, -50%) scale(1.04);
}

.flow-play svg {
  width: 25px;
  height: 25px;
}

.flow-stage.playing .flow-play {
  opacity: 0;
}

.flow-stage-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 56px;
  display: grid;
  gap: 5px;
}

.flow-stage-copy span {
  color: oklch(0.85 0.02 210);
  font-size: 9px;
}

.flow-stage-copy strong {
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.6);
}

.flow-player-bar {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
}

.flow-player-bar button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
}

.flow-player-bar button:hover {
  background: oklch(1 0 0 / 0.12);
}

.flow-player-bar button svg {
  width: 14px;
  height: 14px;
}

.flow-player-bar > span {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.flow-timeline {
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.28);
}

.flow-timeline i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--white);
}

.flow-stage.playing .flow-timeline i {
  animation: flow-progress-play 5s linear forwards;
}

@keyframes flow-progress-play {
  to { width: 100%; }
}

.flow-history {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}

.flow-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.flow-history > header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.flow-history h3 {
  font-size: 12px;
}

.flow-history header span {
  color: var(--muted);
  font-size: 9px;
}

.flow-history header button,
.flow-shot-structure .flow-field-heading button,
.flow-prompt-meta button,
.flow-field-heading > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 9px;
}

.flow-history header button:hover,
.flow-shot-structure .flow-field-heading button:hover,
.flow-prompt-meta button:hover {
  color: var(--primary);
}

.flow-history-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.flow-history-list button {
  min-width: 128px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 8px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-soft);
  text-align: left;
}

.flow-history-list button.active {
  border-color: var(--line-strong);
  background: var(--panel-raised);
}

.flow-history-list button > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border-radius: 6px;
}

.flow-history-list strong {
  align-self: end;
  color: var(--ink);
  font-size: 9px;
}

.flow-history-list small {
  align-self: start;
  color: var(--muted);
  font-size: 8px;
}

.flow-inspector {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: oklch(0.145 0.007 150);
}

.flow-inspector-tabs {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: end;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.flow-inspector-tabs button {
  height: 39px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.flow-inspector-tabs button:hover {
  color: var(--ink-soft);
}

.flow-inspector-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--ink);
}

.flow-inspector-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 20px;
}

.flow-field-group,
.flow-shot-structure,
.flow-generation-settings {
  margin-bottom: 18px;
}

.flow-field-heading {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flow-field-heading label,
.flow-generation-settings label > span {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 650;
}

.flow-field-heading > span {
  color: var(--muted);
  font-size: 9px;
}

.flow-reference-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}

.flow-reference-add,
.flow-reference {
  width: 62px;
  flex: 0 0 62px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
}

.flow-reference-add {
  height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  cursor: pointer;
}

.flow-reference-add:hover,
.flow-reference:hover,
.flow-reference.selected {
  border-color: var(--primary);
  color: var(--ink);
}

.flow-reference-add svg {
  width: 17px;
  height: 17px;
}

.flow-reference-add span,
.flow-reference small {
  font-size: 8px;
}

.flow-reference > span {
  display: block;
  width: 100%;
  height: 54px;
  border-radius: 7px 7px 0 0;
}

.flow-reference.has-upload > span::before {
  display: none;
}

.flow-reference > span img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.flow-reference small {
  display: block;
  overflow: hidden;
  padding: 5px 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.45;
}

.flow-info svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--primary);
}

.flow-prompt-group textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: oklch(0.115 0.005 150);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.65;
}

.flow-prompt-group textarea::placeholder {
  color: var(--ink-soft);
}

.flow-prompt-group textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.flow-prompt-group.expanded {
  position: fixed;
  inset: 84px max(28px, calc((100vw - 880px) / 2));
  z-index: 75;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-2);
}

.flow-prompt-group.expanded textarea {
  min-height: 0;
  flex: 1;
}

.flow-prompt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.flow-prompt-meta > span {
  display: flex;
  gap: 4px;
}

.flow-prompt-meta button {
  min-height: 28px;
  padding: 0 6px;
}

.flow-prompt-meta button svg,
.flow-field-heading button svg {
  width: 13px;
  height: 13px;
}

.flow-prompt-meta b {
  color: var(--muted);
  font-size: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.flow-shot-structure #flowShotList {
  display: grid;
  gap: 6px;
}

.flow-shot-structure article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
}

.flow-shot-structure article > span {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--ink-soft);
  font-size: 8px;
}

.flow-shot-structure article div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flow-shot-structure article strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-shot-structure article small {
  color: var(--muted);
  font-size: 8px;
}

.flow-shot-structure article > button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
}

.flow-shot-structure article > button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.flow-shot-structure article > button svg {
  width: 13px;
  height: 13px;
}

.flow-generation-settings,
.flow-generation-settings > div {
  display: grid;
  gap: 10px;
}

.flow-generation-settings > div {
  grid-template-columns: 1fr 1fr;
}

.flow-generation-settings label {
  display: grid;
  gap: 6px;
}

.flow-generation-settings select {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  color: var(--ink);
  font-size: 10px;
}

.flow-generate-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: oklch(0.13 0.006 150);
}

.flow-generate-footer > div {
  display: grid;
  gap: 2px;
}

.flow-generate-footer > div span {
  color: var(--muted);
  font-size: 8px;
}

.flow-generate-footer > div strong {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 10px;
}

.flow-generate-footer > div svg {
  width: 12px;
  height: 12px;
  color: var(--amber);
}

.flow-generate-footer .flow-button {
  min-height: 44px;
}

.flow-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  max-width: min(360px, calc(100vw - 36px));
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 650;
  box-shadow: var(--shadow-1);
}

@media (max-width: 1320px) {
  .flow-shell { --flow-left: 258px; --flow-right: 360px; }
  .flow-topbar { grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr); gap: 10px; }
  .flow-steps li { min-width: 92px; }
  .flow-steps li:not(:last-child)::after { width: 16px; margin: 0 7px; }
  .flow-demo-badge { display: none; }
}

@media (max-width: 1080px) {
  .flow-shell { --flow-left: 238px; }
  .flow-workspace { grid-template-columns: var(--flow-left) minmax(0, 1fr); }
  .flow-inspector {
    position: fixed;
    top: var(--flow-topbar);
    right: 0;
    bottom: 0;
    z-index: 74;
    width: min(410px, 92vw);
    transform: translateX(100%);
    transition: transform 200ms ease-out;
    box-shadow: -5px 0 10px oklch(0 0 0 / 0.26);
  }
  .flow-shell.inspector-open .flow-inspector { transform: translateX(0); }
  .flow-mobile-inspector { display: flex; }
  .flow-topbar { grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr); }
  .flow-steps li b { display: none; }
  .flow-steps li { min-width: auto; }
  .flow-steps li:not(:last-child)::after { width: 22px; }
}

@media (max-width: 760px) {
  .flow-topbar { grid-template-columns: 1fr auto; }
  .flow-steps { display: none; }
  .flow-project-name small,
  .flow-save-state,
  .flow-topbar-actions > .flow-button,
  .flow-demo-badge { display: none; }
  .flow-mobile-segments,
  .flow-mobile-inspector { display: flex; }
  .flow-workspace { display: block; }
  .flow-segments {
    position: fixed;
    top: var(--flow-topbar);
    left: 0;
    bottom: 0;
    z-index: 74;
    width: min(310px, 90vw);
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    box-shadow: 5px 0 10px oklch(0 0 0 / 0.26);
  }
  .flow-shell.segments-open .flow-segments { transform: translateX(0); }
  .flow-preview { height: 100%; }
  .flow-preview-heading { padding: 10px 12px; }
  .flow-preview-actions .flow-button { display: none; }
  .flow-stage-wrap { padding-inline: 12px; }
  .flow-stage { max-height: calc(100vh - 250px); }
}

@media (max-width: 480px) {
  .flow-mode-mark { display: none; }
  .flow-project-name strong { max-width: 124px; }
  .flow-stage-wrap { min-height: 390px; }
  .flow-stage { width: min(100%, 310px); }
  .flow-history { padding-inline: 12px; }
  .flow-history > header { align-items: flex-start; }
  .flow-history > header > div { display: grid; }
  .flow-prompt-group.expanded { inset: 70px 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-shell *,
  .flow-shell *::before,
  .flow-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}