.task-progress { min-width: 0; width: 100%; }
.task-progress-caption { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin-bottom: 8px; font-size: 12px; line-height: 1.5; }
.task-progress-caption > span { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-progress-caption b { flex: none; color: var(--navigation-accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-progress-track { height: 5px; overflow: hidden; background: var(--strong); border-radius: 3px; }
.task-progress-track > i { display: block; height: 100%; background: var(--navigation-accent); transition: width 1s linear; border-radius: inherit; }
#view .workspace.is-generating { display: block; }
#view .workspace.is-generating > :not(#resultPanel) { display: none; }
#view .workspace.is-generating #resultPanel { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.generation-page { max-width: 580px; margin: 8px auto 24px; text-align: center; padding: 24px 0; }
.generation-identity { position: relative; width: 76px; height: 76px; margin: 0 auto 20px; display: grid; place-items: center; }
.generation-identity img { width: 52px; height: 52px; object-fit: contain; }
.generation-identity .spinner { position: absolute; inset: 0; width: 76px; height: 76px; border-width: 2px; }
.generation-kicker { color: var(--navigation-accent); font-size: 12px; margin: 0 0 8px; }
#view .generation-page h2 { font-size: 25px; line-height: 1.4; margin: 0 0 24px; overflow-wrap: anywhere; }
.generation-page .task-progress { max-width: 400px; margin: 0 auto 24px; }
.generation-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); text-align: left; }
.generation-steps li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 15px 0; color: var(--muted); }
.generation-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--strong); border-radius: 50%; font-size: 12px; }
.generation-steps svg { width: 16px; height: 16px; }
.generation-steps b { font-size: 14px; flex: 1; }
.generation-steps small { font-size: 11px; }
.generation-steps .active { color: var(--navigation-accent); }
.generation-steps .complete { color: var(--success); }
.generation-leave { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 22px auto 16px; max-width: 34em; }
.generation-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.generation-links .button { min-height: 48px; padding-inline: 10px; font-size: 14px; }
.generation-links svg { width: 18px; height: 18px; flex: none; }
.generation-stop { margin: 12px auto 0; min-height: 44px; color: var(--muted); }
@media (max-width: 600px) {
  .generation-page { padding: 8px 0 12px; margin-top: 0; }
  .generation-identity { width: 60px; height: 60px; margin-bottom: 12px; }
  .generation-identity img { width: 42px; height: 42px; }
  .generation-identity .spinner { width: 60px; height: 60px; }
  #view .generation-page h2 { font-size: 21px; margin-bottom: 16px; }
  .generation-page .task-progress { margin-bottom: 16px; }
  .generation-steps li { padding-block: 10px; }
  .generation-leave { margin: 14px auto 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-progress-track > i { transition: none; }
}
.generation-page.is-preparing { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 10px; max-width: 760px; margin: 0 auto 16px; padding: 8px 0; text-align: left; }
.generation-page.is-preparing .generation-identity { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 44px; height: 44px; margin: 0; }
.generation-page.is-preparing .generation-identity img { width: 30px; height: 30px; }
.generation-page.is-preparing .generation-identity .spinner { width: 44px; height: 44px; }
.generation-page.is-preparing .generation-kicker { grid-column: 2; grid-row: 1; margin: 0; font-size: 11px; }
#view .generation-page.is-preparing h2 { grid-column: 2; grid-row: 2; margin: 0; font-size: 17px; }
.generation-page.is-preparing .generation-stop { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 12px; }
.generation-page.is-preparing .task-progress { grid-column: 1 / -1; max-width: none; margin: 6px 0 0; }
.generation-page.is-preparing .generation-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; }
.generation-page.is-preparing .generation-steps li { gap: 6px; padding: 6px 0; border: 0; }
.generation-page.is-preparing .generation-steps b { font-size: 11px; line-height: 1.5; }
.generation-page.is-preparing .generation-steps small { display: none; }
.generation-page.is-preparing .generation-leave { grid-column: 1 / -1; max-width: none; margin: 0; font-size: 12px; }
.generation-page.is-preparing .task-warning { grid-column: 1 / -1; margin: 0; }
.generation-page.is-preparing .generation-links { grid-column: 1 / -1; margin-top: 4px; }
.generation-page.is-preparing .generation-links .button { min-height: 44px; }